:root {
  --bg: #f5f4ef;
  --surface: #ffffff;
  --surface-soft: #fbfbf9;
  --text: #171717;
  --muted: #5f6b63;
  --line: #e5e7e1;
  --accent: #184e3b;
  --accent-2: #0f766e;
  --shadow: 0 18px 60px rgba(23, 23, 23, 0.06);
  --shadow-soft: 0 10px 28px rgba(23, 23, 23, 0.05);
  --radius-card: 26px;
  --radius-module: 22px;
  --space-1: 10px;
  --space-2: 16px;
  --space-3: 22px;
  --space-4: 30px;
  --space-5: 42px;
  --space-6: 56px;
  --accent-light: #e8f5f0;
  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;
  --surface-elevated: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(24, 78, 59, 0.05), transparent 28%),
    linear-gradient(180deg, #faf9f5 0%, var(--bg) 100%);
  line-height: 1.68;
}

a { color: inherit; }

.site-header,
main,
.article-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}

.brand-wrap { max-width: 760px; }

h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(42px, 6vw, 68px); margin: 0 0 16px; }
h2 { font-size: clamp(32px, 4.2vw, 46px); margin: 0 0 18px; }
h3 { font-size: clamp(20px, 1.1rem + 0.4vw, 25px); margin: 0 0 12px; }

.tagline,
.article-meta,
.back-link,
.top-nav a,
.eyebrow,
p,
li { color: var(--muted); }

.eyebrow,
.mini-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}

.eyebrow { margin-bottom: 12px; }
.mini-label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
}

.top-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: 12px;
}

.subpage-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-soft);
}

.subpage-nav .nav-home {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
}

.subpage-nav .nav-links {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.subpage-nav .nav-links a {
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.84);
  color: var(--muted);
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.subpage-nav .nav-links a.active {
  background: linear-gradient(135deg, rgba(24,78,59,0.12), rgba(15,118,110,0.09));
  border-color: rgba(24, 78, 59, 0.25);
  color: var(--accent);
  font-weight: 600;
}

.top-nav a,
.back-link,
.primary-link,
.secondary-link {
  text-decoration: none;
}

.top-nav a:hover,
.topic-card a:hover,
.topic-links a:hover,
.secondary-link:hover,
.back-link:hover,
.subpage-nav .nav-home:hover,
.subpage-nav .nav-links a:hover {
  color: var(--accent);
}

.subpage-nav .nav-links a:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 78, 59, 0.25);
}

.primary-link,
.secondary-link,
.topic-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 12px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.primary-link {
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 28px rgba(20, 83, 45, 0.18);
}

.secondary-link,
.topic-links a {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
}

.primary-link:hover,
.secondary-link:hover,
.topic-links a:hover {
  transform: translateY(-1px);
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 4px;
  margin-bottom: 28px;
}

.card,
.article-shell {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.card-plain {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  padding-left: 0;
}

.hero-actions,
.topic-links,
.feature-band,
.principles-grid,
.signal-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.signal-list {
  margin: 20px 0 0;
  padding-left: 18px;
  display: block;
}

.signal-list li {
  margin-bottom: 8px;
}

.visual-placeholder,
.video-placeholder,
.hero-image-placeholder,
.graphic-placeholder {
  min-height: 240px;
  border: 1px dashed #cfd7d1;
  border-radius: 22px;
  color: var(--muted);
  background: linear-gradient(180deg, #f9faf7 0%, #f4f7f2 100%);
}

.visual-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 18px;
}

.matrix-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.matrix-card.wide {
  grid-column: span 2;
}

.section-block,
.media-section,
#integrations,
#principles,
.feature-band,
.split-section {
  margin-bottom: 26px;
}

.section-heading {
  margin-bottom: 14px;
}

.section-grid {
  display: grid;
  gap: var(--space-3);
}

.section-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.feature-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
}

.topic-card p,
.principles-grid p { margin-bottom: 0; }
.topic-card a { text-decoration: none; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.article-layout {
  max-width: 1180px;
}

.article-shell {
  padding: 40px;
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
  color: var(--muted);
  font-size: 14px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
}

.breadcrumbs a {
  text-decoration: none;
  color: inherit;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumb-sep {
  opacity: 0.6;
}

.lead {
  font-size: 22px;
  color: #42534a;
}

.callout-box {
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  background: #eef8f2;
  border-radius: 16px;
  margin: 28px 0;
}

.rich-hero,
.architecture-graphic {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.architecture-line {
  display: grid;
  gap: 14px;
  width: 100%;
}

.architecture-line span {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.entry-card {
  padding: 26px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}

.entry-card h3,
.entry-card h4 {
  margin: 0 0 10px;
}

.entry-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.entry-card a,
.route-strip a {
  text-decoration: none;
}

.mini-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.route-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 14px;
}

.route-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.88);
  color: var(--muted);
}

.route-strip a:hover,
.entry-card a:hover {
  color: var(--accent);
}

.decision-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 22px 0 28px;
}

.decision-module {
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247,249,245,0.92) 100%);
  box-shadow: var(--shadow-soft);
}

.decision-module h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.decision-module ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.where-next {
  margin-top: var(--space-4);
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(248,250,247,0.94);
}

.where-next h3 {
  margin-bottom: 10px;
}

.provenance-note {
  margin: 24px 0;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px dashed rgba(24, 78, 59, 0.22);
  background: linear-gradient(180deg, rgba(250, 250, 248, 0.98) 0%, rgba(245, 247, 243, 0.96) 100%);
}

.provenance-note h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.provenance-note ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

/* Additional polish for Part 1 support surface */
.article-shell {
  padding: 32px;
}

.page-meta {
  margin-bottom: var(--space-3);
}

.decision-module {
  padding: 22px;
}

.entry-card {
  padding: 22px;
}

.where-next {
  padding: 22px;
}

@media (max-width: 960px) {
  .site-header,
  .hero,
  .section-grid-3,
  .split-section,
  .feature-band,
  .principles-grid,
  .phase2a-primary-grid,
  .phase2a-section-grid,
  .phase2a-capability-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .subpage-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .subpage-nav .nav-links {
    justify-content: flex-start;
  }

  .route-strip {
    gap: 8px;
  }

  .route-strip a {
    width: 100%;
    justify-content: flex-start;
  }

  .card-plain {
    padding-left: 28px;
  }
}

@media (max-width: 640px) {
  .site-header,
  main,
  .article-layout {
    padding: 20px 16px;
  }

  .card,
  .article-shell,
  .card-plain {
    padding: 26px;
  }

  .visual-matrix {
    grid-template-columns: 1fr;
  }

  .matrix-card.wide {
    grid-column: span 1;
  }
}


.ai-hero-intro{display:grid;grid-template-columns:1.3fr .9fr;gap:1.5rem;margin-top:1.5rem}.ai-stat-panel,.ai-note-panel,.ai-section-card,.ai-mini-card,.ai-audience-card,.ai-decision-card,.ai-checklist-card,.ai-metric-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1.35rem 1.5rem}.ai-stat-panel h3,.ai-note-panel h3,.ai-section-card h3,.ai-mini-card h3,.ai-audience-card h3,.ai-decision-card h3,.ai-checklist-card h3,.ai-metric-card h3{margin:0 0 .6rem 0;font-size:1.35rem;line-height:1.15}.ai-chip-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.ai-diagram-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0 2rem}.ai-diagram-card img,.viz-frame img{width:100%;height:auto;display:block;border-radius:24px;background:#fbfaf7}.ai-diagram-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1rem}.ai-diagram-card p{margin:.75rem 0 .1rem}.ai-grid-3,.ai-grid-4,.ai-grid-2{display:grid;gap:1rem;margin:1rem 0 1.5rem}.ai-grid-2{grid-template-columns:1fr 1fr}.ai-grid-3{grid-template-columns:repeat(3,1fr)}.ai-grid-4{grid-template-columns:repeat(4,1fr)}.ai-table{width:100%;border-collapse:collapse;margin:1rem 0 2rem;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}.ai-table th,.ai-table td{padding:1rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}.ai-table th{background:#f3f5f1;font-size:1rem}.ai-callout{padding:1.15rem 1.25rem;border-radius:22px;border:1px solid var(--line);background:#f4f8f2;margin:1rem 0 1.5rem}@media (max-width: 980px){.ai-hero-intro,.ai-grid-2,.ai-grid-3,.ai-grid-4,.ai-diagram-grid{grid-template-columns:1fr}}


/* Wave 24 AI depth */
.diagram-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.25rem;margin:1.25rem 0 2rem}
.diagram-object,.diagram-object-lg{width:100%;display:block;border:1px solid var(--line);border-radius:28px;background:#fbfaf7;overflow:hidden}
.diagram-object object,.diagram-object img,.diagram-object-lg object,.diagram-object-lg img{width:100%;display:block;min-height:clamp(280px, 34vw, 360px)}
.diagram-object-lg object,.diagram-object-lg img{min-height:clamp(360px, 46vw, 500px)}
.diagram-caption{margin:.7rem 0 0;color:var(--muted)}
.ai-depth-section{margin:2.5rem 0}
.ai-story-grid,.ai-roi-grid,.ai-capability-grid,.ai-role-grid,.ai-kpi-grid{display:grid;gap:1rem;margin:1rem 0 1.5rem}
.ai-story-grid{grid-template-columns:1.1fr .9fr}
.ai-roi-grid{grid-template-columns:repeat(4,1fr)}
.ai-capability-grid{grid-template-columns:repeat(3,1fr)}
.ai-role-grid{grid-template-columns:repeat(4,1fr)}
.ai-kpi-grid{grid-template-columns:repeat(4,1fr)}
.checklist-grid{display:grid;gap:1rem;margin:1rem 0 1.5rem;grid-template-columns:1fr;align-items:stretch}
.checklist-item{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1.3rem 1.35rem;display:flex;gap:1rem;align-items:flex-start}
.checklist-marker{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:999px;background:#eef5f0;color:#28503c;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.checklist-content{flex:1}
.checklist-content h4{margin:0 0 0.5rem 0;font-size:1.1rem;line-height:1.2}
.ai-stage-card,.ai-roi-card,.ai-capability-card,.ai-role-card,.ai-kpi-card,.ai-detail-card,.ai-link-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1.3rem 1.35rem}
.ai-stage-card h3,.ai-roi-card h3,.ai-capability-card h3,.ai-role-card h3,.ai-kpi-card h3,.ai-detail-card h3,.ai-link-card h3{margin:0 0 .55rem;font-size:1.3rem;line-height:1.15}
.ai-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:#eef5f0;color:#28503c;font-weight:700;margin-bottom:.85rem}
.ai-check-list,.ai-link-list{margin:.75rem 0 0;padding-left:1.1rem}
.ai-check-list li,.ai-link-list li{margin:.35rem 0}
.ai-stacked-table{display:grid;gap:1rem;margin:1rem 0 2rem}
.ai-row-card{display:grid;grid-template-columns:1.2fr 1.3fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.ai-row-card > div{padding:1.15rem 1.2rem;border-right:1px solid var(--line)}
.ai-row-card > div:last-child{border-right:none}
.ai-row-card h3{margin:0 0 .5rem;font-size:1.15rem}
.ai-inline-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.ai-inline-links a,.route-pill{display:inline-flex;padding:.8rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none}
.ai-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 1.5rem}
.ai-reference-grid .ai-link-card a{display:block;margin:.45rem 0}
.ai-warning-banner{padding:1.1rem 1.25rem;border:1px solid #d9d0a8;background:#fff9e8;border-radius:24px;margin:1.1rem 0 1.4rem}
.ai-roi-banner{padding:1.25rem 1.35rem;border-radius:28px;border:1px solid var(--line);background:linear-gradient(135deg,#eef5f0,#f8f7f1);margin:1.25rem 0 1.75rem}
@media (max-width: 980px){.diagram-hero-grid,.ai-story-grid,.ai-roi-grid,.ai-capability-grid,.ai-role-grid,.ai-kpi-grid,.ai-reference-grid,.ai-row-card{grid-template-columns:1fr}.ai-row-card>div{border-right:none;border-bottom:1px solid var(--line)}.ai-row-card>div:last-child{border-bottom:none}}


/* Wave 28 AI topic page alignment cleanup */
.ai-premium-page{max-width:1200px}
.ai-premium-hero,.ai-premium-section{margin:2.25rem 0}
.ai-premium-page figure{margin:0}
.ai-premium-page img{height:auto}
.ai-premium-page h2,.ai-premium-page h3,.ai-premium-page p,.ai-premium-page li,.ai-premium-page a,.ai-premium-page span{overflow-wrap:anywhere}
.ai-premium-hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start;margin-top:1.25rem}
.ai-premium-stack{display:grid;gap:1rem}
.ai-section-head{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(280px,.72fr);gap:1.25rem;align-items:start;margin-bottom:1rem}
.ai-section-head > *,.ai-clean-grid > *,.ai-premium-hero-grid > *{min-width:0}
.ai-section-head p{margin:0;color:var(--muted)}
.ai-visual-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1rem;overflow:hidden;box-shadow:0 14px 36px rgba(28,39,31,.05)}
.ai-visual-card img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.ai-visual-card figcaption{margin-top:.8rem;font-size:.95rem;color:var(--muted)}
.ai-hero-visual img{min-height:auto}
.ai-premium-card,.ai-premium-card p,.ai-premium-card ul{max-width:none}
.ai-premium-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:1.35rem 1.4rem;box-shadow:0 10px 26px rgba(28,39,31,.04)}
.ai-premium-card h3{margin:0 0 .65rem;font-size:1.3rem;line-height:1.18}
.ai-clean-grid{display:grid;gap:1rem;margin:1rem 0 0}
.ai-clean-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-clean-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-clean-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ai-diagram-row-clean{align-items:start}
.ai-premium-page .ai-stage-card,
.ai-premium-page .ai-roi-card,
.ai-premium-page .ai-capability-card,
.ai-premium-page .ai-role-card,
.ai-premium-page .ai-kpi-card,
.ai-premium-page .ai-link-card{height:100%;display:flex;flex-direction:column}
.ai-premium-page .ai-link-card a{display:block;margin:.45rem 0;word-break:break-word}
.ai-premium-page .ai-check-list{padding-left:1.15rem}
.ai-premium-page .ai-check-list li{margin:.35rem 0}
.ai-audience-finish{align-items:center}
.ai-premium-page .where-next-card{margin-top:2.5rem}
@media (max-width: 1100px){
  .ai-clean-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-clean-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  .ai-premium-hero-grid,.ai-section-head,.ai-clean-grid-2,.ai-clean-grid-3,.ai-clean-grid-4{grid-template-columns:1fr}
  .ai-visual-card{padding:.85rem}
}


.sac-premium-page{max-width:1200px}
.sac-premium-page figure{margin:0}
.sac-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.sac-premium-page h2,.sac-premium-page h3,.sac-premium-page p,.sac-premium-page li,.sac-premium-page a,.sac-premium-page span{overflow-wrap:anywhere}
.sac-premium-page .sac-score-grid,.sac-premium-page .sac-decision-grid,.sac-premium-page .sac-link-grid{display:grid;gap:1rem}
.sac-premium-page .sac-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.sac-premium-page .sac-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.sac-premium-page .sac-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.sac-premium-page .sac-score-card,.sac-premium-page .sac-decision-card,.sac-premium-page .sac-link-card{height:100%;display:flex;flex-direction:column}
.sac-premium-page .sac-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width: 1024px){
  .sac-premium-page .sac-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sac-premium-page .sac-decision-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .sac-premium-page .sac-score-grid,.sac-premium-page .sac-link-grid{grid-template-columns:1fr}
}


.datasphere-premium-page{max-width:1200px}
.datasphere-premium-page figure{margin:0}
.datasphere-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.datasphere-premium-page h2,.datasphere-premium-page h3,.datasphere-premium-page p,.datasphere-premium-page li,.datasphere-premium-page a,.datasphere-premium-page span{overflow-wrap:anywhere}
.datasphere-premium-page .datasphere-score-grid,.datasphere-premium-page .datasphere-decision-grid,.datasphere-premium-page .datasphere-link-grid{display:grid;gap:1rem}
.datasphere-premium-page .datasphere-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.datasphere-premium-page .datasphere-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.datasphere-premium-page .datasphere-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.datasphere-premium-page .datasphere-score-card,.datasphere-premium-page .datasphere-decision-card,.datasphere-premium-page .datasphere-link-card{height:100%;display:flex;flex-direction:column}
.datasphere-premium-page .datasphere-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width: 1024px){
  .datasphere-premium-page .datasphere-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datasphere-premium-page .datasphere-decision-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .datasphere-premium-page .datasphere-score-grid,.datasphere-premium-page .datasphere-link-grid{grid-template-columns:1fr}
}


.bw-premium-page{max-width:1200px}
.bw-premium-page figure{margin:0}
.bw-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.bw-premium-page h2,.bw-premium-page h3,.bw-premium-page p,.bw-premium-page li,.bw-premium-page a,.bw-premium-page span{overflow-wrap:anywhere}
.bw-premium-page .bw-score-grid,.bw-premium-page .bw-link-grid{display:grid;gap:1rem}
.bw-premium-page .bw-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.bw-premium-page .bw-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.bw-premium-page .bw-score-card,.bw-premium-page .bw-link-card{height:100%;display:flex;flex-direction:column}
.bw-premium-page .bw-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width: 1024px){
  .bw-premium-page .bw-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .bw-premium-page .bw-score-grid,.bw-premium-page .bw-link-grid{grid-template-columns:1fr}
}


.btp-premium-page{max-width:1200px}
.btp-premium-page figure{margin:0}
.btp-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.btp-premium-page h2,.btp-premium-page h3,.btp-premium-page p,.btp-premium-page li,.btp-premium-page a,.btp-premium-page span{overflow-wrap:anywhere}
.btp-premium-page .btp-score-grid,.btp-premium-page .btp-decision-grid,.btp-premium-page .btp-link-grid{display:grid;gap:1rem}
.btp-premium-page .btp-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.btp-premium-page .btp-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.btp-premium-page .btp-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.btp-premium-page .btp-score-card,.btp-premium-page .btp-decision-card,.btp-premium-page .btp-link-card{height:100%;display:flex;flex-direction:column}
.btp-premium-page .btp-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width: 1024px){
  .btp-premium-page .btp-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btp-premium-page .btp-decision-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .btp-premium-page .btp-score-grid,.btp-premium-page .btp-link-grid{grid-template-columns:1fr}
}



.integrations-premium-page{max-width:1200px}
.integrations-premium-page figure{margin:0}
.integrations-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.integrations-premium-page h2,.integrations-premium-page h3,.integrations-premium-page p,.integrations-premium-page li,.integrations-premium-page a,.integrations-premium-page span{overflow-wrap:anywhere}
.integrations-premium-page .integrations-score-grid,.integrations-premium-page .integrations-decision-grid,.integrations-premium-page .integrations-link-grid{display:grid;gap:1rem}
.integrations-premium-page .integrations-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.integrations-premium-page .integrations-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.integrations-premium-page .integrations-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.integrations-premium-page .integrations-score-card,.integrations-premium-page .integrations-decision-card,.integrations-premium-page .integrations-link-card{height:100%;display:flex;flex-direction:column}
.integrations-premium-page .integrations-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width: 1024px){
  .integrations-premium-page .integrations-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .integrations-premium-page .integrations-decision-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .integrations-premium-page .integrations-score-grid,.integrations-premium-page .integrations-link-grid{grid-template-columns:1fr}
}

.governance-premium-page{max-width:1200px}
.governance-premium-page figure{margin:0}
.governance-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.governance-premium-page h2,.governance-premium-page h3,.governance-premium-page p,.governance-premium-page li,.governance-premium-page a,.governance-premium-page span{overflow-wrap:anywhere}
.governance-premium-page .governance-score-grid,.governance-premium-page .governance-decision-grid,.governance-premium-page .governance-link-grid{display:grid;gap:1rem}
.governance-premium-page .governance-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.governance-premium-page .governance-quick-card,
.governance-premium-page .governance-domain-grid,.governance-premium-page .governance-boundary-grid{margin-top:1rem}
.governance-premium-page .governance-finish-grid{align-items:stretch}

.governance-premium-page .governance-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.governance-premium-page .governance-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.governance-premium-page .governance-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}

.governance-premium-page .governance-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width:960px){
  .governance-premium-page .governance-quick-grid,.governance-premium-page .governance-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .governance-premium-page .governance-decision-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .governance-premium-page .governance-quick-grid,.governance-premium-page .governance-score-grid,.governance-premium-page .governance-link-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .governance-premium-page .governance-score-grid,.governance-premium-page .governance-link-grid{grid-template-columns:1fr}
}


.bdc-premium-page{max-width:1200px}
.bdc-premium-page figure{margin:0}
.bdc-premium-page img{display:block;width:100%;height:auto;max-width:100%;border-radius:20px;background:#fbfaf7}
.bdc-premium-page h2,.bdc-premium-page h3,.bdc-premium-page p,.bdc-premium-page li,.bdc-premium-page a,.bdc-premium-page span{overflow-wrap:anywhere}
.bdc-premium-page .bdc-score-grid,.bdc-premium-page .bdc-decision-grid,.bdc-premium-page .bdc-link-grid{display:grid;gap:1rem}
.bdc-premium-page .bdc-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem}
.bdc-premium-page .bdc-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}
.bdc-premium-page .bdc-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}
.bdc-premium-page .bdc-score-card,.bdc-premium-page .bdc-decision-card,.bdc-premium-page .bdc-link-card{height:100%;display:flex;flex-direction:column}
.bdc-premium-page .bdc-link-card a{display:block;margin:.45rem 0;word-break:break-word}
@media (max-width:960px){
  .bdc-premium-page .bdc-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bdc-premium-page .bdc-decision-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bdc-premium-page .bdc-score-grid,.bdc-premium-page .bdc-link-grid{grid-template-columns:1fr}
}


/* Phase 11 — homepage premium rebuild */
.site-shell{max-width:1280px;margin:0 auto;padding:0 24px 56px}
.brand{font-size:1.08rem;font-weight:700;color:var(--text);text-decoration:none}
.main-nav{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
.main-nav a{text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid transparent;color:var(--muted);font-size:14px;white-space:nowrap;transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease}
.main-nav a:hover{transform:translateY(-1px);border-color:rgba(24,78,59,.18);color:var(--accent);background:rgba(255,255,255,.74)}
.page-frame{max-width:1180px;margin:0 auto;padding:8px 0 32px}
.meta-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.meta-pills span{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--muted);font-size:14px}
.note-card,.where-next-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:28px;padding:20px 22px;box-shadow:var(--shadow-soft)}
.route-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.route-pill{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid var(--line);text-decoration:none}.route-pill:hover{color:var(--accent)}
.homepage-premium-page .lead{max-width:none}
.homepage-hero,.homepage-section,.homepage-finish-grid{margin:2.4rem 0}
.homepage-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start}
.homepage-visual-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:30px;padding:16px;box-shadow:var(--shadow);margin:0}
.homepage-visual-card img{width:100%;height:auto;display:block;border-radius:24px;background:#fbfaf7}
.homepage-visual-card figcaption{margin-top:12px;color:var(--muted);font-size:.95rem}
.homepage-note{margin:1.1rem 0 1.2rem}
.homepage-signal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.25rem}.signal-card,.route-card,.surface-card,.reading-card,.homepage-topic-card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:26px;padding:1.25rem 1.3rem;box-shadow:var(--shadow-soft)}
.signal-card strong,.route-card h3,.surface-card h3,.reading-card h3,.homepage-topic-card h3{color:var(--text)}
.signal-card p,.route-card p,.surface-card p,.reading-card p,.homepage-topic-card p{margin:0}
.homepage-section-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(280px,.74fr);gap:1.5rem;align-items:start;margin-bottom:1.1rem}.homepage-section-head>*{min-width:0}
.homepage-route-grid,.homepage-topic-grid,.homepage-surface-grid,.homepage-reading-grid{display:grid;gap:1rem}
.homepage-route-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.homepage-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.homepage-surface-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.homepage-reading-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.homepage-wide-visual{margin-top:1.25rem}
.homepage-topic-card h3 a,.surface-card h3 a,.reading-card h3 a{text-decoration:none}
.homepage-topic-card:hover,.surface-card:hover,.reading-card:hover,.route-card:hover{border-color:rgba(24,78,59,.22)}
.homepage-check-list{padding-left:1.1rem;margin:.9rem 0 0}
.homepage-finish-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:1rem;align-items:stretch}
.homepage-where-next{height:100%}
@media (max-width: 1100px){.homepage-route-grid,.homepage-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.homepage-signal-grid{grid-template-columns:1fr}.homepage-section-head{grid-template-columns:1fr}.homepage-surface-grid,.homepage-reading-grid{grid-template-columns:1fr}.homepage-finish-grid{grid-template-columns:1fr}}
@media (max-width: 900px){.site-shell{padding:0 16px 40px}.site-header{flex-wrap:nowrap;align-items:center}.main-nav{justify-content:flex-end;flex-wrap:nowrap}.homepage-hero{grid-template-columns:1fr}.meta-pills{margin-top:.5rem}}
@media (max-width: 640px){.homepage-route-grid,.homepage-topic-grid{grid-template-columns:1fr}.homepage-visual-card,.signal-card,.route-card,.surface-card,.reading-card,.homepage-topic-card,.note-card,.where-next-card{border-radius:22px}.page-frame{padding-bottom:18px}}


/* Phase 12 — learning-path premium rebuild */
.learning-premium-page{max-width:1180px}
.learning-premium-page a{overflow-wrap:anywhere}
.learning-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start;margin:2.4rem 0}
.learning-note{margin:1.1rem 0 1.2rem}
.learning-signal-grid,.learning-route-grid,.learning-stage-grid,.learning-mistake-grid,.learning-next-grid{display:grid;gap:1rem}
.learning-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.25rem}
.learning-route-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.learning-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.learning-premium-page .learning-stage-card,.learning-premium-page .reading-card,.learning-premium-page .route-card{height:100%;display:flex;flex-direction:column}
.learning-premium-page .learning-stage-card ul{margin-top:.85rem}
@media (max-width:1100px){.learning-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-signal-grid{grid-template-columns:1fr}.learning-stage-grid,.learning-mistake-grid,.learning-next-grid{grid-template-columns:1fr}}
@media (max-width:900px){.learning-hero{grid-template-columns:1fr}}
@media (max-width:640px){.learning-route-grid{grid-template-columns:1fr}}


/* Phase 13 — architecture premium rebuild */
.architecture-premium-page{max-width:1180px}
.architecture-premium-page a,.architecture-premium-page p,.architecture-premium-page h2,.architecture-premium-page h3,.architecture-premium-page li{overflow-wrap:anywhere}
.architecture-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start;margin:2.4rem 0}
.architecture-note{margin:1.1rem 0 1.2rem}
.architecture-signal-grid,.architecture-question-grid,.architecture-flagship-grid,.architecture-stage-grid,.architecture-next-grid{display:grid;gap:1rem}
.architecture-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.25rem}
.architecture-question-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.architecture-flagship-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.architecture-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.architecture-premium-page .architecture-stage-card,.architecture-premium-page .architecture-flagship-card,.architecture-premium-page .reading-card,.architecture-premium-page .route-card{height:100%;display:flex;flex-direction:column}
.architecture-premium-page .architecture-flagship-card ul{margin-top:.85rem}
@media (max-width:1100px){.architecture-signal-grid{grid-template-columns:1fr}.architecture-question-grid,.architecture-flagship-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.architecture-stage-grid,.architecture-mistake-grid,.architecture-next-grid{grid-template-columns:1fr}}
@media (max-width:900px){.architecture-hero{grid-template-columns:1fr}}
@media (max-width:640px){.architecture-question-grid,.architecture-flagship-grid{grid-template-columns:1fr}}


/* Phase 14 — comparison premium rebuild */
.comparison-premium-page{max-width:1180px}
.comparison-premium-page a,.comparison-premium-page p,.comparison-premium-page h2,.comparison-premium-page h3,.comparison-premium-page li{overflow-wrap:anywhere}
.comparison-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start;margin:2.4rem 0}
.comparison-note{margin:1.1rem 0 1.2rem}
.comparison-signal-grid,.comparison-family-grid,.comparison-flagship-grid,.comparison-stage-grid,.comparison-next-grid{display:grid;gap:1rem}
.comparison-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.25rem}
.comparison-family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.comparison-flagship-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.comparison-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.comparison-premium-page .comparison-stage-card,.comparison-premium-page .comparison-flagship-card,.comparison-premium-page .reading-card,.comparison-premium-page .route-card{height:100%;display:flex;flex-direction:column}
.comparison-premium-page .comparison-flagship-card ul{margin-top:.85rem}
@media (max-width:1100px){.comparison-signal-grid{grid-template-columns:1fr}.comparison-family-grid,.comparison-flagship-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-stage-grid,.comparison-mistake-grid,.comparison-next-grid{grid-template-columns:1fr}}
@media (max-width:900px){.comparison-hero{grid-template-columns:1fr}}
@media (max-width:640px){.comparison-family-grid,.comparison-flagship-grid{grid-template-columns:1fr}}


/* Phase 15 — resource center premium rebuild */
.resource-premium-page{max-width:1180px}
.resource-premium-page a,.resource-premium-page p,.resource-premium-page h2,.resource-premium-page h3,.resource-premium-page li{overflow-wrap:anywhere}
.resource-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:1.5rem;align-items:start;margin:2.4rem 0}
.resource-note{margin:1.1rem 0 1.2rem}
.resource-signal-grid,.resource-route-grid,.resource-surface-grid,.resource-kit-grid,.resource-mistake-grid{display:grid;gap:1rem}
.resource-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.25rem}
.resource-route-grid,.resource-kit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.resource-surface-grid,.resource-mistake-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.resource-premium-page .signal-card,.resource-premium-page .surface-card,.resource-premium-page .reading-card,.resource-premium-page .route-card{height:100%;display:flex;flex-direction:column}
.resource-premium-page .surface-card ul,.resource-premium-page .reading-card ul,.resource-premium-page .route-card ul{margin-top:.85rem}
@media (max-width:1100px){.resource-signal-grid{grid-template-columns:1fr}.resource-route-grid,.resource-surface-grid,.resource-kit-grid,.resource-mistake-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.resource-hero{grid-template-columns:1fr}}
@media (max-width:640px){.resource-route-grid,.resource-surface-grid,.resource-kit-grid,.resource-mistake-grid{grid-template-columns:1fr}}


/* Topics hub premium shell */
.topics-hub-page{max-width:1180px}
.topics-hub-page :where(h2, h3, p, li, a){overflow-wrap:anywhere}
.topics-hub-page .card-panel{height:100%}
.topics-hub-page .grid-3{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1100px){
  .topics-hub-page .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .topics-hub-page .grid-3{grid-template-columns:1fr}
}


/* Premium refinement and overlap hardening */
:root{
  --bg:#efe8dc;
  --surface:rgba(255,255,255,.9);
  --surface-soft:rgba(255,255,255,.76);
  --surface-strong:#fffdf9;
  --text:#122019;
  --text-soft:#27362f;
  --muted:#58675f;
  --line:rgba(24,38,31,.12);
  --line-strong:rgba(23,56,46,.2);
  --accent:#17382e;
  --accent-2:#275947;
  --accent-warm:#b58a58;
  --shadow:0 28px 74px rgba(18,32,25,.1);
  --shadow-soft:0 16px 40px rgba(18,32,25,.08);
  --font-sans:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --max-readable:none;
}

html{
  background:#f7f1e6;
}

body{
  font-family:var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(181,138,88,.16), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(39,89,71,.15), transparent 24%),
    linear-gradient(180deg, #faf5ec 0%, #f4eee4 42%, var(--bg) 100%);
}

::selection{
  background:rgba(181,138,88,.26);
  color:var(--text);
}

body :where(*){min-width:0}

img,
svg,
object{
  display:block;
  max-width:100%;
}

figure{
  max-width:100%;
}

section,
article{
  scroll-margin-top:28px;
}

h1,
h2,
h3,
.brand{
  font-family:var(--font-display);
  text-wrap:auto;
}

p,
li{
  overflow-wrap:break-word;
}

p{
  max-width:var(--max-readable);
}

.lead,
.note-card p,
.where-next-card p,
.homepage-section-head p,
.ai-section-head p,
.card-panel p,
.reading-card p,
.route-card p,
.surface-card p,
.homepage-topic-card p,
.decision-module p,
.entry-card p,
.callout-band p{
  max-width:none;
}

:where(p, li, figcaption) a{
  color:var(--accent);
  text-decoration-color:rgba(23,56,46,.28);
  text-underline-offset:3px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:clamp(1.1rem, 1rem + .25vw, 1.26rem);
  letter-spacing:-.02em;
  white-space:nowrap;
  flex-shrink:0;
}

.brand-row{
  display:flex;
  align-items:center;
}

.site-shell{
  position:relative;
}

.site-header{
  position:relative;
  z-index:100;
  margin-top:10px;
  margin-bottom:32px;
  padding:14px 20px;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  align-items:center;
  flex-wrap:nowrap;
}

.compact-header{
  gap:18px;
}

.main-nav,
.subpage-nav .nav-links,
.hero-actions,
.topic-links,
.route-strip,
.route-links,
.ai-inline-links{
  row-gap:10px;
}

.main-nav a,
.subpage-nav .nav-links a,
.secondary-link,
.topic-links a,
.route-strip a,
.route-pill,
.ai-inline-links a{
  border-color:rgba(23,56,46,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,242,.84));
  color:var(--text-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

.main-nav a[aria-current="page"],
.subpage-nav .nav-links a.active{
  background:linear-gradient(135deg, rgba(23,56,46,.12), rgba(181,138,88,.12));
  border-color:rgba(23,56,46,.24);
  color:var(--accent);
  font-weight:600;
}

.main-nav a:hover,
.subpage-nav .nav-links a:hover,
.secondary-link:hover,
.topic-links a:hover,
.route-strip a:hover,
.route-pill:hover,
.ai-inline-links a:hover{
  border-color:rgba(23,56,46,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,241,232,.9));
}

.primary-link{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 62%, var(--accent-warm) 100%);
}

.primary-link,
.secondary-link{
  font-weight:600;
}

.subpage-nav{
  border-color:var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
}

.meta-pill,
.meta-pills span{
  border-color:rgba(23,56,46,.12);
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84);
}

.eyebrow,
.mini-label{
  color:#7c6644;
}

.lead{
  font-size:clamp(1.15rem, 1rem + .55vw, 1.42rem);
  line-height:1.7;
  color:var(--text-soft);
}

.breadcrumbs{
  gap:8px;
  padding-inline:2px;
}

.breadcrumbs,
figcaption,
.article-meta{
  overflow-wrap:anywhere;
}

figcaption{
  line-height:1.55;
  text-align:left;
}

.card,
.article-shell,
.homepage-visual-card,
.ai-visual-card,
.note-card,
.where-next-card,
.signal-card,
.route-card,
.surface-card,
.reading-card,
.homepage-topic-card,
.entry-card,
.decision-module,
.card-panel,
.callout-band{
  position:relative;
  overflow:hidden;
  border-color:var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,242,.9));
  box-shadow:var(--shadow-soft);
}

.article-shell,
.note-card,
.where-next-card,
.callout-band{
  position:relative;
}

.article-shell::before,
.note-card::before,
.where-next-card::before,
.callout-band::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-warm), transparent 78%);
}

.article-shell > *,
.note-card > *,
.where-next-card > *,
.callout-band > *{
  position:relative;
}

.article-shell{
  padding:38px;
}

.homepage-visual-card img,
.ai-visual-card img{
  border-radius:22px;
  background:
    radial-gradient(circle at top left, rgba(181,138,88,.08), transparent 42%),
    #f8f5ef;
}

.hero-strip{
  margin:1.75rem 0 2rem;
  padding:1.8rem 1.95rem;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(245,240,231,.86));
  box-shadow:var(--shadow);
}

.hero-copy{
  max-width:none;
}

.grid-2,
.grid-3{
  display:grid;
  gap:1rem;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.card-panel{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:1.4rem 1.45rem;
  border-radius:26px;
}

.card-panel h2{
  margin:0;
  font-size:clamp(1.55rem, 1.35rem + .5vw, 2rem);
}

.card-panel h2 a{
  text-decoration:none;
}

.callout-band{
  padding:1.45rem 1.5rem;
  border-radius:28px;
}

.callout-band h2{
  margin-bottom:.75rem;
}

.callout-band p:last-child{
  margin-bottom:0;
}

.ai-visual-wide{
  margin-top:1.25rem;
}

.architecture-finish-grid{
  grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);
}

.governance-score-card,
.governance-decision-card,
.governance-link-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.ai-table{
  table-layout:fixed;
}

.ai-table th,
.ai-table td{
  overflow-wrap:anywhere;
}

.diagram-object,
.diagram-object-lg,
.homepage-wide-visual,
.ai-visual-card.ai-visual-wide{
  scrollbar-width:thin;
  scrollbar-color:rgba(23,56,46,.28) transparent;
}

@media (max-width: 980px){
  .site-header{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    padding:14px 16px;
  }

  .article-shell{
    padding:30px 24px;
  }

  .grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .grid-2,
  .grid-3,
  .section-grid-3,
  .entry-grid,
  .mini-section-grid,
  .decision-module-grid{
    grid-template-columns:1fr;
  }

  .hero-strip{
    padding:1.5rem 1.35rem;
    border-radius:24px;
  }

  .article-shell{
    padding:26px 20px;
  }

  .hero-actions a,
  .topic-links a,
  .route-strip a,
  .route-pill,
  .ai-inline-links a,
  .primary-link,
  .secondary-link{
    width:100%;
    justify-content:flex-start;
  }

  .meta-pills span,
  .meta-pill{
    width:100%;
    justify-content:flex-start;
    border-radius:18px;
  }

  .ai-visual-card.ai-visual-wide,
  .homepage-wide-visual,
  .diagram-object,
  .diagram-object-lg{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .ai-visual-card.ai-visual-wide img,
  .homepage-wide-visual img,
  .diagram-object object,
  .diagram-object img,
  .diagram-object-lg object,
  .diagram-object-lg img{
    width:max(100%, 720px);
    max-width:none;
  }
}


/* Premium About and Glossary surfaces */
.about-premium-page,
.glossary-premium-page{
  max-width:1180px;
}

.about-hero,
.glossary-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.16fr) minmax(320px, .84fr);
  gap:1.5rem;
  align-items:start;
  margin:2.4rem 0;
}

.about-note,
.glossary-note{
  margin:1.1rem 0 1.2rem;
}

.glossary-term-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.about-premium-page .signal-card,
.about-premium-page .route-card,
.about-premium-page .surface-card,
.about-premium-page .reading-card,
.about-premium-page .homepage-topic-card,
.glossary-premium-page .signal-card,
.glossary-premium-page .route-card,
.glossary-premium-page .surface-card,
.glossary-premium-page .reading-card,
.glossary-premium-page .homepage-topic-card,
.glossary-premium-page .entry-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.glossary-premium-page .entry-card h3{
  font-size:1.35rem;
}

@media (max-width: 1100px){
  .glossary-term-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .about-hero,
  .glossary-hero{
    grid-template-columns:1fr;
  }
}


/* Whole-site premium hardening */
html,
body{
  overflow-x:hidden;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

:where(main, section, article, nav, figure, div){
  min-width:0;
}

:where(h1, h2, h3, h4, h5, h6, p, li, figcaption, .meta-pill, .meta-pills span, .route-strip a, .main-nav a, .subpage-nav .nav-links a, .topic-links a, .route-pill, .primary-link, .secondary-link){
  overflow-wrap:anywhere;
}

:where(.grid-2, .grid-3, .section-grid, .entry-grid, .mini-section-grid, .decision-module-grid, .homepage-signal-grid, .homepage-route-grid, .homepage-topic-grid, .homepage-surface-grid, .homepage-reading-grid, .comparison-family-grid, .comparison-flagship-grid, .comparison-stage-grid, .resource-route-grid, .resource-surface-grid, .resource-kit-grid, .resource-mistake-grid, .learning-route-grid, .learning-stage-grid, .architecture-question-grid, .architecture-stage-grid, .architecture-flagship-grid, .ai-grid-2, .ai-grid-3, .ai-grid-4, .ai-capability-grid, .ai-role-grid, .ai-roi-grid, .ai-reference-grid, .checklist-grid, .glossary-term-grid){
  align-items:stretch;
}

:where(.card-panel, .entry-card, .decision-module, .signal-card, .route-card, .surface-card, .reading-card, .homepage-topic-card, .ai-section-card, .ai-detail-card, .ai-link-card, .ai-stage-card, .ai-roi-card, .ai-capability-card, .ai-role-card, .ai-kpi-card, .ai-premium-card){
  height:100%;
  display:flex;
  flex-direction:column;
}

.main-nav a,
.subpage-nav .nav-links a,
.route-strip a,
.route-pill,
.primary-link,
.secondary-link{
  white-space:nowrap;
}

.site-header{
  align-items:center;
}

.main-nav{
  flex:1 1 auto;
  margin-left:auto;
}

.legacy-article-page{
  display:grid;
  gap:18px;
}

.legacy-article-page > *{
  min-width:0;
}

.legacy-article-page > .article-shell{
  width:100%;
  margin:0 auto;
}

.article-layout{
  max-width:1180px;
  padding:12px 24px 40px;
  display:grid;
  gap:18px;
}

.article-layout > *{
  min-width:0;
}

.article-layout > .subpage-nav{
  margin-bottom:0;
}

.article-layout > .article-shell{
  width:100%;
  margin:0 auto;
}

.article-shell{
  padding:40px 42px;
}

.article-shell h1,
.page-frame > h1,
.hero-copy h1,
.ai-premium-hero h1,
.homepage-hero h1,
.learning-hero h1,
.architecture-hero h1,
.comparison-hero h1,
.resource-hero h1,
.about-hero h1,
.glossary-hero h1{
  font-size:clamp(2.05rem, 1.2rem + 2vw, 3.85rem);
  line-height:1.01;
  letter-spacing:-.035em;
  max-width:none;
  margin-bottom:14px;
}

.article-shell .lead,
.page-frame > .lead,
.hero-copy .lead{
  max-width:none;
}

.article-shell ul,
.article-shell ol{
  padding-left:1.2rem;
}

.article-shell .topic-links{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  align-items:stretch;
}

.article-shell .topic-links a{
  height:100%;
}

.article-shell .hero-image-placeholder,
.article-shell .graphic-placeholder,
.article-shell .visual-placeholder,
.article-shell .video-placeholder{
  padding:28px;
  border-style:solid;
  overflow:auto hidden;
}

.article-shell :where(img, object, svg, table){
  max-width:100%;
}

.page-frame :where(.ai-section-card, .ai-detail-card, .ai-link-card, .ai-stage-card, .ai-roi-card, .ai-capability-card, .ai-role-card, .ai-kpi-card){
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,242,.9));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.page-frame > .diagram-object-lg,
.page-frame > .diagram-object,
.page-frame > .ai-grid-2,
.page-frame > .ai-grid-3,
.page-frame > .ai-grid-4,
.page-frame > .ai-reference-grid,
.page-frame > .ai-capability-grid,
.page-frame > .ai-role-grid{
  margin-top:1.35rem;
}

.diagram-object,
.diagram-object-lg,
.homepage-visual-card,
.ai-visual-card{
  min-width:0;
  align-self:start;
}

.card-panel > :last-child,
.entry-card > :last-child,
.decision-module > :last-child,
.signal-card > :last-child,
.route-card > :last-child,
.surface-card > :last-child,
.reading-card > :last-child,
.homepage-topic-card > :last-child,
.ai-premium-card > :last-child{
  margin-bottom:0;
}

@media (max-width: 1100px){
  .homepage-wide-visual,
  .diagram-object,
  .diagram-object-lg,
  .ai-visual-card.ai-visual-wide{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .homepage-wide-visual img[src$=".svg"],
  .diagram-object object,
  .diagram-object img,
  .diagram-object-lg object,
  .diagram-object-lg img,
  .ai-visual-card.ai-visual-wide img[src$=".svg"]{
    width:max(100%, 920px);
    max-width:none;
  }
}

@media (max-width: 900px){
  .legacy-article-page > .article-shell{
    width:100%;
  }

  .article-layout{
    padding:12px 16px 34px;
  }

  .article-layout > .article-shell{
    width:100%;
  }
}

@media (max-width: 760px){
  .site-shell{
    padding:0 14px 36px;
  }

  .site-header{
    flex-wrap:wrap;
    padding:16px;
    border-radius:24px;
  }

  .main-nav{
    flex-wrap:wrap;
    width:100%;
    order:2;
  }

  .site-search{
    width:100%;
    order:3;
    margin-top:8px;
  }

  .main-nav a,
  .subpage-nav .nav-links a{
    flex:1 1 calc(50% - 10px);
    justify-content:center;
    text-align:center;
    min-height:46px;
  }

  .article-shell,
  .card,
  .note-card,
  .where-next-card,
  .callout-band,
  .card-panel,
  .entry-card,
  .decision-module{
    padding:24px 20px;
    border-radius:24px;
  }

  .article-shell h1,
  .page-frame > h1,
  .hero-copy h1{
    max-width:none;
  }

  .article-shell h1,
  .page-frame > h1,
  .hero-copy h1,
  .ai-premium-hero h1,
  .homepage-hero h1,
  .learning-hero h1,
  .architecture-hero h1,
  .comparison-hero h1,
  .resource-hero h1,
  .about-hero h1,
  .glossary-hero h1{
    font-size:clamp(1.9rem, 6.1vw, 2.95rem);
    line-height:1.03;
  }

  .article-shell .topic-links{
    grid-template-columns:1fr;
  }

  .homepage-visual-card,
  .ai-visual-card,
  .diagram-object,
  .diagram-object-lg{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .homepage-visual-card img[src$=".svg"],
  .ai-visual-card img[src$=".svg"],
  .diagram-object object,
  .diagram-object img,
  .diagram-object-lg object,
  .diagram-object-lg img{
    width:max(100%, 720px);
    max-width:none;
  }
}

@media (max-width: 560px){
  .main-nav a,
  .subpage-nav .nav-links a{
    flex-basis:100%;
  }
}

/* Phase 3: Design System Refinement */

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* Site footer */
.site-footer {
  max-width: 1180px;
  margin: var(--space-6) auto 0;
  padding: var(--space-5) 24px var(--space-4);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-column h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 4px;
}

.footer-column a {
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.15s;
}

.footer-column a:hover {
  color: var(--accent);
}

.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* Expandable sections (details/summary) */
details.expandable {
  border: 1px solid var(--line);
  border-radius: var(--radius-module);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  background: var(--surface);
}

details.expandable summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details.expandable summary::after {
  content: '+';
  font-size: 22px;
  color: var(--muted);
  transition: transform 0.2s;
}

details.expandable[open] summary::after {
  content: '−';
}

/* Comparison table with sticky first column */
.comparison-table-wrapper {
  overflow-x: auto;
  margin: var(--space-3) 0;
  border-radius: var(--radius-module);
  border: 1px solid var(--line);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.comparison-table th {
  background: var(--surface-soft);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

/* Focus indicator styles */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print stylesheet */
@media print {
  body {
    background: #fff;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .hero-actions,
  .route-strip {
    display: none;
  }

  main {
    max-width: 100%;
    padding: 0;
  }

  .note-card,
  .signal-card,
  .route-card,
  .ai-premium-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 12px;
    color: #666;
  }
}

/* Responsive footer breakpoints */
@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 440px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   BLOG LAYOUT — Personal expert blog
   ======================================== */

/* Blog wrapper: main content + sidebar */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

.blog-main { min-width: 0; }

.blog-sidebar {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Author card */
.author-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 auto 16px;
  letter-spacing: -0.02em;
}

.author-card h3 {
  font-size: 20px;
  margin-bottom: 4px;
  color: var(--text);
}

.author-card .author-title {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

.author-card .author-bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 16px;
}

.author-card .author-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.author-card .author-stats div {
  text-align: center;
}

.author-card .author-stats strong {
  display: block;
  font-size: 20px;
  color: var(--text);
}

.author-card .author-stats span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Sidebar widget */
.sidebar-widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.sidebar-widget h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  color: var(--text);
}

.sidebar-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget li {
  margin-bottom: 0;
}

.sidebar-widget li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  transition: color 0.15s ease;
}

.sidebar-widget li:last-child a {
  border-bottom: none;
}

.sidebar-widget li a:hover {
  color: var(--accent);
}

/* Category tag pills */
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,0.8);
  transition: all 0.15s ease;
}

.category-tag:hover,
.category-tag.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* Post meta bar (author, date, reading time) */
.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.post-meta .post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
}

.post-meta .post-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.post-meta .meta-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
}

.post-meta .post-date,
.post-meta .post-reading-time {
  color: var(--muted);
}

/* Blog post card (for listings) */
.blog-post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  display: block;
  color: inherit;
}

.blog-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.blog-post-card .post-card-category {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 8px;
}

.blog-post-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
  line-height: 1.25;
}

.blog-post-card .post-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
}

.blog-post-card .post-card-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 12px;
}

/* Blog post grid */
.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* Featured post (larger card) */
.featured-post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow);
  margin-bottom: 40px;
}

.featured-post .eyebrow {
  color: var(--accent);
}

.featured-post h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin-bottom: 14px;
}

.featured-post .featured-excerpt {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: none;
}

.featured-post .featured-meta {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Blog hero (smaller, personal) */
.blog-hero {
  margin-bottom: 40px;
}

.blog-hero h1 {
  font-size: clamp(36px, 5vw, 54px);
  margin-bottom: 12px;
}

.blog-hero .blog-tagline {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: none;
}

/* Section headers for blog home */
.blog-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.blog-section-header h2 {
  font-size: 22px;
  margin: 0;
}

.blog-section-header a {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}

/* Related posts at bottom of articles */
.related-posts {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--line);
}

.related-posts h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Newsletter CTA */
.newsletter-cta {
  background: linear-gradient(135deg, rgba(24,78,59,0.06), rgba(15,118,110,0.04));
  border: 1px solid rgba(24,78,59,0.15);
  border-radius: var(--radius-card);
  padding: 24px;
  text-align: center;
}

.newsletter-cta h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.newsletter-cta p {
  font-size: 14px;
  margin-bottom: 16px;
}

.newsletter-cta .cta-button {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease;
}

.newsletter-cta .cta-button:hover {
  transform: translateY(-1px);
}

/* Responsive blog layout */
@media (max-width: 900px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
  }
  .blog-post-grid {
    grid-template-columns: 1fr;
  }
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}

/* About page author full profile */
.author-profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow);
  margin-bottom: 40px;
}

.author-profile-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  font-weight: 700;
}

.author-profile h1 {
  font-size: 36px;
  margin-bottom: 4px;
}

.author-profile .author-role {
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
}

.author-profile .author-long-bio {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.author-credentials {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.credential-pill {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(24,78,59,0.15);
}

@media (max-width: 700px) {
  .author-profile {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .author-profile-avatar {
    margin: 0 auto;
    width: 140px;
    height: 140px;
    font-size: 52px;
  }
}

/* Business scenario cards */
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.scenario-card .scenario-industry {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 8px;
}

.scenario-card h3 {
  margin-bottom: 12px;
}

.scenario-card .scenario-problem {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.scenario-card .scenario-solution {
  font-size: 15px;
  line-height: 1.6;
}

.scenario-card .scenario-stack {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scenario-card .stack-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(24,78,59,0.12);
}

.scenario-card .scenario-impact {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(22, 163, 74, 0.06);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
}

/* Search Styles */
.site-search {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24, 78, 59, 0.08);
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  z-index: 1000;
}

.search-results.open {
  max-height: 500px;
  opacity: 1;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
  background: var(--surface-soft);
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 4px;
  word-break: break-word;
}

.result-category {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 4px;
  margin-bottom: 6px;
  font-weight: 500;
}

.result-snippet {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}

.result-snippet mark {
  background: rgba(24, 78, 59, 0.15);
  color: var(--accent);
  font-weight: 500;
  border-radius: 2px;
  padding: 0 2px;
}

.result-link {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.search-no-results {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Scrollbar styling for results dropdown */
.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Mobile responsive - handled by 760px breakpoint above */


/* ========================================
   ALIGNMENT & RESPONSIVENESS HARDENING
   Phase: Text, paragraph, header alignment
   + full device-range responsive fixes
   ======================================== */

/* --- Consistent text alignment defaults --- */
.article-shell,
.page-frame,
.ai-premium-page,
.homepage-premium-page,
.topics-hub-page,
.glossary-premium-page,
.about-premium-page,
.learning-premium-page,
.architecture-premium-page,
.comparison-premium-page,
.resource-premium-page{
  text-align:left;
}

/* --- Consistent section vertical rhythm --- */
.ai-premium-section,
.homepage-section,
.learning-section,
.architecture-section,
.comparison-section,
.resource-section{
  margin:2.25rem 0;
}

/* --- Ensure premium page containers have horizontal padding --- */
.ai-premium-page,
.sac-premium-page,
.datasphere-premium-page,
.bw-premium-page,
.btp-premium-page,
.integrations-premium-page,
.governance-premium-page,
.bdc-premium-page{
  padding-left:24px;
  padding-right:24px;
}

/* --- Consistent list alignment inside articles --- */
.article-shell ul,
.article-shell ol,
.page-frame ul,
.page-frame ol{
  padding-left:1.25rem;
  margin-top:0.5rem;
  margin-bottom:1rem;
}

.article-shell li,
.page-frame li{
  margin-bottom:0.4rem;
  line-height:1.65;
}

/* --- Consistent callout-box alignment --- */
.callout-box{
  text-align:left;
}

.callout-box p:last-child{
  margin-bottom:0;
}

/* --- Collapsible TL;DR details block --- */
details.callout-box > summary{
  list-style:none;
  position:relative;
  padding-right:1.6rem;
}
details.callout-box > summary::-webkit-details-marker{
  display:none;
}
details.callout-box > summary::after{
  content:"\25BE";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transition:transform 0.2s ease;
  color:var(--accent);
  font-size:0.95rem;
}
details.callout-box[open] > summary::after{
  transform:translateY(-50%) rotate(0deg);
}
details.callout-box > summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:4px;
}

/* --- Key Takeaways card (light, accessible) --- */
.takeaways-card{
  background:linear-gradient(135deg,#e8f5f0 0%,#f5f8f3 100%);
  border-left:5px solid var(--accent);
  border-radius:14px;
  padding:1.75rem 2rem;
  margin:1.5rem 0;
  box-shadow:0 4px 12px rgba(24,78,59,0.08);
}
.takeaways-card ul{
  list-style:none;
  padding:0;
  margin:0;
}
.takeaways-card li{
  padding:0.85rem 0;
  border-bottom:1px solid rgba(24,78,59,0.12);
  color:#1f2d27;
  line-height:1.6;
}
.takeaways-card li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.takeaways-card li strong{
  color:var(--accent);
  display:inline;
}

/* --- Pull quote (light, accessible) --- */
.pull-quote{
  background:linear-gradient(135deg,#e8f5f0 0%,#f5f8f3 100%);
  border-left:5px solid var(--accent);
  border-radius:12px;
  padding:1.5rem 1.75rem;
  margin:1.75rem auto;
  max-width:820px;
  box-shadow:0 3px 10px rgba(24,78,59,0.06);
}
.pull-quote blockquote{
  border:none;
  margin:0;
  padding:0;
  font-size:1.15rem;
  font-style:italic;
  line-height:1.55;
  color:#1f2d27;
}

/* --- Closing callout (light, accessible) --- */
.closing-callout{
  background:linear-gradient(135deg,#e8f5f0 0%,#f5f8f3 100%);
  border-left:5px solid var(--accent);
  border-radius:14px;
  padding:1.75rem 2rem;
  margin:1.75rem auto;
  max-width:820px;
  box-shadow:0 4px 12px rgba(24,78,59,0.08);
}
.closing-callout p{
  margin:0;
  font-size:1.1rem;
  line-height:1.6;
  color:#1f2d27;
}
.closing-callout strong{
  color:var(--accent);
}

/* --- Collapsible Sources block --- */
details.sources-details{
  margin:1rem 0 1.5rem 0;
  padding:0.75rem 1rem;
  background:rgba(232,245,240,0.35);
  border:1px solid rgba(24,78,59,0.15);
  border-radius:10px;
}
details.sources-details > summary{
  list-style:none;
  cursor:pointer;
  font-weight:600;
  color:var(--accent);
  font-size:0.95rem;
  position:relative;
  padding-right:1.6rem;
  outline:none;
}
details.sources-details > summary::-webkit-details-marker{
  display:none;
}
details.sources-details > summary::after{
  content:"\25BE";
  position:absolute;
  right:0.2rem;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transition:transform 0.2s ease;
  color:var(--accent);
  font-size:0.9rem;
}
details.sources-details[open] > summary::after{
  transform:translateY(-50%) rotate(0deg);
}
details.sources-details[open] > summary{
  margin-bottom:0.75rem;
}
details.sources-details > summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
details.sources-details ul{
  margin:0.25rem 0 0.25rem 1.2rem;
  padding:0;
}

/* --- Blog layout tablet intermediate --- */
@media (max-width:1024px){
  .blog-layout{
    gap:32px;
    grid-template-columns:1fr 280px;
  }

  .blog-sidebar{
    gap:22px;
  }

  .sidebar-widget{
    padding:20px;
  }

  .featured-post{
    padding:32px;
  }

  .author-profile{
    gap:28px;
    padding:32px;
  }
}

/* --- Tablet refinements (768px) --- */
@media (max-width:768px){
  .blog-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .blog-sidebar{
    position:static;
    gap:20px;
  }

  .featured-post{
    padding:26px;
  }

  .author-card{
    padding:22px;
  }

  .author-profile{
    grid-template-columns:1fr;
    text-align:center;
    padding:28px;
    gap:20px;
  }

  .author-profile-avatar{
    margin:0 auto;
    width:160px;
    height:160px;
    font-size:60px;
  }

  .scenario-card{
    padding:22px;
  }

  .newsletter-cta{
    padding:20px;
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }

  /* Premium page containers reduce horizontal padding */
  .ai-premium-page,
  .sac-premium-page,
  .datasphere-premium-page,
  .bw-premium-page,
  .btp-premium-page,
  .integrations-premium-page,
  .governance-premium-page,
  .bdc-premium-page{
    padding-left:16px;
    padding-right:16px;
  }
}

/* --- Small phone refinements (480px) --- */
@media (max-width:480px){
  .featured-post{
    padding:20px 18px;
    border-radius:22px;
  }

  .featured-post h2{
    font-size:clamp(22px,5.5vw,28px);
  }

  .author-card{
    padding:18px;
  }

  .author-card .author-stats{
    gap:16px;
  }

  .author-profile{
    padding:22px 18px;
  }

  .author-profile-avatar{
    width:120px;
    height:120px;
    font-size:46px;
  }

  .scenario-card{
    padding:18px;
    border-radius:22px;
  }

  .newsletter-cta{
    padding:18px 16px;
  }

  .sidebar-widget{
    padding:18px;
  }

  .blog-post-card{
    padding:20px;
    border-radius:22px;
  }

  .blog-hero h1{
    font-size:clamp(28px,7vw,36px);
  }

  .blog-hero .blog-tagline{
    font-size:16px;
  }

  /* Ensure all multi-column grids collapse to single column */
  .blog-post-grid,
  .related-posts-grid,
  .footer-grid,
  .category-tags{
    grid-template-columns:1fr;
  }

  .post-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .post-meta .meta-separator{
    display:none;
  }

  /* Tighten site shell */
  .site-shell{
    padding:0 12px 28px;
  }

  .site-header{
    padding:14px 12px;
    border-radius:20px;
  }

  .main-nav a{
    padding:8px 10px;
    font-size:13px;
  }

  /* Reduce article shell further */
  .article-shell{
    padding:22px 16px;
    border-radius:22px;
  }

  /* All premium page containers */
  .ai-premium-page,
  .sac-premium-page,
  .datasphere-premium-page,
  .bw-premium-page,
  .btp-premium-page,
  .integrations-premium-page,
  .governance-premium-page,
  .bdc-premium-page{
    padding-left:12px;
    padding-right:12px;
  }
}

/* --- Ensure all 4-col grids collapse fully at 640px --- */
@media (max-width:640px){
  .homepage-route-grid,
  .homepage-topic-grid,
  .homepage-surface-grid,
  .homepage-reading-grid,
  .homepage-signal-grid,
  .homepage-finish-grid,
  .learning-route-grid,
  .learning-signal-grid,
  .learning-stage-grid,
  .architecture-question-grid,
  .architecture-flagship-grid,
  .architecture-signal-grid,
  .architecture-stage-grid,
  .comparison-family-grid,
  .comparison-flagship-grid,
  .comparison-signal-grid,
  .comparison-stage-grid,
  .resource-route-grid,
  .resource-surface-grid,
  .resource-kit-grid,
  .resource-mistake-grid,
  .resource-signal-grid,
  .ai-grid-2,
  .ai-grid-3,
  .ai-grid-4,
  .ai-capability-grid,
  .ai-role-grid,
  .ai-roi-grid,
  .ai-kpi-grid,
  .ai-reference-grid,
  .ai-story-grid,
  .ai-stacked-table,
  .glossary-term-grid,
  .sac-premium-page .sac-score-grid,
  .sac-premium-page .sac-decision-grid,
  .sac-premium-page .sac-link-grid,
  .datasphere-premium-page .datasphere-score-grid,
  .datasphere-premium-page .datasphere-decision-grid,
  .datasphere-premium-page .datasphere-link-grid,
  .bw-premium-page .bw-score-grid,
  .bw-premium-page .bw-link-grid,
  .btp-premium-page .btp-score-grid,
  .btp-premium-page .btp-decision-grid,
  .btp-premium-page .btp-link-grid,
  .integrations-premium-page .integrations-score-grid,
  .integrations-premium-page .integrations-decision-grid,
  .integrations-premium-page .integrations-link-grid,
  .governance-premium-page .governance-score-grid,
  .governance-premium-page .governance-decision-grid,
  .governance-premium-page .governance-link-grid,
  .governance-premium-page .governance-quick-grid,
  .bdc-premium-page .bdc-score-grid,
  .bdc-premium-page .bdc-decision-grid,
  .bdc-premium-page .bdc-link-grid{
    grid-template-columns:1fr;
  }

  /* Cards reduce border-radius and padding uniformly */
  .ai-section-card,
  .ai-detail-card,
  .ai-link-card,
  .ai-stage-card,
  .ai-roi-card,
  .ai-capability-card,
  .ai-role-card,
  .ai-kpi-card,
  .ai-premium-card,
  .ai-mini-card,
  .ai-stat-panel,
  .ai-note-panel,
  .ai-audience-card,
  .ai-decision-card,
  .ai-checklist-card,
  .ai-metric-card{
    padding:1.1rem 1.15rem;
    border-radius:22px;
  }

  /* Table responsive improvement */
  .ai-table{
    font-size:13px;
  }

  .ai-table th,
  .ai-table td{
    padding:0.75rem 0.65rem;
  }

  .comparison-table th,
  .comparison-table td{
    padding:10px 12px;
    font-size:13px;
  }
}

/* --- Wide desktop alignment (1400px+) --- */
@media (min-width:1400px){
  .site-shell{
    max-width:1340px;
  }

  .blog-layout{
    max-width:1280px;
  }

  .article-shell{
    padding:44px 48px;
  }
}


/* ========================================
   PHASE 20 — ALIGNMENT & DIAGRAM POLISH
   SVG responsiveness, section spacing,
   paragraph alignment, header rhythm
   ======================================== */

/* --- SVG global responsiveness --- */
.page-frame svg,
.article-shell svg,
.ai-visual-card svg{
  width:100%;
  height:auto;
  display:block;
  max-width:100%;
}

/* SVGs inside figure get proper spacing */
.page-frame figure,
.article-shell figure{
  margin:1.5rem 0;
  text-align:center;
}

.page-frame figure svg,
.article-shell figure svg{
  margin:0 auto;
}

.page-frame figcaption,
.article-shell figcaption{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:var(--muted);
  text-align:left;
}

/* --- Paragraph vertical rhythm inside premium pages --- */
.page-frame > p,
.page-frame > ul,
.page-frame > ol,
.page-frame section > p,
.page-frame section > ul,
.page-frame section > ol{
  margin-top:0;
  margin-bottom:1.15rem;
  line-height:1.72;
}

/* Tighten spacing between consecutive paragraphs */
.page-frame > p + p,
.page-frame section > p + p{
  margin-top:0;
}

/* --- Section spacing consistency --- */
.page-frame > section,
.page-frame > .ai-depth-section{
  margin:2.25rem 0;
}

.page-frame > section:first-of-type{
  margin-top:1.25rem;
}

/* --- H2/H3 vertical rhythm --- */
.page-frame h2{
  margin-top:2.5rem;
  margin-bottom:0.85rem;
}

.page-frame h3{
  margin-top:1.75rem;
  margin-bottom:0.65rem;
}

/* First heading after section start needs no extra top margin */
.page-frame section > h2:first-child,
.page-frame section > h3:first-child,
.page-frame .ai-depth-section > h2:first-child,
.page-frame .ai-depth-section > h3:first-child{
  margin-top:0;
}

/* H3 that immediately follows H2 tightens up */
.page-frame h2 + h3{
  margin-top:0.75rem;
}

/* --- Card grid orphan prevention --- */
.ai-clean-grid,
.ai-grid-2,
.ai-grid-3,
.ai-grid-4{
  align-items:stretch;
}

/* Last card in a grid row stretches if orphaned */
.ai-clean-grid > :last-child,
.ai-grid-2 > :last-child,
.ai-grid-3 > :last-child,
.ai-grid-4 > :last-child{
  min-height:100%;
}

/* --- Inline SVG overflow guard --- */
.page-frame svg[viewBox],
.article-shell svg[viewBox]{
  overflow:visible;
  max-height:600px;
}

/* Large diagrams: scrollable on small screens */
@media (max-width:760px){
  .page-frame > figure,
  .article-shell > figure,
  .page-frame > .ai-visual-card{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .page-frame > figure > svg,
  .article-shell > figure > svg{
    min-width:680px;
    max-width:none;
  }
}

/* --- Table alignment standardisation --- */
.page-frame table,
.article-shell table{
  width:100%;
  border-collapse:collapse;
  margin:1.25rem 0;
}

.page-frame table th,
.page-frame table td,
.article-shell table th,
.article-shell table td{
  text-align:left;
  vertical-align:top;
  padding:0.85rem 1rem;
}

/* --- Callout and note-card spacing inside premium pages --- */
.page-frame .callout-box,
.page-frame .note-card{
  margin:1.5rem 0;
}

/* --- Where-next card bottom alignment --- */
.page-frame > .where-next-card:last-child,
.page-frame > section:last-child .where-next-card{
  margin-top:2.5rem;
  margin-bottom:0;
}

/* --- Post-meta alignment on all pages --- */
.post-meta{
  text-align:left;
}

/* --- Breadcrumb alignment --- */
.breadcrumbs,
.breadcrumb-trail{
  text-align:left;
  margin-bottom:1rem;
}

/* --- AI table responsive scroll --- */
@media (max-width:640px){
  .page-frame .ai-table,
  .article-shell .ai-table,
  .page-frame .comparison-table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* --- Universal grid stretch alignment --- */
.ai-capability-grid,
.ai-scenario-grid,
.ai-clean-grid,
.ai-grid-2,
.ai-grid-3,
.ai-grid-4,
.related-posts-grid,
.footer-grid,
.blog-post-grid,
.homepage-signal-grid,
.homepage-route-grid,
.homepage-topic-grid,
.homepage-surface-grid,
.homepage-reading-grid,
.homepage-finish-grid,
.learning-signal-grid,
.learning-route-grid,
.learning-stage-grid,
.learning-mistake-grid,
.architecture-signal-grid,
.architecture-question-grid,
.architecture-flagship-grid,
.architecture-stage-grid,
.comparison-signal-grid,
.comparison-family-grid,
.comparison-flagship-grid,
.comparison-stage-grid,
.resource-signal-grid,
.resource-route-grid,
.resource-surface-grid,
.resource-kit-grid,
.resource-mistake-grid,
.glossary-term-grid,
.decision-module-grid,
.sac-score-grid,
.sac-decision-grid,
.sac-link-grid,
.datasphere-score-grid,
.datasphere-decision-grid,
.datasphere-link-grid,
.bdc-score-grid,
.bdc-decision-grid,
.bdc-link-grid,
.btp-score-grid,
.btp-decision-grid,
.btp-link-grid,
.bw-score-grid,
.bw-link-grid,
.integrations-score-grid,
.integrations-decision-grid,
.integrations-link-grid,
.governance-score-grid,
.governance-decision-grid,
.governance-link-grid,
.governance-quick-grid{
  align-items:stretch;
}

/* --- Consistent spacing for topic-hub grid cards --- */
.topics-hub-page .card-panel{
  text-align:left;
}

.topics-hub-page .card-panel p{
  text-align:left;
}

/* ========================================
   ENHANCED CSS POLISH & ACCESSIBILITY
   Typography, animations, dark mode,
   badge styling, improved card interactions,
   print styles, and page load effects
   ======================================== */

/* --- Typography Enhancements --- */
/* Improved line-height for better readability across all elements */
p, li, dd {
  line-height: 1.72;
  letter-spacing: 0.3px;
}

.article-shell p,
.page-frame p {
  line-height: 1.75;
}

/* Enhance heading hierarchy and spacing */
h1 {
  letter-spacing: -0.04em;
  font-weight: 700;
}

h2 {
  letter-spacing: -0.035em;
  font-weight: 700;
}

h3 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

h4 {
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* Better visual hierarchy for headings */
.page-frame h1,
.article-shell h1 {
  margin-bottom: 0.8em;
}

.page-frame h2,
.article-shell h2 {
  margin-bottom: 0.6em;
}

.page-frame h3,
.article-shell h3 {
  margin-bottom: 0.5em;
}

/* Lead paragraph enhancement */
.lead {
  line-height: 1.8;
  letter-spacing: 0.2px;
  font-weight: 500;
}

/* --- Improved Card Interactions --- */
/* Smooth transitions for all interactive cards */
.card,
.article-shell,
.entry-card,
.decision-module,
.ai-premium-card,
.ai-stage-card,
.ai-section-card,
.meta-pill,
.route-strip a,
.topic-card,
.blog-post-card,
.matrix-card,
.where-next {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background-color 0.2s ease;
}

/* Enhanced card hover effects */
.entry-card:hover,
.decision-module:hover,
.ai-premium-card:hover,
.ai-stage-card:hover,
.ai-section-card:hover,
.blog-post-card:hover,
.matrix-card:hover {
  box-shadow: 0 20px 48px rgba(23, 23, 23, 0.1);
  transform: translateY(-2px);
  border-color: rgba(24, 78, 59, 0.15);
}

/* Topic card hover state */
.topic-card:hover {
  box-shadow: 0 24px 52px rgba(23, 23, 23, 0.12);
  transform: translateY(-3px);
}

/* Route strip link hover */
.route-strip a:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(23, 23, 23, 0.08);
  border-color: var(--accent);
}

/* Meta pill hover */
.meta-pill:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--accent);
  cursor: default;
}

/* --- Badge Styling (for new/updated content) --- */
.content-badge,
.badge-new,
.badge-updated {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-new {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.08));
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.badge-updated {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.08));
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Optional: Place badge next to content */
.badge-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Featured Post Styling --- */
.featured-post,
.featured-card {
  position: relative;
  background: linear-gradient(135deg, rgba(24, 78, 59, 0.05) 0%, rgba(248, 250, 247, 0.8) 100%);
  border: 2px solid var(--accent);
  box-shadow: 0 24px 56px rgba(24, 78, 59, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.featured-post:hover,
.featured-card:hover {
  box-shadow: 0 28px 64px rgba(24, 78, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-4px);
}

/* Featured post indicator */
.featured-indicator {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(24, 78, 59, 0.08);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-light);
}

/* --- Callout Box Enhanced Styling --- */
.callout-box,
.note-card,
.ai-callout {
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.callout-box {
  background: linear-gradient(135deg, rgba(232, 245, 240, 0.8) 0%, rgba(248, 250, 247, 0.6) 100%);
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(24, 78, 59, 0.08);
}

.note-card {
  background: linear-gradient(135deg, rgba(243, 245, 241, 0.9) 0%, rgba(250, 250, 248, 0.7) 100%);
  border-left: 5px solid var(--accent-2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(15, 118, 110, 0.06);
}

.ai-callout {
  background: linear-gradient(135deg, rgba(232, 245, 240, 0.75) 0%, rgba(248, 250, 247, 0.55) 100%);
  border-left: 5px solid var(--info);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(37, 99, 235, 0.06);
}

.callout-box:hover,
.note-card:hover,
.ai-callout:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(23, 23, 23, 0.08);
}

/* --- Hero Section Enhancements --- */
.ai-premium-hero,
.rich-hero,
.blog-hero,
.hero {
  position: relative;
}

.ai-premium-hero::before,
.rich-hero::before,
.blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24, 78, 59, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ai-premium-hero:hover::before,
.rich-hero:hover::before,
.blog-hero:hover::before {
  opacity: 1;
}

/* Hero text shadow for better contrast on images */
.ai-premium-hero .lead,
.rich-hero .lead,
.blog-hero .lead {
  text-shadow: 0 2px 8px rgba(23, 23, 23, 0.08);
}

/* --- Decision Framework & Recommendation Styling --- */
.decision-module {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 245, 0.95) 100%);
  border-left: 4px solid var(--accent);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.decision-module::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -4px;
  right: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 999px;
  opacity: 0.4;
}

.recommendation-section,
.recommendation-card {
  border: 2px solid var(--success);
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(250, 250, 248, 0.8) 100%);
  border-radius: 14px;
  padding: 20px 22px;
}

/* --- Code/Technical Content Styling --- */
code,
pre,
.code-block,
.technical-snippet {
  font-family: 'Monaco', 'Courier New', monospace;
  letter-spacing: 0px;
}

code {
  background: rgba(23, 23, 23, 0.06);
  color: #d63384;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-weight: 500;
}

pre {
  background: rgba(23, 23, 23, 0.95);
  color: #e0e0e0;
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.65;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.code-block {
  margin: 1.5rem 0;
  border-radius: 10px;
  overflow: hidden;
}

/* --- Print Styles --- */
@media print {
  /* Hide navigation and UI elements */
  .site-header,
  .site-shell > header,
  .main-nav,
  .site-search,
  .sidebar,
  .footer,
  .related-posts,
  .newsletter-cta,
  .social-share,
  .breadcrumbs,
  .top-nav {
    display: none !important;
  }

  /* Optimize for printing */
  html {
    scroll-behavior: auto;
  }

  body {
    background: white;
    color: black;
    line-height: 1.8;
  }

  .card,
  .article-shell,
  .entry-card {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
    page-break-inside: avoid;
  }

  /* Preserve page breaks */
  .page-frame > section,
  .page-frame > .ai-depth-section,
  h2,
  .decision-module {
    page-break-inside: avoid;
  }

  /* Make links visible in print */
  a {
    color: #0066cc;
    text-decoration: underline;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #666;
  }

  /* Optimize heading size for print */
  h1 {
    font-size: 28px;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 12px;
    page-break-after: avoid;
  }

  h3 {
    font-size: 18px;
    page-break-after: avoid;
  }

  /* Reduce padding in print */
  .article-shell {
    padding: 0;
    border: none;
  }

  .callout-box,
  .note-card {
    border: 1px solid #999;
    background: #f5f5f5 !important;
  }

  /* Improve table appearance for print */
  table {
    border-collapse: collapse;
  }

  tbody tr {
    page-break-inside: avoid;
  }

  /* Remove shadows for cleaner print */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* --- Page Load Animation (Fade-in) --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply fade-in to main content on load */
.page-frame,
.article-layout,
.blog-layout,
main {
  animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stagger animation for card grids */
.ai-clean-grid > *,
.ai-grid-2 > *,
.ai-grid-3 > *,
.ai-grid-4 > *,
.entry-grid > *,
.decision-module-grid > * {
  animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  animation-fill-mode: both;
}

/* Stagger timing for each child */
.ai-clean-grid > :nth-child(1),
.ai-grid-2 > :nth-child(1),
.ai-grid-3 > :nth-child(1),
.ai-grid-4 > :nth-child(1),
.entry-grid > :nth-child(1),
.decision-module-grid > :nth-child(1) {
  animation-delay: 0.05s;
}

.ai-clean-grid > :nth-child(2),
.ai-grid-2 > :nth-child(2),
.ai-grid-3 > :nth-child(2),
.ai-grid-4 > :nth-child(2),
.entry-grid > :nth-child(2),
.decision-module-grid > :nth-child(2) {
  animation-delay: 0.1s;
}

.ai-clean-grid > :nth-child(3),
.ai-grid-2 > :nth-child(3),
.ai-grid-3 > :nth-child(3),
.ai-grid-4 > :nth-child(3),
.entry-grid > :nth-child(3),
.decision-module-grid > :nth-child(3) {
  animation-delay: 0.15s;
}

.ai-clean-grid > :nth-child(4),
.ai-grid-2 > :nth-child(4),
.ai-grid-3 > :nth-child(4),
.ai-grid-4 > :nth-child(4),
.entry-grid > :nth-child(4),
.decision-module-grid > :nth-child(4) {
  animation-delay: 0.2s;
}

/* --- Enhanced Responsive Breakpoints --- */
@media (max-width: 480px) {
  /* Extra small devices */
  body {
    line-height: 1.68;
  }

  p, li, dd {
    line-height: 1.7;
    font-size: 1rem;
  }

  h1 {
    font-size: clamp(24px, 5.5vw, 32px);
    margin-bottom: 12px;
  }

  h2 {
    font-size: clamp(18px, 4vw, 24px);
    margin-bottom: 10px;
  }

  h3 {
    font-size: clamp(16px, 3.5vw, 20px);
    margin-bottom: 8px;
  }

  .card,
  .article-shell,
  .entry-card,
  .decision-module {
    padding: 16px;
    border-radius: 16px;
  }

  .callout-box,
  .note-card {
    padding: 14px 16px;
    border-left-width: 4px;
  }
}

/* --- Smooth Focus States for Accessibility --- */
button,
a,
input,
select,
textarea {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.primary-link:focus-visible,
.secondary-link:focus-visible,
.topic-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Improve link underline visibility */
.article-shell a,
.page-frame a {
  position: relative;
  transition: color 0.2s ease;
}

.article-shell a:not([class]):hover,
.page-frame a:not([class]):hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Skip Link Enhancement --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 10px 14px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 9999;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* --- Reduced Motion Preference --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Table Enhancement --- */
table {
  border-collapse: collapse;
}

table th {
  background: linear-gradient(135deg, rgba(24, 78, 59, 0.08) 0%, rgba(248, 250, 247, 0.5) 100%);
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}

table td {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

table tbody tr:hover td {
  background-color: rgba(24, 78, 59, 0.03);
}

/* --- Link Styling Consistency --- */
.article-shell a,
.page-frame a,
.primary-link,
.secondary-link {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* --- Visual Separator Enhancement --- */
hr,
.separator,
.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 2rem 0;
  opacity: 0.6;
}

/* ====================================================================
   Contact modal — opens from "Email me" buttons.
   Gathers subject + message, submits via fetch to a form relay;
   the recipient address is assembled in JS (never in plain HTML).
   ==================================================================== */
.contact-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(15,22,18,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:none;
  align-items:center; justify-content:center;
  z-index:9998;
  padding:1.25rem;
  animation:cmFadeIn .18s ease-out;
}
.contact-modal-backdrop[aria-hidden="false"]{ display:flex; }

@keyframes cmFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes cmSlideIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.contact-modal-card{
  background:var(--surface);
  border-radius:20px;
  box-shadow:0 24px 70px rgba(15,22,18,0.28);
  width:100%; max-width:520px;
  max-height:calc(100vh - 2.5rem);
  overflow-y:auto;
  padding:1.75rem 1.75rem 1.5rem;
  position:relative;
  animation:cmSlideIn .22s ease-out;
  border:1px solid var(--line);
}

.contact-modal-card h3{
  margin:0 0 .35rem;
  font-family:'Fraunces','Libre Caslon Text',Georgia,serif;
  font-size:1.55rem;
  line-height:1.2;
  color:var(--text);
  font-weight:600;
}
.contact-modal-card .contact-modal-sub{
  margin:0 0 1.4rem;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.5;
}

.contact-modal-close{
  position:absolute; top:.9rem; right:.9rem;
  width:34px; height:34px;
  border:none; border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:1.15rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
.contact-modal-close:hover{
  background:var(--accent-light);
  color:var(--accent);
}

.contact-modal-field{
  display:block;
  margin-bottom:1rem;
}
.contact-modal-field label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.4rem;
}
.contact-modal-field input,
.contact-modal-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:.7rem .85rem;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:inherit;
  font-size:.98rem;
  color:var(--text);
  background:var(--surface-soft);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.contact-modal-field textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.5;
}
.contact-modal-field input:focus,
.contact-modal-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(24,78,59,0.15);
}
.contact-modal-field input:invalid:not(:placeholder-shown),
.contact-modal-field textarea:invalid:not(:placeholder-shown){
  border-color:#c94b4b;
}
.contact-modal-field .contact-modal-hint{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin-top:.35rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.contact-modal-actions{
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:flex-end;
  margin-top:1.1rem;
}
.contact-modal-actions .contact-modal-cancel{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--muted);
  padding:.6rem 1.1rem;
  border-radius:999px;
  font-size:.92rem; font-weight:600;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.contact-modal-actions .contact-modal-cancel:hover{
  color:var(--text);
  border-color:var(--muted);
  background:var(--surface-soft);
}
.contact-modal-actions .contact-modal-send{
  background:var(--accent);
  color:#ffffff;
  border:none;
  padding:.65rem 1.4rem;
  border-radius:999px;
  font-size:.95rem; font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease, opacity .15s ease;
  min-width:118px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
}
.contact-modal-actions .contact-modal-send:hover{
  background:#0f3b2c;
}
.contact-modal-actions .contact-modal-send:disabled{
  opacity:.6;
  cursor:wait;
}

.contact-modal-spinner{
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#ffffff;
  border-radius:50%;
  animation:cmSpin .8s linear infinite;
  display:none;
}
.contact-modal-send[data-loading="true"] .contact-modal-spinner{ display:inline-block; }
@keyframes cmSpin{ to{ transform:rotate(360deg); } }

.contact-modal-status{
  margin-top:.85rem;
  padding:.7rem .85rem;
  border-radius:10px;
  font-size:.9rem;
  line-height:1.45;
  display:none;
}
.contact-modal-status[data-state="success"]{
  display:block;
  background:var(--accent-light);
  border:1px solid rgba(24,78,59,0.25);
  color:var(--accent);
}
.contact-modal-status[data-state="error"]{
  display:block;
  background:#fdecec;
  border:1px solid rgba(201,75,75,0.35);
  color:#993333;
}
.contact-modal-status[data-state="validation"]{
  display:block;
  background:#fdf4e8;
  border:1px solid rgba(176,125,42,0.35);
  color:#8a5d1f;
}

@media (max-width:520px){
  .contact-modal-card{ padding:1.4rem 1.25rem 1.25rem; border-radius:16px; }
  .contact-modal-card h3{ font-size:1.35rem; }
  .contact-modal-actions{ flex-direction:column-reverse; align-items:stretch; }
  .contact-modal-actions .contact-modal-cancel,
  .contact-modal-actions .contact-modal-send{ width:100%; }
}

/* =========================================================================
   Deep audit 2026-04-18 — Batch 1: Responsive header, nav tap targets, hover contrast
   ========================================================================= */

/* H1 — Header and main-nav must wrap on narrow widths.
   Base rules in Phase 11 (line ~815) use flex-wrap:nowrap which overflows on
   375–414px. Override here so the cascade wins site-wide. */
@media (max-width: 760px){
  .site-header{
    flex-wrap: wrap !important;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 22px;
  }
  .main-nav{
    flex-wrap: wrap !important;
    justify-content: flex-start;
    width: 100%;
    gap: 6px;
    row-gap: 8px;
  }
  .main-nav a{
    font-size: 13.5px;
    padding: 10px 13px;
  }
}

/* H2 — WCAG 2.5.5 minimum tap targets (≥44×44 CSS px) on all primary
   interactive elements. Applies universally, not just mobile. */
.main-nav a,
.subpage-nav .nav-links a,
.topic-links a,
.route-strip a,
.route-pill,
.ai-inline-links a,
.secondary-link{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.route-pill{
  min-height: 44px;
}

.footer-column a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
}

/* Meta-pills already have min-height 36px; keep touchable on touch devices */
@media (hover: none) and (pointer: coarse){
  .footer-column a{ min-height: 44px; }
  .meta-pills span{ min-height: 40px; }
}

/* H5 — Hover-state contrast fix.
   Old: .main-nav a:hover kept color:var(--text-soft) (#27362f) on a very
   light background — contrast was fine there, BUT when the active-page
   "aria-current" rule fires or when hover background was dark, text became
   low-contrast. Pin hover/active text to the accent color on light bg. */
.main-nav a:hover,
.subpage-nav .nav-links a:hover,
.secondary-link:hover,
.topic-links a:hover,
.route-strip a:hover,
.route-pill:hover,
.ai-inline-links a:hover{
  color: var(--accent);
}

.main-nav a[aria-current="page"],
.subpage-nav .nav-links a.active{
  /* already has accent color; reinforce contrast against patterned bg */
  color: #0f4330;
}

/* Keep the Phase 11 900px rule from re-asserting nowrap by beating it in
   specificity AND order. We already overrode above with !important inside
   the 760px breakpoint; explicitly nuke the 900px re-assertion here. */
@media (max-width: 900px) and (min-width: 761px){
  .site-header{ flex-wrap: wrap; }
  .main-nav{ flex-wrap: wrap; }
}
/* End Batch 1 */

/* =========================================================================
   Deep audit 2026-04-18 — Batch 2: Tablet grid collapse + SVG scroll
                                    + flagship callout mobile padding
   ========================================================================= */

/* H4 — Intermediate tablet band (760–980px). Three/four-column grids at 820px
   end up at ~200–270px per column which is too cramped for the card
   contents. Collapse 4-col → 2-col and 3-col → 2-col in the tablet band;
   the existing 980px rule will then take them to 1-col below 760px.
   (Below 760px our B1 rules + the 980px rule already resolve to 1-col, so
   this middle band is where we intervene.) */
@media (max-width: 980px) and (min-width: 761px){ /* was 960px — G-20 / C-26 (2026-11-12): the band is meant to reach 980px (comment above); at 961–980px these grids fell to one column */
  .ai-roi-grid,
  .ai-capability-grid,
  .ai-role-grid,
  .ai-kpi-grid,
  .ai-reference-grid,
  .ai-clean-grid-3,
  .ai-clean-grid-4,
  .section-grid-3,
  .principles-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ai-row-card{
    grid-template-columns: 1fr 1fr !important;
  }
  .ai-row-card > div{
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .ai-row-card > div:nth-last-child(-n+2){
    border-bottom: none;
  }
  .ai-row-card > div:nth-last-child(-n+2):not(:last-child){
    border-bottom: 1px solid var(--line);
  }
}

/* Below 760px, reinforce 1-col for anything that might have been missed
   by the Phase 27 `max-width: 980px` rule. */
@media (max-width: 760px){
  .ai-roi-grid,
  .ai-capability-grid,
  .ai-role-grid,
  .ai-kpi-grid,
  .ai-reference-grid,
  .ai-clean-grid-2,
  .ai-clean-grid-3,
  .ai-clean-grid-4,
  .section-grid-3,
  .principles-grid,
  .split-section,
  .feature-band,
  .visual-matrix{
    grid-template-columns: 1fr !important;
  }
  .matrix-card.wide{ grid-column: span 1; }

  .ai-row-card{
    grid-template-columns: 1fr !important;
  }
  .ai-row-card > div{
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .ai-row-card > div:last-child{
    border-bottom: none;
  }
}

/* H3 — Large diagram min-width lowered from 680px to 540px so horizontal
   scrolling on mobile covers a shorter distance (375→540 ≈ 165px) while
   still preserving the 2-3 lane layout complex diagrams need.
   Truly wide diagrams overflow naturally; simple ones now fit closer to
   the viewport and feel less "trapped" on small screens. */
@media (max-width: 760px){
  .page-frame > figure > svg,
  .article-shell > figure > svg{
    min-width: 540px !important;
  }
}

@media (max-width: 420px){
  .page-frame > figure > svg,
  .article-shell > figure > svg{
    min-width: 480px !important;
  }
}

/* Provide a visual affordance for the horizontal-scroll containers
   so users know a diagram is wider than it looks. */
@media (max-width: 760px){
  .page-frame > figure[data-scroll],
  .article-shell > figure{
    position: relative;
  }
  .page-frame > figure::after,
  .article-shell > figure::after{
    /* Fade on the right edge hinting more content */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.75));
    opacity: 0.85;
    border-radius: 0 18px 18px 0;
  }
  /* Don't apply to figures without overflow */
  .page-frame > figure:not(:has(> svg)):after,
  .article-shell > figure:not(:has(> svg)):after{
    display: none;
  }
}

/* M1 — Reduce inner padding on pull-quote, takeaways-card, closing-callout
   at narrow widths so text has more breathing room. */
@media (max-width: 520px){
  .takeaways-card{
    padding: 1.1rem 1.1rem;
    border-radius: 12px;
  }
  .takeaways-card li{
    padding: 0.65rem 0;
    line-height: 1.5;
  }
  .pull-quote{
    padding: 1.1rem 1.15rem;
    border-radius: 10px;
    margin: 1.3rem 0;
  }
  .pull-quote blockquote{
    font-size: 1.02rem;
    line-height: 1.5;
  }
  .closing-callout{
    padding: 1.2rem 1.15rem;
    border-radius: 12px;
  }
  .callout-box{
    padding: 1.1rem 1.1rem;
  }
}
/* End Batch 2 */

/* =========================================================================
   Deep audit 2026-04-18 — Batch 3: Modal mobile polish
   ========================================================================= */

/* H7 — iOS Safari auto-zooms on <input>/<textarea> focus if font-size < 16px.
   Base rule was 0.98rem (~15.7px). Bump to 1rem universally; visual impact
   is negligible at desktop and major win at mobile. */
.contact-modal-field input,
.contact-modal-field textarea{
  font-size: 1rem;
}

/* M3 — On short viewports (landscape phones, small laptops with keyboards
   up) the max-height:calc(100vh - 2.5rem) can still push the Send button
   below the fold. Cap at 85vh and force internal scroll. */
@media (max-height: 700px){
  .contact-modal-card{
    max-height: 85vh;
  }
}

/* Very narrow phones: give the modal a bit more horizontal breathing room
   and make the close button the full 44px WCAG target. */
@media (max-width: 420px){
  .contact-modal-backdrop{
    padding: 0.75rem;
  }
  .contact-modal-card{
    padding: 1.25rem 1.1rem 1.1rem;
    border-radius: 14px;
  }
  .contact-modal-close{
    width: 44px;
    height: 44px;
    top: 0.65rem;
    right: 0.65rem;
  }
  .contact-modal-field{
    margin-bottom: 0.85rem;
  }
  .contact-modal-field textarea{
    min-height: 110px;
  }
}
/* End Batch 3 */

/* =========================================================================
   Deep audit 2026-04-18 — Batch 4: Flagship article SVG text legibility
   ========================================================================= */

/* H6 — Inline SVGs in the flagship articles use 9/10/11 px text attributes.
   At min-width:540px on a 375px viewport the SVG is already unscaled
   (parent scrolls), so text stays at authored size — 9 and 10 are still
   too small to read comfortably. CSS font-size overrides the SVG
   presentation attribute without changing text position, so glyphs just
   grow a touch at their anchor points. A ≤2pt bump keeps them inside
   their layout zones. At very narrow widths we hide the smallest
   decorative captions entirely. */

/* On every viewport below tablet, promote tiny SVG text. */
@media (max-width: 960px){
  .article-shell svg text[font-size="9"],
  .page-frame svg text[font-size="9"]{
    font-size: 11px;
  }
  .article-shell svg text[font-size="10"],
  .page-frame svg text[font-size="10"]{
    font-size: 11px;
  }
}

/* On very narrow phones, hide the smallest authored tier entirely —
   decorative fine-print is illegible at that scale and adds visual noise. */
@media (max-width: 420px){
  .article-shell svg text[font-size="9"],
  .page-frame svg text[font-size="9"]{
    display: none;
  }
}

/* For SVGs that have `role="img"` with an accompanying caption or aria-label,
   this is safe — the meaning survives without the hidden fine-print. */
/* End Batch 4 */

/* =========================================================================
   Deep audit 2026-04-18 — Batch 6: Page-level hardcode fixes
   ========================================================================= */

/* M2 — Inline 2-col grid in guides/sac-data-modeling-implementation.html
   now carries .stack-layers-grid. Collapse at tablet-narrow. */
@media (max-width: 720px){
  .stack-layers-grid{
    grid-template-columns: 1fr !important;
  }
}

/* M4 — Consistent card-icon sizing across architecture-hub pages so CSS
   (not per-SVG height="40") controls the footprint. */
.card-icon .svg-diagram{
  margin: 0 0 0.8rem;
  display: flex;
  justify-content: flex-start;
}
.card-icon .svg-diagram svg{
  width: 40px;
  height: 40px;
  max-width: 100%;
}
/* End Batch 6 */

/* =========================================================================
   Deep audit 2026-04-18 — Batch 7: Generic <summary> tap-target rule
   ========================================================================= */

/* L2 & L3 — Every <details><summary> across the site should meet the WCAG
   44×44 CSS-pixel minimum. Covers Sources <details>, TL;DR <details>,
   FAQ <details>, and any future uses. */
details > summary{
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.35rem 0.25rem;
  line-height: 1.3;
}

details > summary::marker{
  font-size: 0.9em;
}

/* Firefox-specific marker handling (no ::marker support for summary in
   older versions). */
details > summary::-webkit-details-marker{
  margin-right: 0.35rem;
}
/* End Batch 7 */

/* ==========================================================================
   Batch 9 — Top bar design polish (2026-04-18)

   Goals (from design critique):
   1. Strip permanent pill outlines on nav links → reserve pill for hover + active
   2. Strengthen [aria-current="page"] with tint + underline
   3. Add search icon inside the input + distinct field tint
   4. Refine brand wordmark (Fraunces, tighter tracking)
   5. Sticky header on desktop (not mobile — preserves content height)
   6. Explicit :focus-visible ring on all top-bar interactives

   These rules live AT THE END of the file so cascade order wins over the
   earlier definitions at lines 814–817, 1045–1104, and 2480–2508. Specificity
   is intentionally kept simple so each override is easy to trace.
   ========================================================================== */

/* 1 + 2 — Nav links: quiet by default; pill only on hover and active page */
.site-header .main-nav a{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 8px 14px;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--text-soft);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.site-header .main-nav a:hover{
  background: rgba(24, 78, 59, 0.07);
  border-color: transparent;
  color: var(--accent);
  transform: none;
  box-shadow: none;
}

.site-header .main-nav a[aria-current="page"]{
  background: rgba(24, 78, 59, 0.11);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(24, 78, 59, 0.45);
}

/* 3 — Search: icon inside + distinct tint + clearer focus state */
.site-search{
  padding-left: 0; /* icon is absolutely positioned */
}

.site-search::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat center / contain;
  pointer-events: none;
  opacity: .72;
  z-index: 1;
}

.site-header .search-input{
  padding-left: 36px;
  background: rgba(245, 240, 228, 0.55);
  border-color: rgba(23, 56, 46, 0.16);
}

.site-header .search-input:hover{
  background: rgba(245, 240, 228, 0.82);
}

.site-header .search-input:focus,
.site-header .search-input:focus-visible{
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24, 78, 59, 0.14);
  outline: none;
}

/* 4 — Brand wordmark: Fraunces serif, tighter tracking, better vertical rhythm */
.site-header .brand{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.1;
  color: var(--text);
}

.site-header .brand:hover{
  color: var(--accent);
}

/* 5 — Sticky header on desktop (≥761px). Disabled on mobile to preserve
       vertical space for content on small viewports. */
@media (min-width: 761px){
  .site-shell > .site-header{
    position: sticky;
    top: 10px;
    z-index: 120;
    /* Slightly more opaque + denser shadow while sticky so it reads against
       scrolling content below. */
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
    box-shadow: 0 6px 22px -14px rgba(17, 24, 20, 0.18), var(--shadow-soft);
  }
}

/* 6 — Focus-visible rings on top-bar interactives (keyboard users) */
.site-header .main-nav a:focus-visible,
.site-header .brand:focus-visible{
  outline: 2px solid rgba(24, 78, 59, 0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* 7 — Tighten the brand→nav gap.
   Root cause of the "double space" on the left: justify-content:space-between
   on a 3-child flex container evenly distributes ALL extra horizontal space,
   so on wide viewports the brand sits far from the first nav item.

   Fix: anchor at flex-start with a deterministic 28px gap, then push the
   search field right with margin-left:auto. Nav and brand now sit close
   together at a fixed spacing regardless of viewport width. */
.site-header{
  justify-content: flex-start;
  gap: 28px;
}
.site-header .main-nav{
  margin-left: 0;
}
.site-header .site-search{
  margin-left: auto;
}

/* On the narrower desktop bracket (761–900px), shrink that gap slightly so
   the search still fits on one line. */
@media (max-width: 900px) and (min-width: 761px){
  .site-header{ gap: 20px; }
}

/* End Batch 9 */

/* =====================================================================
   Batch 10 — About page editorial polish
   ---------------------------------------------------------------------
   Tighter, scannable author profile: strong lead paragraph, a 4-up
   metrics strip, compact journey timeline, and uniform expertise cards.
   ===================================================================== */

/* Lead paragraph under the author role — slightly larger, calmer line-height */
.author-lead{
  font-size: 1.08rem;
  line-height: 1.65;
  color: #2a3632;
  margin: 10px 0 20px;
}
.author-lead strong{
  color: var(--accent);
  font-weight: 600;
}

/* 4-up metrics strip */
.author-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 4px 0 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(24, 78, 59, 0.12);
  border-bottom: 1px solid rgba(24, 78, 59, 0.12);
}
.author-stat{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.stat-num{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  line-height: 1.1;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.stat-label{
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Collapse to 2-up on tablets, stack on phones */
@media (max-width: 760px){
  .author-stats{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stat-num{ font-size: 1.55rem; }
}
@media (max-width: 420px){
  .author-stats{ grid-template-columns: 1fr 1fr; }
}

/* Journey timeline — compact single-line roles with a muted impact line */
.journey-timeline{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}
.journey-role{
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}
.journey-role:nth-child(even){
  border-left-color: var(--accent-2);
}
.journey-role-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.journey-role-head strong{
  color: #1b2b26;
}
.journey-role-title{
  color: var(--muted);
  font-size: 0.95em;
}
.journey-role-impact{
  margin: 0;
  font-size: 0.94em;
  color: var(--muted);
  line-height: 1.55;
}

/* End Batch 10 */

/* --- Owner-review rebuild (2026-06-14): utility classes used by rebuilt pages --- */
.hero-tagline{font-size:1.125rem;line-height:1.5;color:var(--muted);margin-top:.6rem;font-weight:500;max-width:46ch}
.blog-post-card--featured{border:1px solid var(--accent);box-shadow:var(--shadow-soft)}
.glossary-list{margin:0;padding:0}

/* =====================================================================
   WAVE 3 — W3-01 / W3-02 elevation layer (2026-06-15)
   ---------------------------------------------------------------------
   Scoped to `.w3` (added to <main> on the proof-slice pages: index.html,
   topics/sac.html, about.html). Fully ADDITIVE and reversible — the other
   75 pages carry no `.w3` class and are untouched. Snapshot of pre-edit
   files: _attic/w3-01-2026-06-15/. Once the bar is locked and rolled out
   (W3-04), these rules get promoted to the base layer and the scoping drops.
   Intent: editorial typographic rhythm, an 8px spacing scale, a readable
   measure, tighter hierarchy, and consistent card/diagram treatment —
   WITHIN the existing visual identity (no palette or font-identity change).
   ===================================================================== */
.w3{
  /* 8px-based spacing scale */
  --w3-1:4px;  --w3-2:8px;  --w3-3:12px; --w3-4:16px; --w3-5:24px;
  --w3-6:32px; --w3-7:48px; --w3-8:64px; --w3-9:88px;
  /* comfortable reading measure for long-form prose */
  --w3-measure:66ch;
  /* fluid cadence between major sections */
  --w3-section:clamp(2.75rem, 2rem + 2.2vw, 4rem);
}

/* Fix a stray font reference: 'Fraunces' is never loaded — use the site's
   display serif so numerals match the headings cross-platform. */
.w3 .stat-num{font-family:var(--font-display)}

/* --- Vertical rhythm: a single consistent cadence between sections --- */
.w3 .ai-premium-hero{margin:var(--w3-5) 0 var(--w3-section)}
.w3 .ai-premium-section,
.w3 > section{margin-block:var(--w3-section)}
.w3 > section:last-child{margin-bottom:var(--w3-6)}

/* --- Section heads: kicker -> headline -> dek; 2-col when a dek exists,
       full-width when the head is a headline only (homepage) --- */
.w3 .ai-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--w3-6);
  align-items:end;
  margin-bottom:var(--w3-5);
}
.w3 .ai-section-head:not(:has(p)){display:block}
.w3 .ai-section-head > div{margin:0}
.w3 .ai-section-head p{max-width:50ch;margin:0;font-size:1.05rem}

/* --- Prose: a measure for flowing copy + calm paragraph rhythm --- */
.w3 .section-content > p{max-width:var(--w3-measure);font-size:1.0625rem;margin:0 0 var(--w3-4)}
.w3 .lead{max-width:62ch;font-size:clamp(1.16rem, 1.04rem + .5vw, 1.4rem);line-height:1.62}

/* --- Headings: tighten the gap to the content that follows --- */
.w3 h2{margin-bottom:var(--w3-3)}
.w3 h3{margin-bottom:var(--w3-2)}

/* --- Diagrams: one framed, centered figure treatment with captions --- */
.w3 .svg-diagram{
  margin:var(--w3-6) auto;
  padding:clamp(16px, 2vw, 28px);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,242,.9));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}
.w3 .svg-diagram img,
.w3 .svg-diagram svg{margin:0 auto;max-width:100%;height:auto}
/* When a .svg-diagram is nested inside an already-framed .ai-visual-card
   (e.g. the SAC hero), don't double-frame it. */
.w3 .ai-visual-card .svg-diagram{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.w3 .svg-diagram figcaption,
.w3 .ai-visual-card figcaption{margin-top:var(--w3-3);font-size:.95rem;color:var(--muted);text-align:center;line-height:1.55}

/* --- Cards: unify radius + a refined, consistent hover lift --- */
.w3 .blog-post-card,
.w3 .ai-premium-card,
.w3 .scenario-card,
.w3 .decision-module{border-radius:24px}
.w3 .blog-post-card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.w3 .blog-post-card:hover{transform:translateY(-3px);border-color:rgba(23,56,46,.22);box-shadow:var(--shadow)}
.w3 .blog-post-card h3{line-height:1.22}
.w3 .blog-post-card--featured{padding:clamp(28px, 3vw, 40px)}
.w3 .blog-post-card--featured h3{font-size:clamp(1.4rem, 1.2rem + .8vw, 1.9rem);line-height:1.18}

/* =====================================================================
   About page (trust anchor) — editorial layout, scoped to `.w3`
   ===================================================================== */
.w3 .about-header{margin-top:var(--w3-5)}
.w3 .about-header-grid{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:var(--w3-7);
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,242,.9));
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(24px, 3vw, 40px);
  box-shadow:var(--shadow-soft);
}
.w3 .about-photo{width:200px;height:200px;border-radius:50%;object-fit:cover;aspect-ratio:1/1;border:1px solid var(--line);display:block}
.w3 .about-header .author-stats{grid-template-columns:repeat(3,1fr)}
.w3 .about-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w3-5)}
.w3 .about-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w3-5)}
.w3 .about-grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w3-4)}
.w3 .about-achievement{padding:var(--w3-4) var(--w3-5);background:var(--accent-light);border:1px solid rgba(23,56,46,.12);border-radius:16px}
.w3 .about-achievement p{margin:0}
.w3 .about-tile-center{text-align:center}
@media (max-width:820px){
  .w3 .about-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .w3 .about-header-grid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:var(--w3-5)}
  .w3 .about-header .author-stats{grid-template-columns:repeat(3,1fr)}
  .w3 .about-grid-2,.w3 .about-grid-3,.w3 .about-grid-4{grid-template-columns:1fr}
}
.w3 .author-role{font-size:1.05rem;color:var(--accent);font-weight:600;margin:0 0 var(--w3-4)}
.w3 .about-connect-actions{margin-top:var(--w3-5)}
.w3 .about-languages{margin-top:var(--w3-4);font-size:.9rem;color:var(--muted)}
/* W3 mobile: collapse the 2-column section head (our rule outranks the base
   mobile collapse, so restore single-column stacking on small screens). */
@media (max-width:860px){
  .w3 .ai-section-head{grid-template-columns:1fr;gap:var(--w3-3)}
}
/* Article-template prose (scenarios-datasphere / article.html): apply the same
   reading measure as .section-content so its body matches the rest of the site. */
.w3 .post-article p,
.w3 .post-article li,
.w3 .article-intro p{max-width:var(--w3-measure)}

/* =====================================================================
   LAYOUT — full-width, left-aligned, space-filling  (2026-06-19, rev 2)
   ---------------------------------------------------------------------
   Supersedes the centered-spine revision. Per owner direction: USE the
   horizontal space (no narrow centered column, no dead side bands) and
   keep headings on one line on desktop/laptop where the width allows.
     1) Widen the content frame so it fills large screens (sane cap).
     2) Left-align all flowing text to one shared edge and fill the frame
        width (no measure cap, no auto margins).
     3) Tune heading sizes so long headlines fit one line at >=1024px;
        they wrap normally on tablet/mobile.
   Card grids, framed diagrams and visual-hero pages keep their behaviour.
   No HTML/content changes. Scoped to .w3. Backup: _attic/styles.css.2026-06-18.bak
   ===================================================================== */

/* 1) Wider frame — fill the screen, capped for sanity */
.site-shell{ max-width: 1640px; }
main.w3{ max-width: min(1560px, 94vw); margin-inline: auto; }

/* 2) Flowing text fills the frame width, left-aligned
   (reverts the earlier centering + measure caps). Card grids, figures and
   other non text-flow children are NOT matched and stay full width. */
.w3 .ai-premium-hero:not(:has(.ai-premium-hero-grid)):not(:has(.ai-visual-card)),
.w3 .ai-section-head:not(:has(p)),
.w3 .lead,
.w3 .section-content > p,
.w3 .section-content > ul,
.w3 .section-content > ol,
.w3 .section-content > h2,
.w3 .section-content > h3,
.w3 .article-intro p,
.w3 .post-article p,
.w3 .post-article ul,
.w3 .post-article ol{
  max-width: none;
  margin-inline: 0;
}
.w3 .ai-section-head:not(:has(p)){ display: block; }

/* 3) Headings on one line for desktop/laptop (>=1024px). Reduced sizes so
   even long headlines fit the wide frame on a single line; they wrap
   normally below 1024px (tablet/mobile). */
@media (min-width: 1024px){
  .w3 .ai-premium-hero h1,
  .w3 .hero-copy h1,
  .w3 .page-frame > h1{
    font-size: clamp(2.1rem, 0.2rem + 2.4vw, 3.0rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
  .w3 .ai-section-head h2,
  .w3 .ai-premium-section > h2,
  .w3 .section-content > h2{
    font-size: clamp(1.7rem, 0.7rem + 1.6vw, 2.5rem);
    text-wrap: balance;
  }
}

/* =====================================================================
   Responsive Layout Audit 2026-11-11 — see RESPONSIVE_AUDIT_TRACKER_2026-11-11.md
   G-01 + OD-1 + OD-5  Header 761–1240px: two rows (brand + search | all links).
                Root cause of the overlap: `body :where(*){min-width:0}` (line 969)
                lets nav links shrink below their text when the single row is too
                narrow (901–1219px). From 1241px the single row fits (links may give
                up part of their padding, never their text — measured with the
                site's real fonts).
   G-02 + OD-2  Phones (≤760px): the seven links sit in one swipeable row.
   G-07 + OD-6  Touch devices: search text 16px (iOS Safari zooms into fields under 16px).
   G-05 + OD-4  ≥1241px: header and footer use the same frame as the content (main.w3).
   Owner decisions recorded in the tracker (OD-1, OD-2, OD-4, OD-5, OD-6).
   ===================================================================== */

/* G-05 / OD-4 — wide screens (single-row header): header and footer share the
   content frame (same width and edges as main.w3); links start next to the brand.
   Limited to ≥1241px so tablet headers keep their measured widths and layout. */
@media (min-width: 1241px){
  .site-shell > .site-header,
  .site-shell > .site-footer{
    max-width: min(1560px, 94vw);
    margin-left: auto;
    margin-right: auto;
  }
  .site-header .main-nav{ justify-content: flex-start; }
  /* C-08: from 1,241 to ≈1,311px the row is tight, so the links give up some padding;
     keep each label centred in its pill (active/hover) instead of drifting left */
  .site-header .main-nav a{ justify-content: center; }
}

/* G-01 / OD-1 + G-08 / OD-5 — 761–1240px: row 1 = brand + search, row 2 = all seven links */
@media (min-width: 761px) and (max-width: 1240px){
  .site-header{ flex-wrap: wrap; row-gap: 8px; column-gap: 20px; }
  .site-header .site-search{ order: 1; margin-left: auto; }
  .site-header .main-nav{ order: 2; flex: 1 1 100%; width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
  .site-header .main-nav a{ padding: 8px 10px; }
}

/* G-02 / OD-2 — phones: one swipeable row of links (header ≈200px instead of ≈510px) */
@media (max-width: 760px){
  .site-header .main-nav{
    flex-wrap: nowrap !important;   /* beats the !important wrap at line ~4338 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 0;
    /* C-07: fixed 40px fade (was 12% of the row, up to 84px at 760px), so the
       last link ends fully visible once the row is scrolled to its end */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .site-header .main-nav::-webkit-scrollbar{ display: none; }
  /* trailing space so the last link can scroll clear of the fade
     (C-07: align-self stretch gives the spacer a height — Firefox ignores a
     zero-height box when it sizes the scroll range) */
  .site-header .main-nav::after{ content: ""; flex: 0 0 40px; align-self: stretch; }
  .site-header .main-nav a{ flex: 0 0 auto; padding: 10px 14px; }
}
/* G-07 / OD-6 — touch devices: 16px search text so iOS Safari does not zoom on tap */
@media (hover: none) and (pointer: coarse){
  .site-header .search-input{ font-size: 16px; }
}
/* G-12 / C-10 — W3 section heads (topic hubs). The W3 rule bottom-aligns the head
   (kicker + headline) with its dek. That only works while the dek is the shorter
   column: with a long dek the headline dropped to the bottom of the row, leaving up
   to 603px of empty space above it (topics/sac.html at 1,024px), and heads holding
   several paragraphs or a card grid were laid out zig-zag across the two columns.
   1) Dek still bottom-aligned when it is shorter (unchanged look); when it is longer
      the headline now stays at the top. */
.w3 .ai-section-head{ align-items: start; }
.w3 .ai-section-head > :last-child{ align-self: end; }
/* 2) Heads with more than one paragraph (or a card grid) read top to bottom:
      headline, then the text — full frame width like the page's other flowing text. */
.w3 .ai-section-head:has(> :nth-child(3)){ display: block; }
.w3 .ai-section-head:has(> :nth-child(3)) > * + *{ margin-top: var(--w3-4); }
.w3 .ai-section-head:has(> :nth-child(3)) > p{ max-width: none; }
/* G-11 / OD-7 = A / C-11 — topic-hub top section (8 hub pages), 861px and wider:
   the diagram card stretches to the height of the two cards beside it (it was
   240–960px shorter, leaving that much empty space under it); diagram + caption
   centred inside; top edges aligned (its 24px figure margin dropped in this grid). */
@media (min-width: 861px){
  .w3 .ai-premium-hero-grid{ align-items: stretch; }
  .w3 .ai-premium-hero-grid > .ai-hero-visual{
    align-self: stretch;
    margin-block: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* OD-8 / C-12 — 561–760px: row 1 = title + search, row 2 = the swipeable links
   (header 204px → 154px; below 561px title and search do not fit side by side) */
@media (min-width: 561px) and (max-width: 760px){
  .site-header .site-search{ order: 1; margin-left: auto; }
  .site-header .main-nav{ order: 2; flex: 1 1 100%; }
}
/* G-14 / C-13 — card grids where ONE card title is an <h2> (kept for the heading-order
   fix, AUDIT_REPORT.md / W1-16) and its siblings are <h3>: the <h2> took the section
   heading size (32–46px, weight 700), twice the size of its siblings, and its long words
   broke mid-word at 1,000–1,366px ("Connecto/rs", "Segmentati/on"). It now uses exactly
   the sibling <h3> card-title style; the markup (heading levels) is unchanged. */
.w3 :is(.ai-capability-grid, .ai-clean-grid, .homepage-topic-grid, .homepage-route-grid, .governance-quick-grid) h2{
  font-size: clamp(20px, 1.1rem + 0.4vw, 25px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-top: 0;
  margin-bottom: var(--w3-2);
}
.page-frame :is(.ai-capability-grid, .ai-clean-grid, .homepage-topic-grid, .homepage-route-grid, .governance-quick-grid) h2{ margin-top: 1.75rem; }
.w3 :is(.ai-capability-grid, .ai-clean-grid, .homepage-topic-grid, .homepage-route-grid, .governance-quick-grid) :is(.ai-stage-card, .ai-roi-card, .ai-capability-card, .ai-role-card, .ai-kpi-card, .ai-detail-card, .ai-link-card) h2{ font-size: 1.3rem; line-height: 1.15; }
.w3 :is(.ai-capability-grid, .ai-clean-grid, .homepage-topic-grid, .homepage-route-grid, .governance-quick-grid) .ai-premium-card h2{ font-size: 1.3rem; line-height: 1.18; }
@media (max-width: 480px){
  .w3 :is(.ai-capability-grid, .ai-clean-grid, .homepage-topic-grid, .homepage-route-grid, .governance-quick-grid) h2{ font-size: clamp(16px, 3.5vw, 20px); }
}
/* G-16 / OD-10 = S / C-15 — data tables on phones (≤600px): each row becomes a card and
   each value shows its column name (data-label). Only tables marked class="rtable" (added
   page by page together with the labels) are affected; ≥601px nothing changes.
   C-115 (G-43, OD-26): up to 820px — on small tablets and phones in landscape the table layout left
   short-phrase columns one word per line (5.5–9 characters per line in Avenir); ≥821px nothing changes.
   !important is needed here because several tables carry inline cell/row styles. */
@media (max-width: 820px){
  table.rtable,
  table.rtable > tbody,
  table.rtable > tbody > tr,
  table.rtable > tbody > tr > td,
  table.rtable > tbody > tr > th{ display: block !important; width: auto !important; }
  table.rtable{ border: 0 !important; background: none !important; }
  table.rtable > thead,
  table.rtable > tbody > tr.rtable-head{
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  table.rtable > tbody > tr{
    background: var(--surface) !important; border: 1px solid var(--line) !important;
    border-radius: 16px; margin: 0 0 12px; padding: 4px 0;
  }
  table.rtable > tbody > tr > td,
  table.rtable > tbody > tr > th{
    padding: 6px 14px !important; border: 0 !important; text-align: left !important; background: none !important;
  }
  table.rtable > tbody > tr > :first-child{ padding-top: 12px !important; font-size: 15px; }
  table.rtable > tbody > tr > :last-child{ padding-bottom: 12px !important; }
  table.rtable [data-label]::before{
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--accent);
  }
  /* the box around a stacked table no longer needs to scroll or clip */
  :has(> table.rtable){ overflow: visible !important; }
  .comparison-table-wrapper:has(> table.rtable){ border: 0; border-radius: 0; }
}
/* G-17 / C-17 — link buttons on phones and tablets. They are full width there (lines ~556,
   ~1346), but `white-space:nowrap` (line ~1468) kept long labels on one line: 67 labels on 26
   pages ran past their button at 320–761px (by up to 363px) and were cut off. Long labels now
   wrap inside the button; labels that fit keep their single line (unchanged). */
@media (max-width: 960px){
  .route-strip a{ white-space: normal; }
}
@media (max-width: 760px){
  .route-pill,
  .primary-link,
  .secondary-link{ white-space: normal; }
}
/* C-18 — topics/ai.html reuses the BTP hub's "Where to go next" link grid (`.btp-link-grid`),
   but that grid is only styled inside `.btp-premium-page` (line ~732), so on the AI hub the two
   link cards stacked full width at every size (1,306px wide at 1,440px). Same grid as the BTP hub. */
main:not(.btp-premium-page) .btp-link-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
@media (max-width: 720px){
  main:not(.btp-premium-page) .btp-link-grid{ grid-template-columns: 1fr; }
}
/* G-18 / C-22 — same root cause as G-14, one level down: the heading-order fix
   (AUDIT_REPORT.md: "H4 tags replaced with H3") promoted only the FIRST card title of
   38 card grids on 12 pages from <h4> to <h3>. That one title rendered in the display
   serif at 21–23px while its sibling titles are 16px sans, so the first card never lined
   up with the others. It now takes exactly the sibling <h4> style; heading levels unchanged.
   Matches only grids whose 2nd card has an <h4> title (and no <h3>) and whose 1st card has
   an <h3> and no <h4>. */
.w3 :is(.ai-capability-grid, [style*="grid-template-columns"]):has(> :nth-child(2) h4):not(:has(> :nth-child(2) h3)) > :first-child:not(:has(h4)) h3{
  font-family: inherit;
  font-size: 1em;
  line-height: inherit;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}
/* G-19 / OD-11 (owner, 2026-11-12) — heading scale: page title > section heading > card title
   at every width. Before: section headings were 32-46px (line 65) — larger than the 37.8px page
   title on 63 of 79 pages at 1,440px, because the W3 size rule (line ~5123) only reaches
   .ai-section-head / .ai-premium-section / .section-content headings — and 18-19.2px on phones
   (line ~3980), smaller than the 20.8px card titles below them (37 pages). Now every h2 without
   a component-specific size takes the W3 section-heading size at every width (27.2px up to
   ~1,050px, 34.2px at 1,440px, 40px from 1,800px), 24px on phones, with balanced line breaks.
   Card titles and components with their own h2 size (related posts, featured post, card panels,
   card-grid titles C-13) are unchanged. Screen only: print keeps its 22px (line ~3777). */
@media screen{
  h2{ font-size: clamp(1.7rem, 0.7rem + 1.6vw, 2.5rem); text-wrap: balance; }
  /* resource-center.html: its title was a fixed 36px (line ~2372), below the section headings
     from ~1,600px; it now follows the W3 page-title size where that is larger than 36px. */
  .author-profile h1{ font-size: max(36px, clamp(2.1rem, 0.2rem + 2.4vw, 3rem)); }
}
@media screen and (max-width: 480px){
  h2{ font-size: 1.5rem; }
  /* page titles without a hero size rule (about, executive-guide, scenarios-datasphere) were 24px
     on phones (line ~3975), no larger than the section headings; same 30.4px as the other 75 pages. */
  h1{ font-size: 1.9rem; }
}
/* G-15 / OD-12 (owner, 2026-11-12) — balanced rows in card grids: no card left alone on the
   last row. 4 cards in a 3-column grid show as 2 + 2; a lone last card in a 3-column grid (7, 10
   cards) moves to the middle column; an odd count in a 2-column grid, or 5 cards in a 4-column
   grid, gets its last card centred at one column width. Each rule applies only in the width range
   where that grid class shows that many columns (measured on all 79 pages, 320–2,560px). Grids
   with an inline auto-fit column rule are handled page by page. Gaps: 16px (20px related posts,
   24px about grid and inline-styled grids). */
@media (min-width: 981px){
  .ai-capability-grid:not([style*="grid-template-columns"]):has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-capability-grid:not([style*="grid-template-columns"]) > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
}
@media (min-width: 901px){
  .related-posts-grid:not([style*="grid-template-columns"]):has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-posts-grid:not([style*="grid-template-columns"]) > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
}
@media (min-width: 1101px){
  :is(.homepage-reading-grid, .ai-clean-grid-3, .architecture-question-grid):has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.homepage-reading-grid, .ai-clean-grid-3, .architecture-question-grid) > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
  .ai-clean-grid-4 > :last-child:nth-child(4n+1):not(:first-child){ grid-column: 2 / span 2; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 961px){
  .governance-premium-page .governance-quick-grid:has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governance-premium-page .governance-quick-grid > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
}
@media (min-width: 1025px){
  .datasphere-premium-page .datasphere-score-grid > :last-child:nth-child(4n+1):not(:first-child){ grid-column: 2 / span 2; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 761px) and (max-width: 980px){
  .ai-capability-grid:not([style*="grid-template-columns"]) > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
  .ai-capability-grid[style*="grid-template-columns"] > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
@media (min-width: 861px){
  .ai-clean-grid-2 > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 761px) and (max-width: 1100px){
  :is(.ai-clean-grid-3, .ai-clean-grid-4) > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 641px) and (max-width: 1100px){
  .architecture-question-grid > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 721px) and (max-width: 1024px){
  .datasphere-premium-page .datasphere-score-grid > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 721px){
  .bdc-premium-page .bdc-link-grid > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 761px) and (max-width: 960px){
  .governance-premium-page .governance-quick-grid > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (min-width: 761px) and (max-width: 820px){
  .w3 .about-grid-3 > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
/* P15-a / C-28 — closing "Scope note" + "Where next" pair (.homepage-finish-grid; used on
   architectures/integration-vs-platform-extension-boundaries.html and integration-patterns.html):
   the two cards carried different outer margins (24px/24px from `.page-frame .note-card`, 40px/0
   from the where-next rules), so side by side (>=1,101px) their top edges sat 16px apart and their
   bottom edges 24px apart. The grid's own margin and gap already space them; both cards align now. */
body .page-frame .homepage-finish-grid > :is(.note-card, .where-next-card){ margin: 0; }
/* G-15 / OD-12 + OD-14 (owner, 2026-11-12) — card grids with an inline auto-fit column rule
   (index.html: Recent articles 4 cards, More reading 8 cards, the 3-card decision grid;
   architectures.html: 7 decision grids + related reading; comparisons.html: 10 decision grids +
   related reading). Their column count follows the grid's own width (track minimum 280px or 300px,
   gap 24px; on these pages the grid is 94vw - 48px wide from 761px and 94vw - 32px below), so the
   ranges below are where that count is 2, 3, 4 or 5. Same balancing as above; the homepage Recent
   articles grid shows 2 + 2 instead of 3 + 1 (OD-14 replaces D11's accepted wrap) and 4 in a row from
   1,405px. 280px tracks: 2 columns to 995px, 3 to 1,319px, 4 to 1,642px, 5 above. 300px tracks: 2
   columns from 698px, 3 from 1,060px, 4 from 1,405px. */
@media (min-width: 761px) and (max-width: 995px){
  .ai-capability-grid[style*="minmax(min(280px, 100%)"] > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
@media (min-width: 656px) and (max-width: 995px){
  .decision-module-grid[style*="minmax(min(280px, 100%)"] > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
@media (min-width: 996px) and (max-width: 1319px){
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="minmax(min(280px, 100%)"] > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
}
@media (min-width: 1320px) and (max-width: 1642px){
  [style*="minmax(min(280px, 100%)"] > :last-child:nth-child(4n+1):not(:first-child){ grid-column: 2 / span 2; justify-self: center; width: calc((100% - 24px) / 2); }
}
@media (min-width: 1320px){ /* C-30: 6 cards as 3 + 3 also where the auto-fit count is 4 (was 4 + 2) */
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(6):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1643px){
  [style*="minmax(min(280px, 100%)"] > :last-child:nth-child(5n+1):not(:nth-child(-n+6)){ grid-column: 3; }
}
@media (min-width: 698px) and (max-width: 1059px){
  [style*="minmax(min(300px, 100%)"] > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
@media (min-width: 1060px) and (max-width: 1404px){
  [style*="minmax(min(300px, 100%)"]:has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="minmax(min(300px, 100%)"] > :last-child:nth-child(3n+1):not(:nth-child(-n+4)){ grid-column: 2; }
}
@media (min-width: 1405px){
  [style*="minmax(min(300px, 100%)"] > :last-child:nth-child(4n+1):not(:first-child){ grid-column: 2 / span 2; justify-self: center; width: calc((100% - 24px) / 2); }
}
/* G-21 / C-31 — card grids whose columns are written in the page itself ("grid-template-columns:
   1fr 1fr" / "1fr 1fr 1fr", 26 grids on 10 pages) kept two or three columns on every screen: on
   phones that is 80-150px per column, with words split mid-word (comparisons/sac-vs-bw, planning,
   ai-joule-agents, ...). They now follow the site's own card-grid steps: one column up to 760px;
   the three-column ones show two columns at 761-1,100px (a lone third card is centred, OD-12);
   wider screens unchanged. All these grids use a 24px gap where a card can be alone. */
@media (max-width: 760px){
  main [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important; }
}
@media (min-width: 761px) and (max-width: 1100px){
  main [style*="grid-template-columns: 1fr 1fr 1fr"]{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main [style*="grid-template-columns: 1fr 1fr 1fr"] > :last-child:nth-child(odd):not(:first-child){ grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
}
/* G-16 / C-33 — table rows that hold one cell across all columns (`colspan` section titles,
   e.g. comparisons/sac-vs-power-bi) are marked class="rtable-section": on phones they become
   small section headings between the row cards instead of cards themselves. >=601px unchanged (C-115: >=821px). */
@media (max-width: 820px){
  table.rtable > tbody > tr.rtable-section{ background: none !important; border: 0 !important; border-radius: 0; margin: 22px 0 8px; padding: 0; }
  table.rtable > tbody > tr.rtable-section > td{ padding: 0 2px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
}
/* G-22 / C-35 — the author + meta block of the essay template used on 22 pages
   (`.post-author-premium`, `.article-meta-premium`: beginner-roadmap, landscape-2026, the
   comparisons sac-vs-tableau / sac-vs-qlik / datasphere-vs-databricks, ...) had no styles at all:
   "SS" showed as a plain text line above the name, and the date, reading time and topic tags ran
   as bare text. Same look as the `.post-meta` block on the other 57 pages (line ~2103): round 36px
   avatar beside the name and role; date · reading time · topic tags in one wrapping row. */
.post-author-premium{ display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.post-author-premium .post-author-avatar{ flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.post-author-premium .author-name{ font-size: 14px; font-weight: 600; color: var(--text); }
.post-author-premium .author-title{ font-size: 13px; color: var(--muted); }
.article-meta-premium{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.article-meta-premium .meta-separator{ width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
@media (max-width: 480px){ .article-meta-premium{ gap: 8px 12px; } .article-meta-premium .meta-separator{ display: none; } }
/* G-15 / OD-12 — C-36: `.decision-module-grid` without an inline column rule (only on
   comparisons/datasphere-vs-business-data-cloud.html: 4 cards; auto-fit, 240px tracks, 22px gap). There the
   grid is 94vw - 134px wide, so auto-fit shows 3 columns at 955.32–1,234.04px (3 + 1) and 4 from 1,234.05px.
   The 4 cards show 2 + 2 up to 1,234.04px (same as C-27); from 761px the forced 2 columns equal the auto-fit
   layout wherever that already has 2. */
@media (min-width: 761px) and (max-width: 1234.04px){
  .decision-module-grid:not([style]):has(> :nth-child(4):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* G-15 / OD-12 — C-38: a grid with exactly two cards in a three-column layout left the third column empty
   (the pair sat on the left with 268–511px of empty space beside it; 15 grids on 9 pages: `.ai-capability-grid`
   from 981px, `.related-posts-grid` from 901px). The two cards now share the row (2 columns), like the 2 + 2 rows
   of C-27. */
@media (min-width: 981px){
  .ai-capability-grid:not([style*="grid-template-columns"]):has(> :nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px){
  .related-posts-grid:not([style*="grid-template-columns"]):has(> :nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* G-23 / C-42 — a diagram figure placed straight inside a framed `.surface-card` (comparisons/bw-modernize-or-still-fit,
   support timeline): the card lays out its children as a flex column, so the figure's auto side margins
   (`.w3 .svg-diagram`) shrank it to the svg's fallback width — the timeline was 300px wide in a 1,160px card at 1,440px,
   its text 2–4px. Same treatment as `.w3 .ai-visual-card .svg-diagram`: no second frame, no auto margins, full card width. */
.w3 .surface-card > .svg-diagram{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
/* G-24 / C-43 — `.card-badge` (comparisons/bw-modernize-or-still-fit: 9 badges, 3 of them with an inline background
   colour; integration-middleware: 5) had no CSS at all: full-width text lines, and on the three coloured ones dark text
   on #184E3B / #b8421a / #666 (contrast 1.8–3.1:1) with no padding. Styled like the site's pill badges (`.content-badge`);
   white text where the page sets the background colour (5.5–9.6:1). */
.card-badge{ display:inline-flex; align-self:flex-start; align-items:center; max-width:100%; margin:0 0 .75rem; padding:4px 10px;
  border-radius:999px; border:1px solid rgba(24,78,59,.18); background:rgba(24,78,59,.08); color:var(--accent);
  font-size:.75rem; font-weight:700; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; }
.card-badge[style*="background"]{ color:#fff; border-color:transparent; }
/* G-27 / C-48 — link cards side by side (resource-center: 10 `.scenario-card`s that end in a link line under a divider):
   the grid stretched the cards to the row height but their content was top-aligned, so the dividers and link lines of the
   two cards in a row sat 24–96px apart (761–2,560px). The two cards now share the row's lines (CSS subgrid: label, title,
   description, link line), so dividers and link lines line up; where one title in a row runs to two lines (761–1,024px)
   the other card's description starts one line lower. Browsers without subgrid get a flex column whose description grows
   (link lines at the card bottom). The margins restate the block layout's collapsed gaps (28/15/14px). Matches no other
   card on the site. */
.scenario-card:has(> .scenario-problem + p:not([class]):last-child){ display:flex; flex-direction:column; }
.scenario-card:has(> .scenario-problem + p:not([class]):last-child) > .scenario-industry{ margin-bottom:0; }
.scenario-card:has(> .scenario-problem + p:not([class]):last-child) > h3{ margin-bottom:0; }
.scenario-card:has(> .scenario-problem + p:not([class]):last-child) > .scenario-problem{ flex-grow:1; margin-bottom:2px; }
@supports (grid-template-rows: subgrid){
  .scenario-card:has(> .scenario-problem + p:not([class]):last-child){ display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; }
}
/* G-27 / C-49 — architectures: the five "question" cards (`.architecture-question-grid > .route-card`: label, title,
   description, link chips) ended their chip rows 22–84px apart across a row (641–2,560px). The cards in a row now share
   its lines (CSS subgrid), so titles, descriptions and chip rows start on the same lines. The lone fifth card (centred at
   641–1,100px, OD-12) keeps its flex layout: Firefox sized a centred subgrid card from the full row width and let its
   text run out of the card. The chip row keeps its own height (a stretched chip row stretched the chips). */
@supports (grid-template-rows: subgrid){
  .architecture-question-grid > .route-card:has(> .route-strip:last-child){ display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; }
  .architecture-question-grid > .route-card:has(> .route-strip:last-child) > .route-strip{ align-self:start; }
  @media (min-width: 641px) and (max-width: 1100px){
    .architecture-question-grid > .route-card:last-child:nth-child(odd):not(:first-child){ display:flex; grid-row:auto; }
  }
}
/* G-28 / C-52 (OD-19, owner 2026-11-12) — related-post and recent-article cards: the cards of a row are equal height,
   but the author line followed the title (and excerpt), so it sat at a different height in each card (24–125px apart
   across a row on 55 pages). The card becomes a flex column and its author line goes to the bottom. Flex items keep both
   margins where block layout collapsed them: inside `.page-frame` (title margin-top 1.75rem) the label's 8px bottom margin
   is dropped, so every title stays where it was; elsewhere the title has no top margin and nothing changes. */
.related-posts-grid > .blog-post-card{ display:flex; flex-direction:column; }
.page-frame .related-posts-grid > .blog-post-card:not(:has(> .post-card-excerpt)) > .post-card-category{ margin-bottom:0; }
.related-posts-grid > .blog-post-card > .post-card-meta:last-child{ margin-top:auto; }
/* G-30 / C-56 — the meta row at the top of comparisons/sac-vs-datasphere.html (`.hero-meta` holding `.post-author`,
   `.meta-separator`s, the date, the reading time and a topic tag) had no styles: "SS" showed as a plain text line,
   then the name, the date and the reading time each on a line of their own, the separators as empty lines.
   Same look as the `.post-meta` row on the other comparison pages (line ~2103): round 36px avatar beside the name;
   name · date · reading time · topic tag in one wrapping row. */
.hero-meta:has(> .post-author){ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 20px; font-size: 14px; color: var(--muted); }
.hero-meta > .post-author{ display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.hero-meta > .post-author > .post-author-avatar{ flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.hero-meta:has(> .post-author) > .meta-separator{ width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
@media (max-width: 480px){ .hero-meta:has(> .post-author){ gap: 8px 12px; } .hero-meta:has(> .post-author) > .meta-separator{ display: none; } }
/* G-31 / C-57 — author + meta rows (`.post-meta` on 52 pages, `.article-meta-premium` on 22, `.hero-meta` on
   comparisons/sac-vs-datasphere): where the row wrapped, a separator dot was left at the end or the start of a line
   (16 pages at 900px, 14 at 1,024px, before C-55; on every page with an author row inside the C-55 reading column).
   From 481px the author (avatar, name, role) takes the first line and the dot after it is dropped; up to 700px, where
   date, reading time and tags still wrap, the dots are dropped and the items keep their gap (as at 480px and below). */
@media (min-width: 481px){
  :is(.post-meta, .hero-meta) > .post-author{ flex-basis: 100%; }
  :is(.post-meta, .hero-meta) > .post-author + .meta-separator{ display: none; }
}
@media (max-width: 700px){
  :is(.post-meta, .article-meta-premium, .hero-meta) > .meta-separator{ display: none; }
}
/* G-34 / C-60 — side-by-side cards that end in their description (about: "Core expertise" 4 and "Education" 3
   `.scenario-card`s; resource-center: the 4 "Recommended starting points" link cards): the description's bottom rule
   sat right under the text, so across a row of equal-height cards the rules were up to 50px apart (768–1,920px). The
   description now fills the card (flex column), so the rules line up at the same distance from the card bottom. The
   label and title margins restate the block layout's collapsed gaps (28px above the title, 15px above the
   description), so the text does not move. */
.page-frame .scenario-card:has(> .scenario-problem:last-child){ display:flex; flex-direction:column; }
.page-frame .scenario-card:has(> .scenario-problem:last-child) > .scenario-industry{ margin-bottom:0; }
.page-frame .scenario-card:has(> .scenario-problem:last-child) > h3{ margin-bottom:0; }
.page-frame .scenario-card:has(> .scenario-problem:last-child) > .scenario-problem{ flex-grow:1; }
/* G-15 / OD-12 — C-61: the 3-card `.decision-module-grid`s whose only inline style is `align-items:stretch` (article,
   future-of-bi-ai-era, landscape-2026: class auto-fit, 240px tracks, 22px gap; the grid is 94vw - 48px wide) show two
   columns at 761–863.82px, which left the third card alone at the left of the second row. It is centred at one column
   width (OD-12). From 863.83px the three cards share one row. */
@media (min-width: 761px) and (max-width: 863.82px){
  .decision-module-grid[style="align-items:stretch"]:has(> :nth-child(3):last-child) > :last-child{ grid-column: 1 / -1; justify-self: center; width: calc((100% - 22px) / 2); }
}
/* C-67 (G-37): "Where next" link cards whose label / title / description spans had no styles (ran together as one underlined line;
   ai-architecture-blueprints, ai-joule-agents, ai-workflows) — styled like the related-post cards; the 40px card margin of
   .ai-premium-page .where-next-card no longer stacks between list items */
.route-links:has(> a.where-next-card){ display: flex; flex-direction: column; gap: 12px; }
.route-links > a.where-next-card{ margin-top: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.route-links > a.where-next-card > .card-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.route-links > a.where-next-card > .card-title{ font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--text); }
.route-links > a.where-next-card > .card-desc{ font-size: 15px; line-height: 1.55; color: var(--muted); }
.route-links > a.where-next-card:is(:hover, :focus-visible) > .card-title{ text-decoration: underline; text-underline-offset: 3px; }
/* OD-23 / C-78 — long text-only sections use the whole width in two columns on wide screens (1,100px and wider):
   the section heading on the left (it stays in view while the section is read), the text on the right
   (C-90: heading column a third of the width — headings at most 5 lines; text about 73 / 99 / 112 characters per line at
   1,100 / 1,440 / 1,920px instead of 140–175 across the full width). Owner decision 2026-11-12 (option B).
   Only sections with an h2 first (A) or a section-head box first (B), at least two paragraphs (C-124 / OD-30, every page;
   before: three, or two on pages with a three-paragraph section — C-91), and no cards, grids,
   tables, diagrams, images or embedded frames; sections with such components keep the full-width layout (OD-22).
   Phones and tablets: unchanged (one column). Grid items do not collapse margins, so the text column restates its
   rhythm: 16px between paragraphs and lists, 28px above a sub-heading and 8px below it, 24px around a box.
   The sticky heading stops below the site header: 150px from the top up to 1,240px (two-row header, 116–120px) and on
   pages whose header is not yet the standard one; 104px from 1,241px (one-row header, 74px). */
@media (min-width: 1100px){
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])){
    display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > h2:first-child{
    grid-column: 1; grid-row: 1 / span 80; align-self: start; position: sticky; top: 150px; margin: 0; }
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > :not(h2:first-child){
    grid-column: 2; margin-top: 0; margin-bottom: 16px; }
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > :is(h3, h4, h5){
    margin-top: 12px; margin-bottom: 8px; }
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > :is(.callout-box, .note-card, .where-next-card){
    margin-top: 8px; margin-bottom: 24px; }
  main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > :last-child{
    margin-bottom: 0; }
  main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))){
    display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .ai-section-head{
    grid-column: 1; align-self: start; position: sticky; top: 150px; margin: 0; }
  main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .ai-section-head > :first-child, main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .section-content > :first-child{
    margin-top: 0; }
  main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .section-content{
    grid-column: 2; margin: 0; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))) main :is(section, .section-block, .section-container):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child):has(> p ~ p):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])) > h2:first-child,
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))) main .section-block:has(> .ai-section-head + .section-content:last-child):has(> .section-content > p ~ p):not(:has(> .section-content :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .ai-section-head{ top: 104px; }
}
/* OD-24 / C-92 — diagrams drawn in the page (inline SVG) fill their card, like the diagrams that are image files (owner
   2026-11-12, option B). The 920 / 940 / 880 / 760px caps written on the diagrams and the 600px height guard of
   `.page-frame svg[viewBox]` kept them at drawing size, centred, 150–270px short of each side of the card at 1,440px.
   A very tall diagram is capped to the screen height (never below the old 600px) so it is seen whole without
   scrolling — its drawing then stays centred. Phones (≤760px) unchanged; the 40px card icons are not diagrams. */
@media (min-width: 761px){
  main :not(.card-icon) > figure > svg[viewBox]{ width: 100% !important; max-width: none !important; height: auto; max-height: max(600px, calc(100vh - 160px)) !important; }
}
/* C-94 (page 36 ai-business-scenarios — components with no styles of their own; markup and wording unchanged):
   (a) the scenario blocks' labels (`.ai-scenario-card > .scenario-label`: The Problem / The AI Solution / SAP Stack / Illustrative
       Impact / Prerequisites, 35) were plain body-text lines, and each problem statement was an h2 as large as the scenario's own
       title (34px at 1,440px) while the other blocks' titles are h3 -> labels in the site's eyebrow style, problem statements at
       the h3 size, each title straight under its label, 28px between blocks;
   (b) the six "Common success patterns" (`.ai-pattern-card`) showed their number as a bare line 28px above the title -> the page's
       own stage badge (32px green circle, white figure) beside the title, the text under the title. */
.ai-scenario-card + .ai-scenario-card{ margin-top: 28px; }
.ai-scenario-card > .scenario-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #7c6644; margin-bottom: 6px; }
.ai-scenario-card > .scenario-label + :is(h2, h3){ margin-top: 0; }
.ai-scenario-card > h2{ font-size: clamp(20px, 1.1rem + 0.4vw, 25px); font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 480px){ .ai-scenario-card > h2{ font-size: clamp(16px, 3.5vw, 20px); } }
.ai-pattern-card{ display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.ai-pattern-card > .pattern-number{ grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #184e3b; color: #fff; font-weight: 700; }
.ai-pattern-card > h3{ grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.ai-pattern-card > :not(.pattern-number):not(h3){ grid-column: 2; }
.ai-pattern-card > p{ margin: 8px 0 0; }
/* C-96 (G-41 — `.check-item` has no CSS; ai-into-roi, ai-readiness-assessment): the dimension / step items are divs inside
   `.ai-check-list`, a bullet-list class — indented 18px with no bullets; and the item titles mix levels (ai-into-roi: the first
   scorecard title an h3, 23px display serif, the other seven h4, 16px sans; ai-readiness-assessment: the first an h2, the rest h3)
   -> these item lists start at the text edge, and every item title takes the h3 look. */
.ai-check-list:has(> .check-item){ padding-left: 0; }
.ai-check-list > .check-item > :is(h2, h4){ font-family: var(--font-display); font-size: clamp(20px, 1.1rem + 0.4vw, 25px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 1.75rem 0 8px; }
@media (max-width: 480px){ .ai-check-list > .check-item > :is(h2, h4){ font-size: clamp(16px, 3.5vw, 20px); } }
/* C-101 (G-41 — ai-readiness-assessment: the eight dimension rubrics `.ai-assessment-dimension` > `.dimension-intro`,
   `.governance-level` (Level 1 / 3 / 5) and `.dimension-callout` had no CSS: one run of full-width paragraphs, level titles at body
   size, the "Why this matters for AI" note a plain paragraph) -> dimensions divided by a rule, the three levels side by side as a
   rubric from 1,101 px (stacked below) with a bar that darkens from level 1 to 5, the note as the site's callout (accent bar on
   the light accent tint; both from theme variables, so dark mode follows). */
.ai-assessment-dimension + .ai-assessment-dimension{ margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.ai-assessment-dimension + .ai-assessment-dimension > h3{ margin-top: 0; }
.governance-level{ position: relative; margin-top: 20px; padding-top: 14px; }
.governance-level::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--accent); opacity: .3; }
.governance-level:nth-of-type(2)::before{ opacity: .6; }
.governance-level:nth-of-type(3)::before{ opacity: 1; }
.governance-level > h4{ margin: 0 0 6px; }
.governance-level > p{ margin: 0; }
.dimension-callout{ margin-top: 24px; padding: 18px 20px; border-left: 4px solid var(--accent); border-radius: 16px; background: var(--accent-light); }
.dimension-callout > p{ margin: 0; }
@media (min-width: 1101px){
  .ai-assessment-dimension{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .ai-assessment-dimension > :not(.governance-level){ grid-column: 1 / -1; }
  .governance-level{ margin-top: 8px; }
}
/* C-104 (G-42, OD-25 = A: light only) — the partial dark-mode block of the original styles.css was removed (it turned text light while
   the header, meta pills and many cards stayed light); declare the light scheme only, so browsers do not darken the pages either. */
:root{ color-scheme: only light; }
/* C-109 (OD-23 / C-78, found on page 41 article.html): long text-only sections built as `section > h2 + .section-block`
   (the heading outside its block) were not matched by the C-78 rules and ran up to 166 characters per line at 1,440px ->
   the same split from 1,100px: the heading on the left (a third of the width, sticky), the block on the right with its
   own text rhythm unchanged (it stays one block, so its margins collapse as before). Same conditions as C-78 rule B:
   at least two paragraphs (C-124; was three) and no cards, grids, tables, diagrams, images or embedded frames. Phones and tablets
   unchanged. C-110: in all these split rules a `.note-card` counts as a text box (like `.callout-box`), not as a card.
   C-113: also when the container is a `div.ai-premium-section` (btp-guide builds its sections that way). */
@media (min-width: 1100px){
  main :is(section, .ai-premium-section):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child + .section-block:last-child):has(> .section-block > p ~ p):not(:has(> .section-block :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))){
    display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  main :is(section, .ai-premium-section):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child + .section-block:last-child):has(> .section-block > p ~ p):not(:has(> .section-block :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > h2:first-child{
    grid-column: 1; align-self: start; position: sticky; top: 150px; margin: 0; }
  main :is(section, .ai-premium-section):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child + .section-block:last-child):has(> .section-block > p ~ p):not(:has(> .section-block :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .section-block{
    grid-column: 2; margin: 0; }
  main :is(section, .ai-premium-section):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child + .section-block:last-child):has(> .section-block > p ~ p):not(:has(> .section-block :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > .section-block > :first-child{
    margin-top: 0; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))) main :is(section, .ai-premium-section):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *):has(> h2:first-child + .section-block:last-child):has(> .section-block > p ~ p):not(:has(> .section-block :is([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))) > h2:first-child{ top: 104px; }
}
/* C-114 (page 43 btp-guide.html — the only `.post-meta` author block built with `.post-author-info` / `.post-author-name` /
   `.post-author-title`): the role line inherited the block's 600-weight dark text, so name and role looked the same.
   Same look as the `.post-meta` author on the other article pages: the name 900, the role in #666. */
.post-meta .post-author-name{ font-weight: 900; }
.post-meta .post-author-title{ color: #666; }
/* C-117 (page 45 certifications.html — markup and wording unchanged; `.card-eyebrow` and `.card-details` are used only there):
   (a) G-41: the cards' track labels (`.card-eyebrow`: ANALYTICS TRACK, DATA TRACK …) had no CSS — plain 16px body-text lines
       -> the site's eyebrow style (as C-94), the card title straight under its label;
   (b) the seven "Core Certifications by Track" cards hold 236–1,462 words each but sat in a 3-column grid (2 columns at
       761–980px): 31–56 characters per line, rows 6,000–10,800px tall, the reader sent back up 6,000px for each next card,
       and the short cards stretched to their row (≈5,800px of empty card beside the Datasphere card at 1,440px)
       -> one card per row from 761px (phones were already one column); from 1,100px each card is split like the long
       text sections (OD-23 / C-78): label and title on the left, the title staying in view while the card is read, the
       details on the right. */
.ai-capability-card > .card-eyebrow{ font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #7c6644; margin-bottom: 6px; }
.ai-capability-card > .card-eyebrow + :is(h2, h3){ margin-top: 0; }
@media (min-width: 761px){
  .ai-capability-grid:has(> .ai-capability-card > .card-details){ grid-template-columns: minmax(0, 1fr) !important; } /* !important: the 761–980px band rule forces 2 columns with !important */
  .ai-capability-grid:has(> .ai-capability-card > .card-details) > .ai-capability-card:has(> .card-details){ grid-column: 1 / -1; justify-self: stretch; width: auto; }
}
@media (min-width: 1100px){
  .ai-capability-card:has(> .card-details){ display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
  .ai-capability-card:has(> .card-details) > .card-eyebrow{ grid-column: 1; grid-row: 1; }
  .ai-capability-card:has(> .card-details) > :is(h2, h3){ grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 150px; }
  .ai-capability-card:has(> .card-details) > .card-details{ grid-column: 2; grid-row: 1 / span 2; }
  .ai-capability-card:has(> .card-details) > .card-details > :first-child{ margin-top: 0; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))) .ai-capability-card:has(> .card-details) > :is(h2, h3){ top: 104px; }
}
/* C-118 (G-45, OD-28 = A, 2026-11-13) — "stay in view while scrolling" never worked on the site: the hardening rule
   `html, body { overflow-x: hidden }` (Whole-site premium hardening, above) turns body into a scroll container that never
   scrolls, so `position: sticky` held nothing in place — the header (rule 5 of the header block: sticky from 761px) and the
   split-section headings and card titles (C-78, C-109, C-117) scrolled away with the page, leaving the left column empty.
   From 761px `overflow-x: clip` replaces it: still no sideways scrolling, but no scroll container (browsers without `clip`
   keep `hidden`, as before). The header now stays at the top (10px down) and the headings / card titles 20px below it;
   links to a place on the page land below the header. The article card (`.article-shell`, the frame of 15 article pages)
   clipped its 4px accent bar with the shared card rule's `overflow: hidden`, which also held the split headings inside it
   -> `clip` from 1,100px (same clipping; flow-root keeps it its own block, so nothing inside moves).
   integration-salesforce's non-standard header (315px tall) stays in the page until it is standardised (G-09).
   Phones (≤760px) unchanged. */
@media (min-width: 761px){
  html, body{ overflow-x: clip; }
  html{ scroll-padding-top: 150px; }
  .site-shell > .site-header:has(.site-header__inner){ position: relative; }
}
@media (min-width: 1100px){
  .article-shell{ overflow: clip; display: flow-root; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))){ scroll-padding-top: 104px; }
}
/* C-120 (G-41 — `.callout-icon` has no CSS; 15 callouts on 5 pages: is-business-intelligence-splitting, data-mesh-patterns,
   data-products, real-time-analytics, signavio-process-analytics): the icon (an emoji in its own div) sat alone on a line above
   the callout text -> beside the text, on its first line (same size and line height as the text). Markup unchanged. */
.callout-box:has(> .callout-icon + .callout-content){ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.callout-box > .callout-icon{ grid-column: 1; }
.callout-box > .callout-icon + .callout-content{ grid-column: 2; }
/* C-122 (OD-23 / C-78, found on page 49 datasphere-migration): a text section of a single paragraph (h2 + p and nothing else
   in the section) on a page that uses the split ran across the whole width at 145–172 characters per line (1,440px) between
   split sections: the C-78 / C-91 rules count paragraphs, so one long paragraph never qualified -> the same split from 1,100px
   on pages that use it (5 sections on 5 pages: datasphere-migration "Where teams go wrong", sap-sapphire-2026 and
   sap-teched-2026 "How to read this page", resource-center "A note on what I deliberately left out", bdc-cost-finops "What
   to do with this"). A heading + paragraph that introduces cards or a figure in the same section (data-products "Data Product
   Studio: Central Workspace (…)") stays full width with them, as C-78 keeps sections with components (OD-22). Same columns,
   sticky offsets (150px; 104px from 1,241px with the standard header) and rhythm as C-78. Phones and tablets unchanged. */
@media (min-width: 1100px){
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child + p:last-child), :is(.section-block, .section-container):only-child:has(> h2:first-child + p:last-child)):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *){ display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child + p:last-child), :is(.section-block, .section-container):only-child:has(> h2:first-child + p:last-child)):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > h2:first-child{ grid-column: 1; grid-row: 1 / span 80; align-self: start; position: sticky; top: 150px; margin: 0; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child + p:last-child), :is(.section-block, .section-container):only-child:has(> h2:first-child + p:last-child)):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > p:last-child{ grid-column: 2; margin-top: 0; margin-bottom: 0; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))):has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child + p:last-child), :is(.section-block, .section-container):only-child:has(> h2:first-child + p:last-child)):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > h2:first-child{ top: 104px; }
}
/* C-124 (OD-30, owner 2026-11-13, found on page 50 embedded-analytics): 13 article pages whose text sections hold one or two
   paragraphs ran entirely full width at 133–174 characters per line, while sibling articles with a three-paragraph section
   used the split -> the split rules (C-78 A and B, C-109) take text sections of two or more paragraphs on every page, and
   C-122's single-paragraph sections split on every page that has a section of two or more paragraphs. Same columns, sticky
   offsets (150px; 104px from 1,241px with the standard header) and rhythm; sections with cards, grids, tables, diagrams or
   images stay full width (OD-22). Phones and tablets unchanged. */
/* C-125 (OD-31, owner 2026-11-13): on pages that use the split, a text section of one paragraph plus lists, callout boxes or
   note cards (nothing else, alone in its section) ran full width between split sections — 12 sections on 7 pages
   (sap-sapphire-2026 5, sap-teched-2026 2, live-vs-import-connections, comparisons/sac-vs-tableau, comparisons/sac-vs-bw,
   data-contracts, about) -> the same split, the list or box in the text column with C-78's rhythm. Component rows (a link
   strip, decision boxes) keep the full width. Phones and tablets unchanged. */
@media (min-width: 1100px){
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *){ display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > h2:first-child{ grid-column: 1; grid-row: 1 / span 80; align-self: start; position: sticky; top: 150px; margin: 0; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > :not(h2:first-child){ grid-column: 2; margin-top: 0; margin-bottom: 16px; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > :is(.callout-box, .note-card){ margin-top: 8px; margin-bottom: 24px; }
  :root:has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > :last-child{ margin-bottom: 0; }
}
@media (min-width: 1241px){
  :root:not(:has(.site-header :is(.header-container, .site-header__inner))):has(main :is(section, .section-block, .section-container) > h2:first-child ~ p ~ p, main .section-block > .ai-section-head + .section-content:last-child > p ~ p, main :is(section, .ai-premium-section) > h2:first-child + .section-block > p ~ p) main :is(section:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"])), :is(.section-block, .section-container):only-child:has(> h2:first-child):has(> p):not(:has(> p ~ p)):has(> :is(ul, ol, .callout-box, .note-card)):not(:has(> :not(h2:first-child, p, ul, ol, .callout-box, .note-card))):not(:has([class*="grid"], [class*="card"]:not(.where-next-card):not(.note-card), table, figure, svg, img, iframe, video, canvas, [style*="grid"], [style*="display: flex"], [style*="display:flex"]))):not([class*="card"]):not(:is([class*="grid"], [class*="card"]) *) > h2:first-child{ top: 104px; }
}
/* C-126 (G-44 / OD-29, owner 2026-11-13): card grids whose last row holds two or more cards but fewer than the columns
   (5 cards as 3 + 2, 8 as 3 + 3 + 2, 11 as 4 + 4 + 3) left the empty slots on the right -> the short row is centred, as OD-12
   centres a lone card: the grid is laid out in half-columns, each card spanning two, and the first card of the short row
   starts one half-column in; card widths and row heights stay exactly as before. Each rule applies only where that grid
   shows that many columns (measured on all 79 pages, 761-2,560px, `tmp/c126/colmap.py`). 6 cards where the 300px auto-fit
   would show 4 columns (comparisons/sac-vs-power-bi from 1,509px) show 3 + 3, as C-30 does for 280px tracks. Link-chip
   lists stay as they are (OD-13). */
@media (min-width: 981px){
  .ai-capability-grid:not([style*="grid-template-columns"]):not(:has(> .ai-capability-card > .card-details)):has(> :nth-child(3n+5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .ai-capability-grid:not([style*="grid-template-columns"]):not(:has(> .ai-capability-card > .card-details)):has(> :nth-child(3n+5):last-child) > *{ grid-column: span 2; }
  .ai-capability-grid:not([style*="grid-template-columns"]):not(:has(> .ai-capability-card > .card-details)):has(> :nth-child(3n+5):last-child) > :nth-last-child(2){ grid-column: 2 / span 2; }
}
@media (min-width: 901px){
  .related-posts-grid:not([style*="grid-template-columns"]):has(> :nth-child(3n+5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .related-posts-grid:not([style*="grid-template-columns"]):has(> :nth-child(3n+5):last-child) > *{ grid-column: span 2; }
  .related-posts-grid:not([style*="grid-template-columns"]):has(> :nth-child(3n+5):last-child) > :nth-last-child(2){ grid-column: 2 / span 2; }
}
@media (min-width: 1101px){
  :is(.homepage-reading-grid, .ai-clean-grid-3, .architecture-question-grid):has(> :nth-child(3n+5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  :is(.homepage-reading-grid, .ai-clean-grid-3, .architecture-question-grid):has(> :nth-child(3n+5):last-child) > *{ grid-column: span 2; }
  :is(.homepage-reading-grid, .ai-clean-grid-3, .architecture-question-grid):has(> :nth-child(3n+5):last-child) > :nth-last-child(2){ grid-column: 2 / span 2; }
}
@media (min-width: 996px) and (max-width: 1319px){
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(3n+5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(3n+5):last-child) > *{ grid-column: span 2; }
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(3n+5):last-child) > :nth-last-child(2){ grid-column: 2 / span 2; }
}
@media (min-width: 1320px) and (max-width: 1642px){
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(4n+7):last-child){ grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(4n+7):last-child) > *{ grid-column: span 2; }
  [style*="minmax(min(280px, 100%)"]:has(> :nth-child(4n+7):last-child) > :nth-last-child(3){ grid-column: 2 / span 2; }
}
@media (min-width: 1060px) and (max-width: 1404px){
  [style*="minmax(min(300px, 100%)"]:has(> :nth-child(3n+5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  [style*="minmax(min(300px, 100%)"]:has(> :nth-child(3n+5):last-child) > *{ grid-column: span 2; }
  [style*="minmax(min(300px, 100%)"]:has(> :nth-child(3n+5):last-child) > :nth-last-child(2){ grid-column: 2 / span 2; }
}
@media (min-width: 1405px){
  [style*="minmax(min(300px, 100%)"]:has(> :nth-child(6):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* C-129 (G-48 — the site footer's column headings): 66 pages mark the first footer heading, "Topics", as an h3 and the other
   three ("Learn", "Decide", "About") as h4; the 8 topic-hub and guide pages use h4 for all four. Only `.footer-column h4` has
   a style, so on those 66 pages "Topics" took the page's h3 look (display serif, 23px at 1,440px, 16px at 390px) beside three
   14px uppercase labels, and at 1,440px its links started 10px lower than the other columns' links -> the h3 takes the
   same label style as the h4s (font, size, line height, spacing, case, colour, margins). Markup unchanged. */
.footer-column > h3{ font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.68; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
/* C-135 (G-27, found on page 53 integration-bdc-connect; the same cards on integration-enterprise-apps, integration-middleware and
   integration-salesforce, pending): cards side by side that hold a title, one paragraph and a link last (`.ai-clean-grid >
   .ai-premium-card` "Read more →", `.where-next-card`s) are stretched to the row height but their content is top-aligned, so
   where one title or text ran a line longer the link lines of a row sat up to 53px apart -> with subgrid support the cards of
   a row share its rows (titles, texts and links start on common lines; the link keeps its own width); without it, a flex
   column with the link at the card bottom. A lone centred last card (OD-12) keeps the flex layout (C-49: Firefox sized a
   centred subgrid card from the full row). Block-layout cards (`.where-next-card`) restate their collapsed title gap (16px).
   integration-bdc-connect's four "Where next" cards sat in a `.route-strip` (a wrapping row of pill links): each card as wide
   as its text (716–887px at 1,440px), one per line -> a card grid: one column up to 760px, 2 + 2 at 761–1,404px, four in a
   row from 1,405px (as the homepage's four cards, OD-14) — their buttons keep the strip's pill style and stay on one line
   (the widest, "Compare platform approaches", is 255px with the owner's fonts: four columns leave it room only from
   ≈1,360px). */
.route-strip:has(> .where-next-card){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 1404px){ .route-strip:has(> .where-next-card){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px){ .route-strip:has(> .where-next-card){ grid-template-columns: 1fr; } }
.route-strip > .where-next-card{ margin-top: 0; }
:is(.ai-clean-grid, .route-strip) > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child){ display: flex; flex-direction: column; }
:is(.ai-clean-grid, .route-strip) > .where-next-card:has(> h3:first-child + p + a:last-child) > h3{ margin-bottom: 0; }
:is(.ai-clean-grid, .route-strip) > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child) > a:last-child{ margin-top: auto; align-self: flex-start; }
@supports (grid-template-rows: subgrid){
  @media (min-width: 761px){
    :is(.ai-clean-grid, .route-strip) > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child){ display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
    :is(.ai-clean-grid, .route-strip) > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child) > a:last-child{ margin-top: 0; justify-self: start; align-self: start; }
  }
  @media (min-width: 761px) and (max-width: 1100px){
    :is(.ai-clean-grid, .route-strip) > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child):last-child:nth-child(odd):not(:first-child){ display: flex; grid-row: auto; }
  }
  @media (min-width: 1101px){
    .ai-clean-grid-4 > :is(.ai-premium-card, .where-next-card):has(> h3:first-child + p + a:last-child):last-child:nth-child(4n+1):not(:first-child){ display: flex; grid-row: auto; }
  }
}
/* C-138 (G-41, page 54 integration-data-platforms; the hero meta line also on integration-middleware, pending):
   (a) the decision cards' answer options (`.card-options > .option`: an `.indicator` label, a bold recommendation, a note) had
       no styles: a card's three options ran as nine plain lines with nothing showing where one ends, their labels in body
       text -> each label in the site's eyebrow style (12px uppercase, #7c6644), the options divided by a rule;
   (b) a hero meta line without an author (`.hero-meta` holding the date and reading time or word count) ran its items
       together ("Published April 6, 2026 32 min read") -> the meta-row style: items 16px apart, 14px, muted. */
.card-options > .option + .option{ border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.card-options > .option > .indicator{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #7c6644; margin-bottom: 6px; }
.card-options > .option > p{ margin: 0; }
.card-options > .option > p + p{ margin-top: 4px; }
.hero-meta:not(:has(> .post-author)){ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
/* C-141 (G-52, found with tmp/p54/gap_scan.py): (a) a paragraph or list placed straight after a card grid sat on the
   cards' bottom edge (`.ai-clean-grid` has no bottom margin, a paragraph no top margin: topics/btp) -> 1rem above it, the
   grid's own top margin (two classes, so it outranks `.page-frame section > p`); (b) framed cards stacked in a text block touched (`.section-block > .surface-card` siblings, no
   margins: btp-guide, certifications, guides/datasphere-governance-implementation) -> 1rem between them,
   the site's card gap. Sibling margins collapse, so a larger gap already there stays as it is. */
:is(.page-frame, .w3) .ai-clean-grid + :is(p, ul, ol){ margin-top: 1rem; }
.section-block > .surface-card + .surface-card{ margin-top: 1rem; }
/* C-147: cards in a card grid drop their stand-alone outer margins (where-next card 2.5rem above, note box 1.5rem above and
   below): in `.ai-clean-grid` they added to the 16px gap (grid items' margins do not collapse) -> rows 56-64px apart. */
:is(.page-frame, .w3, .ai-premium-page) .ai-clean-grid > :is(.where-next-card, .note-card, .callout-box){ margin-top: 0; margin-bottom: 0; }
/* C-148: the four "Where next" cards of a 4-column grid (integration-enterprise-apps, -middleware, -salesforce) two by two up
   to 1,404px, like integration-bdc-connect's (C-135) and the homepage's (OD-14): four in a row at 1,101-1,310px wrapped the
   longest title to 3 lines of 10-11 characters. */
@media (min-width: 1101px) and (max-width: 1404px){ .ai-clean-grid-4:has(> .where-next-card){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* C-152 (G-53): the heading that opens a card or box starts at the box padding, like the cards that already did (their title
   sat 42-51px below the top edge against 18-38px under the last line). */
:is(.page-frame, .w3) :is(.ai-premium-card, .ai-capability-card, .surface-card, .ai-link-card, .note-card, .callout-box, .ai-role-card, .where-next-card, .decision-module, .ai-kpi-card, .provenance-note, .ai-stage-card, .ai-roi-card, .scenario-impact, .ai-visual-card, .ai-section-card) > :is(h2, h3, h4, h5):first-child{ margin-top: 0; }
/* C-152b: the C-22 first-card <h3> (styled as its sibling <h4>s) also opens its card at the padding, so the row stays level. */
.w3 :is(.ai-capability-grid, [style*="grid-template-columns"]):has(> :nth-child(2) h4):not(:has(> :nth-child(2) h3)) > :first-child:not(:has(h4)):is(.ai-premium-card, .ai-capability-card, .surface-card, .ai-link-card, .note-card, .callout-box, .ai-role-card, .where-next-card, .decision-module, .ai-kpi-card, .provenance-note, .ai-stage-card, .ai-roi-card, .scenario-impact, .ai-visual-card, .ai-section-card) > h3:first-child{ margin-top: 0; }
/* C-152c: the heading that opens a "Where Next?" panel, directly or inside its zero-padding head, starts at the panel padding. */
:is(.page-frame, .w3) .where-next > :is(h2, h3):first-child,
:is(.page-frame, .w3) .where-next > :first-child:is(.section-container, .ai-section-head) > :is(h2, h3):first-child{ margin-top: 0; }
/* C-152d: the last block of these boxes ends at the padding too (the site's `> :last-child{margin-bottom:0}` card rule). */
:is(.page-frame, .w3) :is(.ai-premium-card, .ai-capability-card, .surface-card, .ai-link-card, .note-card, .callout-box, .ai-role-card, .where-next-card, .decision-module, .ai-kpi-card, .provenance-note, .ai-stage-card, .ai-roi-card, .scenario-impact, .ai-visual-card, .ai-section-card) > :last-child{ margin-bottom: 0; }
/* C-152e: governance hero quick cards fit their grid (the 1rem moves from the cards to the grid); the scenario
   "Real-World Impact" panel gets even 16px padding. */
.governance-premium-page .governance-quick-grid{ margin-top: 2rem; }
.governance-premium-page .governance-quick-card{ margin-top: 0; }
.scenario-card .scenario-impact{ padding: 16px; }
/* C-153 (G-54): a heading sits 12px under the eyebrow that labels it (the eyebrow's own margin), as in the hero. */
:is(.page-frame, .w3) .eyebrow + :is(h1, h2, h3, h4){ margin-top: 0; }
/* C-154b (G-55): the resource-center intro box ends at its padding. */
.author-profile > :last-child{ margin-bottom: 0; }
/* C-156 (G-56): consecutive paragraphs in a surface card are 12px apart (they touched); not after a paragraph with its own inline margin. */
:is(.page-frame, .w3) .surface-card > p:not([style*="margin-bottom"]):not([style*="margin:"]) + p{ margin-top: 12px; }
/* C-158: a stacked table that ends a padded box ends at the padding (its last row card drops its 12px margin). */
@media (max-width: 820px){
  :is(.ai-premium-card, .ai-capability-card, .surface-card, .ai-link-card, .note-card, .callout-box, .ai-role-card, .where-next-card, .decision-module, .ai-kpi-card, .provenance-note, .ai-stage-card, .ai-roi-card, .scenario-impact, .ai-visual-card, .ai-section-card) > table.rtable:last-child > tbody > tr:last-child{ margin-bottom: 0; }
}
/* C-180 (page 71, 2026-11-14) — the readiness checklist on phones: each item kept its 2.5 rem number badge
   beside the text (plus a 1 rem gap, inside a padded callout), so the text ran 5–10 characters per line at
   280–380 px and "Architecture" split mid-word. At <=480 px the badge sits above the text, which takes the
   item's full width. Only guides/datasphere-governance-implementation uses .checklist-item. */
@media (max-width: 480px){
  .checklist-item{ flex-direction: column; gap: .6rem; }
}
/* C-186 (page 73, 2026-11-14) — scenarios-sac's scenario cards. (a) .scenario-stack is a flex row, so its "SAP Stack"
   h3 sat beside the pill group, the pills 28 px higher (the h3's top margin): the heading now sits above the pills, like
   the card's other sub-headings. (b) The pills were inline spans whose 4 px vertical padding overlapped the next line
   when they wrapped (27 overlaps up to 790 px in owner Chrome): they wrap as flex items, 8 px apart. (c) The "The Problem"
   headings took the problem text's muted colour: headings use the text colour, like "How SAC Solves It". Only
   scenarios-sac has .stack-pills or headings inside .scenario-problem (grep of all 79 pages). */
.scenario-card .scenario-stack:has(> .stack-pills){ display: block; }
.scenario-card .scenario-stack > .stack-pills{ display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-card .scenario-problem > :is(h2, h3){ color: var(--text); }
/* C-189 (page 74, 2026-11-14) — scenarios-datasphere, the only page with <section class="scenario-card">. With
   .page-frame on its <main> (C-190) the frame's heading and box margins reach the cards: (a) the first heading of a card
   keeps no top margin (else 40 px more above it than the card's 28 px padding), (b) the "Key Insight" note that ends a
   card keeps no bottom margin (else 24 px more below it), (c) the 6 cards, which touched (0 px at every width), sit
   24 px apart. */
.page-frame section.scenario-card > .scenario-header > :is(h2, h3):first-child{ margin-top: 0; }
.page-frame section.scenario-card > .scenario-content:last-child > .note-card:last-child{ margin-bottom: 0; }
.page-frame section.scenario-card + section.scenario-card{ margin-top: 24px; }
/* C-192 (page 75, 2026-11-14) — the scenario pages built on `.ai-scenario-grid > article.scenario-card` (scenarios-bdc,
   -bw, -btp, -integration, -governance: 5-6 scenarios x 5 cards; grep of all 79 pages), the card version of page 36's
   `.ai-scenario-card` blocks (C-94): (a) a scenario's 5 cards touched (0 px at every width: the grid is a plain block) ->
   24 px apart (as C-189); (b) the labels (The Problem / The Solution / SAP Stack / Expected Impact / Prerequisites) were
   plain 16 px body lines 40 px above their titles -> the eyebrow style of C-94, each title straight under its label;
   (c) a card's last paragraph / list kept its 16 px margin inside the 28 px padding (45 px below the text, 29 above the
   label) -> 0; (d) `.stack-pill-list` (no CSS: disc bullets, one pill per line) -> the pills in a wrapping row, as the
   site's other stack pills; (e) `.pattern-grid` / `.pattern-item` / `.pattern-label` (no CSS: 4 plain lines each over its
   text, the gaps between items equal to the gap under a label) -> a 2 x 2 grid of cards from 761 px (1 column below),
   labels bold. */
.ai-scenario-grid > .scenario-card + .scenario-card{ margin-top: 24px; }
.ai-scenario-grid > .scenario-card > .scenario-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #7c6644; margin-bottom: 6px; }
.ai-scenario-grid > .scenario-card > .scenario-label + :is(h2, h3){ margin-top: 0; }
.ai-scenario-grid > .scenario-card > :last-child{ margin-bottom: 0; }
.ai-scenario-grid > .scenario-card > .stack-pill-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-scenario-grid > .scenario-card > .stack-pill-list > li{ margin: 0; }
.pattern-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 1.25rem; }
@media (min-width: 761px){ .pattern-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.pattern-grid > .pattern-item{ background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem 1.2rem; }
.pattern-grid > .pattern-item > .pattern-label{ font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.pattern-grid > .pattern-item > p{ margin: 0; }
/* C-216 — footer disclaimer (all 79 pages, inside .footer-bottom before the copyright line): a short notice that is always
   visible and the full text in a <details>. Small print in the footer's 13 px muted style, lines held to a readable length,
   the toggle a 44 px touch target with a visible keyboard focus. */
.footer-disclaimer{ max-width: 80ch; margin: 0 0 var(--space-2); font-size: 13px; line-height: 1.6; color: var(--muted); }
.footer-disclaimer p{ margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: break-word; }
.footer-disclaimer strong{ color: var(--text); font-weight: 600; }
.footer-disclaimer a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.footer-disclaimer__more > summary{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; }
.footer-disclaimer__more > summary::-webkit-details-marker{ display: none; }
.footer-disclaimer__more > summary::after{ content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.footer-disclaimer__more[open] > summary::after{ transform: translateY(2px) rotate(-135deg); }
.footer-disclaimer__more > summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.footer-disclaimer__body{ padding: 4px 0 6px; }
.footer-disclaimer__body p:last-child{ margin-bottom: 0; }
.footer-disclaimer__date{ font-style: italic; }
.footer-bottom > .footer-disclaimer + p{ margin-top: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* End Responsive Layout Audit 2026-11-11 (header + frame) */