/* ============================================================================
   Resources — Blog / Insights Hub : page-specific styles.
   The page reuses the ABOUT page's panels + palette (styles.css). This file
   only adds the blog-specific components — breadcrumb, hero search, topic
   chips, featured card, article-card tags, newsletter strip and the
   "Go Deeper" cards. Everything is scoped to .page-blog so it can never leak
   to another page. Colours use the site variables + the site's teal accent
   (#00dddd) so the hub reads as the same product as /about/.
   ============================================================================ */

/* Keep hub section headings clean (no decorative underline), like the about
   sections where the over/under lines were removed. */
.page-blog section h2::before,
.page-blog section h2::after { display: none !important; }

/* ---- Hero : slightly shorter than the about hero; breadcrumb + search ----
   Deliberately NO background here: the hero uses the shared `.hero` from
   styles.css, the same purple-navy field every other page carries (Platform,
   Services, Industries, Contact). This block used to override it with its own
   `radial-gradient(circle at 72% 20%, #1a1268, #00003B)`, which made the blog
   the only section with a different hero. Don't reintroduce a per-section hero
   background — only the homepage is allowed to differ.
   Applies to the index hero and the article (.post-hero) so both read the same. */
.page-blog .hero {
  justify-content: flex-start;
  min-height: 54vh;
  /* Match the homepage hero's top spacing so the header doesn't leave a big band. */
  padding-top: clamp(40px, 4.6vw, 66px);
}
/* No dot-grid texture either. This block used to re-enable ::before with a faint
   data-grid, which left the blog the only section with a textured hero while
   Platform/Services/Industries/Contact carry a clean field. The hero is now the
   plain shared gradient everywhere outside the homepage — don't re-enable a
   per-section hero decoration here. */

/* Animated aurora — soft glowing blobs that drift, and shift with the cursor
   (parallax via --mx/--my). Purely decorative; sits behind the content. */
.page-blog .hero-aurora {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(64px);
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.page-blog .hero-aurora span {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; opacity: .6; will-change: transform;
}
.page-blog .hero-aurora .a1 { width: 44%; height: 62%; right: -6%; top: -14%;
  background: radial-gradient(circle, rgba(0, 221, 221, .55), transparent 66%); animation: auroraA 19s ease-in-out infinite; }
.page-blog .hero-aurora .a2 { width: 52%; height: 70%; left: -10%; top: 22%;
  background: radial-gradient(circle, rgba(73, 41, 154, .85), transparent 64%); animation: auroraB 24s ease-in-out infinite; }
.page-blog .hero-aurora .a3 { width: 40%; height: 54%; left: 34%; top: 46%;
  background: radial-gradient(circle, rgba(45, 82, 201, .70), transparent 68%); animation: auroraC 28s ease-in-out infinite; }
@keyframes auroraA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7%, 9%) scale(1.16); } }
@keyframes auroraB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, -7%) scale(1.12); } }
@keyframes auroraC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -11%) scale(1.22); } }
@media (prefers-reduced-motion: reduce) {
  .page-blog .hero-aurora span { animation: none !important; }
  .page-blog .hero-aurora { transition: none !important; transform: none !important; }
}
.page-blog .hero .hero-content { position: relative; z-index: 2; }

.page-blog .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .9rem; margin-bottom: 1.15rem; font-weight: 500;
  color: rgba(232, 232, 252, .7);
}
.page-blog .breadcrumb a { color: rgba(232, 232, 252, .7); text-decoration: none; transition: color .25s ease; }
.page-blog .breadcrumb a:hover { color: #00dddd; }
.page-blog .breadcrumb .sep { opacity: .45; }
.page-blog .breadcrumb [aria-current] { color: #00dddd; }

.page-blog .hero-search { display: flex; gap: .6rem; margin-top: 1.9rem; width: 100%; max-width: 540px; }
.page-blog .hero-search input {
  flex: 1; min-width: 0; padding: .9rem 1.15rem; border-radius: 8px;
  border: 1px solid rgba(232, 232, 252, .4); background: #fff; color: var(--color-navy);
  font-size: 1rem; font-family: var(--font-body);
}
.page-blog .hero-search input::placeholder { color: rgba(0, 0, 59, .5); }
.page-blog .hero-search input:focus { outline: none; border-color: #00dddd; box-shadow: 0 0 0 3px rgba(0, 221, 221, .22); }

/* ---- Browse by Topic : filter chips ---- */
.page-blog .topic { text-align: center; }
.page-blog .topic-filters { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.6rem; }
.page-blog .chip {
  padding: .5rem 1.2rem; border-radius: 22px; border: 1px solid rgba(77, 127, 230, .3);
  background: rgba(77, 127, 230, .09); color: #2f52a8;
  font-family: var(--font-heading); font-weight: 600; font-size: .92rem;
  cursor: pointer; transition: var(--transition-smooth);
}
/* Homepage-style keyword hover: small lift + brighter blue edge (was an
   off-palette teal). The active chip fills with the blue accent. */
.page-blog .chip:hover { transform: translateY(-2px); border-color: var(--color-cyan-1); background: rgba(77, 127, 230, .16); }
.page-blog .chip[aria-pressed="true"] { background: var(--color-cyan-1); border-color: var(--color-cyan-1); color: #fff; }

/* ---- Featured insight : light lavender band, boxless centred item ----
   Kept in the light theme (About's lavender) so it blends softly into the
   white "Browse by Topic" below (lavender -> white) instead of clashing as a
   hard dark edge; the dark hero above still gives the page its one clean
   dark -> light transition. */
.page-blog .featured {
  background: var(--color-lavender);
  text-align: center;
}
.page-blog .featured h2 { color: var(--color-navy); }
/* Boxless featured item — no card wrapper, just centred text on the band. */
.page-blog .feature-card {
  text-align: center; max-width: 760px; margin: 1.6rem auto 0;
  background: none; border: none; border-radius: 0; padding: 0; box-shadow: none;
  transition: var(--transition-smooth);
  display: block; color: inherit; text-decoration: none;
}
.page-blog .feature-card:hover h3 { color: var(--color-purple); }
.page-blog .feature-card h3 { color: var(--color-navy); font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 .9rem; line-height: 1.25; transition: color .25s ease; }
.page-blog .feature-card p { color: rgba(0, 0, 59, .72); font-size: 1.12rem; margin: 0 auto 1.1rem; max-width: 62ch; }
.page-blog .feature-card .post-meta { color: rgba(0, 0, 59, .55); }
.page-blog .feature-card .read-on { color: var(--color-purple); font-weight: 700; }

/* ---- Uniform, tighter vertical rhythm for the blog's light content sections
   so featured -> browse -> latest reads as one calm light zone with even,
   reduced breathing space between each (vs the global section padding). ---- */
.page-blog .featured,
.page-blog .topic,
.page-blog .posts,
.page-blog .newsletter { padding-block: clamp(40px, 3.6vw, 62px); }

/* ---- Article cards : reuse .cards-grid/.card, add tag + reading time ---- */
.page-blog .post-tag {
  display: inline-block; padding: .28rem .7rem; border-radius: 6px;
  background: rgba(77, 127, 230, .1); color: #2f52a8;
  font-family: var(--font-heading); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: .9rem;
  transition: background .25s ease, color .25s ease;
}
.page-blog .post-card:hover .post-tag { background: rgba(77, 127, 230, .18); color: var(--color-cyan-1); }
.page-blog .post-meta { margin-top: 1rem; font-size: .85rem; color: rgba(0, 0, 59, .55); font-weight: 500; }
.page-blog .no-results { margin: 1.5rem auto 0; color: rgba(0, 0, 59, .6); font-weight: 500; }

/* ---- Newsletter strip ----
   Soft lavender band with the about page's inset seam-shadows (the .reach
   treatment), so it blends into the white sections on either side instead of
   punching a hard bright-purple slab into the flow. The purple Subscribe
   button carries the call-to-action emphasis. */
.page-blog .newsletter {
  background: var(--color-lavender); text-align: center;
  box-shadow: inset 0 10px 30px rgba(0, 0, 59, .02), inset 0 -10px 30px rgba(0, 0, 59, .02);
}
.page-blog .newsletter h2 { color: var(--color-navy); }
.page-blog .newsletter > p { color: rgba(0, 0, 59, .72); max-width: 640px; margin: 1rem auto 1.7rem; font-size: 1.08rem; }
.page-blog .newsletter-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; max-width: 540px; margin: 0 auto; }
.page-blog .newsletter-form input {
  flex: 1; min-width: 240px; padding: .95rem 1.15rem; border-radius: 8px;
  border: 1px solid rgba(0, 0, 59, .12);
  background: #fff; color: var(--color-navy); font-size: 1rem; font-family: var(--font-body);
}
.page-blog .newsletter-form input:focus { outline: none; border-color: #00dddd; box-shadow: 0 0 0 3px rgba(0, 221, 221, .22); }
.page-blog .newsletter-micro { margin-top: 1.1rem; font-size: .82rem; color: rgba(0, 0, 59, .55); }
.page-blog .newsletter-success { color: var(--color-purple); font-weight: 700; margin-top: 1.3rem; font-size: 1.05rem; }

/* The .go-deeper rules were here. Removed with the section itself: both its
   cards linked to pages that were never built, so it shipped as two dead
   links. Nothing else on the site uses the class. */

/* ---- Article cards : full-card link with thumbnail, author + publish date ---- */
.page-blog .post-card { padding: 0; overflow: hidden; }
.page-blog .post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.page-blog .post-thumb {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(1.15rem, 2vw, 1.6rem);
  background: linear-gradient(135deg, #1a1268 0%, #00003B 100%);
}
/* (dot-grid texture removed from card banners — clean gradient only) */
/* Article title shown as the card-hero headline — magazine-cover style, capped
   at 4 lines so every banner stays the same height and the grid reads evenly. */
.page-blog .thumb-title {
  position: relative; z-index: 1; margin: 0; text-align: left; color: #fff;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.3; letter-spacing: .003em;
  max-width: 64%; text-shadow: 0 1px 8px rgba(0, 0, 30, .6);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .25s ease;
}
.page-blog .post-card:hover .thumb-title { color: #cfc6ff; }
/* One unified, on-brand card-hero gradient across every category — the grid now
   reads as an ordered set instead of a mix of purple / blue / magenta / teal. */
.page-blog .post-thumb.t-regulations,
.page-blog .post-thumb.t-testing,
.page-blog .post-thumb.t-threat,
.page-blog .post-thumb.t-sdv,
.page-blog .post-thumb.t-iot { background: linear-gradient(135deg, #1a1268 0%, #00003B 100%); }

/* ---- Per-article card banner photo: a distinct, topic-matched real photograph
   for every post (royalty-free stock, self-hosted). Keyed on the card link's
   slug so no HTML changes are needed. A navy overlay (::before) darkens the left
   so the title (z-index:1) stays readable while the photo shows on the right. -- */
.page-blog .post-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(103deg, rgba(4, 2, 30, .93) 0%, rgba(4, 2, 30, .64) 42%, rgba(4, 2, 30, .30) 70%, rgba(4, 2, 30, .15) 100%),
    linear-gradient(180deg, rgba(4, 2, 30, .12), rgba(4, 2, 30, .5));
}
.page-blog a[href*="/eu-cra-timeline/"] .post-thumb,
.page-blog a[href*="/ais-189-vs-un-r155/"] .post-thumb,
.page-blog a[href*="/why-fuzzing-finds-bugs/"] .post-thumb,
.page-blog a[href*="/what-is-sbom/"] .post-thumb,
.page-blog a[href*="/securing-ota-un-r156/"] .post-thumb,
.page-blog a[href*="/csms-type-approval/"] .post-thumb,
.page-blog a[href*="/threat-intelligence-connected-vehicles/"] .post-thumb,
.page-blog a[href*="/eu-cra-iot-checklist/"] .post-thumb,
.page-blog a[href*="/pen-testing-an-ecu/"] .post-thumb,
.page-blog a[href*="/rxswin-explained/"] .post-thumb {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-blog a[href*="/eu-cra-timeline/"] .post-thumb { background-image: url(../assets/blog/photos/eu-cra-timeline.jpg?v=1); }
.page-blog a[href*="/ais-189-vs-un-r155/"] .post-thumb { background-image: url(../assets/blog/photos/ais-189-vs-un-r155.jpg?v=1); }
.page-blog a[href*="/why-fuzzing-finds-bugs/"] .post-thumb { background-image: url(../assets/blog/photos/why-fuzzing-finds-bugs.jpg?v=1); }
.page-blog a[href*="/what-is-sbom/"] .post-thumb { background-image: url(../assets/blog/photos/what-is-sbom.jpg?v=1); }
.page-blog a[href*="/securing-ota-un-r156/"] .post-thumb { background-image: url(../assets/blog/photos/securing-ota-un-r156.jpg?v=1); }
.page-blog a[href*="/csms-type-approval/"] .post-thumb { background-image: url(../assets/blog/photos/csms-type-approval.jpg?v=1); }
.page-blog a[href*="/threat-intelligence-connected-vehicles/"] .post-thumb { background-image: url(../assets/blog/photos/threat-intelligence-connected-vehicles.jpg?v=1); }
.page-blog a[href*="/eu-cra-iot-checklist/"] .post-thumb { background-image: url(../assets/blog/photos/eu-cra-iot-checklist.jpg?v=1); }
.page-blog a[href*="/pen-testing-an-ecu/"] .post-thumb { background-image: url(../assets/blog/photos/pen-testing-an-ecu.jpg?v=1); }
.page-blog a[href*="/rxswin-explained/"] .post-thumb { background-image: url(../assets/blog/photos/rxswin-explained.jpg?v=1); }

.page-blog .post-body { padding: 1.5rem 1.5rem 1.55rem; display: flex; flex-direction: column; flex: 1; }
.page-blog .post-card .post-tag { margin-bottom: .8rem; }
.page-blog .post-card .card-title { margin: 0 0 .5rem; font-size: 1.16rem; line-height: 1.3; transition: color .25s ease; }
.page-blog .post-card .card-desc { flex: 1; margin: 0; }
/* The listing cards carry no author or role -- the byline lives on the article
   itself. The date is therefore the only thing in this row, so it reads from
   the left edge like everything else in the card. space-between with a single
   child would have pushed it hard against the right, out of line with the
   title and description above it. */
.page-blog .post-foot {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid #E8E8FC;
}
.page-blog .post-foot .post-meta { margin: 0; text-align: left; white-space: nowrap; font-size: .78rem; }

/* The byline itself. Only the ARTICLE pages use it now (.post-meta-row) -- the
   listing cards above dropped it -- but these are the base rules those pages
   build on: the .post-meta-row block further down only overrides size and
   colour, so removing these would leave the avatar a square with no gradient. */
.page-blog .post-author { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.page-blog .author-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #7a5cff 0%, #4a2da0 52%, #241C74 100%); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: .74rem; letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(36, 28, 116, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.page-blog .author-name { font-size: .8rem; font-weight: 600; color: var(--color-navy); line-height: 1.2; }
.page-blog .author-role { display: block; font-weight: 500; font-size: .72rem; color: rgba(0, 0, 59, .55); }
.page-blog .post-card:hover { transform: translateY(-6px); }
.page-blog .post-card:hover .card-title { color: var(--color-purple); }
.page-blog .card[hidden] { display: none; }

/* ---- Load more ---- */
.page-blog .load-more-wrap { text-align: center; margin-top: 2.6rem; }
.page-blog .load-more-wrap[hidden] { display: none; }

/* ============================================================================
   Blog detail (single post) — reuses the hero/prose/card panels.
   ============================================================================ */
/* ===== Redesigned article hero — two columns: article intro (55%) + featured
   visual (45%). Controlled height so the article body starts near the fold. ===== */
.page-blog .post-hero {
  min-height: 50vh;
  padding: clamp(40px, 4.6vw, 66px) clamp(18px, 4vw, 56px) clamp(40px, 6vh, 72px) clamp(24px, 6vw, 104px);
  align-items: flex-start;   /* text hugs the left gutter instead of centering */
  overflow: hidden;
}
/* No ambient glow overlay. This re-enabled ::after with extra teal + purple
   radials, which left the article hero the only one on the site still carrying
   a decoration — and its teal (rgba(0,221,221,…)) is off-palette; this
   codebase's accent is blue (#4d7fe6). The article hero is now the same plain
   shared field as every other page outside the homepage. */
.page-blog .post-hero .hero-content {
  max-width: 1180px; width: 100%; margin: 0; align-items: stretch; text-align: left;
}
.page-blog .post-hero-grid { width: 100%; }
.page-blog .post-hero-main { display: flex; flex-direction: column; align-items: flex-start; max-width: 820px; }

/* Category badge — pill with a shield glyph */
.page-blog .post-badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: 22px;
  background: rgba(73, 41, 154, .3); border: 1px solid rgba(154, 124, 245, .45); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem;
  letter-spacing: .01em; margin-bottom: 1.35rem;
}
.page-blog .post-badge .badge-ico { width: 15px; height: 15px; color: #9a7cf5; flex: none; }
/* Controlled title (wraps 3-5 lines within the column, never fills the viewport) */
.page-blog .post-hero h1 { font-size: var(--fs-hero-h1); line-height: var(--lh-hero-h1); margin: 0 0 1.05rem; }
/* Short description */
.page-blog .post-hero-desc { color: #E8E8FC; font-size: var(--fs-hero-lede); line-height: 1.6; margin: 0 0 1.7rem; max-width: 54ch; }
/* Author + date + reading time — one row, split by thin dividers */
.page-blog .post-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.05rem; margin-top: 1.9rem; }
.page-blog .post-meta-row .post-author { display: flex; align-items: center; gap: .65rem; }
.page-blog .post-meta-row .author-avatar { width: 42px; height: 42px; font-size: .82rem; }
.page-blog .post-meta-row .author-name { color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.page-blog .post-meta-row .author-role { display: block; color: rgba(232, 232, 252, .68); font-weight: 500; font-size: .8rem; }
.page-blog .meta-divider { width: 1px; height: 30px; background: rgba(255, 255, 255, .16); }
.page-blog .meta-item { display: inline-flex; align-items: center; gap: .5rem; color: rgba(232, 232, 252, .82); font-size: .9rem; font-weight: 500; }
.page-blog .meta-item svg { width: 16px; height: 16px; color: #9a7cf5; flex: none; }
/* Share row */
.page-blog .post-share { display: flex; align-items: center; gap: .55rem; margin-top: 1.7rem; }
.page-blog .post-share .share-label { color: rgba(232, 232, 252, .7); font-size: .8rem; font-weight: 600; margin-right: .25rem; }
.page-blog .share-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #E8E8FC;
  cursor: pointer; text-decoration: none; transition: var(--transition-smooth);
}
.page-blog .share-btn:hover { background: rgba(0, 221, 221, .14); border-color: #00dddd; color: #00dddd; transform: translateY(-2px); }
.page-blog .share-btn svg { width: 16px; height: 16px; }
.page-blog .share-copied { color: #00dddd; font-size: .78rem; font-weight: 600; margin-left: .3rem; opacity: 0; transition: opacity .25s ease; }
.page-blog .share-copied.show { opacity: 1; }

/* Right column — featured glass visual with a soft float */
.page-blog .post-hero-media { position: relative; }
.page-blog .post-hero-card {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, rgba(26, 18, 104, .62) 0%, rgba(0, 0, 59, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 34px 80px rgba(0, 0, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: heroFloat 7s ease-in-out infinite;
}
.page-blog .post-hero-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px);
  background-size: 20px 20px; opacity: .5;
}
.page-blog .post-hero-illus { position: relative; z-index: 1; width: 84%; height: auto; }
.page-blog .hero-card-mark {
  position: absolute; left: 1.4rem; bottom: 1.25rem; z-index: 2;
  font-family: var(--font-heading); font-weight: 800; font-size: .9rem; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .9);
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .page-blog .post-hero-card { animation: none; } }

/* Responsive — stack, text first then the visual */
@media (max-width: 900px) {
  .page-blog .post-hero { min-height: auto; }
  .page-blog .post-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .page-blog .post-hero-media { max-width: 480px; width: 100%; margin-inline: auto; }
  /* mobile size handled by the uniform clamp above */
}

.page-blog .post-cover {
  position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: 18px; background: linear-gradient(135deg, #49299A, #140F4C);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 24px 60px rgba(0, 0, 59, .18);
}
.page-blog .post-cover::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: .5;
}
.page-blog .post-cover .thumb-mark { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9); font-size: 1.8rem; }

.page-blog .post-article { max-width: 760px; margin: 0 auto; }
.page-blog .post-article .post-lead { font-size: 1.22rem; line-height: 1.6; color: var(--color-navy); font-weight: 500; margin-bottom: 1.6rem; }
.page-blog .post-article h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); color: var(--color-navy); font-weight: 700; margin: 2.4rem 0 .9rem; }
.page-blog .post-article h2::after, .page-blog .post-article h2::before { display: none !important; }
.page-blog .post-article h3 { font-size: 1.22rem; color: var(--color-purple); font-weight: 600; margin: 1.8rem 0 .55rem; }
.page-blog .post-article p { color: rgba(0, 0, 59, .82); line-height: 1.72; margin: 0 0 1.2rem; font-size: 1.06rem; }
.page-blog .post-article ul { margin: 0 0 1.4rem 1.25rem; color: rgba(0, 0, 59, .82); line-height: 1.7; }
.page-blog .post-article li { margin-bottom: .5rem; }
.page-blog .post-article a { color: var(--color-purple); text-underline-offset: 3px; }
.page-blog .post-article strong { color: var(--color-navy); }
.page-blog .post-article blockquote {
  margin: 1.8rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--color-purple);
  background: #F4F2FC; border-radius: 0 10px 10px 0; color: var(--color-navy); font-style: italic;
}

/* ---- Related posts band ---- */
.page-blog .related-posts { background: #E8E8FC; }
.page-blog .related-posts .grid-header { text-align: center; }
.page-blog .related-posts .cards-grid { margin-top: 2.2rem; }

/* ============================================================================
   Responsive — desktop / tablet / mobile
   ============================================================================ */
@media (max-width: 1024px) {
  .page-blog .post-foot { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .page-blog .hero-search { flex-direction: column; }
  .page-blog .post-body { padding: 1.25rem; }
  /* the base rules already left-align the date, now the author is gone */
  .page-blog .feature-card .post-meta .read-on { display: block; margin-top: .4rem; }
}

/* ============ Blog hero with a motion figure ==============================
   Opt-in via .page-blog-anim on the blog index only, so blog post pages (also
   .page-blog) keep their single-column hero. Copy left, figure right, matching
   the platform and services heroes. The hero's aurora background and search
   box are untouched. */
@media (min-width: 901px) {
  .page-blog-anim .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 44vw, 600px);
    grid-template-areas: "content figure";
    column-gap: clamp(24px, 3vw, 48px);
    align-items: center;
  }
  .page-blog-anim .hero-content { grid-area: content; max-width: 60ch; }
  .page-blog-anim .hero-anim { grid-area: figure; align-self: center; }
}
.page-blog-anim .hero-anim {
  position: relative; width: 100%; max-width: 600px;
  height: clamp(430px, 58vh, 560px); z-index: 2;
}
/* No mask: the board is built from rows and pills, not a centred ring, so a
   radial feather would clip its corners. */
.page-blog-anim .hero-scan {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
@media (max-width: 900px) {
  .page-blog-anim .hero-anim {
    width: 460px; max-width: 94vw; height: 420px; margin: 1.4rem auto 0.2rem;
  }
}