/* ==========================================================================
   SimpleTech CMS Custom Styles — injected into Emdash Base CSS at build time
   All class names prefixed with `st-` to avoid conflicts with Emdash defaults
   ========================================================================== */

/* ---- Override Emdash page template for custom-layout pages ---- */
/* The blog template constrains page-article to max-width:680px with padding.
   When a page contains our hero block we override all those constraints so
   our full-width sections can render edge-to-edge.
   Covers both st-hero (home full-bleed) and st-page-hero (interior pages). */
.page-article[data-astro-cid-sdneth7u]:has(.st-hero),
.page-article[data-astro-cid-sdneth7u]:has(.st-page-hero) {
  max-width: 100% !important;
  padding: 0 !important;
}
/* Hide the default page-title heading on our custom pages */
.page-article[data-astro-cid-sdneth7u]:has(.st-hero) .page-header[data-astro-cid-sdneth7u],
.page-article[data-astro-cid-sdneth7u]:has(.st-page-hero) .page-header[data-astro-cid-sdneth7u] {
  display: none;
}
/* Remove default 1.5rem margin Emdash adds around each htmlBlock */
.page-article[data-astro-cid-sdneth7u]:has(.st-hero) .emdash-html-block,
.page-article[data-astro-cid-sdneth7u]:has(.st-page-hero) .emdash-html-block {
  margin: 0;
}
/* Prevent horizontal scrollbar that can appear with 100vw sections */
html { overflow-x: clip; }

/* ---- Hero section ---- */
.st-hero {
  background: linear-gradient(160deg, #040e19 0%, #0a1e30 55%, #0d2137 100%);
  padding: 100px 24px 90px;
  text-align: center;
}
.st-hero-h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #e8f4fb;
  line-height: 1.15;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.st-hero-sub {
  font-size: 1.125rem;
  color: #c8dde9;
  max-width: 640px;
  margin: 0 auto 44px;
  line-height: 1.8;
}

/* ---- Accent / brand colour ---- */
.st-accent { color: #4da6d9; }

/* ---- Button row ---- */
.st-btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.st-btn-primary {
  display: inline-block;
  background: #4da6d9;
  color: #040e19 !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 36px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.st-btn-outline {
  display: inline-block;
  border: 2px solid #4da6d9;
  color: #4da6d9 !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 36px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* ---- Section wrappers ---- */
.st-section       { padding: 80px 24px; }
.st-section--dark { background: #040e19; }
.st-section--navy { background: #0a1e30; }
.st-border-top    { border-top: 1px solid rgba(77, 166, 217, 0.18); }

/* ---- Centred containers ---- */
.st-container    { max-width: 1200px; margin-left: auto; margin-right: auto; }
.st-container-sm { max-width: 860px; margin-left: auto; margin-right: auto; }
.st-text-center  { text-align: center; }

/* ---- "All Services" button — breathing room above and below ---- */
.st-section--navy > .st-container > .st-text-center {
  margin-top: 64px;
  margin-bottom: 20px;
}

/* ---- Section labels / headings / subtext ---- */
.st-label {
  color: #4da6d9;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
}
.st-h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #e8f4fb;
  text-align: center;
  margin: 0 0 14px;
}
.st-sub {
  color: #c8dde9;
  text-align: center;
  max-width: 580px;
  margin: 0 auto 52px;
  font-size: 1rem;
  line-height: 1.75;
}

/* ---- Service card grid ---- */
.st-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.st-card {
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.25);
  border-radius: 10px;
  overflow: hidden;
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 360px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.st-card:hover {
  border-color: rgba(77, 166, 217, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.st-card-img   { width: 100%; height: 190px; object-fit: cover; display: block; }
.st-card-body  { padding: 24px; }
.st-card-cat {
  color: #4da6d9;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.st-card-title {
  color: #e8f4fb;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}
.st-card-desc {
  color: #c8dde9;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0 0 18px;
}
.st-card-link { color: #4da6d9; font-size: 0.88rem; font-weight: 600; text-decoration: none; }

/* ---- Partner / tech tags ---- */
.st-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.st-tag {
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.25);
  color: #c8dde9;
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 0.88rem;
  display: inline-block;
}

/* ---- CTA checklist items ---- */
.st-check      { color: #c8dde9; font-size: 1rem; line-height: 1.8; margin: 0 0 10px; }
.st-check-last { color: #c8dde9; font-size: 1rem; line-height: 1.8; margin: 0 0 44px; }

/* ---- Recommendation / contact widgets ---- */
.rec-wrap {
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.25);
  border-radius: 10px;
  padding: 32px;
  margin: 32px 0;
  text-align: center;
}
.rec-title { color: #e8f4fb; font-size: 1.2rem; font-weight: 700; margin: 0 0 10px; }
.rec-sub   { color: #c8dde9; font-size: 0.95rem; line-height: 1.6; margin: 0 0 20px; }
.rec-form  { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 480px; margin: 0 auto; }
.rec-input {
  flex: 1 1 200px;
  padding: 10px 16px;
  border: 1px solid rgba(77, 166, 217, 0.4);
  border-radius: 6px;
  background: #040e19;
  color: #e8f4fb;
  font-size: 0.95rem;
}
.rec-submit {
  padding: 10px 24px;
  background: #4da6d9;
  color: #040e19;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* ---- Service page hero ---- */
.st-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #040e19 0%, #0a1e30 60%, #0d2137 100%);
  padding: 72px 24px 56px;
  text-align: center;
  border-bottom: 1px solid rgba(77, 166, 217, 0.18);
}
/* Ensure hero text renders above the bg image overlay */
.st-page-hero > div { position: relative; z-index: 1; }
.st-page-hero-h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #e8f4fb;
  margin: 0 0 16px;
  line-height: 1.2;
}
.st-page-hero-sub {
  font-size: 1.05rem;
  color: #c8dde9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ---- Utility: content sections ---- */
.st-content-block { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.st-lead { font-size: 1.1rem; color: #c8dde9; line-height: 1.8; margin-bottom: 2em; }

/* ---- Hero background image overlay ---- */
/* Add <img class="st-hero-bg" src="..." alt=""> as FIRST child inside .st-hero */
.st-hero { position: relative; overflow: hidden; }
.st-hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.st-hero .st-container-sm,
.st-hero .st-container { position: relative; z-index: 1; }

/* ---- Services featured layout: first 2 cards 50%, next 3 cards 33% ---- */
.st-cards--feat {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.st-cards--feat > .st-card { flex: none; max-width: none; min-width: 0; }
.st-cards--feat > .st-card:nth-child(1),
.st-cards--feat > .st-card:nth-child(2) { grid-column: span 3; }
.st-cards--feat > .st-card:nth-child(3),
.st-cards--feat > .st-card:nth-child(4),
.st-cards--feat > .st-card:nth-child(5) { grid-column: span 2; }
@media (max-width: 900px) {
  .st-cards--feat > .st-card { grid-column: span 6 !important; }
}

/* ---- Uniform 3-column card grid (6 cards = 2 clean rows) ---- */
.st-cards--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.st-cards--3col > .st-card { min-width: 0; }
@media (max-width: 900px) {
  .st-cards--3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .st-cards--3col { grid-template-columns: 1fr; }
}

/* ---- "Why SimpleTech" differentiators row ---- */
.st-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  text-align: center;
}
.st-why-icon {
  font-size: 2rem;
  color: #4da6d9;
  display: block;
  margin-bottom: 12px;
}
.st-why-title {
  color: #e8f4fb;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.st-why-desc {
  color: #c8dde9;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .st-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Latest Insights card grid ---- */
.st-insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.st-insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .st-insights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .st-insights { grid-template-columns: 1fr; } }
.st-insight-card {
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.15);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s;
}
.st-insight-card:hover { border-color: rgba(77, 166, 217, 0.4); }
.st-insight-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.st-insight-body { padding: 16px; }
.st-insight-date {
  color: #4da6d9;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.st-insight-title {
  color: #e8f4fb;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}
.st-insight-excerpt {
  color: #c8dde9;
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Light section (white/off-white background) ---- */
.st-section--light { background: #f0f6fb; }
.st-section--light .st-h2  { color: #0a1e30; }
.st-section--light .st-sub { color: #3d5a6e; }

/* ---- CTA medium-blue gradient section ---- */
.st-section--cta {
  background: linear-gradient(150deg, #0d4080 0%, #1260b0 55%, #1a6dba 100%);
}

/* ---- Services split header: label+h2 left, subtitle right ---- */
.st-section-split-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 44px;
}
.st-section-split-header .st-label { text-align: left; }
.st-section-split-header .st-h2   { text-align: left; margin: 0; }
.st-section-split-header .st-sub  { text-align: left; margin: 0; max-width: none; }
@media (max-width: 760px) {
  .st-section-split-header { grid-template-columns: 1fr; }
}

/* ---- Inline checkmark row ---- */
.st-check-row {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin: 0 0 36px;
}
.st-check-row .st-check,
.st-check-row .st-check-last { margin: 0; }

/* ---- White outline button (for CTA on blue background) ---- */
.st-btn-outline-white {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.85);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 36px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* ---- Footer: hide auto-generated Navigate / Connect nav columns ---- */
.footer-nav { display: none !important; }

/* ---- Footer: make widget-area items display as flex row ---- */
.footer-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  align-items: flex-start !important;
}
.footer-brand { flex: 0 0 220px !important; }
.footer-widgets-section {
  flex: 1 !important;
  min-width: 0 !important;
}
.footer-widgets-section .widget-area {
  display: flex !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}
.footer-widgets-section .widget { flex: 1 !important; min-width: 140px !important; }
.footer-widgets-section .widget__title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(200,221,233,0.6) !important;
  margin: 0 0 14px !important;
}
.footer-widgets-section .widget__content p { margin: 0 0 6px; }
.footer-widgets-section .widget__content a { color: #c8dde9; text-decoration: none; font-size: 0.88rem; }
.footer-widgets-section .widget__content a:hover { color: #4da6d9; }
.footer-widgets-section .widget__content p:not(:has(a)) { color: #c8dde9; font-size: 0.88rem; }

/* ---- Footer: replace "Powered by EmDash" with copyright ---- */
.footer-copyright { font-size: 0 !important; color: transparent !important; }
.footer-copyright::before {
  display: block;
  font-size: 0.85rem;
  color: rgba(200, 221, 233, 0.55);
  content: "\00A9 2026 SimpleTech AB. All rights reserved.";
}
.footer-copyright a { display: none !important; }

/* ---- Hide Emdash theme switcher buttons ---- */
.theme-switcher { display: none !important; }

/* ---- Build version label (footer, very small/muted) ---- */
.st-build-info {
  font-size: 0.65rem;
  font-family: monospace;
  color: rgba(200, 221, 233, 0.25);
  letter-spacing: 0.04em;
  user-select: all;
}

/* ---- Contacts page ---- */
.st-contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}
.st-contact-info { flex: 1 1 260px; }
.st-contact-info h2     { color: #e8f4fb; margin-bottom: 16px; }
.st-contact-info p      { color: #c8dde9; line-height: 1.7; margin-bottom: 12px; }
.st-contact-info a      { color: #4da6d9; }
/* Label colour for contact fields (inline style stripped by sanitizer) */
.st-contact-info strong { color: #4da6d9; }

/* ---- Tags: bottom spacing when inside a section ---- */
/* Inline style="margin-bottom:48px" is stripped by Emdash sanitizer */
.st-section .st-tags { margin-bottom: 48px; }

/* ---- Button hover states ---- */
.st-btn-primary:hover     { background: #5eb8eb; }
.st-btn-outline:hover     { background: rgba(77,166,217,0.12); }
.st-btn-outline-white:hover { background: rgba(255,255,255,0.1); }

/* ---- Stat cards (About page, 3D Printing stats block) ---- */
/* Emdash sanitizer strips inline style= attrs; these classes replace them */
.st-stat-body { text-align: center; padding: 36px 24px; }
.st-stat-num  {
  font-size: 2.6rem;
  font-weight: 800;
  color: #4da6d9;
  margin: 0 0 10px;
  line-height: 1;
  display: block;
}
.st-stat-desc { color: #c8dde9; font-size: 0.95rem; margin: 0; line-height: 1.4; }

/* ---- Leadership / team card (About page) ---- */
.st-leader-card {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 740px;
  margin: 40px auto 0;
  padding: 32px;
  align-items: flex-start;
}
.st-leader-left {
  flex: 0 0 auto;
  text-align: center;
  min-width: 160px;
}
.st-leader-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(77, 166, 217, 0.15);
  border: 2px solid rgba(77, 166, 217, 0.4);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.st-leader-name {
  color: #e8f4fb; font-size: 1.05rem; font-weight: 700; margin: 0 0 4px;
}
.st-leader-role {
  color: #4da6d9; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 20px;
}
.st-leader-links { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-leader-right { flex: 1 1 260px; }
.st-leader-right p { color: #c8dde9; font-size: 0.95rem; line-height: 1.75; margin-bottom: 16px; }
.st-leader-right p:last-child { margin-bottom: 0; }

/* ---- Small primary button (e.g. in leader card) ---- */
.st-btn-primary-sm {
  display: inline-block;
  background: #4da6d9;
  color: #040e19 !important;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}
.st-btn-primary-sm:hover { background: #5eb8eb; }

/* ---- Insight card link style in light sections ---- */
.st-section--light .st-card-link { color: #1260b0; }

/* ---- Sub text with extra top margin for materials section ---- */
.st-sub--spaced { margin-top: 32px; }

/* ---- Card image hover zoom ---- */
.st-card-img { transition: transform 0.4s ease; }
.st-card:hover .st-card-img { transform: scale(1.04); }

/* ---- Split layout — image + text side by side ---- */
.st-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 32px;
}
@media (max-width: 820px) {
  .st-split { grid-template-columns: 1fr; gap: 32px; }
  .st-split--img-first .st-split-img { order: -1; }
}
.st-split-img {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.st-split-img img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 0.5s ease;
}
.st-split-img:hover img { transform: scale(1.03); }

/* ---- Full-width feature image inside a section ---- */
.st-feature-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-top: 40px;
}

/* ---- Pill / badge tags inside service cards ---- */
.st-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(77, 166, 217, 0.12);
}
.st-pill {
  display: inline-block;
  background: rgba(77, 166, 217, 0.10);
  border: 1px solid rgba(77, 166, 217, 0.22);
  color: #7ec8e8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---- Inline mid-page CTA banner ---- */
.st-cta-inline {
  background: rgba(77, 166, 217, 0.07);
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 12px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.st-cta-inline-text h3 {
  color: #e8f4fb;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.st-cta-inline-text p {
  color: #c8dde9;
  font-size: 0.88rem;
  margin: 0;
}

/* ---- Technology / framework stack grid ---- */
.st-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.st-stack-item {
  padding: 14px 16px;
  background: rgba(77, 166, 217, 0.06);
  border: 1px solid rgba(77, 166, 217, 0.14);
  border-radius: 8px;
}
.st-stack-item-name {
  color: #e8f4fb;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 3px;
  display: block;
}
.st-stack-item-desc {
  color: #7a9db5;
  font-size: 0.78rem;
  margin: 0;
}

/* ---- Stat row (4 equal cards, consistent height) ---- */
.st-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border: 1px solid rgba(77,166,217,0.18);
  border-radius: 12px;
  overflow: hidden;
}
.st-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  border-right: 1px solid rgba(77,166,217,0.18);
  background: rgba(77,166,217,0.04);
}
.st-stat-card:last-child { border-right: none; }

/* ---- Accent colour for stat numbers ---- */
.st-accent { color: #4da6d9; }
.st-stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
  letter-spacing: -0.02em;
}
.st-stat-num--sm { font-size: 1.7rem; }
.st-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c8dde9;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  display: block;
}
.st-stat-desc {
  font-size: 0.8rem;
  color: #6a8fa8;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .st-stat-row { grid-template-columns: 1fr 1fr; }
  .st-stat-card:nth-child(2) { border-right: none; }
  .st-stat-card:nth-child(1),
  .st-stat-card:nth-child(2) { border-bottom: 1px solid rgba(77,166,217,0.18); }
}

/* ---- Colour swatches grid ---- */
.st-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.st-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 62px;
}
.st-swatch-dot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.1);
}
.st-swatch-label {
  font-size: 0.58rem;
  color: #7a9db5;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}
/* Individual swatch colours — all 49 values defined in CSS (no inline style needed) */
.sw-01{background:#FFFFFF;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.12)}
.sw-02{background:#F5F0E8}
.sw-03{background:#E8E8E8;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-04{background:#C0C0C0}
.sw-05{background:#909090}
.sw-06{background:#505050}
.sw-07{background:#2A2A2A}
.sw-08{background:#141414}
.sw-09{background:#CC0000}
.sw-10{background:#990000}
.sw-11{background:#E8003A}
.sw-12{background:#CC0077}
.sw-13{background:#FF6B9D}
.sw-14{background:#FFB3C8}
.sw-15{background:#FF7A5C}
.sw-16{background:#FF6600}
.sw-17{background:#FF8800}
.sw-18{background:#FF4500}
.sw-19{background:#FFB347}
.sw-20{background:#FFD700;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-21{background:#FFEE00;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-22{background:#F5F500;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-23{background:#808000}
.sw-24{background:#00AA44}
.sw-25{background:#007733}
.sw-26{background:#99CC00}
.sw-27{background:#556B2F}
.sw-28{background:#228B22}
.sw-29{background:#3CB371}
.sw-30{background:#00FF88}
.sw-31{background:#003399}
.sw-32{background:#0055CC}
.sw-33{background:#0099FF}
.sw-34{background:#00CCFF}
.sw-35{background:#ADD8E6;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-36{background:#001F5B}
.sw-37{background:#00BFFF}
.sw-38{background:#6600CC}
.sw-39{background:#330066}
.sw-40{background:#9933FF}
.sw-41{background:#CC99FF;box-shadow:0 2px 8px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(0,0,0,0.08)}
.sw-42{background:#FF00FF}
.sw-43{background:#8B4513}
.sw-44{background:#5C3317}
.sw-45{background:#B87333}
.sw-46{background:#CD7F32}
.sw-47{background:#C0C0C0}
.sw-48{background:#DAA520}
.sw-49{background:#00FF88;box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 12px rgba(0,255,136,0.5)}

/* ---- Material cards grid ---- */
.st-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.st-material-card {
  padding: 18px 20px;
  background: rgba(77, 166, 217, 0.05);
  border: 1px solid rgba(77, 166, 217, 0.14);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.st-material-card:hover {
  border-color: rgba(77, 166, 217, 0.35);
}
.st-material-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.st-badge--blue   { background: rgba(0,85,204,0.25); color: #6bb3ff; border: 1px solid rgba(0,85,204,0.4); }
.st-badge--teal   { background: rgba(0,153,128,0.25); color: #4ddbbf; border: 1px solid rgba(0,153,128,0.4); }
.st-badge--orange { background: rgba(255,102,0,0.20); color: #ff9555; border: 1px solid rgba(255,102,0,0.4); }
.st-badge--green  { background: rgba(0,170,68,0.20); color: #5ddd88; border: 1px solid rgba(0,170,68,0.4); }
.st-badge--purple { background: rgba(102,0,204,0.25); color: #b07eff; border: 1px solid rgba(102,0,204,0.4); }
.st-badge--dark   { background: rgba(60,60,60,0.40); color: #c8c8c8; border: 1px solid rgba(180,180,180,0.25); }
.st-badge--brown  { background: rgba(139,69,19,0.25); color: #d4956e; border: 1px solid rgba(139,69,19,0.4); }
.st-badge--gold   { background: rgba(200,160,0,0.25); color: #f5d060; border: 1px solid rgba(200,160,0,0.4); }
.st-badge--grey   { background: rgba(120,120,120,0.20); color: #b0b0b0; border: 1px solid rgba(120,120,120,0.3); }
.st-badge--glow   { background: rgba(0,255,136,0.15); color: #00ff88; border: 1px solid rgba(0,255,136,0.4); }
.st-material-desc {
  font-size: 0.82rem;
  color: #8eaec4;
  margin: 0;
  line-height: 1.55;
}

/* ---- Who We Print For audience grid ---- */
.st-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.st-audience-card {
  padding: 24px 22px;
  background: rgba(77, 166, 217, 0.05);
  border: 1px solid rgba(77, 166, 217, 0.13);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.st-audience-card:hover {
  border-color: rgba(77, 166, 217, 0.3);
  transform: translateY(-2px);
}
.st-audience-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
  line-height: 1;
}
.st-audience-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #c8dde9;
  margin: 0 0 8px;
}
.st-audience-text {
  font-size: 0.82rem;
  color: #7a9db5;
  margin: 0;
  line-height: 1.6;
}

/* ---- Feature bullet list ---- */
.st-feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.st-feature-list li {
  padding: 7px 0 7px 24px;
  position: relative;
  font-size: 0.9rem;
  color: #a8c8dd;
  border-bottom: 1px solid rgba(77,166,217,0.08);
  line-height: 1.45;
}
.st-feature-list li:last-child { border-bottom: none; }
.st-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4da6d9;
  font-weight: 700;
}

/* ---- Responsive: swatches tighten on mobile ---- */
@media (max-width: 600px) {
  .st-swatches-grid { gap: 7px; }
  .st-swatch { width: 50px; }
  .st-swatch-dot { width: 36px; height: 36px; }
  .st-material-grid { grid-template-columns: 1fr 1fr; }
  .st-audience-grid { grid-template-columns: 1fr; }
  .st-cards--4col { grid-template-columns: 1fr 1fr; }
}

/* ---- System highlights feature list (3D printing) ---- */
.st-highlights-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.st-highlight-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(77, 166, 217, 0.05);
  border: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 8px;
}
.st-highlight-label {
  color: #4da6d9;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 3px;
  display: block;
}
.st-highlight-value {
  color: #c8dde9;
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.4;
}


/* ================================================================
   INSIGHTS / POSTS LISTING — Dark theme override
   Targets the native /posts emdash template
   ================================================================ */

/* Full-width dark background */
.posts-page {
  max-width: 100% !important;
  padding: 0 !important;
  background: #070f1a;
  min-height: 80vh;
}

/* Hero header */
.posts-page .page-header {
  background: linear-gradient(160deg, #040e19 0%, #0a1e30 55%, #0d2137 100%);
  padding: 80px 40px 60px;
  text-align: center;
  border-bottom: 1px solid rgba(77,166,217,0.12);
  max-width: 100%;
  margin-bottom: 0;
}

/* Insights page hero text — set via JS in initPostsPage() */
.posts-page .page-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: #e8f4fb;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.posts-page .page-description {
  font-size: 1.08rem;
  color: #7a9db5;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Card grid layout */
.posts-page .posts-list {
  display: grid !important;
  flex-direction: unset !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
  padding: 56px 40px 80px;
  max-width: 1280px;
  margin: 0 auto;
  background: transparent;
}

/* Individual post cards */
.posts-page .post-item {
  border-bottom: none !important;
  padding: 0 !important;
  border: 1px solid rgba(77,166,217,0.12);
  border-radius: 12px;
  background: rgba(10,28,46,0.6);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.posts-page .post-item:first-child { padding-top: 0 !important; }
.posts-page .post-item:last-child  { border-bottom: none !important; }
.posts-page .post-item:hover {
  border-color: rgba(77,166,217,0.32);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}

/* Post link — fills card, column flex */
.posts-page .post-link {
  padding: 28px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Meta row */
.posts-page .post-meta {
  font-size: 0.76rem !important;
  color: #4a6a82 !important;
  margin-bottom: 14px !important;
  gap: 8px !important;
}
.posts-page .post-byline-name { color: #4da6d9 !important; font-weight: 600; }
.posts-page .meta-dot { background: #2a4050 !important; }

/* Post title */
.posts-page .post-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #cce0f0 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
  transition: color 0.15s ease;
}
.posts-page .post-item:hover .post-title { color: #e8f4fb !important; }

/* Post excerpt — clamp to 3 lines */
.posts-page .post-excerpt {
  font-size: 0.84rem !important;
  color: #5a7a92 !important;
  line-height: 1.68 !important;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0 !important;
}

/* ─ NOTE 2026-05-01 (r54): Removed the legacy `.posts-page .post-link::before`
   category-badge system. It used [href*="keyword"] attribute matching — fine
   for the original 8 articles, but the `agents-everywhere-*` series doesn't
   match any of the keywords (vibe-coding, ai-agent, gdpr, jira, …) and so
   fell through to a literal `content: "Insights"` default badge. That's why
   David saw 7 cards with "INSIGHTS" instead of "AI & AGENTIC".

   The JS-driven `.si-cat-badge` system (rendered by initPostsPage(), source
   of truth = POSTS array in simpletech-insights.js) is now the only badge
   on these cards. POST_BY_SLUG has every published slug, so every card
   shows its correct coloured category — no keyword pattern to maintain. ─ */

/* Responsive */
@media (max-width: 900px) {
  .posts-page .posts-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 40px 24px 60px;
  }
}
@media (max-width: 600px) {
  .posts-page .posts-list {
    grid-template-columns: 1fr;
    padding: 32px 16px 48px;
    gap: 16px;
  }
  .posts-page .page-header { padding: 60px 20px 40px; }
}
/**
 * insights-css-additions.css
 * SimpleTech Insights — supplementary styles for the emdash CMS site.
 *
 * Theme tokens (for reference):
 *   --bg-darkest : #070f1a
 *   --bg-dark    : #0a1e30
 *   --bg-mid     : #0d2137
 *   --accent     : #4da6d9
 *   --text-primary: #e8f4fb
 *   --text-muted : #7a9db5
 */

/* ═══════════════════════════════════════════════
   1. POSTS LISTING PAGE — CARD IMAGES
   ═══════════════════════════════════════════════ */

/* Make each post card a vertical flex column so the image
   sits at the top and text flows naturally below. */
.posts-page .post-item,
.posts-page .post-card {
  display: flex;
  flex-direction: column;
}

/* The .post-link anchor also needs to stretch vertically
   so the image is truly at the top of the card. */
.posts-page .post-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}

/* Image wrapper — bleeds to the card edges. */
.si-card-img {
  width: 100%;
  overflow: hidden;
  /* Negative margin trick: extend to the edges of the padded card container.
     Adjust the value to match the card's own horizontal padding if needed. */
  margin: -1px -1px 0 -1px; /* top bleed handled by card border-radius */
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
  background: #0a1e30;
}

.si-card-img img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* Category badge — injected by JS, visible on each card. */
/* Wrapper for one-or-more category badges. Flex row so multi-category
   posts render side-by-side instead of stacked at the same absolute
   position. The wrapper itself takes positioning in cards view; the
   individual badges fall back to flow layout. */
.si-cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-self: flex-start;
  margin: 12px 0 4px;
}

.si-cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(77, 166, 217, 0.12);
  color: #4da6d9;
  border: 1px solid rgba(77, 166, 217, 0.25);
}

/* ═══════════════════════════════════════════════
   2. FILTER TABS
   ═══════════════════════════════════════════════ */

/* Controls wrapper — two rows of controls centred to the post-list width. */
#si-controls {
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.si-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.si-controls-row--top {
  /* search expands; view toggle + RSS sit on the right */
}

.si-controls-row--top {
  /* Search on the LEFT, then podcast filter, then view toggle, then RSS
     pushed to the right edge. The podcast filter + view toggle stay in
     the centre flow; mobile collapse handled by media query below. */
  align-items: center;
}

.si-controls-row--top #si-search-wrap {
  flex: 0 1 320px;     /* fixed-ish, can shrink — search left, no center */
  min-width: 220px;
  margin-right: auto;  /* push everything else to the right */
}

.si-controls-row--top #si-podcast-filter {
  flex-shrink: 0;
}

/* RSS link sticks to the far right (was already flex-shrink:0). */

.si-controls-row--bottom {
  /* category filter takes the full bottom row now (podcast filter moved
     up to the top row per 2026-04-30 spec). */
  justify-content: flex-start;
}

/* STWP-68: RSS subscribe link — compact pill, top-row right side */
#si-rss-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 138, 0, 0.12);
  color: #ff8a00;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 138, 0, 0.3);
  transition: background 120ms ease, transform 120ms ease;
}

#si-rss-link:hover,
#si-rss-link:focus-visible {
  background: rgba(255, 138, 0, 0.2);
  transform: translateY(-1px);
}

#si-rss-link .ph {
  font-size: 0.9rem;
  line-height: 1;
}

/* STWP-69: view toggle buttons (cards / list) */
#si-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.08);
  box-shadow: inset 0 0 0 1px rgba(77, 166, 217, 0.18);
  overflow: hidden;
}

.si-view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 7px 14px;
  color: #7a9db5;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.si-view-btn:hover { color: #c8dce8; }
.si-view-btn--active {
  background: rgba(77, 166, 217, 0.22);
  color: #e8f4fb;
}

/* STWP-70: podcast filter chips */
#si-podcast-filter {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.si-podcast-chip {
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: #7a9db5;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(139, 141, 241, 0.25);
  transition: background 120ms ease, color 120ms ease;
}

.si-podcast-chip:hover { color: #c8dce8; }
.si-podcast-chip--active {
  background: rgba(139, 141, 241, 0.18);
  color: #c8c9ff;
  box-shadow: inset 0 0 0 1px rgba(139, 141, 241, 0.55);
}

/* STWP-69: result count + pagination */
#si-result-count {
  max-width: 1200px;
  margin: 4px auto 14px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  font-size: 0.85rem;
  color: #7a9db5;
}

#si-pagination {
  max-width: 1200px;
  margin: 24px auto 32px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.si-page-btn {
  appearance: none;
  cursor: pointer;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(77, 166, 217, 0.08);
  color: #c8dce8;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(77, 166, 217, 0.18);
  transition: background 120ms ease;
}

.si-page-btn:hover:not(:disabled) {
  background: rgba(77, 166, 217, 0.18);
}

.si-page-btn--current {
  background: rgba(77, 166, 217, 0.32);
  font-weight: 700;
}

.si-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* STWP-69: Cards view — grid of card-style post items */
.posts-list.view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  list-style: none;
  padding: 0 clamp(1rem, 3vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

.posts-list.view-cards .post-item {
  margin: 0;
  border: 0;
  background: rgba(13, 25, 40, 0.4);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(77, 166, 217, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.posts-list.view-cards .post-item:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(77, 166, 217, 0.25),
              0 6px 18px rgba(0, 0, 0, 0.25);
}

.posts-list.view-cards .post-link {
  display: block;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.posts-list.view-cards .si-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.posts-list.view-cards .si-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.posts-list.view-cards .post-meta,
.posts-list.view-cards .post-title,
.posts-list.view-cards .post-excerpt {
  padding-left: 18px;
  padding-right: 18px;
}

.posts-list.view-cards .post-meta {
  padding-top: 14px;
  font-size: 0.75rem;
  color: #7a9db5;
}

.posts-list.view-cards .post-title {
  font-size: 1.15rem;
  margin: 8px 0;
  line-height: 1.35;
}

.posts-list.view-cards .post-excerpt {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #c8dce8;
  padding-bottom: 18px;
}

/* ─ NOTE 2026-05-01 (r54): Removed the `display: none !important` rule that
   was previously here. The April-30 hot-fix had the diagnosis backwards —
   it hid the JS-rendered `.si-cat-badge` (the colourful, correct one) and
   left the legacy CSS `::before` "Insights" default visible. With the
   `::before` system removed entirely above, the JS badges are now the
   only badge layer and need to be visible in BOTH list and cards view. ─ */

/* The podcast badge corner indicator (already styled elsewhere) needs to
   sit at top-right inside cards too — it's already absolute-positioned. */

/* ─ List view: compact 1-row-per-article layout. Smaller footprint so
   more articles fit in a viewport. Image hidden, excerpt hidden, title +
   meta on one row each, separator between items. ─ */
.posts-list.view-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0 clamp(1rem, 3vw, 2rem);
  max-width: 1100px;
  margin: 0 auto;
}

.posts-list.view-list .post-item {
  margin: 0;
  padding: 14px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.posts-list.view-list .post-item:hover {
  transform: none;
  background: rgba(77, 166, 217, 0.05);
  box-shadow: none;
}

.posts-list.view-list .post-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title meta"
    "title meta";
  column-gap: 18px;
  row-gap: 2px;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  padding: 0;
}

.posts-list.view-list .si-card-img {
  display: none;
}

.posts-list.view-list .post-excerpt {
  display: none;
}

.posts-list.view-list .post-title {
  grid-area: title;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #e8f4fb;
}

.posts-list.view-list .post-meta {
  grid-area: meta;
  margin: 0;
  font-size: 0.78rem;
  color: #7a9db5;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.posts-list.view-list .post-meta .post-bylines,
.posts-list.view-list .post-meta time,
.posts-list.view-list .post-meta .meta-dot {
  flex-shrink: 0;
}

/* On narrow viewports stack title above meta */
@media (max-width: 640px) {
  .posts-list.view-list .post-link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta";
  }
  .posts-list.view-list .post-meta {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* Narrow viewports: collapse top row */
@media (max-width: 640px) {
  .si-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .si-controls-row--top #si-search-wrap { flex: 1 1 auto; margin-right: 0; }
  .si-controls-row--bottom { justify-content: flex-start; }
  #si-rss-link, #si-view-toggle, #si-podcast-filter {
    align-self: stretch;
    justify-content: center;
  }
}

/* ─ Article-page Category meta-block — visually matches the existing
   Author / Published / Reading time blocks. emdash sets
   `.meta-label / .meta-value { display: block }` inside an Astro
   <style> block scoped to `data-astro-cid-fjqfnjxi`, so JS-injected
   DOM doesn't pick those rules up. Re-state the bare display:block
   here (no flex, no extra gap) so the label/value stack with the same
   tight rhythm as the natural meta-blocks. ─ */
.st-category-block .meta-label {
  display: block;
}

.st-category-block .st-category-value {
  display: block;
  color: #e8f4fb;
  font-size: 0.95rem;
}

.st-category-block .st-category-value a {
  color: #e8f4fb;
  text-decoration: none;
}

.st-category-block .st-category-value a:hover,
.st-category-block .st-category-value a:focus-visible {
  color: #4da6d9;
  text-decoration: underline;
}

/* ─ Defensive hide for retired pages (3D printing — moving to a dedicated
   site). Belt-and-braces alongside the JS hideDeprecatedEntries() pass:
   if the JS hasn't run yet (e.g., NoScript or load race), the link is
   still hidden visually. The pages still resolve at their URLs for
   anyone who has them bookmarked. ─ */
a[href^="/pages/3d-printing"][data-stwp-hidden="true"],
.st-mega-item[data-stwp-hidden="true"],
li[data-stwp-hidden="true"],
[data-stwp-hidden="true"] {
  display: none !important;
}

#si-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 4px;
  margin-bottom: 24px;
}

#si-filter-bar::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.si-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid rgba(77, 166, 217, 0.3);
  background: transparent;
  color: #7a9db5;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.si-tab:hover {
  background: rgba(77, 166, 217, 0.1);
  color: #e8f4fb;
  border-color: rgba(77, 166, 217, 0.5);
}

.si-tab--active,
.si-tab[aria-selected="true"] {
  background: #4da6d9;
  color: #070f1a;
  border-color: #4da6d9;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   3. SEARCH INPUT
   ═══════════════════════════════════════════════ */

#si-search-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
}

#si-search {
  width: 100%;
  max-width: 600px;
  padding: 10px 18px 10px 42px;
  border-radius: 8px;
  border: 1px solid rgba(77, 166, 217, 0.25);
  background: #0a1e30 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a9db5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center;
  color: #e8f4fb;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  /* Remove browser default search input styling */
  -webkit-appearance: none;
  appearance: none;
}

#si-search::placeholder {
  color: #7a9db5;
}

#si-search:focus {
  border-color: #4da6d9;
  box-shadow: 0 0 0 3px rgba(77, 166, 217, 0.12);
}

/* Hide the native clear button in WebKit */
#si-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* No-results notice */
#si-no-results {
  text-align: center;
  color: #7a9db5;
  padding: 40px 0;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════
   4. SHARE BAR
   ═══════════════════════════════════════════════ */

.st-share-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 16px;
  margin-top: 48px;
  border-top: 1px solid rgba(77, 166, 217, 0.15);
}

/* The single end-of-article share bar — no bottom border needed. */
.st-share-bar--bottom {
  margin-bottom: 0;
}

.st-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.st-share-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a9db5;
  flex-shrink: 0;
  white-space: nowrap;
}

.st-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: filter 0.16s ease, transform 0.12s ease, opacity 0.16s ease;
  line-height: 1;
  white-space: nowrap;
  font-family: inherit;
}

.st-share-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.st-share-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.st-share-btn svg {
  flex-shrink: 0;
}

/* LinkedIn */
.st-share-linkedin {
  background: #0A66C2;
  color: #ffffff;
}

/* X / Twitter */
.st-share-twitter {
  background: #000000;
  color: #ffffff;
}

/* Facebook */
.st-share-facebook {
  background: #1877F2;
  color: #ffffff;
}

/* Copy link + Email — ghost / outline style */
.st-share-copy,
.st-share-email {
  background: rgba(77, 166, 217, 0.08);
  color: #4da6d9;
  border: 1px solid rgba(77, 166, 217, 0.3);
}

.st-share-copy:hover,
.st-share-email:hover {
  background: rgba(77, 166, 217, 0.16);
  filter: none;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════
   5. ARTICLE PAGE — DARK THEME OVERRIDES
   ═══════════════════════════════════════════════ */

/* Wrapper */
.article {
  background: #070f1a;
  color: #e8f4fb;
}

/* Hero image */
.article-hero img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 0;
}

/* Article grid layout */
.article-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .article-grid {
    padding: 0 20px;
  }
}

/* Meta column */
.article-meta-col .meta-label {
  color: #7a9db5;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.article-meta-col .meta-value,
.byline-name {
  color: #e8f4fb;
}

.article-meta-col .meta-value a,
.byline-name a {
  color: #4da6d9;
  text-decoration: none;
}

/* Article header */
.article-header .article-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #e8f4fb;
  line-height: 1.25;
  margin-bottom: 16px;
}

.article-header .article-excerpt {
  color: #7a9db5;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════
   PODCAST PLAYER  (STWP-65)
   Lives at the TOP of the left meta column, above Category / Author /
   Published / Reading time, so the audio is the most prominent thing
   in the gutter. A subtle border-bottom separates the player from the
   text-meta blocks below — same hairline treatment as before, just
   flipped now that podcast is on top.
   ═══════════════════════════════════════════════ */

.article-meta-col .meta-block.st-podcast {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(77, 166, 217, 0.15);
}

.st-podcast-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-podcast-icon {
  font-size: 0.95rem;
  line-height: 1;
  color: #8b8df1; /* muted indigo accent — subtle podcast cue */
}

.st-podcast-title {
  margin: 6px 0 12px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: #e8f4fb;
  /* Long titles wrap naturally; no clamp so editors can see the full
     episode name. Keep the surface compact otherwise. */
  overflow-wrap: anywhere;
}

.st-podcast-audio {
  display: block;
  width: 100%;
  /* Native audio controls render at their browser-default chrome. The
     control bar is ~32-40px tall depending on browser. We don't try to
     restyle the native controls — too fragile across engines. */
  margin: 0 0 8px;
}

.st-podcast-duration {
  display: block;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: #7a9db5;
  letter-spacing: 0.02em;
}

/* STWP-66: Turnstile widget container — inline below the audio control,
   shown until verification, hidden after success. The Turnstile iframe
   is fixed-size by Cloudflare; we just give it room to breathe. */
.st-podcast-turnstile {
  margin: 8px 0 6px;
  /* Standard Turnstile widget height is ~65-70px; min-height lets the
     player layout settle before the iframe renders. */
  min-height: 65px;
}

/* On narrow viewports the meta-col often stacks above the article body.
   Keep the podcast block tidy in that flow. */
@media (max-width: 760px) {
  .article-meta-col .meta-block.st-podcast {
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .st-podcast-title {
    font-size: 0.95rem;
  }
}

/* ─ Podcast indicator badge on insights cards.
   Pinned to the top-right corner of the card root (not the image) with
   a 12px inset, so it reads as a card-level marker and is consistent
   across the three card types: .post-card (article-footer "Continue
   reading"), .st-insight-card (home-page insights), .post-item (/posts
   listing). Vibrant indigo→purple gradient mirrors the player's accent
   so users learn to associate it with podcasts at a glance. ─ */

.post-card,
.st-insight-card,
.post-item {
  position: relative; /* anchor for the badge */
}

.st-podcast-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none; /* don't block card link clicks */
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.45),
    0 0 0 2px rgba(13, 25, 40, 0.45);
}

@media (max-width: 540px) {
  .st-podcast-badge {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }
}

/* Article body */
.article-content {
  color: #c8dce8;
  font-size: 1rem;
  line-height: 1.75;
}

.article-content h2,
.article-content h3 {
  color: #e8f4fb;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-left: 14px;
  border-left: 3px solid #4da6d9;
}

.article-content h2 {
  font-size: 1.55rem;
}

.article-content h3 {
  font-size: 1.2rem;
}

.article-content h4 {
  color: #e8f4fb;
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.article-content p {
  line-height: 1.8;
  color: #c8dce8;
  margin-bottom: 1.2rem;
}

.article-content strong {
  color: #4da6d9;
  font-weight: 700;
}

.article-content em {
  color: #a8c8dc;
}

.article-content a {
  color: #4da6d9;
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 166, 217, 0.3);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.article-content a:hover {
  color: #78c0e8;
  border-bottom-color: #4da6d9;
}

.article-content blockquote {
  border-left: 4px solid #4da6d9;
  background: rgba(77, 166, 217, 0.06);
  margin: 1.5rem 0;
  padding: 16px 24px;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #a8c8dc;
}

.article-content blockquote p {
  margin-bottom: 0;
  color: #a8c8dc;
}

.article-content code {
  background: #0a1e30;
  color: #78c0e8;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.88em;
  border: 1px solid rgba(77, 166, 217, 0.15);
}

.article-content pre {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.15);
  border-radius: 8px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.article-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: #c8dce8;
  font-size: 0.88rem;
  line-height: 1.6;
}

.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}

.article-content li {
  margin-bottom: 0.4rem;
  color: #c8dce8;
}

/* Tables */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: #0a1e30;
  border-radius: 8px;
  overflow: hidden;
}

.article-content thead th {
  background: #0d2137;
  color: #e8f4fb;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(77, 166, 217, 0.2);
}

.article-content tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(77, 166, 217, 0.08);
  color: #c8dce8;
}

.article-content tbody tr:last-child td {
  border-bottom: none;
}

.article-content tbody tr:nth-child(even) td {
  background: rgba(77, 166, 217, 0.03);
}

/* "More posts" / related section */
.more-posts {
  background: #0a1e30;
  padding: 48px 40px;
  margin-top: 48px;
}

.more-posts h2,
.more-posts .more-posts__title {
  color: #e8f4fb;
  font-size: 1.4rem;
  margin-bottom: 24px;
}

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

@media (max-width: 900px) {
  .more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.post-card {
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(77, 166, 217, 0.25);
}

.card-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  /* Override emdash's inline height:auto */
  max-width: 100% !important;
  height: 180px !important;
}

.card-body {
  padding: 16px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7a9db5;
  font-size: 0.75rem;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.card-byline-name {
  color: #7a9db5;
}

.meta-dot {
  color: #4da6d9;
  font-size: 0.6rem;
}

.card-title {
  color: #e8f4fb;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
}

.card-excerpt {
  color: #7a9db5;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Continue reading" heading */
.more-title {
  color: #e8f4fb;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(77, 166, 217, 0.15);
}

/* TOC sidebar */
.toc {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 8px;
  padding: 20px;
  position: sticky;
  top: 24px;
}

.toc-title,
.meta-label {
  color: #7a9db5;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.toc a {
  color: #7a9db5;
  text-decoration: none;
  font-size: 0.88rem;
  display: block;
  padding: 4px 0;
  transition: color 0.15s ease;
  border-left: 2px solid transparent;
  padding-left: 10px;
}

.toc a:hover {
  color: #4da6d9;
  border-left-color: #4da6d9;
}

/* Search widget */
.widget-search__input {
  width: 100%;
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 6px;
  color: #e8f4fb;
  padding: 8px 14px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.widget-search__input:focus {
  border-color: #4da6d9;
  box-shadow: 0 0 0 3px rgba(77, 166, 217, 0.12);
}

/* Comments */
.ec-comments,
.ec-comment-form {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.1);
  border-radius: 8px;
  padding: 24px;
  color: #c8dce8;
}

.ec-comment-form input,
.ec-comment-form textarea {
  background: #070f1a;
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 6px;
  color: #e8f4fb;
  padding: 10px 14px;
}

.ec-comment-form input:focus,
.ec-comment-form textarea:focus {
  outline: none;
  border-color: #4da6d9;
}

/* ═══════════════════════════════════════════════
   6. WP / VC CONTENT CLASSES — DARK THEME
   ═══════════════════════════════════════════════ */

/* Generic post wrapper */
.vc-post {
  color: #c8dce8;
}

/* Eyebrow label */
.vc-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4da6d9;
  margin-bottom: 8px;
}

/* Pull quote */
.vc-pull {
  border-left: 4px solid #4da6d9;
  background: rgba(77, 166, 217, 0.06);
  padding: 20px 28px;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 1.15rem;
  color: #a8c8dc;
  line-height: 1.6;
}

/* Pain points grid */
.vc-pains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .vc-pains {
    grid-template-columns: 1fr;
  }
}

.vc-pain {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 8px;
  padding: 20px;
}

.vc-pain-num {
  font-size: 3rem;
  font-weight: 800;
  color: #4da6d9;
  line-height: 1;
  margin-bottom: 8px;
}

.vc-pain-body h4 {
  color: #e8f4fb;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 1rem;
}

.vc-pain-body p {
  color: #7a9db5;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Warning / callout box */
.vc-warn {
  border-left: 4px solid rgba(255, 150, 60, 0.7);
  background: rgba(255, 150, 60, 0.08);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 1.5rem 0;
  color: #c8dce8;
}

.vc-warn-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 8px;
}

/* Stats grid */
.vc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}

.vc-stat {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.vc-stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: #4da6d9;
  line-height: 1.1;
  margin-bottom: 6px;
}

.vc-stat-label {
  display: block;
  font-size: 0.8rem;
  color: #7a9db5;
  line-height: 1.4;
}

/* Table wrapper */
.vc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border-radius: 8px;
}

.vc-table {
  width: 100%;
  border-collapse: collapse;
  background: #0a1e30;
}

.vc-table th {
  background: #0d2137;
  color: #e8f4fb;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid rgba(77, 166, 217, 0.15);
}

.vc-table td {
  padding: 10px 16px;
  border: 1px solid rgba(77, 166, 217, 0.12);
  color: #c8dce8;
}

.vc-table tr:nth-child(even) td {
  background: rgba(77, 166, 217, 0.04);
}

/* Tag pills */
.tag-vibe,
.tag-eng {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.tag-vibe {
  background: rgba(220, 80, 60, 0.18);
  color: #f07060;
  border: 1px solid rgba(220, 80, 60, 0.35);
}

.tag-eng {
  background: rgba(77, 166, 217, 0.15);
  color: #4da6d9;
  border: 1px solid rgba(77, 166, 217, 0.3);
}

/* Architecture diagram */
.vc-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .vc-diagram {
    grid-template-columns: 1fr;
  }
}

.vc-arch {
  background: #0a1e30;
  border: 1px solid rgba(77, 166, 217, 0.12);
  border-radius: 10px;
  padding: 20px;
}

.vc-arch.bad {
  border-left: 3px solid rgba(220, 80, 60, 0.5);
}

.vc-arch.good {
  border-left: 3px solid rgba(77, 166, 217, 0.5);
}

.vc-arch-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a9db5;
  margin-bottom: 12px;
}

/* Nodes */
.vc-node {
  display: inline-flex;
  align-items: center;
  background: #0d2137;
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 20px;
  margin: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: #c8dce8;
}

.vc-node.orchestrator {
  background: #4da6d9;
  color: #070f1a;
  border-color: #4da6d9;
  font-weight: 700;
}

.vc-node.tool {
  border-color: rgba(77, 166, 217, 0.15);
  color: #7a9db5;
}

.vc-node.human.center {
  background: rgba(255, 150, 60, 0.18);
  color: #f0a060;
  border-color: rgba(255, 150, 60, 0.35);
}

.vc-node.outcome {
  background: rgba(60, 180, 100, 0.15);
  color: #60c880;
  border-color: rgba(60, 180, 100, 0.3);
}

/* Arrows column (between bad/good in diagram) */
.vc-arrows {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  color: #4da6d9;
  gap: 8px;
}

/* CTA box */
.vc-cta {
  border: 1px solid rgba(77, 166, 217, 0.3);
  background: rgba(77, 166, 217, 0.06);
  border-radius: 10px;
  padding: 28px 32px;
  margin: 2rem 0;
  color: #e8f4fb;
}

.vc-cta h3,
.vc-cta h4 {
  border-left: none;
  padding-left: 0;
  color: #e8f4fb;
}

.vc-cta p {
  color: #a8c8dc;
  margin-bottom: 0;
}

.vc-cta a {
  color: #4da6d9;
}

/* Sources / footnotes */
.vc-sources {
  font-size: 0.78rem;
  color: #7a9db5;
  line-height: 1.6;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(77, 166, 217, 0.1);
}

.vc-sources a {
  color: rgba(77, 166, 217, 0.7);
}

.vc-sources a:hover {
  color: #4da6d9;
}

/* ═══════════════════════════════════════════════
   7. DSOV-* ARTICLE COMPONENTS
   Custom components used in data-sovereignty and
   similarly structured long-form articles.
   ═══════════════════════════════════════════════ */

/* Eyebrow label ─────────────────────────────── */
.dsov-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4da6d9;
  margin-bottom: 1.25rem;
  opacity: 0.85;
}

/* Pull quote ─────────────────────────────────── */
.dsov-pull {
  border-left: 3px solid #4da6d9;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  font-size: 1.05rem;
  font-style: italic;
  color: #c8dff0;
  background: rgba(77, 166, 217, 0.05);
  border-radius: 0 6px 6px 0;
  line-height: 1.65;
}
.dsov-pull cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-style: normal;
  color: #7a9db5;
  line-height: 1.5;
}

/* Warning / alert box ───────────────────────── */
.dsov-warn {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
}
.dsov-warn-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1.5;
}
.dsov-warn-body {
  color: #e8f4fb;
  font-size: 0.875rem;
  line-height: 1.65;
}
.dsov-warn-body strong {
  color: #fca5a5;
}

/* Timeline ──────────────────────────────────── */
.dsov-timeline {
  margin: 2rem 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(77, 166, 217, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dsov-tl-item {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
}
.dsov-tl-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4da6d9;
  border: 2px solid #070f1a;
  box-shadow: 0 0 0 2px #4da6d9;
}
.dsov-tl-item.warn::before {
  background: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b;
}
.dsov-tl-item.ok::before {
  background: #10b981;
  box-shadow: 0 0 0 2px #10b981;
}
.dsov-tl-date {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4da6d9;
  margin-bottom: 0.2rem;
}
.dsov-tl-item.warn .dsov-tl-date { color: #f59e0b; }
.dsov-tl-item.ok  .dsov-tl-date { color: #10b981; }
.dsov-tl-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #e8f4fb;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.dsov-tl-desc {
  font-size: 0.82rem;
  color: #7a9db5;
  line-height: 1.6;
}

/* Stat cards ────────────────────────────────── */
.dsov-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin: 1.75rem 0;
}
.dsov-stat {
  background: rgba(77, 166, 217, 0.07);
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.dsov-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #4da6d9;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.dsov-stat-label {
  font-size: 0.78rem;
  color: #7a9db5;
  line-height: 1.45;
}
/* Colour variants */
.dsov-stats.blue .dsov-stat {
  border-color: rgba(77, 166, 217, 0.3);
}
.dsov-stats.amber .dsov-stat {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.2);
}
.dsov-stats.amber .dsov-stat-num { color: #f59e0b; }

/* Framework grid ────────────────────────────── */
.dsov-fwgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.75rem 0;
}
.dsov-fwcard {
  background: rgba(10, 30, 48, 0.7);
  border: 1px solid rgba(77, 166, 217, 0.15);
  border-radius: 10px;
  padding: 1.25rem;
}
.dsov-fwcard-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.dsov-fwcard-icon { font-size: 1.15rem; flex-shrink: 0; }
.dsov-fwcard-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #e8f4fb;
}
.dsov-fwcard-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.dsov-fwcard-tag.tag-insufficient {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.dsov-fwcard-tag.tag-required {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.dsov-fwcard-tag.tag-emerging {
  background: rgba(77, 166, 217, 0.1);
  color: #4da6d9;
  border: 1px solid rgba(77, 166, 217, 0.3);
}
.dsov-fwcard p {
  font-size: 0.83rem;
  color: #7a9db5;
  line-height: 1.6;
  margin: 0;
}

/* Info / highlight box ──────────────────────── */
.dsov-info {
  background: rgba(77, 166, 217, 0.05);
  border: 1px solid rgba(77, 166, 217, 0.2);
  border-left: 3px solid #4da6d9;
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.dsov-info h4 {
  color: #4da6d9;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.85rem;
}
.dsov-info ul {
  margin: 0;
  padding-left: 1.25rem;
}
.dsov-info li {
  font-size: 0.875rem;
  color: #c8dff0;
  line-height: 1.65;
  margin-bottom: 0.55rem;
}
.dsov-info li:last-child { margin-bottom: 0; }
.dsov-info li strong { color: #e8f4fb; }

/* Table ─────────────────────────────────────── */
.dsov-table-wrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  border-radius: 10px;
  border: 1px solid rgba(77, 166, 217, 0.15);
}
.dsov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  min-width: 520px;
}
.dsov-table th {
  background: rgba(77, 166, 217, 0.1);
  color: #4da6d9;
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(77, 166, 217, 0.2);
  white-space: nowrap;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dsov-table td {
  padding: 0.7rem 1rem;
  color: #c8dff0;
  border-bottom: 1px solid rgba(77, 166, 217, 0.07);
  vertical-align: top;
  line-height: 1.5;
}
.dsov-table tbody tr:last-child td { border-bottom: none; }
.dsov-table tbody tr:hover td {
  background: rgba(77, 166, 217, 0.04);
}
/* Table cell status tags */
.dsov-table .tag-yes  { color: #10b981; font-weight: 600; }
.dsov-table .tag-no   { color: #f87171; font-weight: 600; }
.dsov-table .tag-partial { color: #f59e0b; font-weight: 600; }
.dsov-table .tag-ai {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(77, 166, 217, 0.12);
  color: #4da6d9;
  border: 1px solid rgba(77, 166, 217, 0.3);
  vertical-align: middle;
  margin-left: 4px;
}

/* CTA box ───────────────────────────────────── */
.dsov-cta {
  background: linear-gradient(135deg, rgba(77, 166, 217, 0.09), rgba(10, 30, 48, 0.8));
  border: 1px solid rgba(77, 166, 217, 0.3);
  border-radius: 12px;
  padding: 2rem 2rem 1.75rem;
  margin: 2.5rem 0;
  text-align: center;
}
.dsov-cta h3 {
  color: #e8f4fb;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  border-left: none !important;
  padding-left: 0 !important;
}
.dsov-cta p {
  color: #7a9db5;
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.dsov-cta a {
  display: inline-block;
  background: #4da6d9;
  color: #070f1a !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.5rem;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.dsov-cta a:hover {
  background: #5fb8e8;
  text-decoration: none !important;
}

/* Sources ───────────────────────────────────── */
.dsov-sources {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(77, 166, 217, 0.1);
  font-size: 0.78rem;
  color: #7a9db5;
  line-height: 1.9;
}
.dsov-sources strong { color: #c8dff0; }
.dsov-sources a {
  color: rgba(77, 166, 217, 0.7);
  text-decoration: none;
}
.dsov-sources a:hover { color: #4da6d9; }

/* ═══════════════════════════════════════════════
   8. AGENTS EVERYWHERE SERIES COMPONENTS
   Series navigation, article cards, and figure
   styles used in the Agents Everywhere series.
   ═══════════════════════════════════════════════ */

/* Series navigation bar ─────────────────────── */
.ae-series-nav {
  background: rgba(77, 166, 217, 0.05);
  border: 1px solid rgba(77, 166, 217, 0.15);
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.8rem;
}
.ae-series-label {
  color: #7a9db5;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 0.45rem;
}
.ae-series-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  line-height: 1.8;
}
.ae-series-links a {
  color: #4da6d9;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.ae-series-links a:hover { opacity: 1; }
.ae-series-links a.current {
  opacity: 1;
  font-weight: 600;
  color: #8dd4f8;
}

/* Inline figure / image ─────────────────────── */
.ae-figure {
  margin: 2rem 0;
  text-align: center;
}
.ae-figure img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(77, 166, 217, 0.12);
}
.ae-img-caption {
  font-size: 0.78rem;
  color: #7a9db5;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Series landing grid ───────────────────────── */
.ae-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.ae-series-card {
  border: 1px solid rgba(77, 166, 217, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(20, 40, 60, 0.45);
  transition: border-color 0.2s, transform 0.2s;
}
.ae-series-card:hover {
  border-color: rgba(77, 166, 217, 0.5);
  transform: translateY(-2px);
}
.ae-series-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ae-series-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.ae-card-body {
  padding: 1rem 1.1rem 1.2rem;
}
.ae-card-part {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4da6d9;
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}
.ae-card-body h3 {
  font-size: 0.95rem;
  color: #c8dff0;
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
  border-left: none !important;
  padding-left: 0 !important;
}


/* Full-width cover hero inside article body */
.ae-cover-hero {
  margin: 0 0 2.5rem;
  text-align: center;
}
.ae-cover-hero img {
  max-width: 680px;
  width: 100%;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Series hero banner — lifted above article-header by JS */
.ae-hero-banner {
  background: linear-gradient(135deg, rgba(7, 15, 26, 0.98) 0%, rgba(13, 33, 55, 0.95) 100%);
  border: 1px solid rgba(77, 166, 217, 0.22);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 0 0 1.75rem;
  position: relative;
  overflow: hidden;
}
.ae-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(77, 166, 217, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ae-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4da6d9;
  margin: 0 0 0.4rem;
}
.ae-hero-part {
  font-size: 0.82rem;
  font-weight: 500;
  color: #7a9db5;
  letter-spacing: 0.04em;
  margin: 0 0 0.65rem;
}
.ae-hero-wordmark {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #e8f4fb;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

/* Article title two-line treatment (injected via JS) */
.ae-title-sub {
  display: block;
  font-size: 0.68em;
  color: #7a9db5;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.1em;
}

/* === CC-WEB static-deploy overrides (idempotent) === */
/* These rules are the canonical site-wide additions.
   The marker comment is also checked by scripts/publish/rewrite.mjs in the
   simpletech_platform repo: if present in the live emdash CSS (which it is
   when this file is built into the image), the static-build append step
   becomes a no-op — single source of truth, no duplication. */

/* Insights / posts listing hero — emdash's default ships a gradient-only
   header. Add a background image so the page has the same atmospheric tone
   as the homepage hero. Dark gradient overlay keeps title + subtitle readable. */
.posts-page .page-header {
  background-image:
    linear-gradient(160deg, rgba(4,14,25,0.86) 0%, rgba(10,30,48,0.72) 55%, rgba(13,33,55,0.86) 100%),
    url("https://media.simpletech.one/01KP9M55JATQY69VNDFMMRE6N0.jpg") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Center the category filter tabs on the Insights page. Default emdash CSS
   leaves them flex-start (left-aligned). On wide screens they fit and centre;
   on narrow screens overflow-x: auto already kicks in and shifts to scroll. */
#si-filter-bar {
  justify-content: center !important;
}

/* Insights hero subtitle — match the colour token used by the homepage hero
   (.st-hero-sub) and service-page heroes (.st-page-hero-sub), both #c8dde9.
   Default emdash CSS uses a darker muted grey (#7a9db5) which looks washed
   out against the new background image and inconsistent with other heroes. */
.posts-page .page-description {
  color: #c8dde9 !important;
}

/* ═══════════════════════════════════════════════
   FOOTER SOCIAL ICONS
   Injected by simpletech-insights.js → injectFooterSocialIcons() at the
   bottom of .footer-brand (under the company logo + tagline). Quiet
   pill-style buttons with the muted-blue brand accent — same palette as
   the rest of the footer chrome. Phosphor-style proportions: 32px box
   with an 18px icon centred inside.
   ═══════════════════════════════════════════════ */

.st-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.st-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #c8dde9;
  background: rgba(77, 166, 217, 0.08);
  border: 1px solid rgba(77, 166, 217, 0.22);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.st-footer-social:hover,
.st-footer-social:focus-visible {
  color: #4da6d9;
  background: rgba(77, 166, 217, 0.18);
  border-color: rgba(77, 166, 217, 0.45);
  /* Subtle lift — same idiom used elsewhere on st-card hovers. */
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.st-footer-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ═══════════════════════════════════════════════
   ABOUT PAGE — "Follow us" section
   Inserted into the About page content (slug=about) by
   scripts/emdash_about_followus.cjs as a new htmlBlock after
   "about-leadership". Each tile carries a `.st-followus-tile--<brand>`
   modifier whose only job is to set the `--brand-color` custom property
   for that platform — every other rule pulls from --brand-color so the
   accent (top border, icon ring, hover glow, hover icon background)
   stays per-platform without duplicating selectors.
   ═══════════════════════════════════════════════ */

.st-followus-grid {
  display: grid;
  /* 2 columns on tablet+, 3 on desktop, falls to 1 column on mobile.
     auto-fit + minmax keeps the tiles healthy at any viewport. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  max-width: 880px;
  margin: 32px auto 0;
}

.st-followus-tile {
  /* --brand-color overridden by .st-followus-tile--<platform> below.
     Default is the SimpleTech accent so an unmodified tile still looks
     intentional. */
  --brand-color: #4da6d9;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 28px 18px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(77, 166, 217, 0.04), rgba(77, 166, 217, 0.10));
  border: 1px solid rgba(77, 166, 217, 0.18);
  color: #c8dde9;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Brand accent line at the top of each tile — quiet at rest, full
   brightness on hover. Helps the eye scan platforms quickly. */
.st-followus-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-color);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.st-followus-tile:hover,
.st-followus-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brand-color);
  background: linear-gradient(180deg, rgba(77, 166, 217, 0.06), rgba(77, 166, 217, 0.14));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(77, 166, 217, 0.05) inset;
  outline: none;
}

.st-followus-tile:hover::before,
.st-followus-tile:focus-visible::before {
  opacity: 1;
}

/* Icon ring — brand-tinted background with brand-coloured icon at rest;
   flips to a saturated brand background with white icon on hover. */
.st-followus-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(77, 166, 217, 0.10);
  color: var(--brand-color);
  border: 1px solid rgba(77, 166, 217, 0.18);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.st-followus-tile:hover .st-followus-icon-wrap,
.st-followus-tile:focus-visible .st-followus-icon-wrap {
  background: var(--brand-color);
  color: #ffffff;
  border-color: var(--brand-color);
  transform: scale(1.06);
}

.st-followus-icon-wrap svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Phosphor icon-font glyphs render via <i class="ph ph-...">. They're
   sized by font-size (the glyph is a pseudo-element on .ph::before).
   Switched from inline <svg> to <i> 2026-05-01 because emdash's htmlBlock
   sanitizer strips <svg>/<path> children from stored page HTML. */
.st-followus-icon-wrap .ph {
  font-size: 32px;
  line-height: 1;
  display: inline-block;
}

.st-followus-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.st-followus-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #e8f4fb;
  letter-spacing: 0.01em;
}

.st-followus-handle {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #7a9db5;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Coming-soon tiles look muted but keep the brand accent visible — that
   way the eye still registers the platform identity. Pointer-events
   killed so they can't be clicked / focused. */
.st-followus-tile.is-coming-soon {
  pointer-events: none;
  cursor: default;
  opacity: 0.62;
}

.st-followus-tile.is-coming-soon::after {
  content: "Coming soon";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-color);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.08);
  border: 1px solid currentColor;
  opacity: 0.75;
}

/* ─ Per-platform brand colours. These are the ONLY brand-specific rules —
   every other tile/icon style above pulls from --brand-color so adding
   a new platform = add a slug here + a tile in the about page htmlBlock. */
.st-followus-tile--linkedin { --brand-color: #4d9ee0; } /* LinkedIn blue, brightened for dark bg */
.st-followus-tile--x        { --brand-color: #d6dde2; } /* X mark — near-white on dark */
.st-followus-tile--github   { --brand-color: #c9d1d9; } /* GitHub octocat tone */
.st-followus-tile--youtube  { --brand-color: #ff5252; } /* YouTube red, softened */
.st-followus-tile--spotify  { --brand-color: #1db954; } /* Spotify green */

/* ─ Smart Publisher article components (dsov-* classes) ──────────────────── */
.article-content .dsov-step { display: inline-flex; min-width: 28px; height: 28px; padding: 0 10px; background: #4da6d9; color: #040e19; font-size: 0.75rem; font-weight: 700; border-radius: 14px; margin: 20px 0 8px; }
.article-content .dsov-info { border-left: 3px solid #4da6d9; background: rgba(13,33,55,0.7); padding: 10px 16px; margin: 4px 0 16px; border-radius: 0 6px 6px 0; }
.article-content .dsov-info h4 { color: #7ecef4; font-size: 0.9rem; font-weight: 600; margin: 0; }
.article-content .dsov-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.article-content .dsov-stat { flex: 1; min-width: 110px; background: #0d2137; border: 1px solid rgba(77,166,217,0.25); border-radius: 8px; padding: 14px 16px; text-align: center; }
.article-content .dsov-stat-num { font-size: 1.75rem; font-weight: 700; color: #4da6d9; }
.article-content .dsov-stat-label { font-size: 0.7rem; color: #c8dde9; text-transform: uppercase; letter-spacing: 0.04em; }
.article-content .dsov-stats.blue .dsov-stat-num { color: #7ecef4; }

/* ═══════════════════════════════════════════════
   /pages/insights — 2-col landing (2026-05-08 IA refactor)
   Two equal columns: Articles & News (left) | Podcasts (right).
   Each column has a header (title + tagline), a stack of cards
   (4 articles | 3 podcasts), then a CTA button to the dedicated lane.
   Card chrome inherits the existing dark-themed insights style.
   ═══════════════════════════════════════════════ */

.ins-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px clamp(20px, 4vw, 40px) 80px;
}

@media (max-width: 900px) {
  .ins-2col {
    grid-template-columns: 1fr;
    gap: 64px;
    padding: 32px 20px 60px;
  }
}

/* Insights hero — atmospheric image overlay + dual RSS pills inline.
   Reuses .st-page-hero base; .ins-hero just bumps padding + contrast
   and styles the action row. */
.ins-hero {
  padding: 96px 24px 72px;
  background: linear-gradient(160deg, rgba(4, 14, 25, 0.92) 0%, rgba(10, 30, 48, 0.88) 60%, rgba(13, 33, 55, 0.86) 100%);
}

.ins-hero .st-hero-bg {
  /* sit ABOVE the gradient so the photo is the dominant visual,
     with the gradient acting as a subtle tint over it */
  z-index: 0;
  opacity: 0.42;
}

.ins-hero > .st-container {
  position: relative;
  z-index: 1;
}

.ins-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.ins-hero-rss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.14);
  border: 1px solid rgba(77, 166, 217, 0.4);
  color: #c8dde9;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ins-hero-rss:hover,
.ins-hero-rss:focus-visible {
  background: rgba(77, 166, 217, 0.28);
  border-color: #4da6d9;
  color: #e8f4fb;
  outline: none;
}

.ins-hero-rss .ph {
  font-size: 1.05rem;
  color: #4da6d9;
}

.ins-hero-rss-podcasts .ph {
  color: #8b8df1; /* podcast accent — distinguishes the two pills */
}

/* Column subheading — small italic line between header HR and cards.
   David's review ask: "Add a subheading above the cards: 'Latest
   insights from us...' (after the HR line)". */
.ins-2col-col-subheading {
  font-size: 0.92rem;
  font-style: italic;
  color: #7a9db5;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}

.ins-2col-col-header {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(77, 166, 217, 0.18);
}

.ins-2col-col-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #4da6d9;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ins-2col-col-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: #e8f4fb;
  line-height: 1.2;
  margin: 0 0 8px;
}

.ins-2col-col-desc {
  font-size: 0.95rem;
  color: #7a9db5;
  line-height: 1.55;
  margin: 0;
}

.ins-2col-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.ins-2col-card {
  display: grid;
  /* Two columns: left = image+badge stack, right = title/excerpt/date */
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(13, 25, 40, 0.6);
  border: 1px solid rgba(77, 166, 217, 0.14);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  /* 2026-05-08 v3: TOP-align both columns so the title sits flush with
     the cover image's top edge. Previous `align-items: stretch` paired
     with the date's `margin-top: auto` left visible whitespace between
     excerpt and date which David was reading as "space above heading". */
  align-items: start;
}

/* Left column — image at top, category/episode pill stacked underneath. */
.ins-2col-card-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start; /* badge pinned to left, doesn't stretch */
}

/* Tags row UNDER image. Wrapper is plain; per-badge colour comes from
   `.si-cat-badge` rules. Compact size to fit within the 120px-wide
   left column without wrapping for normal category names. */
.ins-2col-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  max-width: 120px;
}

.ins-2col-card-tags .si-cat-badge {
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  /* Override `.si-cat-badge` defaults if any conflict; ensure compact */
  margin: 0;
  white-space: nowrap;
}

/* Podcast pill — distinct indigo accent so podcast cards read different
   from article cards even at a glance. Same shape as the category
   badges otherwise. */
.ins-2col-podcast-pill {
  background: rgba(139, 141, 241, 0.18) !important;
  color: #b4b6f7 !important;
  border: 1px solid rgba(139, 141, 241, 0.42) !important;
}

.ins-2col-card:hover,
.ins-2col-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(77, 166, 217, 0.4);
  background: rgba(13, 25, 40, 0.85);
  outline: none;
}

.ins-2col-card-img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #0a1e30;
  flex-shrink: 0;
}

.ins-2col-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Podcast cover placeholder — gradient + Phosphor mic icon. Used until
   SP wires `data.podcast.cover_image` per prm_fce4403edb3c. */
.ins-2col-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3550 0%, #4d3e8a 100%);
  color: #c8dde9;
  font-size: 2.4rem;
  line-height: 1;
}

.ins-2col-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Defensive overrides 2026-05-08 v4: title kept centering somewhere
     in the cascade despite the grid's `align-items: start`. Pin the
     body GRID ITEM to row-start explicitly, and nuke any h3-default
     top margin that might have been leaking in. */
  align-self: start;
}

.ins-2col-card-body > * {
  /* No flex-grow on any direct child — keeps content tight at top
     instead of any element trying to fill remaining space. */
  flex-shrink: 0;
}

/* Nuke ANY top margin on the first child of body (typically h3 title).
   Browser default for h3 is `margin-block-start: 1em` ≈ 16px, which
   adds visible space above the title at the top of the body. */
.ins-2col-card-body > :first-child {
  margin-top: 0 !important;
}

.ins-2col-card-body .ins-2col-card-title {
  margin-top: 0 !important;
}

.ins-2col-card-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4da6d9;
  margin: 0 0 4px;
}

.ins-2col-card-podcast .ins-2col-card-meta {
  color: #8b8df1; /* podcast accent — matches existing st-podcast-icon */
}

/* Category-badge row on insights-landing article cards. Reuses
   .si-cat-badge styling from /posts; the wrapper just constrains
   spacing inside the smaller card body. */
.ins-2col-card-badges {
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ins-2col-card-badges .si-cat-badge {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 6px;
}

/* SP-230 structured-naming eyebrow above the card H1. Only renders
   when the post has `series_name` (and optionally `part_number` /
   `part_total`) populated by SP. Falls back to no eyebrow when null —
   the legacy single-line title shows as H1 alone, same as before. */
.ins-2col-card-series {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8df1;
  margin: 0 0 4px;
}

.ins-2col-card-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: #e8f4fb;
  line-height: 1.28;
  /* tightened margins per David's feedback: "Extra line break before
     article heading is not needed" */
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ins-2col-card-excerpt {
  font-size: 0.85rem;
  color: #c8dde9;
  line-height: 1.45;
  margin: 0 0 4px;
  /* clamp to 2 lines on the 2-col landing — full text is on the dedicated
     lane page anyway. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ins-2col-card-date {
  font-size: 0.72rem;
  color: #7a9db5;
  letter-spacing: 0.04em;
  margin: 0;
  padding-top: 8px;
}

/* Newspaper placeholder for article cards when no cover is hydrated
   yet. Variant of the podcast mic placeholder — different gradient +
   icon so the eye reads it as "article" not "podcast". */
.ins-2col-card-img-placeholder--article {
  background: linear-gradient(135deg, #0a1e30 0%, #1a3550 100%);
  color: #4da6d9;
}

.ins-2col-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.1);
  border: 1px solid rgba(77, 166, 217, 0.4);
  color: #4da6d9;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ins-2col-cta:hover,
.ins-2col-cta:focus-visible {
  background: #4da6d9;
  color: #040e19;
  border-color: #4da6d9;
  outline: none;
}

.ins-2col-cta .ph {
  font-size: 1rem;
}

@media (max-width: 600px) {
  .ins-2col-card {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 12px;
  }
  .ins-2col-card-img {
    width: 88px;
    height: 88px;
  }
  .ins-2col-card-img-placeholder {
    font-size: 1.8rem;
  }
}

/* ═══════════════════════════════════════════════
   /pages/podcasts — Podcasts hub (2026-05-08)
   David's design brief: row-card layout, easy to scroll, big enough
   to read description + metadata. Subscribe row at top, latest-4
   showcase row, then sortable + searchable all-episodes list.
   ═══════════════════════════════════════════════ */

.podcasts-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 40px) 80px;
}

/* Subscribe row — RSS live, others as Coming Soon placeholders.
   Same dimming pattern as About-page Follow Us tiles. */
.podcasts-subscribe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  margin-bottom: 36px;
  border-radius: 12px;
  background: rgba(13, 25, 40, 0.5);
  border: 1px solid rgba(77, 166, 217, 0.16);
}

.podcasts-subscribe-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a9db5;
  margin-right: 4px;
}

.podcasts-subscribe-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.1);
  border: 1px solid rgba(77, 166, 217, 0.3);
  color: #c8dde9;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.podcasts-subscribe-pill:hover,
.podcasts-subscribe-pill:focus-visible {
  background: rgba(77, 166, 217, 0.2);
  border-color: #4da6d9;
  color: #e8f4fb;
  outline: none;
}

.podcasts-subscribe-pill .ph {
  font-size: 1.05rem;
  color: #4da6d9;
}

.podcasts-subscribe-pill.is-coming-soon {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}

.podcasts-subscribe-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a9db5;
  background: rgba(77, 166, 217, 0.08);
  border-radius: 999px;
  border: 1px solid rgba(77, 166, 217, 0.2);
}

/* Section headers (Latest episodes / All episodes). */
.podcasts-section-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(77, 166, 217, 0.16);
}

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

.podcasts-section-title {
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #e8f4fb;
  margin: 0;
}

.podcasts-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.podcasts-search {
  width: 240px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(77, 166, 217, 0.25);
  background: rgba(13, 25, 40, 0.7);
  color: #e8f4fb;
  font-size: 0.9rem;
  font-family: inherit;
}

.podcasts-search::placeholder { color: #7a9db5; }

.podcasts-search:focus {
  outline: none;
  border-color: #4da6d9;
  background: rgba(13, 25, 40, 0.95);
}

.podcasts-sort {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(77, 166, 217, 0.25);
  background: rgba(13, 25, 40, 0.7);
  color: #e8f4fb;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.podcasts-sort:focus {
  outline: none;
  border-color: #4da6d9;
}

/* Showcase row — 4 small cards horizontally. Wraps on narrow screens. */
.podcasts-showcase-section {
  margin-bottom: 56px;
}

.podcasts-showcase-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .podcasts-showcase-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .podcasts-showcase-row { grid-template-columns: 1fr; }
}

.podcasts-showcase-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(13, 25, 40, 0.55);
  border: 1px solid rgba(77, 166, 217, 0.14);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.podcasts-showcase-card:hover,
.podcasts-showcase-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(77, 166, 217, 0.4);
  background: rgba(13, 25, 40, 0.85);
  outline: none;
}

.podcasts-showcase-cover {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #0a1e30;
}

.podcasts-showcase-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.podcasts-showcase-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b8df1; /* podcast accent */
  margin: 0 0 4px;
}

.podcasts-showcase-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8f4fb;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  /* 2026-05-08 v4: bumped from 2 lines to 3 — David's review showed
     the longer titles like "AE E2: Three Deployment Architectures
     Shaping Modern AI" getting truncated mid-word. 3 lines fits the
     full title at this column width. Final fix is the structured-data
     contract amendment (SP-212) which splits eyebrow + name. */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* All-episodes list — David's "one row per episode" requirement. */
.podcasts-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.podcasts-list-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px;
  border-radius: 14px;
  background: rgba(13, 25, 40, 0.55);
  border: 1px solid rgba(77, 166, 217, 0.14);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.podcasts-list-row:hover,
.podcasts-list-row:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(77, 166, 217, 0.4);
  background: rgba(13, 25, 40, 0.85);
  outline: none;
}

.podcasts-list-cover {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1e30;
  flex-shrink: 0;
}

.podcasts-list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.podcasts-list-body { min-width: 0; }

/* Header row of a list item — meta on left, category badge on right.
   David 2026-05-08 v4 ask: "add the category badge to the podcast
   (upper right corner of card - same row as the 'Episode...' text)". */
.podcasts-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.podcasts-list-header .si-cat-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  margin: 0;
}

.podcasts-list-meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8df1; /* podcast accent */
  margin: 0;
}

.podcasts-list-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #e8f4fb;
  line-height: 1.35;
  margin: 0 0 8px;
}

.podcasts-list-desc {
  font-size: 0.92rem;
  color: #c8dde9;
  line-height: 1.6;
  margin: 0;
  /* clamp at 3 lines so rows stay roughly equal-height; full text on the
     detail page anyway. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.podcasts-list-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(77, 166, 217, 0.1);
  color: #4da6d9;
  font-size: 1.2rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.podcasts-list-row:hover .podcasts-list-cta {
  background: #4da6d9;
  color: #040e19;
}

@media (max-width: 720px) {
  .podcasts-list-row {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .podcasts-list-cover { width: 96px; height: 96px; }
  .podcasts-list-title { font-size: 1.02rem; }
  .podcasts-list-desc { -webkit-line-clamp: 2; }
  .podcasts-list-cta { display: none; }
}

/* Cover placeholder shared between showcase + list rows.
   Used until SP-211 backfills `cover_image` per episode. */
.podcasts-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3550 0%, #4d3e8a 100%);
  color: #c8dde9;
  font-size: 2.4rem;
  line-height: 1;
}

.podcasts-list-empty {
  text-align: center;
  color: #7a9db5;
  font-size: 0.95rem;
  padding: 40px 20px;
  margin: 0;
}

/* ═══════════════════════════════════════════════
   /podcasts/<slug> — listener-focused episode detail page (DRAFT)
   2026-05-08 — built for layout review before SP-211 lands real
   cover_image / episode_number / publish_date. Cover uses
   gradient + mic placeholder until SP populates.
   ═══════════════════════════════════════════════ */

.podcast-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 40px) 80px;
}

.podcast-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4da6d9;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.podcast-detail-back:hover { color: #7ecef4; }
.podcast-detail-back .ph { font-size: 1rem; }

/* Hero — cover + meta side-by-side on desktop, stacked on mobile. */
.podcast-detail-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 32px;
}

.podcast-detail-cover {
  width: 220px;
  height: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #0a1e30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.podcast-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.podcast-detail-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3550 0%, #4d3e8a 100%);
  color: #c8dde9;
  font-size: 5rem;
  line-height: 1;
}

.podcast-detail-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b8df1; /* podcast accent */
  margin: 0 0 12px;
}

.podcast-detail-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: #e8f4fb;
  line-height: 1.2;
  margin: 0 0 12px;
}

/* SP-230: sub-meta line below H1 on the podcast detail hero.
   Shows date + duration when the eyebrow above H1 is consumed by
   the series_name (and episode label) instead of carrying everything
   in one line. Falls back gracefully — when the podcast has no
   series_name, the eyebrow keeps the legacy combined shape and this
   element is omitted by the generator (no orphan rule needed). */
.podcast-detail-submeta {
  font-size: 0.85rem;
  color: #7a9db5;
  margin: 0 0 8px;
}

.podcast-detail-byline {
  font-size: 0.85rem;
  color: #7a9db5;
  margin: 0;
}

@media (max-width: 720px) {
  .podcast-detail-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
    align-items: start;
  }
  .podcast-detail-cover {
    width: min(280px, 80vw);
    height: min(280px, 80vw);
    margin: 0 auto;
  }
}

/* Audio player — full-width, prominent. Browser-native chrome stays;
   we just give it room and a frame matching the dark theme. */
.podcast-detail-player-section {
  margin: 0 0 40px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(13, 25, 40, 0.75);
  border: 1px solid rgba(77, 166, 217, 0.18);
}

.podcast-detail-player {
  display: block;
  width: 100%;
  /* Native audio control bar height varies (~32-50px); let it size itself */
}

.podcast-detail-section {
  margin: 0 0 36px;
  padding: 24px 28px;
  border-radius: 12px;
  background: rgba(13, 25, 40, 0.55);
  border: 1px solid rgba(77, 166, 217, 0.14);
}

.podcast-detail-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4da6d9;
  margin: 0 0 16px;
}

.podcast-detail-shownotes {
  color: #c8dde9;
  font-size: 1rem;
  line-height: 1.65;
}

.podcast-detail-shownotes p {
  margin: 0 0 14px;
}

.podcast-detail-shownotes p:last-child { margin-bottom: 0; }

/* Share row — buttons mimic the About-page Follow Us tiles but in a
   horizontal row with brand colours pulled from the same palette. */
.podcast-detail-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.podcast-share-btn {
  --brand: #4da6d9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(77, 166, 217, 0.1);
  border: 1px solid rgba(77, 166, 217, 0.28);
  color: #c8dde9;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.podcast-share-btn:hover,
.podcast-share-btn:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #0a1e30;
  outline: none;
  transform: translateY(-1px);
}

.podcast-share-btn .ph {
  font-size: 1.05rem;
  color: var(--brand);
  transition: color 0.15s ease;
}

.podcast-share-btn:hover .ph,
.podcast-share-btn:focus-visible .ph { color: #0a1e30; }

.podcast-share-linkedin { --brand: #4d9ee0; }
.podcast-share-x        { --brand: #d6dde2; }
.podcast-share-fb       { --brand: #4267b2; }
.podcast-share-copy     { --brand: #4da6d9; }

.podcast-share-btn.is-copied {
  background: rgba(0, 170, 68, 0.18);
  border-color: rgba(0, 170, 68, 0.5);
  color: #5ddd88;
}
.podcast-share-btn.is-copied .ph { color: #5ddd88; }

/* "Read the full article" CTA — looks like a card that links to /posts/<slug> */
.podcast-detail-article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  border-radius: 10px;
  background: rgba(77, 166, 217, 0.08);
  border: 1px solid rgba(77, 166, 217, 0.32);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.podcast-detail-article-cta:hover,
.podcast-detail-article-cta:focus-visible {
  background: rgba(77, 166, 217, 0.16);
  border-color: #4da6d9;
  transform: translateY(-1px);
  outline: none;
}

.podcast-detail-article-cta-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e8f4fb;
  flex: 1;
  min-width: 0;
}

.podcast-detail-article-cta-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4da6d9;
  white-space: nowrap;
}

/* Prev / next episode nav at the bottom. */
.podcast-detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(77, 166, 217, 0.18);
}

.podcast-detail-nav-prev,
.podcast-detail-nav-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-radius: 10px;
  background: rgba(13, 25, 40, 0.55);
  border: 1px solid rgba(77, 166, 217, 0.14);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.podcast-detail-nav-next {
  text-align: right;
  align-items: flex-end;
}

.podcast-detail-nav-prev:hover,
.podcast-detail-nav-next:hover,
.podcast-detail-nav-prev:focus-visible,
.podcast-detail-nav-next:focus-visible {
  background: rgba(13, 25, 40, 0.85);
  border-color: rgba(77, 166, 217, 0.38);
  transform: translateY(-2px);
  outline: none;
}

.podcast-detail-nav-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8df1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.podcast-detail-nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8f4fb;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .podcast-detail-nav { grid-template-columns: 1fr; }
  .podcast-detail-nav-next { text-align: left; align-items: flex-start; }
}