/* ============================================================
   ScubaDev Insights -- editorial design (Solutions-vibe rebuild)
   Rewritten April 2026 to match sd-startup-designed vocabulary:
   navy fullbleed hero + mountain-wave dividers + alternating
   tan/cream bands with white content cards + blue-gradient
   5-step pattern for ordered lists + Solutions-style tables.

   Source files referenced:
     sd-startup-designed.css (L14 tokens, L119-139 dividers,
       L144-148 hero, L397-448 phases/steps, L600-644 warm
       band + list patterns)
     sd-startup-designed.js  (L17-23 wave SVG paths)

   Class contract preserved:
     .sd-insight__callout   (email-capture PDF card, JS depends)
     .sd-insight__callout-form / -status / -email / -btn (JS)
     .sd-insight__faq-* (accordion handlers)
     data-faq-item / data-sd-resource-form / data-progress
   ============================================================ */

body.sd-insight-post #nectar-content-wrap,
body.sd-insight-post .container-wrap,
body.sd-insight-post .container-wrap > .row,
body.sd-insight-post #ajax-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
body.sd-insight-post { background: var(--sd-cream, #FFF6E8); }

/* ============================================================
   NECTAR HEADER: default behavior preserved on blog posts.
   (Previously: transparent-header + collapsed nav-spacer hack
   removed Apr 2026 per Nick's direction. Blog posts now render
   with the standard Nectar header exactly like every other page.)
   ============================================================ */
/* Guard against horizontal scroll from any wave-divider negative margins. */
body.sd-insight-post { overflow-x: hidden; }

/* ============================================================
   HERO FLUSH-TO-NAV (added 2026-04-22)
   The Nectar nav is fixed at the top (see parent style.css L797-810).
   #nectar-nav-spacer reserves height equal to --header-nav-height
   (100px desktop, 104px on max-width:1024px) and has a cream bg,
   which created a visible gap between the solid nav and the hero.

   Fix: make the spacer transparent and pull the hero up by the
   spacer height so the hero's navy + featured-image bg paints
   continuously from y=0, while padding-top keeps the hero copy
   comfortably below the nav's visual footprint.

   Scoped to body.sd-insight-post ONLY. Nav styling is untouched.
   ============================================================ */
body.sd-insight-post #nectar-nav-spacer {
  background: transparent !important;
}
body.sd-insight-post .sd-insight__hero {
  margin-top: calc(-1 * var(--header-nav-height, 100px) - 50px);
  padding-top: calc(var(--header-nav-height, 100px) + clamp(32px, 4vw, 56px) + 50px);
}
@media only screen and (max-width: 1024px) {
  body.sd-insight-post .sd-insight__hero {
    margin-top: -154px;
    padding-top: calc(104px + clamp(24px, 5vw, 40px) + 50px);
  }
}


/* ============================================================
   DESIGN TOKENS (verbatim from sd-startup-designed.css L14)
   ============================================================ */
.sd-insight {
  --sd-navy-deep:  #11314a;
  --sd-navy:       #11314a;
  --sd-navy-2:     #235C81;
  --sd-blue:       #5492B6;
  --sd-coral:      #DB635D;
  --sd-salmon:     #F2847D;
  --sd-sand:       #F6C893;
  --sd-cream:      #FFF6E8;
  --sd-cream-2:    #FAF0DC;
  --sd-warm:       #FAF0DC;
  --sd-warm-deep:  #F6C893;
  --sd-border:     rgba(17,49,74,0.14);
  --sd-border-soft:rgba(17,49,74,0.08);
  --sd-muted:      rgba(17,49,74,0.62);
  --sd-on-dark:    rgba(255,246,232,0.82);
  --sd-on-dark-muted: rgba(255,246,232,0.62);
  --sd-maxw: 1180px;
  --sd-read: 720px;
  --sd-card-radius: 18px;
  --sd-shadow-card: 0 18px 40px -22px rgba(13,31,46,0.16), 0 2px 6px -2px rgba(13,31,46,0.06);
  --sd-shadow-card-warm: 0 22px 50px -24px rgba(90,60,20,0.22), 0 2px 6px -2px rgba(90,60,20,0.10);
  --sd-shadow-hero: 0 40px 80px -40px rgba(13,31,46,0.55);
  --sd-ease: cubic-bezier(.2,.8,.2,1);
  --sd-accent:       var(--sd-coral);
  --sd-accent-soft:  rgba(219,99,93,0.10);
  --sd-accent-deep:  var(--sd-navy-2);

  display: block;
  background: var(--sd-cream);
  color: var(--sd-navy);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: clip;
}
.sd-insight *,
.sd-insight *::before,
.sd-insight *::after { box-sizing: border-box; }

/* Pillar accents (kept so pillar color bleeds into section-num + CTA) */
.sd-insight--build    { --sd-accent: var(--sd-blue);   --sd-accent-soft: rgba(84,146,182,0.12); --sd-accent-deep: var(--sd-navy-2); }
.sd-insight--automate { --sd-accent: var(--sd-salmon); --sd-accent-soft: rgba(242,132,125,0.13); --sd-accent-deep: var(--sd-coral); }
.sd-insight--grow     { --sd-accent: var(--sd-coral);  --sd-accent-soft: rgba(219,99,93,0.11);  --sd-accent-deep: var(--sd-coral); }
.sd-insight--run      { --sd-accent: #F6C893;          --sd-accent-soft: rgba(246,200,147,0.30); --sd-accent-deep: #F6C893; }
.sd-insight--review   { --sd-accent: var(--sd-blue);   --sd-accent-soft: rgba(84,146,182,0.14); --sd-accent-deep: var(--sd-navy-2); }

/* ============================================================
   READING PROGRESS BAR (top-of-viewport sliver)
   ============================================================ */
.sd-insight__progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: 9999; pointer-events: none;
  background: rgba(13, 31, 46, 0.08);
}
.sd-insight__progress-bar {
  width: 0%; height: 100%;
  /* CHANGE 7 (Apr 24 2026): salmon -> tan gradient per Nick. Cream tail
     keeps the fill bright at 100%. Coral glow retained for legibility
     against the light track. */
  /* Apr 24 2026 (progress-bg adapt): default = warm salmon/cream gradient
     (used over DARK navy/darkblue/deep sections). JS sets
     [data-bg-context="light"] when the bar overlaps a cream/warm/salmon
     section and we swap to a blue gradient for contrast. */
  background: linear-gradient(90deg, #F2847D 0%, #FAF0DC 100%);
  transition: width .12s linear, background .35s ease, box-shadow .35s ease;
  box-shadow: 0 0 8px rgba(242, 132, 125, 0.45);
  border-radius: 0 2px 2px 0;
}
.sd-insight__progress-bar[data-bg-context="light"] {
  /* Over cream/warm/salmon sections: medium blue -> dark blue for contrast. */
  background: linear-gradient(90deg, #5492B6 0%, #235C81 100%);
  box-shadow: 0 0 8px rgba(35, 92, 129, 0.45);
}
.sd-insight__progress-bar[data-bg-context="dark"] {
  /* Explicit override (matches default) for over navy/darkblue/deep sections. */
  background: linear-gradient(90deg, #F2847D 0%, #FAF0DC 100%);
  box-shadow: 0 0 8px rgba(242, 132, 125, 0.45);
}

/* ============================================================
   HERO (navy fullbleed, verbatim vibe from startup L144-148)
   ============================================================ */
.sd-insight__hero {
  position: relative;
  background: var(--sd-navy-deep);
  color: var(--sd-cream);
  /* CHANGE 7 (Apr 24 2026): hero extended by 50px of padding-bottom so the
     cream wave rises into more navy space before the next section begins.
     Keeps the responsive clamp intact, only adds a flat 50px tail. */
  padding: clamp(84px, 10vw, 140px) 0 calc(clamp(72px, 9vw, 120px) + 50px);
  overflow: hidden;
  isolation: isolate;
  /* z-index: 2 hoists hero ABOVE sibling .sd-insight__divider-slot (z-index: 1)
     in the shared parent stacking context. Without this, isolation: isolate
     creates a stacking context that traps internal gradient pseudos (z-index: 2)
     inside a container that itself stacks at z-index: auto (below the divider
     sibling). Fix: external z-index: 2 on hero, internal gradient pseudos
     remain at z-index: 2 within the isolated context. 2026-04-22 gradient seam fix. */
  z-index: 2;
  box-shadow: inset 0 -1px 0 rgba(17, 49, 74, 0);
}
/* When a featured image is present it becomes an atmospheric backdrop;
   the hero-bg gradient + overlay pseudo-elements handle legibility so
   cream/sand text stays readable on any image. */
.sd-insight__hero--has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sd-insight__hero--has-image .sd-insight__hero-bg {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(84,146,182,0.22), transparent 55%),
    radial-gradient(ellipse at 88% 82%, rgba(246,200,147,0.12), transparent 60%),
    linear-gradient(180deg, rgba(13,31,46,0.82) 0%, rgba(17,49,74,0.80) 45%, rgba(13,31,46,0.88) 100%);
}
/* =====================================================================
   GRADIENT LAYER CONTRACT (established 2026-04-22)
   Gradient burst / pulse pseudo-elements render ABOVE wave dividers.
   Their own alpha falloff handles the edge transition. No seam possible.

   Z-index stack:
     section background (color/image)        z-index: auto
     wave divider svg                        z-index: 1
     gradient burst / pulse pseudo           z-index: 2
     content (inner)                         z-index: 3

   Defenses are belt-and-suspenders: gradient layered above wave AND
   mask-image feather on the gradient AND pointer-events: none. All
   three must stay active for zero visual seam across viewport/scroll.
   ===================================================================== */
.sd-insight__hero-overlay {
  position: absolute; inset: -120px 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 22% 30%, rgba(219,99,93,0.22), transparent 58%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(13,31,46,0.35), transparent 60%);
  filter: blur(30px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
.sd-insight__hero--has-image .sd-insight__hero-overlay {
  mix-blend-mode: normal;
}
.sd-insight__hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(84,146,182,0.28), transparent 55%),
    radial-gradient(ellipse at 88% 82%, rgba(246,200,147,0.14), transparent 60%),
    linear-gradient(180deg, var(--sd-navy-deep) 0%, var(--sd-navy) 45%, var(--sd-navy-2) 100%);
  pointer-events: none;
}
.sd-insight__hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,246,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,246,232,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%);
  opacity: .9;
}
.sd-insight__hero-bg::after {
  content: ""; position: absolute; left: -15%; top: -25%; width: 60%; height: 90%;
  background: radial-gradient(circle, rgba(219,99,93,0.18), transparent 58%);
  filter: blur(60px);
  z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
.sd-insight__hero-inner {
  position: relative; z-index: 3;
  max-width: var(--sd-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.sd-insight__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sd-sand);
  margin: 0 0 26px;
}
.sd-insight__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sd-coral);
  box-shadow: 0 0 0 4px rgba(219,99,93,0.18);
}
/* Eyebrow inside warm/cream body bands (Solutions uses dark-blue there). */
.sd-insight__section--warm .sd-insight__eyebrow,
.sd-insight__section--cream .sd-insight__eyebrow,
.sd-insight__section--salmon .sd-insight__eyebrow {
  color: var(--sd-navy-2);
}
.sd-insight__section--darkblue .sd-insight__eyebrow,
.sd-insight__section--navy .sd-insight__eyebrow,
.sd-insight__section--deep .sd-insight__eyebrow {
  color: var(--sd-sand);
}
.sd-insight__section--darkblue .sd-insight__eyebrow-dot,
.sd-insight__section--navy .sd-insight__eyebrow-dot,
.sd-insight__section--deep .sd-insight__eyebrow-dot {
  background: var(--sd-sand);
  box-shadow: 0 0 0 4px rgba(246,200,147,0.22);
}
.sd-insight__title {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.04; letter-spacing: -.025em;
  color: var(--sd-cream); font-weight: 700;
  margin: 0 0 24px; max-width: 900px;
}
.sd-insight__title-main { display: inline; }
.sd-insight__title-italic,
.sd-insight__title em {
  font-family: 'Bodoni Moda', 'Georgia', serif;
  font-style: italic; font-weight: 500; color: var(--sd-sand);
}
.sd-insight__subhead {
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55;
  color: var(--sd-on-dark);
  max-width: 700px; margin: 0 0 36px;
}
.sd-insight__hero-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px;
  margin-top: 28px;
}
.sd-insight__freshness {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sd-on-dark-muted); margin: 0;
}
.sd-insight__freshness em { font-style: normal; color: var(--sd-sand); }
.sd-insight__hero-sep {
  width: 36px; height: 1px; background: rgba(255,246,232,0.2); display: block;
}

/* ============================================================
   TOP COMPACT BYLINE (hero, under H1 + subhead)
   Avatar + "Written by Name" + role + dates + read time inline.
   Stacks on mobile.
   ============================================================ */
.sd-insight__byline {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
}
.sd-insight__byline-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,246,232,0.18);
}
.sd-insight__byline-avatar img,
.sd-insight__byline-avatar svg {
  width: 44px; height: 44px; display: block;
  object-fit: cover; object-position: center;
  border-radius: 50%;
}
.sd-insight__byline-meta {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.sd-insight__byline-author {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 400; font-size: 15px; color: var(--sd-on-dark);
  letter-spacing: -0.005em; line-height: 1.25;
}
.sd-insight__byline-author strong {
  color: var(--sd-cream); font-weight: 700;
}
.sd-insight__byline-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sd-on-dark-muted); line-height: 1.4;
}
.sd-insight__byline-sub time { color: var(--sd-sand); }
.sd-insight__byline-role { color: var(--sd-sand); }
.sd-insight__byline-sep {
  color: var(--sd-on-dark-muted); opacity: 0.55;
}
.sd-insight__byline-dates { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-insight__byline .sd-insight__read-time {
  color: var(--sd-on-dark-muted);
}

/* Mobile byline: avatar above text stack, text takes full width. */
@media (max-width: 640px) {
  .sd-insight__byline { flex-direction: row; align-items: flex-start; gap: 12px; }
  .sd-insight__byline-sub { font-size: 10.5px; letter-spacing: .1em; }
}

/* Legacy selectors: keep SEO/AEO and any older markup working. */
.sd-insight__author-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,246,232,0.18);
}
.sd-insight__author-avatar svg { display: block; }
.sd-insight__author-name {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 600; font-size: 15px; color: var(--sd-cream); margin: 0;
  letter-spacing: -0.005em;
}
.sd-insight__author-role {
  font-size: 12.5px; color: var(--sd-on-dark-muted); margin: 0;
  line-height: 1.35; max-width: 260px;
}

/* ============================================================
   WAVE DIVIDER (port of sd-startup-designed.css L119-139 +
   SVG from sd-startup-designed.js L17-23, verbatim paths)
   ============================================================ */
.sd-insight__divider-slot {
  /* z-index: 3 (herofix 2026-04-23): the divider-slot is a sibling of the
     navy hero (z-index: 2) and the footer CTA (z-index: 2). Those sections
     isolate their own gradient bursts internally, so they paint their navy
     bg on top of anything stacked below. With the old z-index: 1 the wave
     silhouette rising UP into the hero bottom was visually hidden behind
     the hero's z-index: 2, producing a flat straight edge on the navy-to-
     warm seam. Raising the slot to 3 lets the external wave paint OVER the
     hero's outer box. Hero/CTA internal gradient pseudos still stack fine
     because isolation: isolate traps them inside the section's own context,
     and they never need to paint onto the wave area above/below the section.
     Other transitions (warm -> darkblue, darkblue -> cream, cream -> warm)
     are between z-index:auto sections, so raising the slot is a no-op for
     them visually.
     Original rationale kept for reference: "waves sit under gradient bursts
     so gradient alpha falloff covers the seam" -- still holds for seams
     INSIDE the hero/CTA isolation, where the internal gradients render on
     top of whatever is below. The wave paints OUTSIDE those contexts. */
  position: relative; width: 100%; height: 0; z-index: 3;
  pointer-events: none;
}
.sd-insight__divider {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(70px, 10vw, 150px);
  pointer-events: none; display: block;
}
.sd-insight__divider svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
.sd-insight__divider svg path { fill: var(--sd-fill, var(--sd-cream)); }

/* Fill modifiers mirror sd-divider--* in startup CSS L132-139 */
.sd-insight__divider--navy      { --sd-fill: var(--sd-navy); }
.sd-insight__divider--deep      { --sd-fill: var(--sd-navy-deep); }
.sd-insight__divider--darkblue  { --sd-fill: var(--sd-navy-2); }
/* CHANGE 3c (Apr 23 2026 late): medblue divider token removed. It created
   a flat color block instead of a wave silhouette because the medblue
   (#5492B6) wave fill matched the playbook CTA gradient's top stop, so
   the color read as a solid band. Reuse darkblue (#235C81) for the
   playbook CTA upward wave; any other callers would have been broken. */
.sd-insight__divider--salmon    { --sd-fill: var(--sd-salmon); }
.sd-insight__divider--coral     { --sd-fill: var(--sd-coral); }
.sd-insight__divider--sand      { --sd-fill: var(--sd-sand); }
.sd-insight__divider--cream     { --sd-fill: var(--sd-cream); }
.sd-insight__divider--warm      { --sd-fill: var(--sd-warm); }

/* Dividers eat into the section below; give sections enough top padding
   to not be hidden under the wave. */
.sd-insight__divider-slot + .sd-insight__section { padding-top: clamp(110px, 11vw, 170px); }

/* ============================================================
   DOWN-FLOWING WAVE VARIANT (Apr 23 2026)
   Used for hero -> TLDR, comparison -> showcase, showcase ->
   playbook, and dark -> FAQ. Same SVG, flipped vertically and
   positioned at the TOP of the slot so the wave DRIPS DOWN
   onto the upcoming section using the OUTGOING section's fill.
   Reuses --sd-fill modifiers above.
   ============================================================ */
.sd-insight__divider--down {
  top: 0;
  bottom: auto;
  transform: scaleY(-1);
  transform-origin: center;
}
/* Down-flowing wave on the seam: the prior section bleeds down into the
   upcoming section's padding-top zone. The adjacent sibling selector above
   already grants the upcoming section clamp(110px,11vw,170px) of top padding,
   which is exactly the space the flipped wave occupies. */

/* ============================================================
   SECTION BANDS (warm + cream, alternating)
   ============================================================ */
.sd-insight__section {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
}
.sd-insight__section--warm      { background: var(--sd-warm); }
.sd-insight__section--cream     { background: var(--sd-cream); }
.sd-insight__section--warm-deep { background: var(--sd-warm-deep); }
.sd-insight__section--darkblue  { background: var(--sd-navy-2); color: var(--sd-cream); }
.sd-insight__section--navy      { background: var(--sd-navy); color: var(--sd-cream); }
.sd-insight__section--deep      { background: var(--sd-navy-deep); color: var(--sd-cream); }
.sd-insight__section--salmon    { background: var(--sd-salmon); color: var(--sd-navy); }
.sd-insight__section--intro     { padding-top: clamp(40px, 5vw, 70px); }

/* ============================================================
   PDF CTA BAND (Apr 24 2026 refactor, revised)
   Section bg is cream (standard). The CTA card now lives inside a
   FULL-BLEED outer wrapper that ignores the section-inner max-width,
   so the visible gap on each side of the card is a true ~50px from
   the viewport edge. When the FAQ follows, it is inlined into the
   SAME cream section (the template emits a single <section> with
   the --with-faq modifier), so the card's drop shadow visually
   flows into the FAQ prose without a section boundary.
   ============================================================ */
.sd-insight__section--pdf-cta-band {
  /* Inherits cream bg from .sd-insight__section--cream */
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* When the FAQ is inlined into the same section we drop the section's own
   bottom padding to zero; the FAQ's section-inner carries its own
   top/bottom rhythm. This preserves the flush CTA -> FAQ flow and still
   gives generous space above the CTA card. */
.sd-insight__section--with-faq {
  padding-bottom: 0;
}

/* Polish7 (Apr 2026): 100px gap between the CTA card and the FAQ prose
   that follows it. Previously the FAQ crowded up against the CTA's lower
   edge. Applied to the outer wrapper so the CTA card's shadow still plays
   naturally and the 100px of cream band shows between the two blocks. */
.sd-insight__section--pdf-cta-band.sd-insight__section--with-faq
  .sd-insight__playbook-cta-band-outer {
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  .sd-insight__section--pdf-cta-band.sd-insight__section--with-faq
    .sd-insight__playbook-cta-band-outer {
    padding-bottom: 64px;
  }
}

/* Full-bleed outer wrapper: escapes the section-inner max-width so the
   card can extend to within 50px of the viewport edge. The section's own
   horizontal padding (0 by default on .sd-insight__section) plus the 50px
   wrapper padding gives a real 50px gap on each side at desktop. */
.sd-insight__playbook-cta-band-outer {
  width: 100%;
  max-width: none;
  padding: 0 50px;
  box-sizing: border-box;
}

.sd-insight__playbook-cta-card {
  /* Navy gradient bg (keep the previous CTA gradient feel). */
  background: linear-gradient(180deg, #235C81 0%, #11314a 55%, #11314a 100%);
  color: var(--sd-cream);
  border-radius: 50px;
  /* CHANGE 7 (Apr 24 2026): margin-left/right removed. The outer wrapper
     .sd-insight__playbook-cta-band-outer now provides the 50px viewport-
     edge padding. Card stretches to fill the outer wrapper up to a
     generous max-width so it still feels anchored on very wide screens. */
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px -20px rgba(17, 49, 74, 0.4);
}

/* Tablet: tighter viewport-edge padding. */
@media (max-width: 1024px) {
  .sd-insight__playbook-cta-band-outer {
    padding: 0 32px;
  }
}

/* Mobile: reduce padding and border-radius. */
@media (max-width: 768px) {
  .sd-insight__playbook-cta-band-outer {
    padding: 0 20px;
  }
  .sd-insight__playbook-cta-card {
    border-radius: 32px;
    padding: 36px 24px;
  }
}

/* Flatten the inner .sd-playbook-cta aside so it does not double-stack
   gradients or fight the wrapper bounds. The wrapper carries the
   gradient, rounded corners, and shadow; the inner stays transparent
   and within the wrapper's content box (no full-bleed margin). */
.sd-insight__playbook-cta-card .sd-playbook-cta {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  margin: 0;
  width: auto;
  max-width: none;
  padding: 0;
}

/* The inner .sd-playbook-cta__bg layer (gradient + caustic + kelp +
   bubbles) is suppressed so the outer wrapper's gradient reads cleanly.
   Keep decorative particles/bubbles if desired by allowing the layer
   to stay positioned, but flatten its gradient tile. */
.sd-insight__playbook-cta-card .sd-playbook-cta__bg-gradient {
  display: none;
}

/* Dark-band text & card inversions. On darkblue/navy/deep bands flip the
   default card to a navy-tinted glass pane with cream text across the
   board (h2/h3, body, strong, em, links). */
.sd-insight__section--darkblue .sd-insight__section-card,
.sd-insight__section--navy .sd-insight__section-card,
.sd-insight__section--deep .sd-insight__section-card {
  background: rgba(13,31,46,0.35);
  border: 1px solid rgba(255,246,232,0.12);
  box-shadow: 0 30px 60px -20px rgba(17, 49, 74, 0.5), inset 0 0 0 1px rgba(255,246,232,0.04);
  color: var(--sd-cream);
}
.sd-insight__section--darkblue .sd-insight__section-head h2,
.sd-insight__section--navy .sd-insight__section-head h2,
.sd-insight__section--deep .sd-insight__section-head h2,
.sd-insight__section--darkblue .sd-insight__section-card h2,
.sd-insight__section--navy .sd-insight__section-card h2,
.sd-insight__section--deep .sd-insight__section-card h2,
.sd-insight__section--darkblue .sd-insight__section-card h3,
.sd-insight__section--navy .sd-insight__section-card h3,
.sd-insight__section--deep .sd-insight__section-card h3,
.sd-insight__section--darkblue .sd-insight__section-inner h2,
.sd-insight__section--navy .sd-insight__section-inner h2,
.sd-insight__section--deep .sd-insight__section-inner h2 {
  color: var(--sd-cream);
}
.sd-insight__section--darkblue .sd-insight__section-card p,
.sd-insight__section--navy .sd-insight__section-card p,
.sd-insight__section--deep .sd-insight__section-card p,
.sd-insight__section--darkblue .sd-insight__section-inner > p,
.sd-insight__section--navy .sd-insight__section-inner > p,
.sd-insight__section--deep .sd-insight__section-inner > p {
  color: rgba(255,246,232,0.82);
}
.sd-insight__section--darkblue .sd-insight__section-card strong,
.sd-insight__section--navy .sd-insight__section-card strong,
.sd-insight__section--deep .sd-insight__section-card strong {
  color: var(--sd-cream);
}
.sd-insight__section--darkblue .sd-insight__section-card em,
.sd-insight__section--navy .sd-insight__section-card em,
.sd-insight__section--deep .sd-insight__section-card em {
  color: var(--sd-sand);
}
.sd-insight__section--darkblue .sd-insight__section-num,
.sd-insight__section--navy .sd-insight__section-num,
.sd-insight__section--deep .sd-insight__section-num {
  color: var(--sd-sand);
}
.sd-insight__section--darkblue .sd-insight__section-num::after,
.sd-insight__section--navy .sd-insight__section-num::after,
.sd-insight__section--deep .sd-insight__section-num::after {
  background: var(--sd-sand);
}
.sd-insight__section--darkblue a,
.sd-insight__section--navy a,
.sd-insight__section--deep a {
  color: var(--sd-sand);
}
.sd-insight__section--darkblue a:hover,
.sd-insight__section--navy a:hover,
.sd-insight__section--deep a:hover {
  color: var(--sd-cream);
}

/* Fullbleed primitives render edge-to-edge -- no card wrap, no padding
   conflicts with the default .sd-insight__section-card. */
.sd-insight__section--fullbleed > .sd-insight__section-inner {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

.sd-insight__section-inner {
  max-width: var(--sd-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  position: relative;
}

/* White content card on warm bands (signature Solutions look).
   On cream bands the card is transparent so prose reads direct.    */
.sd-insight__section-card {
  background: var(--sd-cream);
  border-radius: var(--sd-card-radius);
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 56px);
  box-shadow: var(--sd-shadow-card-warm);
  border: 1px solid rgba(17,49,74,0.05);
  max-width: 880px;
  margin: 0 auto;
}
.sd-insight__section--cream .sd-insight__section-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  max-width: var(--sd-read);
}

/* ============================================================
   SECTION HEAD (number + h2 heading)
   (phase-style number treatment, mirrors startup .phase-num L431-448)
   ============================================================ */
.sd-insight__section-head {
  display: flex; align-items: baseline; gap: 18px;
  margin: 0 0 22px;
}
.sd-insight__section-num {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sd-coral); flex-shrink: 0;
  padding-top: 10px;
  position: relative;
}
.sd-insight__section-num::after {
  content: ""; position: absolute; left: -18px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sd-coral);
  box-shadow: 0 0 0 4px var(--sd-warm), 0 0 0 5px rgba(219,99,93,.35);
}
.sd-insight__section--cream .sd-insight__section-num::after {
  box-shadow: 0 0 0 4px var(--sd-cream), 0 0 0 5px rgba(219,99,93,.35);
}
.sd-insight__section-head h2 {
  margin: 0;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.018em;
  font-weight: 700; color: var(--sd-navy);
}
.sd-insight__section-head h2 em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500; color: var(--sd-navy-2);
}

/* Prose inline h2/h3 fallback (raw posts whose sections run multiple h2s
   after the framework split -- rare, but safe). */
.sd-insight__section-inner > h2,
.sd-insight__section-card > h2 {
  margin: 40px 0 18px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em;
  font-weight: 700; color: var(--sd-navy);
}
.sd-insight__section-card h3 {
  margin: 28px 0 12px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.3; letter-spacing: -0.005em;
  font-weight: 700; color: var(--sd-navy);
}

/* ============================================================
   PROSE (paragraphs, lists, code, emphasis)
   ============================================================ */
.sd-insight__section-card p,
.sd-insight__section-inner > p {
  margin: 0 0 22px;
  font-size: 17px; line-height: 1.72;
  color: var(--sd-navy);
  max-width: var(--sd-read);
}
/* Padding symmetry fix (Apr 23 2026): on bands where the card is a visible
   box (non-cream), the card itself owns the max-width (880px) and reading
   comfort. Letting paragraphs re-cap at --sd-read (720px) with no auto
   margin leaves them flush-left inside the card, producing an asymmetric
   right gutter. Remove the paragraph cap so the card padding carries the
   symmetry. Cream bands keep the default (card is transparent there). */
.sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card > p,
.sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card p {
  max-width: none;
}
.sd-insight__section-card > p:last-child,
.sd-insight__section-inner > p:last-child { margin-bottom: 0; }

.sd-insight__section-card p strong,
.sd-insight__section-inner p strong { color: var(--sd-navy-deep); font-weight: 700; }

.sd-insight__section-card em:not(.sd-insight__title-italic):not([class*="title"]),
.sd-insight__section-inner em:not(.sd-insight__title-italic):not([class*="title"]) {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500;
}

.sd-insight__section-card ul,
.sd-insight__section-inner > ul {
  margin: 18px 0 26px; padding-left: 26px;
  max-width: var(--sd-read);
}
/* Padding symmetry fix (Apr 23 2026): mirror the paragraph override so lists
   inside non-cream cards fill the card width symmetrically. */
.sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card ul {
  max-width: none;
}
.sd-insight__section-card ul li,
.sd-insight__section-inner > ul li {
  margin: 10px 0; line-height: 1.65;
}
.sd-insight__section-card ul li::marker,
.sd-insight__section-inner > ul li::marker { color: var(--sd-coral); }

/* Plain ordered lists that DIDN'T get the .sd-insight__steps upgrade
   still render clean. */
.sd-insight__section-card ol:not(.sd-insight__steps-ol),
.sd-insight__section-inner > ol:not(.sd-insight__steps-ol) {
  margin: 18px 0 26px; padding-left: 26px; max-width: var(--sd-read);
}
.sd-insight__section-card ol:not(.sd-insight__steps-ol) li,
.sd-insight__section-inner > ol:not(.sd-insight__steps-ol) li {
  margin: 10px 0; line-height: 1.65;
}

.sd-insight__section-card code,
.sd-insight__section-inner code {
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace;
  background: rgba(17,49,74,0.06);
  color: var(--sd-navy-deep);
  padding: 2px 6px; border-radius: 4px;
  font-size: .92em;
}
.sd-insight__section-card pre,
.sd-insight__section-inner pre {
  background: var(--sd-navy-deep); color: var(--sd-cream);
  padding: 20px 24px; border-radius: 12px; overflow-x: auto;
  margin: 22px 0;
  box-shadow: var(--sd-shadow-card);
}
.sd-insight__section-card pre code,
.sd-insight__section-inner pre code {
  background: transparent; color: inherit; padding: 0;
  font-size: 14px; line-height: 1.6;
}

/* Links (prose only, not buttons/ctas/faq). */
.sd-insight__section-card a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q),
.sd-insight__section-inner a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q),
.sd-insight__tldr a {
  color: var(--sd-navy-2);
  text-decoration: none;
  background-image: linear-gradient(var(--sd-accent), var(--sd-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: 100% 1.5px;
  padding-bottom: 1px;
  transition: color .2s var(--sd-ease), background-size .2s var(--sd-ease);
}
.sd-insight__section-card a:hover,
.sd-insight__section-inner a:hover,
.sd-insight__tldr a:hover {
  color: var(--sd-coral);
  background-size: 100% 3px;
}
.sd-insight__section-inner a[data-external]::after {
  content: " \2197"; font-size: .75em; opacity: .7; letter-spacing: 0;
}

/* Drop cap on the first paragraph of intro. */
.sd-insight__dropcap::first-letter {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  float: left;
  font-size: 5.6em;
  line-height: .82;
  padding: 4px 12px 0 0;
  color: var(--sd-coral);
}

/* ============================================================
   TLDR BAND (warm fill, white card wrap)
   ============================================================ */
.sd-insight__section--tldr-band { padding-top: clamp(36px, 5vw, 72px); }
.sd-insight__tldr-card {
  max-width: 820px;
  border-left: 4px solid var(--sd-coral);
  background: var(--sd-cream);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 48px);
}
.sd-insight__tldr-label {
  display: inline-block;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--sd-coral);
  margin: 0 0 14px;
  padding: 5px 12px;
  border: 1px solid var(--sd-coral);
  border-radius: 999px;
}
.sd-insight__tldr-body p {
  margin: 0;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55;
  color: var(--sd-navy-deep);
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: none;
}
.sd-insight__tldr-body strong { font-weight: 700; color: var(--sd-navy-deep); }

/* ============================================================
   5-STEP BLUE-GRADIENT BLOCK (ported verbatim from
   sd-startup-designed.css .how + .phases + .phase L397-457)
   Applied automatically to any <ol> in post body via mu-plugin.
   ============================================================ */
.sd-insight__steps {
  position: relative;
  margin: clamp(32px, 4vw, 56px) 0;
  /* Polish7 (Apr 2026): padding unified so all four sides match — previously
     horizontal ran to 76px while vertical capped at 72px, which read as
     "extra gutter on the right" on the numbered row cards per Nick. */
  padding: clamp(40px, 5vw, 72px);
  background: linear-gradient(180deg, var(--sd-navy-2) 0%, var(--sd-blue) 100%);
  color: var(--sd-cream);
  border-radius: var(--sd-card-radius);
  overflow: hidden;
  box-shadow: var(--sd-shadow-card);
}
.sd-insight__steps::before {
  content: ""; position: absolute;
  top: 8%; left: 22%; width: 55%; height: 78%;
  background: linear-gradient(165deg, rgba(246,200,147,0.22), transparent 60%);
  filter: blur(40px); pointer-events: none; opacity: .7;
  z-index: 2;
}
.sd-insight__steps-ol {
  list-style: none; counter-reset: sd-steps;
  margin: 0; padding: 0 0 0 clamp(0px, 3vw, 56px);
  position: relative; z-index: 3;
}
.sd-insight__steps-ol::before {
  content: ""; position: absolute;
  left: calc(clamp(0px, 3vw, 56px) + 34px);
  top: 24px; bottom: 24px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,246,232,0.28) 10%, rgba(255,246,232,0.28) 90%, transparent);
  pointer-events: none;
}
@media (max-width: 820px) {
  /* Polish7 (Apr 2026): even 4-side padding on small screens too. */
  .sd-insight__steps { padding: clamp(32px, 5vw, 48px); }
  .sd-insight__steps-ol { padding-left: 0; }
  .sd-insight__steps-ol::before { display: none; }
}
.sd-insight__steps-ol > li {
  position: relative;
  padding: 28px 0 28px calc(84px + clamp(20px, 3vw, 40px));
  min-height: 64px;
  border-top: 1px solid rgba(255,246,232,0.14);
  color: rgba(255,246,232,0.86);
  font-size: 16.5px; line-height: 1.65;
  list-style: none;
}
.sd-insight__steps-ol > li:first-child { border-top: 0; padding-top: 8px; }
.sd-insight__steps-ol > li:last-child { padding-bottom: 8px; border-bottom: 0; }
.sd-insight__steps-ol > li::before {
  counter-increment: sd-steps;
  content: counter(sd-steps, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  width: 84px; text-align: left;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--sd-salmon) 0%, var(--sd-sand) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sd-insight__steps-ol > li:first-child::before { top: 4px; }
.sd-insight__steps-ol > li::after {
  /* coral dot on the rail */
  content: ""; position: absolute;
  left: calc(84px + (clamp(20px, 3vw, 40px) / 2) - 4px);
  top: 38px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sd-coral);
  box-shadow: 0 0 0 4px var(--sd-navy-2), 0 0 0 5px rgba(219,99,93,.5);
  z-index: 2;
}
.sd-insight__steps-ol > li:first-child::after { top: 18px; }
@media (max-width: 820px) {
  .sd-insight__steps-ol > li { padding-left: calc(60px + 16px); }
  .sd-insight__steps-ol > li::before { width: 60px; top: 20px; }
  .sd-insight__steps-ol > li:first-child::before { top: 4px; }
  .sd-insight__steps-ol > li::after { display: none; }
}
.sd-insight__steps-ol > li > strong:first-child {
  display: block;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25;
  color: var(--sd-cream); font-weight: 700;
  margin-bottom: 6px; letter-spacing: -0.005em;
}
.sd-insight__steps-ol > li a {
  color: var(--sd-sand);
  text-decoration: underline;
  text-decoration-color: rgba(246,200,147,0.4);
  text-underline-offset: 3px;
}
.sd-insight__steps-ol > li a:hover { color: var(--sd-cream); text-decoration-color: var(--sd-cream); }

/* When steps sit inside a white card on warm band, don't double-pad. */
/* 2026-04-23: replaced negative bleed with 20px inward breathing room on desktop per Nick. */
.sd-insight__section-card .sd-insight__steps { margin-left: 20px; margin-right: 20px; }
@media (max-width: 720px) {
  .sd-insight__section-card .sd-insight__steps { margin-left: 0; margin-right: 0; }
}
@media (max-width: 760px) and (min-width: 721px) {
  .sd-insight__section-card .sd-insight__steps { margin-left: 20px; margin-right: 20px; }
}

/* ============================================================
   TABLES (Solutions vocabulary: navy head row, cream alt stripes,
   tan border frame)
   ============================================================ */
.sd-insight__section-card table,
.sd-insight__section-inner > table,
table.sd-insight__table {
  width: 100%;
  max-width: none;
  margin: clamp(28px, 3vw, 40px) 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--sd-cream);
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
  box-shadow: var(--sd-shadow-card);
}
.sd-insight__section-card thead th,
.sd-insight__section-inner > table thead th,
table.sd-insight__table thead th {
  background: var(--sd-navy);
  color: var(--sd-cream);
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-align: left;
  padding: 16px 18px;
  letter-spacing: 0.01em;
  border-bottom: 3px solid var(--sd-coral);
}
.sd-insight__section-card tbody td,
.sd-insight__section-inner > table tbody td,
table.sd-insight__table tbody td {
  padding: 14px 18px;
  border-top: 1px solid var(--sd-border-soft);
  color: var(--sd-navy);
  line-height: 1.55;
  vertical-align: top;
}
.sd-insight__section-card tbody tr:first-child td,
.sd-insight__section-inner > table tbody tr:first-child td,
table.sd-insight__table tbody tr:first-child td { border-top: 0; }
.sd-insight__section-card tbody tr:nth-child(even) td,
.sd-insight__section-inner > table tbody tr:nth-child(even) td,
table.sd-insight__table tbody tr:nth-child(even) td {
  background: rgba(246,200,147,0.09);
}
.sd-insight__section-card tbody tr:hover td,
.sd-insight__section-inner > table tbody tr:hover td,
table.sd-insight__table tbody tr:hover td {
  background: rgba(84,146,182,0.08);
}
.sd-insight__section-card tbody td:first-child,
.sd-insight__section-inner > table tbody td:first-child,
table.sd-insight__table tbody td:first-child {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 600; color: var(--sd-navy-deep);
}
@media (max-width: 720px) {
  .sd-insight__section-card table,
  .sd-insight__section-inner > table,
  table.sd-insight__table { font-size: 14px; display: block; overflow-x: auto; }
}

/* ============================================================
   BLOCKQUOTE CALLOUT (Solutions-style aside -- sand left rail,
   navy text, subtle warm bg, Bodoni italic first line)
   Auto-applied via mu-plugin pipeline; also works on raw
   <blockquote> inside .sd-insight__section-card.
   ============================================================ */
.sd-insight__pullquote,
.sd-insight__section-card blockquote:not(.sd-insight__pullquote),
.sd-insight__section-inner > blockquote:not(.sd-insight__pullquote) {
  position: relative;
  margin: clamp(28px, 3vw, 40px) 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(246,200,147,0.16), rgba(246,200,147,0.06));
  border-left: 4px solid var(--sd-coral);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--sd-shadow-card);
}
.sd-insight__pullquote::before,
.sd-insight__section-card blockquote::before {
  content: "\201C";
  position: absolute; top: 0; left: 14px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 64px; line-height: 1;
  color: var(--sd-coral);
  opacity: .32;
}
.sd-insight__pullquote p,
.sd-insight__section-card blockquote p {
  margin: 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.48;
  color: var(--sd-navy-deep);
  max-width: none;
}
.sd-insight__pullquote p + p,
.sd-insight__section-card blockquote p + p { margin-top: 12px; }

/* ============================================================
   HERO FIGURE BAND (POST2POLISH FIX 1, Apr 24 2026)
   Featured image rendered visibly in the post body right after the
   navy hero. The hero still uses the same image as an atmospheric
   backdrop, but content-rich infographics need a readable full-width
   presentation. Generalizable: every insights post with a thumbnail
   gets a visible hero figure. Caps at --sd-maxw and is centered in
   the section-inner, which itself centers on the viewport.
   ============================================================ */
.sd-insight__section--hero-figure-band {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
.sd-insight__hero-figure {
  margin: 0 auto;
  max-width: min(100%, var(--sd-maxw));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sd-shadow-card, 0 18px 48px rgba(13,31,46,0.16));
  background: #11314a;
}
.sd-insight__hero-figure-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .sd-insight__hero-figure { border-radius: 12px; }
}

/* ============================================================
   INLINE IMAGE FIGURES (auto-inserted by mu-plugin after 2nd h2)
   ============================================================ */
.sd-insight__inline-fig {
  margin: clamp(28px, 3vw, 40px) 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--sd-shadow-card);
  max-width: var(--sd-read);
}
/* Padding symmetry fix (Apr 23 2026): on non-cream bands the inline figure
   is inside a visible card; remove the --sd-read cap so the figure fills
   the card's content area symmetrically instead of sitting flush-left. */
.sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card .sd-insight__inline-fig {
  max-width: none;
}
.sd-insight__inline-fig img {
  width: 100%; height: auto; display: block;
}

/* ============================================================
   INLINE CALLOUT (shortcode [callout icon=...]) -- coral bar
   ============================================================ */
.sd-insight__inline-callout {
  display: flex; gap: 18px; align-items: flex-start;
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px);
  margin: clamp(26px, 3vw, 36px) 0;
  background: var(--sd-cream);
  border-left: 4px solid var(--sd-coral);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--sd-shadow-card);
  max-width: var(--sd-read);
}
.sd-insight__inline-callout-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--sd-coral);
  background: rgba(219,99,93,0.10);
  border-radius: 10px;
}
.sd-insight__inline-callout-icon svg { width: 22px; height: 22px; }
.sd-insight__inline-callout-body { min-width: 0; }
.sd-insight__inline-callout-body p { margin: 0 0 10px; line-height: 1.6; }
.sd-insight__inline-callout-body p:last-child { margin-bottom: 0; }

/* ============================================================
   CALLOUT CARDS (shortcode [callout-cards]) -- tile row
   ============================================================ */
.sd-insight__callout-cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(30px, 3vw, 42px) 0;
}
.sd-insight__callout-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.sd-insight__callout-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .sd-insight__callout-cards,
  .sd-insight__callout-cards[data-cols="2"],
  .sd-insight__callout-cards[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sd-insight__callout-cards,
  .sd-insight__callout-cards[data-cols="2"],
  .sd-insight__callout-cards[data-cols="4"] { grid-template-columns: 1fr; }
}
.sd-insight__callout-card {
  background: var(--sd-cream);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: var(--sd-shadow-card);
  display: flex; flex-direction: column; gap: 8px;
}
.sd-insight__callout-card-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--sd-coral);
  background: rgba(219,99,93,0.10);
  border-radius: 10px;
  margin-bottom: 6px;
}
.sd-insight__callout-card-icon svg { width: 22px; height: 22px; }
.sd-insight__callout-card-num {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sd-navy-2);
}
.sd-insight__callout-card h4 {
  margin: 0;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--sd-navy);
  letter-spacing: -0.005em;
}
.sd-insight__callout-card p {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--sd-muted);
}

/* ============================================================
   FAQ (accordion; JS toggles .is-open)
   ============================================================ */
.sd-insight__section--faq .sd-insight__section-card { padding-top: clamp(32px, 3vw, 44px); padding-bottom: clamp(32px, 3vw, 44px); }
.sd-insight__faq-heading {
  margin: 0 0 24px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 700;
  color: var(--sd-navy); letter-spacing: -0.018em;
}
.sd-insight__faq-item {
  border-top: 1px solid var(--sd-border);
}
.sd-insight__faq-item:first-of-type { border-top: 0; }
.sd-insight__faq-q {
  all: unset;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 600;
  color: var(--sd-navy); letter-spacing: -0.005em;
  line-height: 1.4;
}
.sd-insight__faq-q:hover { color: var(--sd-coral); }
.sd-insight__faq-q-text { flex: 1; }
.sd-insight__faq-chev {
  width: 24px; height: 24px; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311314a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transition: transform .25s var(--sd-ease);
}
.sd-insight__faq-item.is-open .sd-insight__faq-chev { transform: rotate(180deg); }
.sd-insight__faq-a { overflow: hidden; }
.sd-insight__faq-a-inner { padding: 0 0 22px; }
.sd-insight__faq-a-inner p {
  margin: 0; color: var(--sd-muted); line-height: 1.7;
  max-width: var(--sd-read);
}

/* ============================================================
   PDF PLAYBOOK CTA (large two-column email-capture card)
   Rebuilt per Nick spec #8: big, proper image sizing, responsive.
   Class contract (.sd-insight__callout, form, status) unchanged
   so JS resource-form handler still binds.
   ============================================================ */
.sd-insight__callout {
  position: relative;
  margin: clamp(36px, 4vw, 64px) 0;
  background: linear-gradient(135deg, var(--sd-navy-deep) 0%, var(--sd-navy) 55%, var(--sd-navy-2) 100%);
  color: var(--sd-cream);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(13,31,46,0.5), 0 4px 10px -4px rgba(13,31,46,0.3);
  border: 1px solid rgba(255,246,232,0.08);
  width: 100%;
  max-width: none;
}
.sd-insight__callout::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sd-coral), var(--sd-sand), var(--sd-coral));
  z-index: 3;
}
.sd-insight__callout::after {
  content: ""; position: absolute;
  top: -20%; right: -15%; width: 60%; height: 140%;
  background: radial-gradient(ellipse, rgba(219,99,93,0.2), transparent 58%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 2;
}
.sd-insight__callout-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(28px, 3.5vw, 48px);
  position: relative; z-index: 3;
}
.sd-insight__callout-cover {
  aspect-ratio: 3 / 4;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral));
  box-shadow: 0 30px 60px -20px rgba(17, 49, 74, 0.5), 0 2px 6px rgba(17, 49, 74, 0.2);
  position: relative;
}
.sd-insight__callout-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.sd-insight__callout-cover--empty::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,246,232,0.06),
    rgba(255,246,232,0.06) 2px,
    transparent 2px,
    transparent 10px
  );
}
.sd-insight__callout-body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; min-width: 0;
}
.sd-insight__callout-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--sd-sand); margin: 0;
}
.sd-insight__callout-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sd-coral);
  box-shadow: 0 0 0 4px rgba(219,99,93,0.18);
}
.sd-insight__callout-title {
  margin: 0;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--sd-cream);
  font-weight: 700;
}
.sd-insight__callout-desc {
  margin: 0; color: var(--sd-on-dark);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55;
}
.sd-insight__callout-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
}
.sd-insight__callout-email {
  flex: 1; min-width: 200px;
  padding: 14px 16px; font-size: 15px;
  background: rgba(255,246,232,0.08);
  color: var(--sd-cream);
  border: 1px solid rgba(255,246,232,0.2);
  border-radius: 10px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--sd-ease), background .2s var(--sd-ease);
}
.sd-insight__callout-email::placeholder { color: rgba(255,246,232,0.5); }
.sd-insight__callout-email:focus {
  border-color: var(--sd-coral);
  background: rgba(255,246,232,0.14);
  box-shadow: 0 0 0 3px rgba(219,99,93,0.25);
}
.sd-insight__callout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--sd-cream);
  background: var(--sd-coral);
  border: 0; border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 22px -8px rgba(219,99,93,0.55), 0 2px 4px rgba(17, 49, 74, 0.15);
  transition: transform .15s var(--sd-ease), box-shadow .15s var(--sd-ease), background .15s var(--sd-ease);
}
.sd-insight__callout-btn:hover {
  background: #DB635D;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(219,99,93,0.65), 0 2px 4px rgba(17, 49, 74, 0.2);
}
.sd-insight__callout-btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
.sd-insight__callout-reassure {
  margin: 0; color: rgba(255,246,232,0.6);
  font-size: 12.5px; letter-spacing: 0.015em;
}
.sd-insight__callout-status {
  margin: 0; color: var(--sd-sand); font-size: 13.5px; line-height: 1.5;
  min-height: 1em;
}
.sd-insight__callout-status.is-error { color: #F2847D; }
.sd-insight__callout-status.is-success { color: #5492B6; }
.sd-insight__callout-status a {
  color: var(--sd-sand); text-decoration: underline;
}
.sd-insight__callout-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,246,232,0.2);
  border-top-color: var(--sd-coral);
  border-radius: 50%;
  animation: sd-insight-spin .8s linear infinite;
  vertical-align: -2px; margin-right: 6px;
}
@keyframes sd-insight-spin { to { transform: rotate(360deg); } }
.sd-insight__callout-ghl iframe {
  width: 100%; min-height: 320px; border: 0; background: rgba(255,246,232,0.04); border-radius: 10px;
}

/* Mobile: stack vertical, PDF cover on top at ~280px height */
@media (max-width: 820px) {
  .sd-insight__callout-inner { grid-template-columns: 1fr; gap: 22px; }
  .sd-insight__callout-cover { aspect-ratio: auto; min-height: 280px; max-height: 340px; }
  .sd-insight__callout-cover img { object-position: center 20%; }
}

/* Callout-only sections (where the PDF CTA lives) get a little breathing room */
.sd-insight__section--callout-only { padding: clamp(20px, 2.5vw, 40px) 0; }
.sd-insight__section--callout-only .sd-insight__section-inner { max-width: 900px; }

/* ============================================================
   FINAL CTA (Book a Call) -- deep-navy with coral pulse, Solutions .final
   Port of .final from sd-startup-designed L816-834.
   ============================================================ */
.sd-insight__cta {
  position: relative;
  background: #235C81; /* footer blue, matches site footer */
  color: var(--sd-cream);
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  /* z-index: 2 hoists CTA ABOVE sibling .sd-insight__divider-slot (z-index: 1).
     Same rationale as .sd-insight__hero above: isolation: isolate traps inner
     gradient pseudos (cta::before + cta-pulse at z-index: 2) inside a context
     that, without an external z-index, stacks at auto level and loses to the
     divider-slot sibling. 2026-04-22 gradient seam fix. */
  z-index: 2;
}
/* CHANGE 5 (Apr 23 2026): remove fade-in on the footer CTA. The scroll-reveal
   JS still tags this element with [data-reveal] because the selector is
   shared; these overrides force full opacity from first paint, neutralize the
   translateY, and kill the transition so the blue bg is solid immediately.
   The inner coral pulse / bubble animations are unaffected. */
.sd-insight__cta[data-reveal],
.sd-insight__cta[data-reveal].is-visible,
.sd-insight__cta {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.sd-insight__related[data-reveal],
.sd-insight__related[data-reveal].is-visible,
.sd-insight__related {
  opacity: 1 !important;
  transform: none !important;
}
.sd-insight__cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(219,99,93,0.18), transparent 58%);
  pointer-events: none;
  z-index: 2;
  animation: sd-insight-coral-pulse 6s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
.sd-insight__cta-pulse {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 35% 35% at 30% 30%, rgba(219,99,93,0.20), transparent 58%),
    radial-gradient(ellipse 30% 30% at 75% 70%, rgba(246,200,147,0.10), transparent 58%);
  filter: blur(40px);
  pointer-events: none;
  animation: sd-insight-coral-pulse 6s ease-in-out infinite reverse;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
@keyframes sd-insight-coral-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.sd-insight__cta-inner {
  position: relative; z-index: 3;
  max-width: 800px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.sd-insight__cta-eyebrow {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--sd-sand); margin: 0 0 18px;
}
.sd-insight__cta-h2 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12;
  color: var(--sd-cream); font-weight: 700;
  margin: 0 0 16px; letter-spacing: -0.02em;
}
.sd-insight__cta-h2 em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500; color: var(--sd-sand);
}
.sd-insight__cta-body {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: rgba(255,246,232,0.88);
  margin: 0 0 32px; max-width: 620px; margin-left: auto; margin-right: auto;
}
.sd-insight__cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 20px 36px;
  background: var(--sd-coral);
  color: var(--sd-cream);
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 600; font-size: 17px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 30px -6px rgba(219,99,93,0.55);
  transition: transform .15s var(--sd-ease), box-shadow .15s var(--sd-ease), background .15s var(--sd-ease);
}
.sd-insight__cta-btn:hover {
  transform: translateY(-2px);
  background: var(--sd-salmon);
  box-shadow: 0 14px 40px -8px rgba(219,99,93,0.7);
  color: var(--sd-cream);
}

/* ============================================================
   RELATED POSTS
   ============================================================ */
.sd-insight__related {
  background: var(--sd-navy-2); color: var(--sd-cream);
  border-top: 1px solid var(--sd-coral);
  padding: clamp(64px, 8vw, 100px) 0;
}
.sd-insight__related-inner {
  max-width: var(--sd-maxw); margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.sd-insight__related-eyebrow {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sd-sand);
  margin: 0 0 32px;
}
.sd-insight__related-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .sd-insight__related-grid { grid-template-columns: 1fr; } }
.sd-insight__related-card {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(17,49,74,0.22);
  border: 1px solid var(--sd-coral);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  transition: transform .2s var(--sd-ease), border-color .2s var(--sd-ease), background .2s var(--sd-ease);
}
.sd-insight__related-card:hover {
  transform: translateY(-3px);
  border-color: var(--sd-coral);
  background: rgba(17,49,74,0.34);
}
.sd-insight__related-thumb {
  aspect-ratio: 16/9; border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: var(--sd-navy-2);
}
.sd-insight__related-thumb--empty {
  background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral));
}
.sd-insight__related-title {
  margin: 0;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--sd-cream); letter-spacing: -0.005em;
}
.sd-insight__related-meta {
  margin: 0; font-size: 12.5px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* ============================================================
   REVEAL (opt-in class from JS; progressive enhancement)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sd-ease), transform .6s var(--sd-ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   FULLBLEED PRIMITIVES -- [stats], [features], [notfor]
   Ported from sd-startup-designed (.stats L248-262, .ships-grid L604-618,
   .nf-list L631-644). Each renders inside a fullbleed section with its
   own fill modifier and matching wave dividers.
   ============================================================ */

/* ----- [stats] on darkblue band -------------------------------- */
.sd-insight__stats {
  position: relative; z-index: 3;
  max-width: var(--sd-maxw);
  margin: 0 auto;
}
.sd-insight__section--stats { overflow: hidden; }
.sd-insight__section--stats::after {
  content: ""; position: absolute;
  top: -30%; right: -10%; width: 60%; height: 160%;
  background: radial-gradient(ellipse, rgba(84,146,182,0.3), transparent 58%);
  filter: blur(40px); pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
.sd-insight__stats-head { margin-bottom: 36px; }
.sd-insight__stats-head .sd-insight__eyebrow--sand { color: var(--sd-sand); margin-bottom: 14px; }
.sd-insight__stats-head .sd-insight__eyebrow-dot--sand { background: var(--sd-sand); }
.sd-insight__stats-title {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--sd-cream);
  max-width: 820px;
  margin: 0;
}
.sd-insight__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 900px) {
  .sd-insight__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
}
@media (max-width: 520px) {
  .sd-insight__stats-grid { grid-template-columns: 1fr; }
}
.sd-insight__stat { color: var(--sd-cream); }
.sd-insight__stat-eyebrow {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sd-sand); margin: 0 0 14px;
}
.sd-insight__stat-num {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--sd-cream);
  margin: 0;
}
.sd-insight__stat-unit {
  font-size: 0.55em;
  color: var(--sd-sand);
  margin-left: 4px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.sd-insight__stat-label {
  color: rgba(255,246,232,0.72);
  font-size: 15px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 240px;
}

/* ----- [features] on warm or cream band ------------------------ */
.sd-insight__features {
  max-width: var(--sd-maxw);
  margin: 0 auto;
}
.sd-insight__features-head { margin-bottom: 36px; }
.sd-insight__features-head .sd-insight__eyebrow { margin-bottom: 14px; }
.sd-insight__features-title {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--sd-navy);
  max-width: 820px;
  margin: 0;
}
.sd-insight__section--darkblue .sd-insight__features-title,
.sd-insight__section--navy .sd-insight__features-title,
.sd-insight__section--deep .sd-insight__features-title {
  color: var(--sd-cream);
}
.sd-insight__features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sd-insight__features-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.sd-insight__features-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .sd-insight__features-grid,
  .sd-insight__features-grid[data-cols="2"],
  .sd-insight__features-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sd-insight__features-grid,
  .sd-insight__features-grid[data-cols="2"],
  .sd-insight__features-grid[data-cols="4"] { grid-template-columns: 1fr; }
}
.sd-insight__feature {
  /* Polish7 (Apr 2026): cream bg + equal 28px padding per Nick — the 24px
     horizontal padding against 28px vertical created a subtle asymmetry
     that read as "more right than top/bottom". All sides now 28px. */
  background: var(--sd-cream);
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  padding: 28px;
  position: relative;
  transition: transform .25s var(--sd-ease), border-color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}
.sd-insight__feature:hover {
  transform: translateY(-2px);
  border-color: rgba(219,99,93,0.35);
  box-shadow: 0 18px 40px -20px rgba(219,99,93,0.25);
}
.sd-insight__feature-icon {
  display: grid; place-items: start;
  width: 32px; height: 32px;
  color: var(--sd-coral);
  margin-bottom: 16px;
}
.sd-insight__feature-icon svg {
  width: 100%; height: 100%;
  stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
.sd-insight__feature-num {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em;
  color: var(--sd-navy-2);
  opacity: 0.7;
  margin: 0 0 6px;
}
.sd-insight__feature-title {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sd-navy);
  margin: 0 0 10px;
}
.sd-insight__feature-body {
  color: var(--sd-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
/* Feature cards on dark bands flip to glass. */
.sd-insight__section--darkblue .sd-insight__feature,
.sd-insight__section--navy .sd-insight__feature,
.sd-insight__section--deep .sd-insight__feature {
  background: rgba(13,31,46,0.35);
  border-color: rgba(255,246,232,0.12);
}
.sd-insight__section--darkblue .sd-insight__feature-title,
.sd-insight__section--navy .sd-insight__feature-title,
.sd-insight__section--deep .sd-insight__feature-title { color: var(--sd-cream); }
.sd-insight__section--darkblue .sd-insight__feature-body,
.sd-insight__section--navy .sd-insight__feature-body,
.sd-insight__section--deep .sd-insight__feature-body { color: rgba(255,246,232,0.75); }
.sd-insight__section--darkblue .sd-insight__feature-num,
.sd-insight__section--navy .sd-insight__feature-num,
.sd-insight__section--deep .sd-insight__feature-num { color: var(--sd-sand); opacity: 1; }

/* ----- [notfor] on warm band ----------------------------------- */
.sd-insight__notfor {
  max-width: var(--sd-maxw);
  margin: 0 auto;
}
.sd-insight__notfor-head { margin-bottom: 36px; }
.sd-insight__notfor-head .sd-insight__eyebrow { margin-bottom: 14px; }
.sd-insight__notfor-title {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--sd-navy);
  max-width: 820px;
  margin: 0;
}
.sd-insight__notfor-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 820px) {
  .sd-insight__notfor-list { grid-template-columns: 1fr; }
}
.sd-insight__notfor-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(17,49,74,0.10);
  margin: 0;
}
.sd-insight__notfor-item:first-child,
.sd-insight__notfor-item:nth-child(2) {
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 820px) {
  .sd-insight__notfor-item:nth-child(2) {
    border-top: 1px solid rgba(17,49,74,0.10);
    padding-top: 18px;
  }
}
.sd-insight__notfor-x {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(219,99,93,0.15);
  display: grid; place-items: center;
  color: var(--sd-coral);
  margin-top: 2px;
}
.sd-insight__notfor-x svg {
  width: 11px; height: 11px;
}
.sd-insight__notfor-body p {
  color: var(--sd-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.sd-insight__notfor-body p b,
.sd-insight__notfor-body p strong {
  color: var(--sd-navy);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}


/* ============================================================
   SHOWCASE SECTION MODIFIER
   Opt-in via H2 slug match (what-we-run-at-scubadev) or explicit
   <!-- sd-showcase --> marker at the top of the body. Applied in
   sd-insights-design.php (mu-plugin) + single-insight.php (template).
   Reusable for any future post that needs a dark watermark band.
   ============================================================ */
.sd-insight__section--showcase {
  position: relative;
  overflow: hidden;
  background: #11314a url('/wp-content/uploads/sites/4/2026/03/sdoffice.jpg') center/cover no-repeat;
  color: var(--sd-cream);
}
.sd-insight__section--showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 49, 74, 0.86) 0%, rgba(10, 25, 48, 0.95) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%);
}
.sd-insight__section--showcase > .sd-insight__section-inner {
  position: relative;
  z-index: 1;
}
/* Invert card + prose treatment for dark bg. */
.sd-insight__section--showcase .sd-insight__section-card {
  background: rgba(10, 25, 48, 0.55);
  border: 1px solid rgba(255, 246, 232, 0.12);
  color: var(--sd-cream);
  /* Padding symmetry fix (Apr 23 2026): base card padding floors at 22px
     horizontally, which reads cramped against the showcase photo on narrow
     viewports. Bump the floor to 28px so the dark translucent pane always
     breathes around the text. Shorthand is explicitly symmetric. */
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
}
.sd-insight__section--showcase .sd-insight__section-card p,
.sd-insight__section--showcase .sd-insight__section-inner > p {
  color: var(--sd-cream);
}
.sd-insight__section--showcase .sd-insight__section-card h2,
.sd-insight__section--showcase .sd-insight__section-card h3,
.sd-insight__section--showcase .sd-insight__section-head h2 {
  color: var(--sd-cream);
}
.sd-insight__section--showcase .sd-insight__section-card strong,
.sd-insight__section--showcase .sd-insight__section-card b {
  color: #FFF6E8;
}
.sd-insight__section--showcase .sd-insight__section-card em {
  color: var(--sd-sand, #F6C893);
}
.sd-insight__section--showcase .sd-insight__section-num {
  color: var(--sd-sand, #F6C893);
}
.sd-insight__section--showcase .sd-insight__section-num::after {
  background: var(--sd-sand, #F6C893);
  opacity: 0.6;
}
.sd-insight__section--showcase a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q) {
  color: var(--sd-sand, #F6C893);
}
.sd-insight__section--showcase a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover {
  color: #FFF6E8;
}
@media (max-width: 720px) {
  .sd-insight__section--showcase {
    background-position: center center;
  }
}

/* ============================================================
   SLUG-TARGETED MODIFIERS (Apr 24 2026)
   These rules apply to individual sections identified by their H2
   slug. Additive on top of the band/showcase styles above.
   ============================================================ */

/* "What we run at ScubaDev" — Polish7 (Apr 2026): moved the 100px of
   breathing room INWARD. The section outer keeps its natural cycle
   rhythm; the INNER content gets 100px top/bottom padding so the
   dark showcase photo background shows through between the content
   card and the wave dividers above/below it. */
body.sd-insight-post .sd-insight__section--what-we-run .sd-insight__section-inner {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  body.sd-insight-post .sd-insight__section--what-we-run .sd-insight__section-inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
/* Retain the divider-slot's top padding override for this section so
   the upward wave silhouette still sits cleanly above the content.
   The divider-slot + section rule adds clamp(110px, 11vw, 170px) to
   the top only when a divider precedes, which the inner padding above
   is layered on top of. */
.sd-insight__divider-slot + .sd-insight__section--what-we-run {
  padding-top: clamp(110px, 11vw, 170px);
}

/* "Fractional CTO vs CTO as a Service vs interim CTO" -- wrap the
   section's content in a white card box on the cream band. The
   default cream-band rule strips the section-card background; this
   rule re-asserts it for the compare section only, matching the
   content-box pattern Nick established ("reserve direct-on-bg for
   headings/transitions, put content in boxes"). */
.sd-insight__section--compare-cto.sd-insight__section--cream .sd-insight__section-card {
  /* Polish7 (Apr 2026): cream bg per Nick (was pure white, read too stark
     against the page cream band). */
  background: var(--sd-cream);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15);
  border: 1px solid rgba(84, 146, 182, 0.15);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--compare-cto.sd-insight__section--cream .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

/* "What an AI automation agency actually ships" (post 4072) -- mirrors the
   compare-cto treatment: wrap the section's content in a cream card box on
   the cream band. Same pattern, same visual: reserve direct-on-bg for
   transitions, put content in boxes. */
.sd-insight__section--what-we-ship.sd-insight__section--cream .sd-insight__section-card {
  background: var(--sd-cream);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15);
  border: 1px solid rgba(84, 146, 182, 0.15);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--what-we-ship.sd-insight__section--cream .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sd-insight__progress,
  .sd-insight__divider-slot,
  .sd-insight__hero-bg,
  .sd-insight__cta,
  .sd-insight__related,
  .sd-insight__callout { display: none !important; }
  .sd-insight__hero { background: #FFF6E8 !important; color: #11314a !important; padding: 0 !important; }
  .sd-insight__title, .sd-insight__author-name, .sd-insight__author-role, .sd-insight__eyebrow, .sd-insight__subhead, .sd-insight__freshness { color: #11314a !important; }
  .sd-insight__section { background: #FFF6E8 !important; padding: 12px 0 !important; }
  .sd-insight__section-card { background: #FFF6E8 !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
}

/* ============================================================
   IMAGE LIGHTBOX (Apr 2026 Task 2)
   Standalone image lightbox for inline blog images. JS binds
   to <img> inside figures with the marker class
   .sd-insight__lightbox-trigger (added server-side via the
   mu-plugin content filter) and opens a full-size view.
   Keyboard: Esc close, arrow keys navigate.
   Keep this self-contained so it never clashes with the
   Solutions-style .sd-ideas-modal work.
   ============================================================ */
.sd-insight__lightbox-trigger {
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.sd-insight__lightbox-trigger:hover,
.sd-insight__lightbox-trigger:focus-visible {
  transform: scale(1.005);
  filter: brightness(1.02);
  box-shadow: 0 24px 60px -30px rgba(13,31,46,0.35);
  outline: none;
}
.sd-insight__lightbox-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(219,99,93,0.55), 0 24px 60px -30px rgba(13,31,46,0.35);
}

#sd-insight-lightbox {
  position: fixed; inset: 0; z-index: 2147483000;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(13,31,46,0.92);
  opacity: 0;
  transition: opacity .22s ease;
}
#sd-insight-lightbox[data-open="true"] {
  display: flex;
  opacity: 1;
}
#sd-insight-lightbox .sd-insight-lightbox__stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
#sd-insight-lightbox .sd-insight-lightbox__img {
  max-width: 90vw;
  max-height: calc(90vh - 64px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 100px -40px rgba(17, 49, 74, 0.75);
  background: rgba(255,246,232,0.04);
  transform: scale(.98);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  opacity: 0;
}
#sd-insight-lightbox[data-open="true"] .sd-insight-lightbox__img {
  transform: scale(1);
  opacity: 1;
}
#sd-insight-lightbox .sd-insight-lightbox__caption {
  max-width: 90vw;
  color: rgba(255,246,232,0.86);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  padding: 4px 8px;
}
#sd-insight-lightbox .sd-insight-lightbox__close {
  position: fixed;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255,246,232,0.08);
  color: #DB635D; /* coral close button per spec */
  z-index: 2147483646;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  transition: background-color .18s ease, transform .18s ease;
}
#sd-insight-lightbox .sd-insight-lightbox__close:hover,
#sd-insight-lightbox .sd-insight-lightbox__close:focus-visible {
  background: rgba(219,99,93,0.22);
  transform: scale(1.08);
  outline: none;
}
#sd-insight-lightbox .sd-insight-lightbox__close svg { display: none; }
#sd-insight-lightbox .sd-insight-lightbox__close::before,
#sd-insight-lightbox .sd-insight-lightbox__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
#sd-insight-lightbox .sd-insight-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#sd-insight-lightbox .sd-insight-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#sd-insight-lightbox .sd-insight-lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255,246,232,0.06);
  color: #F6C893; /* sand arrows per spec */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  z-index: 2147483645;
  transition: background-color .18s ease, transform .18s ease;
}
#sd-insight-lightbox .sd-insight-lightbox__nav:hover,
#sd-insight-lightbox .sd-insight-lightbox__nav:focus-visible {
  background: rgba(246,200,147,0.20);
  transform: translateY(-50%) scale(1.08);
  outline: none;
}
#sd-insight-lightbox .sd-insight-lightbox__nav--prev {
  left: clamp(18px, 3vw, 40px) !important;
  left: max(clamp(18px, 3vw, 40px), calc(env(safe-area-inset-left) + 18px)) !important;
}
#sd-insight-lightbox .sd-insight-lightbox__nav--next {
  right: clamp(18px, 3vw, 40px) !important;
  right: max(clamp(18px, 3vw, 40px), calc(env(safe-area-inset-right) + 18px)) !important;
}
#sd-insight-lightbox .sd-insight-lightbox__nav[hidden] { display: none; }
#sd-insight-lightbox .sd-insight-lightbox__nav svg { display: none; }
#sd-insight-lightbox .sd-insight-lightbox__nav::before {
  content: "";
  display: block;
  width: 11px; height: 11px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1px;
}
#sd-insight-lightbox .sd-insight-lightbox__nav--prev::before {
  transform: rotate(-135deg);
}
#sd-insight-lightbox .sd-insight-lightbox__nav--next::before {
  transform: rotate(45deg);
}
@media (max-width: 600px) {
  #sd-insight-lightbox .sd-insight-lightbox__nav { width: 40px; height: 40px; }
  #sd-insight-lightbox .sd-insight-lightbox__close { width: 40px; height: 40px; }
  #sd-insight-lightbox .sd-insight-lightbox__img {
    max-height: calc(90vh - 80px);
    border-radius: 6px;
  }
}
/* Lock page scroll while lightbox is open. */
body.sd-insight-lightbox-open { overflow: hidden !important; }

/* ----- Semantic list resets for Safari Reader compatibility ----- */
/* Added 2026-04-22: [stats] and [features] now render as <ul>/<li>. */
ul.sd-insight__stats-grid,
ul.sd-insight__features-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}
li.sd-insight__stat,
li.sd-insight__feature {
  list-style: none;
}

/* ============================================================
   MOBILE PADDING FIX (2026-04-22)
   Section-inner clamp() mins out at 20px on narrow viewports,
   which leaves .sd-insight__section-head flush against the edge
   on cream/fullbleed bands where section-card padding is 0.
   Bump horizontal padding to 32px at mobile widths so the section
   counter ("01", "02") and H2 align with hero container padding.
   Applies uniformly to all variants (warm, cream, darkblue, navy,
   showcase) and all fullbleed children (stats, features, notfor).
   Does not affect full-bleed background band, only inner content.
   ============================================================ */
@media (max-width: 720px) {
  .sd-insight__section-inner,
  .sd-insight__section--fullbleed > .sd-insight__section-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* Mobile counter fix: neutralize negative-left dot pseudo so the
     coral dot aligns with the 32px padded content edge, not 14px. */
  .sd-insight__section-num::after {
    left: 0;
  }
  .sd-insight__section-head {
    gap: 14px;
  }
}

/* ============================================================
   H2 scroll-margin: ensure in-post anchor links (TOC + external)
   land below the sticky Nectar header rather than flush to the top
   of the viewport (which would hide the heading).
   ============================================================ */
body.sd-insight-post h2,
.sd-insight-post h2,
.sd-insight h2 {
  scroll-margin-top: 100px;
}

/* ============================================================
   TABLE OF CONTENTS (Apr 2026, rebuilt as button accordion)
   Single-column collapsed list. Button header with chevron that
   rotates 180deg when open. Uses grid-template-rows 0fr -> 1fr
   for a smooth height transition without hard-coded max-heights.
   Renders inside a cream band right after the TLDR.
   ============================================================ */
.sd-insight__toc-card.sd-insight__section-card,
.sd-insight__section--toc-band .sd-insight__section-card {
  background: var(--sd-warm, #FAF0DC);
  border: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08));
  border-radius: var(--sd-card-radius, 18px);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}
.sd-insight__toc {
  /* TOC top spacer (Apr 23 2026): 20px breathing room between the TLDR
     paragraph and the accordion header. */
  margin: 20px 0 0 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sd-insight__toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--sd-navy, #11314a);
  text-align: left;
  user-select: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.sd-insight__toc-toggle:hover {
  color: var(--sd-coral, #DB635D);
  background: rgba(219, 99, 93, 0.04);
}
.sd-insight__toc-toggle:focus-visible {
  outline: 2px solid var(--sd-coral, #DB635D);
  outline-offset: -2px;
}
.sd-insight__toc-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-navy-2, #235C81);
  font-weight: 700;
}
.sd-insight__toc-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sd-insight__toc-count {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-muted, rgba(17,49,74,0.62));
  font-weight: 500;
}
.sd-insight__toc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--sd-navy-2, #235C81);
  background: rgba(35, 92, 129, 0.08);
  transition: transform 300ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)), background-color 160ms ease;
}
.sd-insight__toc-toggle:hover .sd-insight__toc-chevron {
  background: rgba(219, 99, 93, 0.14);
  color: var(--sd-coral, #DB635D);
}
.sd-insight__toc-toggle[aria-expanded="true"] .sd-insight__toc-chevron {
  transform: rotate(180deg);
}
.sd-insight__toc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--sd-ease, cubic-bezier(.2,.8,.2,1));
}
.sd-insight__toc-body > .sd-insight__toc-body-inner {
  overflow: hidden;
  min-height: 0;
}
.sd-insight__toc[data-sd-toc-open="true"] .sd-insight__toc-body {
  grid-template-rows: 1fr;
}
.sd-insight__toc-list {
  list-style: none;
  margin: 0;
  padding: 4px 24px 18px;
  column-count: 1;
  column-gap: 0;
  border-top: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08));
}
.sd-insight__section-card .sd-insight__toc-list,
.sd-insight__section-inner > .sd-insight__toc-list {
  list-style: none;
  padding-left: 24px;
  margin-left: 0;
}
.sd-insight__toc-item {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(84, 146, 182, 0.10);
}
.sd-insight__toc-item:first-child { border-top: 0; }
.sd-insight__toc-item::marker,
.sd-insight__toc-list > li::marker {
  content: "";
  color: transparent;
}
.sd-insight__toc-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  color: var(--sd-navy, #11314a);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  border: 0;
  transition: color 160ms ease;
}
.sd-insight__toc-link:hover,
.sd-insight__toc-link:focus-visible {
  color: var(--sd-coral, #DB635D);
  text-decoration: none;
}
.sd-insight__toc-link .toc-num {
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--sd-sand, #F6C893);
  font-weight: 700;
  letter-spacing: 0.08em;
  min-width: 22px;
  flex-shrink: 0;
}
.sd-insight__toc-link:hover .toc-num,
.sd-insight__toc-link:focus-visible .toc-num {
  color: var(--sd-coral, #DB635D);
}
.sd-insight__toc-text {
  flex: 1;
}
@media (max-width: 720px) {
  .sd-insight__toc-toggle { padding: 14px 18px; }
  .sd-insight__toc-list { padding: 4px 18px 14px; }
  .sd-insight__toc-link { font-size: 14px; padding: 10px 0; }
  .sd-insight__toc-card.sd-insight__section-card,
  .sd-insight__section--toc-band .sd-insight__section-card {
    border-radius: 14px;
  }
}

/* Reading time chip in byline. */
.sd-insight__read-time {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--sd-on-dark, rgba(255,246,232,0.82));
  background: rgba(255,246,232,0.10);
  border: 1px solid rgba(255,246,232,0.18);
  border-radius: 999px;
  font-style: normal;
  vertical-align: middle;
}
.sd-insight__freshness time {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

/* ============================================================
   BOTTOM AUTHOR BOX
   "About the author" editorial card. Lives in its own cream
   band between the last section and the final CTA. Avatar on
   the left (90px), body on the right with kicker, name, role,
   bio, and optional social link list.
   ============================================================ */
.sd-insight__section--author-band .sd-insight__section-inner {
  max-width: var(--sd-read, 720px);
}
.sd-insight__author-box {
  display: block;
  background: var(--sd-warm, #FAF0DC);
  border: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08));
  border-radius: var(--sd-card-radius, 18px);
  padding: 40px;
  box-shadow: 0 10px 30px -20px rgba(13,31,46,0.12);
  position: relative;
}
.sd-insight__author-box::before {
  content: "";
  position: absolute; left: 40px; top: 0;
  width: 56px; height: 2px;
  background: var(--sd-coral);
  border-radius: 2px;
}
.sd-insight__author-box-inner {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  align-items: start;
}
.sd-insight__author-box-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  display: block; overflow: hidden;
  background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral));
  object-fit: cover; object-position: center;
  box-shadow: 0 0 0 4px var(--sd-cream), 0 8px 20px -10px rgba(13,31,46,0.25);
}
.sd-insight__author-box-body {
  min-width: 0;
}
.sd-insight__author-box-kicker {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sd-navy-2); margin: 0 0 8px;
  font-weight: 600;
}
.sd-insight__author-box-name {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--sd-navy); font-weight: 400;
  margin: 0 0 6px;
}
.sd-insight__author-box-name strong {
  font-weight: 700; color: var(--sd-navy);
}
.sd-insight__author-box-role {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 13px; letter-spacing: .02em;
  color: var(--sd-navy-2); font-weight: 600;
  margin: 0 0 14px;
}
.sd-insight__author-box-bio {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  color: var(--sd-muted, rgba(17,49,74,0.72));
  margin: 0 0 16px;
  max-width: 56ch;
}
.sd-insight__author-box-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
}
.sd-insight__author-box-links li { margin: 0; padding: 0; }
.sd-insight__author-box-links li + li {
  position: relative; padding-left: 18px;
}
.sd-insight__author-box-links li + li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sd-coral);
  transform: translateY(-50%);
}
.sd-insight__author-box-links a {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--sd-navy); text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--sd-ease), border-color .2s var(--sd-ease);
}
.sd-insight__author-box-links a:hover,
.sd-insight__author-box-links a:focus {
  color: var(--sd-coral);
  border-bottom-color: var(--sd-coral);
}

/* Tablet + mobile: stack avatar above body, reduce padding. */
@media (max-width: 640px) {
  .sd-insight__author-box { padding: 24px; }
  .sd-insight__author-box::before { left: 24px; }
  .sd-insight__author-box-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sd-insight__author-box-avatar { width: 72px; height: 72px; }
  .sd-insight__author-box-name { font-size: 20px; }
  .sd-insight__author-box-bio { font-size: 14.5px; }
}

/* ============================================================
   DARK BAND INLINE LINK CONTRAST (a11y fix)
   Inline links inside navy/darkblue/deep sections were rendering
   in medium-blue which failed contrast against dark navy bg.
   Mirrors the showcase pattern so all dark bands get sand links
   with coral underline, cream hover.
   ============================================================ */
.sd-insight__section--navy a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q),
.sd-insight__section--darkblue a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q),
.sd-insight__section--deep a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q) {
  color: var(--sd-sand, #F6C893);
  text-decoration-color: var(--sd-coral, #DB635D);
}
.sd-insight__section--navy a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover,
.sd-insight__section--darkblue a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover,
.sd-insight__section--deep a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover {
  color: var(--sd-cream, #FFF6E8);
  text-decoration-color: var(--sd-sand, #F6C893);
}

/* ============================================================
   SD PLAYBOOK CTA — underwater full-bleed lead capture
   Registered by /mu-plugins/sd-playbook-cta.php
   Replaces the legacy .sd-insight__callout card for the
   Subscription Development Playbook resource.
   ============================================================ */

.sd-playbook-cta {
  position: relative;
  isolation: isolate;
  margin: 56px calc(50% - 50vw) 64px;
  width: 100vw;
  max-width: 100vw;
  padding: 72px clamp(20px, 5vw, 64px);
  color: #FFF6E8;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  background: transparent;
}
/* Inside the single-insight body container the reset above lets the
   CTA bleed past the narrow prose column into a full-width band. */

.sd-playbook-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sd-playbook-cta__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #11314a 0%, #11314a 45%, #11314a 100%);
}

.sd-playbook-cta__caustic {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse at 30% 20%, rgba(84, 146, 182, 0.22) 0%, rgba(84, 146, 182, 0) 60%);
  filter: blur(100px);
  opacity: 0.9;
}

.sd-playbook-cta__kelp {
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 220px;
  height: auto;
  opacity: 0.6;
  pointer-events: none;
}

.sd-playbook-cta__bubbles {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 180px;
  height: 100%;
  pointer-events: none;
}
.sd-playbook-cta__bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,246,232,0.45), rgba(84,146,182,0.18) 70%, transparent 100%);
  border: 1px solid rgba(255,246,232,0.18);
  opacity: 0;
  animation: sd-playbook-cta-bubble 9s ease-in infinite;
}
.sd-playbook-cta__bubble--1 { width: 10px; height: 10px; left: 12px;  bottom: -30px; animation-delay: 0s;   animation-duration: 9s;  }
.sd-playbook-cta__bubble--2 { width: 16px; height: 16px; left: 60px;  bottom: -40px; animation-delay: 1.6s; animation-duration: 11s; }
.sd-playbook-cta__bubble--3 { width: 7px;  height: 7px;  left: 100px; bottom: -20px; animation-delay: 3.1s; animation-duration: 7.5s;}
.sd-playbook-cta__bubble--4 { width: 12px; height: 12px; left: 140px; bottom: -50px; animation-delay: 4.3s; animation-duration: 10s; }
.sd-playbook-cta__bubble--5 { width: 5px;  height: 5px;  left: 40px;  bottom: -10px; animation-delay: 5.8s; animation-duration: 8s;  }

@keyframes sd-playbook-cta-bubble {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  20%  { opacity: 0.5; }
  80%  { opacity: 0.35; }
  100% { transform: translateY(-640px) scale(1); opacity: 0; }
}

.sd-playbook-cta__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sd-playbook-cta__particle {
  position: absolute;
  border-radius: 50%;
  background: #F6C893;
  box-shadow: 0 0 6px rgba(246,200,147,0.5);
  animation: sd-playbook-cta-drift 14s linear infinite;
}
.sd-playbook-cta__particle:nth-child(2n) { animation-duration: 18s; }
.sd-playbook-cta__particle:nth-child(3n) { animation-duration: 22s; animation-direction: reverse; }

@keyframes sd-playbook-cta-drift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(10px,-14px,0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-playbook-cta__bubble,
  .sd-playbook-cta__particle { animation: none; opacity: 0.3; }
}

.sd-playbook-cta__grid {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}
@media (min-width: 900px) {
  .sd-playbook-cta__grid {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: 56px;
  }
}

/* LEFT: cover artifact ----------------------------------------- */
.sd-playbook-cta__cover-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.sd-playbook-cta__cover-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(84,146,182,0.35) 0%, rgba(84,146,182,0) 65%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.sd-playbook-cta__cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 4px;
  transform: perspective(1500px) rotateY(-4deg);
  filter: drop-shadow(0 20px 40px rgba(17, 49, 74, 0.5)) drop-shadow(0 6px 16px rgba(17, 49, 74, 0.35));
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.sd-playbook-cta__cover:hover {
  transform: perspective(1500px) rotateY(-2deg);
}
.sd-playbook-cta__cover--empty {
  width: 320px;
  height: 420px;
  background: linear-gradient(135deg, #11314a 0%, #11314a 100%);
  border: 1px solid rgba(246,200,147,0.18);
}

/* RIGHT: body + form ------------------------------------------ */
.sd-playbook-cta__body {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.sd-playbook-cta__eyebrow {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F6C893;
  margin: 0 0 18px;
}
.sd-playbook-cta__headline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFF6E8;
  margin: 0 0 18px;
}
.sd-playbook-cta__italic {
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: #DB635D;
  padding: 0 0.04em;
}
.sd-playbook-cta__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 246, 232, 0.85);
  margin: 0 0 28px;
}

/* Form ------------------------------------------------------- */
.sd-playbook-cta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
}
.sd-playbook-cta__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .sd-playbook-cta__row { grid-template-columns: 1fr 1fr; }
}

.sd-playbook-cta__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sd-playbook-cta__label {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 200, 147, 0.85);
  padding-left: 2px;
}

.sd-playbook-cta .sd-playbook-cta__field input,
.sd-playbook-cta .sd-playbook-cta__field select,
.sd-playbook-cta input[type="text"],
.sd-playbook-cta input[type="email"],
.sd-playbook-cta select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 14px !important;
  border-radius: 6px !important;
  background: rgba(255, 246, 232, 0.08) !important;
  border: 1px solid rgba(17, 49, 74, 0.9) !important;
  color: #FFF6E8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  outline: none;
}
.sd-playbook-cta__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(246,200,147,0.8) 50%),
    linear-gradient(135deg, rgba(246,200,147,0.8) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
.sd-playbook-cta .sd-playbook-cta__field input::placeholder {
  color: rgba(255, 246, 232, 0.42) !important;
}
.sd-playbook-cta .sd-playbook-cta__field input:focus,
.sd-playbook-cta .sd-playbook-cta__field select:focus,
.sd-playbook-cta input[type="text"]:focus,
.sd-playbook-cta input[type="email"]:focus,
.sd-playbook-cta select:focus {
  outline: none !important;
  border-color: #DB635D !important;
  background: rgba(255, 246, 232, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(219, 99, 93, 0.22) !important;
}
.sd-playbook-cta__field select option {
  background: #11314a;
  color: #FFF6E8;
}

/* Submit ----------------------------------------------------- */
.sd-playbook-cta button.sd-playbook-cta__submit,
.sd-playbook-cta .sd-playbook-cta__submit {
  position: relative;
  width: 100% !important;
  padding: 15px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #DB635D 0%, #DB635D 100%) !important;
  color: #FFF6E8 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(219, 99, 93, 0.25), inset 0 1px 0 rgba(255, 246, 232, 0.12) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  margin-top: 6px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.sd-playbook-cta button.sd-playbook-cta__submit:hover,
.sd-playbook-cta .sd-playbook-cta__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(219, 99, 93, 0.38), inset 0 1px 0 rgba(255, 246, 232, 0.18) !important;
  background: linear-gradient(180deg, #F2847D 0%, #DB635D 100%) !important;
}
.sd-playbook-cta__submit:focus-visible {
  outline: 3px solid rgba(246, 200, 147, 0.9);
  outline-offset: 3px;
}
.sd-playbook-cta__submit[disabled],
.sd-playbook-cta__submit.is-loading {
  cursor: wait;
  opacity: 0.82;
}
.sd-playbook-cta__submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,246,232,0.25);
  border-top-color: #FFF6E8;
  margin-left: 10px;
  vertical-align: -3px;
  animation: sd-playbook-cta-spin 0.8s linear infinite;
}
.sd-playbook-cta__submit.is-loading .sd-playbook-cta__submit-spinner {
  display: inline-block;
}
.sd-playbook-cta__submit.is-loading .sd-playbook-cta__submit-label {
  opacity: 0.85;
}
@keyframes sd-playbook-cta-spin {
  to { transform: rotate(360deg); }
}

.sd-playbook-cta__fineprint {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 246, 232, 0.6);
  margin: 4px 0 0;
}

/* Status / success ------------------------------------------- */
.sd-playbook-cta__status {
  min-height: 1em;
  margin: 10px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 246, 232, 0.8);
}
.sd-playbook-cta__status.is-error {
  color: #F2847D;
}

.sd-playbook-cta__success[hidden] { display: none !important; }
.sd-playbook-cta__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  background: rgba(255, 246, 232, 0.08);
  border: 1px solid rgba(246, 200, 147, 0.3);
  border-radius: 10px;
  color: #FFF6E8;
  margin: 4px 0 18px;
}
.sd-playbook-cta__success-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(246, 200, 147, 0.2);
  color: #F6C893;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.sd-playbook-cta__success-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.sd-playbook-cta__success-msg {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 246, 232, 0.85);
}
.sd-playbook-cta__success-msg a {
  color: #F6C893;
  text-decoration: underline;
  text-decoration-color: rgba(246,200,147,0.6);
  text-underline-offset: 2px;
}
.sd-playbook-cta__success-msg a:hover {
  color: #FFF6E8;
}

/* Trust strip ------------------------------------------------ */
.sd-playbook-cta__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 22px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 246, 232, 0.5);
}
.sd-playbook-cta__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(246, 200, 147, 0.4);
}

/* Mobile-specific tweaks ------------------------------------- */
@media (max-width: 899px) {
  .sd-playbook-cta {
    padding: 56px clamp(20px, 6vw, 40px);
    margin-top: 40px;
    margin-bottom: 48px;
  }
  .sd-playbook-cta__cover {
    transform: none;
    max-width: 280px;
  }
  .sd-playbook-cta__cover-wrap {
    order: -1;
  }
  .sd-playbook-cta__kelp {
    width: 140px;
    bottom: -30px;
  }
  .sd-playbook-cta__bubbles {
    width: 120px;
  }
}

/* Ensure the legacy callout never renders inline for the playbook
   resource (our the_content filter swaps it, but hide any residual). */
.sd-insight__callout[data-resource-id="4327"] { display: none !important; }


/* ==================================================================
 * SKINNY PLAYBOOK CTA BANNER (sd_playbook_cta_banner)
 * Horizontal full-width banner auto-injected after the 3rd H2 in
 * single insights posts. Complements the large underwater CTA at
 * the bottom of the post.
 * ================================================================== */

.sd-insight__playbook-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    width: auto;
    max-width: none;
    margin: 48px 50px;
    padding: 22px 28px 22px 32px;
    min-height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #11314a 0%, #11314a 50%, #235C81 100%);
    box-shadow: 0 10px 30px -12px rgba(10, 25, 48, 0.45), 0 2px 6px -1px rgba(17, 49, 74, 0.25);
    isolation: isolate;
}

/* Thin coral accent bar on the left edge */
.sd-insight__playbook-banner-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(219, 99, 93, 0) 0%, #DB635D 25%, #DB635D 75%, rgba(219, 99, 93, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Faint golden caustic on the left, behind the cover */
.sd-insight__playbook-banner-caustic {
    position: absolute;
    top: -40%;
    left: -6%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 35% 45%, rgba(246, 200, 147, 0.18) 0%, rgba(246, 200, 147, 0.08) 35%, transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

/* Drifting cream particles on the right */
.sd-insight__playbook-banner-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.sd-insight__playbook-banner-particle {
    position: absolute;
    background: #FFF6E8;
    border-radius: 50%;
    opacity: 0.25;
    animation: sd-playbook-banner-drift 7s ease-in-out infinite;
    will-change: transform, opacity;
}
.sd-insight__playbook-banner-particle:nth-child(2) { animation-delay: -2.3s; animation-duration: 9s; }
.sd-insight__playbook-banner-particle:nth-child(3) { animation-delay: -4.1s; animation-duration: 11s; }

@keyframes sd-playbook-banner-drift {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
    50%      { transform: translateY(-6px) translateX(-3px); opacity: 0.35; }
}

/* Cover thumbnail (left column) */
.sd-insight__playbook-banner-cover-wrap {
    position: relative;
    flex: 0 0 95px;
    width: 95px;
    height: 120px;
    display: block;
    z-index: 3;
    text-decoration: none;
    transform: perspective(1200px) rotateY(-8deg);
    transform-origin: center center;
    transition: transform 300ms ease;
}
.sd-insight__playbook-banner-cover-wrap:hover {
    transform: perspective(1200px) rotateY(-4deg) translateY(-2px);
}
.sd-insight__playbook-banner-cover-glow {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle at 50% 55%, rgba(219, 99, 93, 0.35) 0%, rgba(219, 99, 93, 0.12) 40%, transparent 70%);
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}
.sd-insight__playbook-banner-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 8px 20px -6px rgba(17, 49, 74, 0.5), 0 2px 4px -1px rgba(17, 49, 74, 0.35);
    border: 1px solid rgba(255, 246, 232, 0.08);
}
.sd-insight__playbook-banner-cover--empty {
    background: linear-gradient(135deg, #11314a, #235C81);
}

/* Center body (eyebrow + headline + sub) */
.sd-insight__playbook-banner-body {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 8px;
}
.sd-insight__playbook-banner-eyebrow {
    font-family: 'Source Code Pro', ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F6C893;
    margin: 0;
    line-height: 1.2;
}
.sd-insight__playbook-banner-headline {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #FFF6E8;
    margin: 0;
}
.sd-insight__playbook-banner-italic {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    color: #DB635D;
    padding: 0 2px;
}
.sd-insight__playbook-banner-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 246, 232, 0.75);
    margin: 0;
}

/* CTA button (right column) */
.sd-insight__playbook-banner-cta {
    position: relative;
    flex: 0 0 auto;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-left: 8px;
}
.sd-insight__playbook-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    padding: 13px 22px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #FFF6E8 !important;
    background: #DB635D;
    /* Polish7 (Apr 2026): kill any theme-level underline or border-bottom
       that was painting a hairline stroke beneath the label. Covers both
       the <a> and any descendant <span> Nectar themes like to underline. */
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 999px;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-shadow: none;
    box-shadow: 0 6px 18px -4px rgba(219, 99, 93, 0.55), 0 1px 3px rgba(10, 25, 48, 0.3), inset 0 1px 0 rgba(255, 246, 232, 0.18);
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}
.sd-insight__playbook-banner-btn,
.sd-insight__playbook-banner-btn:link,
.sd-insight__playbook-banner-btn:visited,
.sd-insight__playbook-banner-btn:hover,
.sd-insight__playbook-banner-btn:focus,
.sd-insight__playbook-banner-btn:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.sd-insight__playbook-banner-btn > span,
.sd-insight__playbook-banner-btn > span:hover {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.sd-insight__playbook-banner-btn:hover,
.sd-insight__playbook-banner-btn:focus {
    background: #F2847D;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(219, 99, 93, 0.65), 0 2px 4px rgba(10, 25, 48, 0.35), inset 0 1px 0 rgba(255, 246, 232, 0.25);
    color: #FFF6E8 !important;
}
.sd-insight__playbook-banner-btn:active {
    transform: translateY(0);
}
.sd-insight__playbook-banner-btn svg {
    transition: transform 200ms ease;
}
.sd-insight__playbook-banner-btn:hover svg {
    transform: translateX(3px);
}

/* Mobile: stacked layout */
@media (max-width: 768px) {
    .sd-insight__playbook-banner {
        flex-wrap: wrap;
        gap: 14px 16px;
        padding: 18px 18px 18px 22px;
        min-height: 0;
        margin: 36px 20px;
    }
    .sd-insight__playbook-banner-cover-wrap {
        flex: 0 0 60px;
        width: 60px;
        height: 75px;
    }
    .sd-insight__playbook-banner-body {
        flex: 1 1 200px;
        padding-right: 0;
        gap: 4px;
    }
    .sd-insight__playbook-banner-eyebrow {
        font-size: 9px;
    }
    .sd-insight__playbook-banner-headline {
        font-size: 17px;
    }
    .sd-insight__playbook-banner-sub {
        font-size: 12px;
        line-height: 1.4;
    }
    .sd-insight__playbook-banner-cta {
        flex: 1 0 100%;
        padding-left: 0;
        padding-top: 4px;
    }
    .sd-insight__playbook-banner-btn {
        width: 100%;
        min-width: 0;
        padding: 14px 20px;
    }
}

/* Reduce-motion: no drift */
@media (prefers-reduced-motion: reduce) {
    .sd-insight__playbook-banner-particle {
        animation: none;
    }
    .sd-insight__playbook-banner-cover-wrap {
        transition: none;
    }
}

/* ==================================================================
 * Sticky bottom-left playbook promo popup.
 * Appears after reader scrolls past .sd-insight__playbook-banner,
 * hides once #sd-playbook-cta-main enters view. Desktop only.
 * ================================================================== */
.sd-playbook-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 320px;
  z-index: 80;
  background: linear-gradient(135deg, #11314a 0%, #11314a 50%, #235C81 100%);
  border-radius: 20px;
  padding: 18px;
  padding-left: 22px;
  box-shadow: 0 16px 40px -8px rgba(17, 49, 74, 0.5), 0 0 24px rgba(84, 146, 182, 0.2);
  color: var(--sd-cream, #FFF6E8);
  display: flex;
  gap: 14px;
  align-items: center;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 400ms ease-out, opacity 400ms ease-out;
  pointer-events: none;
  will-change: transform, opacity;
}
.sd-playbook-popup.is-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.sd-playbook-popup::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--sd-coral, #DB635D);
  border-radius: 2px;
}
.sd-playbook-popup__cover-wrap {
  flex-shrink: 0;
  position: relative;
  width: 60px;
  height: 80px;
  transform: perspective(800px) rotateY(-6deg);
  filter: drop-shadow(0 4px 8px rgba(17, 49, 74, 0.4));
}
.sd-playbook-popup__cover-wrap::after {
  content: "";
  position: absolute;
  inset: -6px -10px -6px -6px;
  background: radial-gradient(ellipse at center, rgba(219, 99, 93, 0.35) 0%, rgba(219, 99, 93, 0) 70%);
  z-index: -1;
  filter: blur(6px);
}
.sd-playbook-popup__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.sd-playbook-popup__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sd-playbook-popup__eyebrow {
  font-family: 'Source Code Pro', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sd-sand, #F6C893);
  font-weight: 600;
  margin: 0;
}
.sd-playbook-popup__headline {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sd-cream, #FFF6E8);
  margin: 0;
}
.sd-playbook-popup__italic {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  color: var(--sd-coral, #DB635D);
  font-weight: 500;
}
.sd-playbook-popup__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  background: var(--sd-coral, #DB635D);
  color: #FFF6E8;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  align-self: flex-start;
  margin-top: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sd-playbook-popup__btn:hover {
  background: #DB635D;
  transform: translateX(1px);
}
.sd-playbook-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 246, 232, 0.3);
  background: rgba(255, 246, 232, 0.05);
  color: var(--sd-cream, #FFF6E8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
  font-family: inherit;
}
.sd-playbook-popup__close:hover {
  opacity: 1;
  background: rgba(255, 246, 232, 0.12);
}
@media (max-width: 640px) {
  .sd-playbook-popup { display: none !important; }
}

/* ============================================================
   RETURNING VISITOR MODE (Polish7 — Apr 2026)
   When the sd_visitor cookie is present, the three CTAs (main,
   skinny banner, sticky popup) swap their form/default button
   for a single coral pill that re-sends the current page's
   resource to the remembered email. A toast notification
   confirms the send. JS in sd-playbook-cta.php wires the clicks.
   ============================================================ */
.sd-playbook-cta__returning {
  display: block;
}
.sd-playbook-cta__returning-greeting {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 246, 232, 0.78);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.sd-playbook-cta__returning-greeting strong {
  color: var(--sd-cream, #FFF6E8);
  font-weight: 600;
}
.sd-playbook-cta__returning-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  padding: 14px 26px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #FFF6E8 !important;
  background: #DB635D;
  border: 0 !important;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px -4px rgba(219, 99, 93, 0.6), inset 0 1px 0 rgba(255, 246, 232, 0.2);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.sd-playbook-cta__returning-btn:hover,
.sd-playbook-cta__returning-btn:focus {
  background: #F2847D;
  transform: translateY(-1px);
  color: #FFF6E8 !important;
  text-decoration: none !important;
}
.sd-playbook-cta__returning-fine {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 246, 232, 0.58);
  margin: 14px 0 0;
  max-width: 360px;
}

/* Skinny banner returning-mode button inherits its stroke-suppression
   from the .sd-insight__playbook-banner-btn rules above; no extra rule
   needed. Sticky popup button also reuses its own class. */

/* Click-anywhere toast: "We are sending this to email right now, Nick." */
.sd-send-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 360px;
  background: #11314a; /* var(--sd-navy) hex for stability across docs. */
  color: #FFF6E8;
  padding: 14px 18px;
  border-radius: 12px;
  border-left: 3px solid #DB635D;
  box-shadow: 0 12px 32px -8px rgba(17, 49, 74, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  z-index: 200;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), opacity 400ms cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
}
.sd-send-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.sd-send-toast strong { font-weight: 600; }
@media (max-width: 480px) {
  .sd-send-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

/* Remove the wave divider immediately below the skinny playbook banner.
   The banner sits between the Three Things section and the "When the
   fractional model" section; the divider between banner and next
   section creates a visual seam Nick wants clean. */
.sd-insight__playbook-banner + .sd-insight__divider-slot {
    display: none !important;
}
.sd-insight__playbook-banner + .sd-insight__divider-slot + .sd-insight__section {
    padding-top: clamp(56px, 7vw, 96px) !important;
}

/* Compare-CTO card: children must fill the card symmetrically.
   Without this, p/ul/inline-fig still capped at var(--sd-read) (720px) while
   the card is 900px wide, so text flushes left and the right side has a larger
   gap than the left. */
.sd-insight__section--compare-cto .sd-insight__section-card p,
.sd-insight__section--compare-cto .sd-insight__section-card ul,
.sd-insight__section--compare-cto .sd-insight__section-card ol,
.sd-insight__section--compare-cto .sd-insight__section-card .sd-insight__inline-fig {
    max-width: none !important;
}

/* What-we-ship card: mirror compare-cto's child-fill rule so prose, lists,
   and inline figs fill the 900px card symmetrically. */
.sd-insight__section--what-we-ship .sd-insight__section-card p,
.sd-insight__section--what-we-ship .sd-insight__section-card ul,
.sd-insight__section--what-we-ship .sd-insight__section-card ol,
.sd-insight__section--what-we-ship .sd-insight__section-card .sd-insight__inline-fig {
    max-width: none !important;
}

/* "What productized engineering actually is" (post 4076) -- mirrors the
   what-we-ship treatment for post 3. The definitional centerpiece section
   gets wrapped in a cream card on its cream band so the thesis renders as
   a boxed, high-contrast read. */
.sd-insight__section--productized-def.sd-insight__section--cream .sd-insight__section-card {
  background: var(--sd-cream);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15);
  border: 1px solid rgba(84, 146, 182, 0.15);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--productized-def.sd-insight__section--cream .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

/* Productized-def card: fill children symmetrically, mirrors what-we-ship. */
.sd-insight__section--productized-def .sd-insight__section-card p,
.sd-insight__section--productized-def .sd-insight__section-card ul,
.sd-insight__section--productized-def .sd-insight__section-card ol,
.sd-insight__section--productized-def .sd-insight__section-card .sd-insight__inline-fig {
    max-width: none !important;
}

/* Productized-def on darkblue band (post 4076 landed there by band rotation).
   Render as a lifted card inside the dark band, mirroring the cream treatment
   above but adapted for dark-bg context so the definitional centerpiece still
   reads as a distinct boxed block. */
.sd-insight__section--productized-def.sd-insight__section--darkblue .sd-insight__section-card,
.sd-insight__section--productized-def.sd-insight__section--navy .sd-insight__section-card,
.sd-insight__section--productized-def.sd-insight__section--deep .sd-insight__section-card {
  background: rgba(255, 246, 232, 0.04);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35);
  border: 1px solid rgba(246, 200, 147, 0.22);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--productized-def.sd-insight__section--darkblue .sd-insight__section-card,
  .sd-insight__section--productized-def.sd-insight__section--navy .sd-insight__section-card,
  .sd-insight__section--productized-def.sd-insight__section--deep .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}


/* "The 7 sections every software scope of work needs" (post 4080) -- mirrors
   the productized-def / what-we-ship treatment. The definitional centerpiece
   section gets wrapped in a boxed card on any band fill so the 7-section
   breakdown renders as a distinct, high-contrast read. */
.sd-insight__section--sow-seven-sections.sd-insight__section--cream .sd-insight__section-card,
.sd-insight__section--sow-seven-sections.sd-insight__section--warm .sd-insight__section-card {
  background: var(--sd-cream);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15);
  border: 1px solid rgba(84, 146, 182, 0.15);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--sow-seven-sections.sd-insight__section--cream .sd-insight__section-card,
  .sd-insight__section--sow-seven-sections.sd-insight__section--warm .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

.sd-insight__section--sow-seven-sections .sd-insight__section-card p,
.sd-insight__section--sow-seven-sections .sd-insight__section-card ul,
.sd-insight__section--sow-seven-sections .sd-insight__section-card ol,
.sd-insight__section--sow-seven-sections .sd-insight__section-card .sd-insight__inline-fig {
    max-width: none !important;
}

/* Sow-seven-sections on darkblue/navy band: lifted dark card mirroring productized-def. */
.sd-insight__section--sow-seven-sections.sd-insight__section--darkblue .sd-insight__section-card,
.sd-insight__section--sow-seven-sections.sd-insight__section--navy .sd-insight__section-card,
.sd-insight__section--sow-seven-sections.sd-insight__section--deep .sd-insight__section-card {
  background: rgba(255, 246, 232, 0.04);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35);
  border: 1px solid rgba(246, 200, 147, 0.22);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--sow-seven-sections.sd-insight__section--darkblue .sd-insight__section-card,
  .sd-insight__section--sow-seven-sections.sd-insight__section--navy .sd-insight__section-card,
  .sd-insight__section--sow-seven-sections.sd-insight__section--deep .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}


/* ============================================================
   TOOL-VERDICT-MATRIX boxed section (post 4062 Cursor vs Claude Code)
   Mirrors --productized-def / --sow-seven-sections: the closing
   "what we default to by engagement type" H2 renders inside a
   distinct boxed card on any band fill so the tool-selection
   matrix reads as a standalone reference artifact.
   ============================================================ */
.sd-insight__section--tool-verdict-matrix.sd-insight__section--cream .sd-insight__section-card,
.sd-insight__section--tool-verdict-matrix.sd-insight__section--warm .sd-insight__section-card {
  background: var(--sd-cream);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15);
  border: 1px solid rgba(84, 146, 182, 0.15);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--tool-verdict-matrix.sd-insight__section--cream .sd-insight__section-card,
  .sd-insight__section--tool-verdict-matrix.sd-insight__section--warm .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

.sd-insight__section--tool-verdict-matrix .sd-insight__section-card p,
.sd-insight__section--tool-verdict-matrix .sd-insight__section-card ul,
.sd-insight__section--tool-verdict-matrix .sd-insight__section-card ol,
.sd-insight__section--tool-verdict-matrix .sd-insight__section-card table,
.sd-insight__section--tool-verdict-matrix .sd-insight__section-card .sd-insight__inline-fig {
    max-width: none !important;
}

.sd-insight__section--tool-verdict-matrix.sd-insight__section--darkblue .sd-insight__section-card,
.sd-insight__section--tool-verdict-matrix.sd-insight__section--navy .sd-insight__section-card,
.sd-insight__section--tool-verdict-matrix.sd-insight__section--deep .sd-insight__section-card {
  background: rgba(255, 246, 232, 0.04);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px);
  box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35);
  border: 1px solid rgba(246, 200, 147, 0.22);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sd-insight__section--tool-verdict-matrix.sd-insight__section--darkblue .sd-insight__section-card,
  .sd-insight__section--tool-verdict-matrix.sd-insight__section--navy .sd-insight__section-card,
  .sd-insight__section--tool-verdict-matrix.sd-insight__section--deep .sd-insight__section-card {
    border-radius: 14px;
    padding: 28px 24px;
  }
}

/* ============================================================
   RED-FLAGS field guide (Apr 24 2026, post 4080 Scope of Work)
   Fullbleed darkblue band. 2-up grid on wide, 1-up on phone.
   Each card: coral pennant SVG icon (36px) + cream label + muted body.
   Styling cadence mirrors .sd-insight__features + .sd-insight__notfor.
   ============================================================ */
.sd-insight__red-flags {
  max-width: var(--sd-maxw);
  margin: 0 auto;
}
.sd-insight__red-flags-head { margin-bottom: 36px; }
.sd-insight__red-flags-head .sd-insight__eyebrow--sand { color: var(--sd-sand); margin-bottom: 14px; }
.sd-insight__red-flags-head .sd-insight__eyebrow-dot--sand { background: var(--sd-sand); }
.sd-insight__red-flags-title {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sd-cream);
  max-width: 820px;
  margin: 0;
}
.sd-insight__red-flags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 820px) {
  .sd-insight__red-flags-grid { grid-template-columns: 1fr; }
}
.sd-insight__red-flag {
  /* Dark translucent field-guide card. Hairline coral top border evokes
     a warning placard. Padding symmetric per the Polish7 28px rule. */
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  background: rgba(13, 31, 46, 0.45);
  border: 1px solid rgba(246, 200, 147, 0.18);
  border-top: 2px solid rgba(219, 99, 93, 0.85);
  border-radius: 12px;
  padding: 24px 26px;
  transition: transform .25s var(--sd-ease), border-color .25s var(--sd-ease), box-shadow .25s var(--sd-ease);
}
.sd-insight__red-flag:hover {
  transform: translateY(-2px);
  border-color: rgba(246, 200, 147, 0.32);
  border-top-color: rgba(219, 99, 93, 1);
  box-shadow: 0 18px 40px -20px rgba(219, 99, 93, 0.45);
}
.sd-insight__red-flag-icon {
  display: grid;
  place-items: start center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.sd-insight__red-flag-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(219, 99, 93, 0.35));
}
.sd-insight__red-flag-content { min-width: 0; }
.sd-insight__red-flag-label {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sd-cream);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.sd-insight__red-flag-body {
  color: rgba(255, 246, 232, 0.78);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Inline variant (Apr 24 2026 revert) ----
   Used when [red-flags] sits inside another section rather than its
   own fullbleed band. Firms up card bg so cream text stays legible
   against surrounding cream prose; adds breathing room above/below. */
.sd-insight__red-flags--inline {
  margin: 32px 0 8px;
}
.sd-insight__red-flags--inline .sd-insight__red-flag {
  background: rgba(13, 31, 46, 0.92);
  border: 1px solid rgba(13, 31, 46, 0.92);
  border-top: 2px solid rgba(219, 99, 93, 0.95);
  box-shadow: 0 10px 26px -18px rgba(13, 31, 46, 0.45);
}
.sd-insight__red-flags--inline .sd-insight__red-flag:hover {
  background: rgba(13, 31, 46, 0.98);
  border-color: rgba(13, 31, 46, 0.98);
  border-top-color: rgba(219, 99, 93, 1);
}


/* Inline callout — smaller centered figure, cream bg, no hover, no lightbox cursor.
   Used for composite-cell drop-ins within prose. */
.sd-insight-figure.sd-insight-figure--inline-callout {
    margin: 20px auto !important;
    max-width: 420px !important;
    background: var(--sd-cream);
    padding: 0;
    border: 0;
    box-shadow: none;
}
.sd-insight-figure.sd-insight-figure--inline-callout img {
    width: 100%;
    height: auto;
    display: block;
    cursor: default;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.sd-insight-figure.sd-insight-figure--inline-callout img:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Float callouts — wrap prose around a smaller figure. Used for composite cells
   that act as inline visual callouts rather than centered figures. */
.sd-insight-callout-float {
    max-width: 180px;
    margin: 8px 0 16px 0;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 20px;
    overflow: hidden;
}
.sd-insight-callout-float img {
    width: 100%; height: auto; display: block; cursor: default;
    border-radius: 20px; overflow: hidden;
    transition: none !important; transform: none !important; box-shadow: none !important;
}
.sd-insight-callout-float img:hover { transform: none !important; box-shadow: none !important; filter: none !important; }
.sd-insight-callout-float--right { float: right; margin-left: 22px; clear: right; }
.sd-insight-callout-float--left { float: left; margin-right: 22px; clear: left; }
@media (max-width: 768px) {
    .sd-insight-callout-float { float: none !important; max-width: 100%; margin: 16px auto !important; }
}

/* ============================================================
   SHARE MODULE (Apr 25 2026)
   Horizontal row between hero and article. 4 icon-buttons
   (42px circles), cream bg + navy icon + navy hairline border,
   hover coral fill with cream icon. Editorial, not AddThis.
   ============================================================ */
.sd-insight__share {
  max-width: var(--sd-maxw);
  margin: 28px auto 8px;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.sd-insight__share-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-navy);
  opacity: 0.72;
}
.sd-insight__share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sd-insight__share-list > li {
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;
}
.sd-insight__share-list > li::before,
.sd-insight__share-list > li::marker {
  content: none;
  display: none;
}
.sd-insight__share-btn {
  --sd-share-size: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sd-share-size);
  height: var(--sd-share-size);
  border-radius: 50%;
  background: var(--sd-cream);
  border: 1px solid var(--sd-navy);
  color: var(--sd-navy);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 300ms var(--sd-ease), color 300ms var(--sd-ease),
              border-color 300ms var(--sd-ease), transform 300ms var(--sd-ease),
              box-shadow 300ms var(--sd-ease);
  box-shadow: 0 1px 2px rgba(13,31,46,0.06);
}
.sd-insight__share-btn:hover,
.sd-insight__share-btn:focus-visible {
  background: var(--sd-coral);
  color: var(--sd-cream);
  border-color: var(--sd-coral);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(219,99,93,0.55);
  outline: none;
}
.sd-insight__share-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(219,99,93,0.32);
}
.sd-insight__share-btn svg {
  display: block;
  flex: none;
  pointer-events: none;
}
/* Copy-link button: default vs. copied states */
.sd-insight__share-btn--copy .sd-insight__share-icon-check,
.sd-insight__share-btn--copy .sd-insight__share-copied {
  display: none;
}
.sd-insight__share-btn--copy.is-copied {
  background: var(--sd-navy);
  color: var(--sd-cream);
  border-color: var(--sd-navy);
}
.sd-insight__share-btn--copy.is-copied .sd-insight__share-icon-default {
  display: none;
}
.sd-insight__share-btn--copy.is-copied .sd-insight__share-icon-check {
  display: block;
}
.sd-insight__share-btn--copy .sd-insight__share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--sd-navy);
  color: var(--sd-cream);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--sd-ease), transform 200ms var(--sd-ease);
}
.sd-insight__share-btn--copy.is-copied .sd-insight__share-copied {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 560px) {
  .sd-insight__share {
    gap: 12px;
    margin-top: 20px;
  }
  .sd-insight__share-btn { --sd-share-size: 38px; }
  .sd-insight__share-btn svg { width: 16px; height: 16px; }
}

/* ============================================================
   SHARE BAND (moved Apr 24 2026, Pixel agent)
   Share module now lives INSIDE the article on the cream band,
   above the TLDR, so the hero cream waves render unobstructed.
   The .sd-insight__section-inner wrapper already provides the
   article max-width and horizontal padding, so we zero out the
   module's own max-width/padding and retune margins for the
   cream-body context.
   ============================================================ */
.sd-insight__section--share-band {
  padding-top: clamp(14px, 2vw, 22px);
  padding-bottom: 0;
  /* SHAREZ (Apr 25 2026): hoist share-band above the wave-divider that
     sits before this group. The divider-slot has z-index: 3 and its SVG
     has overflow: visible with paths that extend BELOW the slot baseline
     (~30 percent past the SVG viewBox bottom), so the cream wave
     silhouette spills DOWN into the share-band area and visually
     obscures the share buttons. Lifting the share-band content to a
     stacking context with z-index: 4 paints the buttons above the wave.
     pointer-events on divider-slot are already none, so clicks were
     fine, only paint order was wrong. */
  position: relative;
  z-index: 4;
}
.sd-insight__section--share-band .sd-insight__section-inner {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 4;
}
.sd-insight__section--share-band .sd-insight__share {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 4;
}
@media (max-width: 560px) {
  .sd-insight__section--share-band {
    padding-top: 14px;
  }
  .sd-insight__section--share-band .sd-insight__share {
    gap: 12px;
  }
}

/* =================================================================
   REDFLAGBG (Apr 24 2026): Post 4080 Red Flags section background.
   Cell-12 (red-flag-warning illustration) was a float-wrapped figure
   in the prose. Moved to a ::before overlay on the section at 20%
   opacity so the warning atmosphere carries through the whole band
   without displacing the prose. Section is navy fill, so the image
   reads as a ghost over the dark background.
   Scope: .sd-insight__section--red-flags only. Template maps the
   slug red-flags-in-a-clients-own-paperwork to this modifier.
   ================================================================= */
.sd-insight__section--red-flags {
  position: relative;
  overflow: hidden;
}
.sd-insight__section--red-flags::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://scubadev.com/data/uploads/sites/4/2026/04/cell-12-red-flag-warning.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
}
.sd-insight__section--red-flags > .sd-insight__section-inner {
  position: relative;
  z-index: 1;
}

/* ============================================================
   AGENT LIST + MODAL (post 4624 -- 15 AI Agents)
   Compact clickable agent list with native <dialog> modal
   for full agent details. Brand palette: cream paper bg,
   navy heading, coral accent.
   Apr 25 2026.
   ============================================================ */

/* Neutralize the mu-plugin's auto .sd-insight__steps wrapper when
   it contains our agent list. The framework auto-wraps every <ol>
   in a navy gradient steps card; we need a flat cream layout here. */
.sd-insight__steps:has(.sd-agent-list) {
  background: transparent;
  color: var(--sd-navy-deep);
  padding: 0;
  margin: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 48px);
  box-shadow: none;
  border-radius: 0;
}
.sd-insight__steps:has(.sd-agent-list)::before {
  display: none;
}

/* ----- Compact agent list ----- */
.sd-agent-list,
ol.sd-agent-list.sd-insight__steps-ol {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  position: static;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

.sd-agent-list::before,
ol.sd-agent-list.sd-insight__steps-ol::before {
  display: none !important;
  content: none !important;
}

.sd-agent-list > li,
ol.sd-agent-list.sd-insight__steps-ol > li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
}
.sd-agent-list > li::before,
ol.sd-agent-list.sd-insight__steps-ol > li::before,
.sd-agent-list > li::after,
ol.sd-agent-list.sd-insight__steps-ol > li::after {
  display: none !important;
  content: none !important;
  background: none !important;
  -webkit-text-fill-color: initial;
}

@media (max-width: 720px) {
  .sd-agent-list,
  ol.sd-agent-list.sd-insight__steps-ol { grid-template-columns: 1fr; }
}

.sd-agent-list__group-row {
  grid-column: 1 / -1;
  margin: 14px 0 4px;
  padding: 0;
}
.sd-agent-list__group-row:first-child { margin-top: 0; }
.sd-agent-list__group-label {
  display: inline-block;
  font-family: 'Source Code Pro', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-cream);
  padding: 6px 12px;
  background: rgba(255, 246, 232, 0.10);
  border-radius: 999px;
  border: 1px solid rgba(255, 246, 232, 0.28);
}
/* When agent list lands on a light cream/warm band, flip group label colors. */
.sd-insight__section--cream .sd-agent-list__group-label,
.sd-insight__section--warm  .sd-agent-list__group-label {
  color: var(--sd-navy-2);
  background: rgba(84, 146, 182, 0.10);
  border-color: rgba(84, 146, 182, 0.22);
}

.sd-agent-list__row {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-agent-list__item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--sd-cream);
  border: 1px solid var(--sd-border-soft);
  border-radius: 12px;
  color: var(--sd-navy-deep);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 180ms var(--sd-ease), border-color 180ms var(--sd-ease), transform 180ms var(--sd-ease), box-shadow 180ms var(--sd-ease);
  box-shadow: 0 1px 2px rgba(13,31,46,0.04);
}

.sd-agent-list__item:hover,
.sd-agent-list__item:focus-visible {
  background: #FFF6E8;
  border-color: var(--sd-coral);
  color: var(--sd-coral);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -10px rgba(219,99,93,0.55), 0 1px 2px rgba(13,31,46,0.06);
  outline: none;
}

.sd-agent-list__item:focus-visible {
  outline: 2px solid var(--sd-coral);
  outline-offset: 2px;
}

.sd-agent-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sd-navy);
  color: var(--sd-cream);
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 180ms var(--sd-ease);
}

.sd-agent-list__item:hover .sd-agent-list__num,
.sd-agent-list__item:focus-visible .sd-agent-list__num {
  background: var(--sd-coral);
}

.sd-agent-list__name {
  flex: 1 1 auto;
  min-width: 0;
}

.sd-agent-list__ship {
  flex: none;
  font-family: 'Source Code Pro', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-coral);
  padding: 3px 8px;
  background: rgba(219,99,93,0.10);
  border: 1px solid rgba(219,99,93,0.30);
  border-radius: 999px;
  white-space: nowrap;
}

.sd-agent-list__chev {
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--sd-navy);
  opacity: 0.45;
  transition: transform 180ms var(--sd-ease), opacity 180ms var(--sd-ease), color 180ms var(--sd-ease);
}

.sd-agent-list__item:hover .sd-agent-list__chev,
.sd-agent-list__item:focus-visible .sd-agent-list__chev {
  transform: translateX(3px);
  opacity: 1;
  color: var(--sd-coral);
}

/* ----- Native <dialog> modal ----- */
.sd-agent-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 20px;
  background: var(--sd-cream);
  color: var(--sd-navy-deep);
  box-shadow: 0 40px 80px -30px rgba(13,31,46,0.55), 0 4px 12px -4px rgba(13,31,46,0.18);
  overflow: hidden;
}

.sd-agent-modal::backdrop {
  background: rgba(13, 31, 46, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sd-agent-modal[open] {
  animation: sd-agent-modal-in 200ms var(--sd-ease);
}

@keyframes sd-agent-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sd-agent-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sd-border);
  background: rgba(255, 246, 232, 0.85);
  color: var(--sd-navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms var(--sd-ease), color 160ms var(--sd-ease), transform 160ms var(--sd-ease);
}
.sd-agent-modal__close:hover,
.sd-agent-modal__close:focus-visible {
  background: var(--sd-coral);
  color: var(--sd-cream);
  border-color: var(--sd-coral);
  outline: none;
  transform: scale(1.05);
}

.sd-agent-modal__inner {
  padding: clamp(28px, 3.4vw, 40px);
  overflow-y: auto;
  max-height: calc(100vh - 48px);
  color: var(--sd-navy-deep);
}

/* Make sure dark-band rules from the parent section don't bleed
   into the modal content (the dialog renders in the top layer but
   inherits some descendant selectors at parse time). */
.sd-agent-modal,
.sd-agent-modal * { color: inherit; }
.sd-agent-modal .sd-agent-modal__inner h1,
.sd-agent-modal .sd-agent-modal__inner h2,
.sd-agent-modal .sd-agent-modal__inner h3,
.sd-agent-modal .sd-agent-modal__inner h4,
.sd-agent-modal .sd-agent-modal__inner h5 {
  color: var(--sd-navy-deep);
}
.sd-agent-modal .sd-agent-modal__inner p,
.sd-agent-modal .sd-agent-modal__inner li,
.sd-agent-modal .sd-agent-modal__inner dd,
.sd-agent-modal .sd-agent-modal__inner dt {
  color: var(--sd-navy-deep);
}
.sd-agent-modal .sd-agent-modal__inner a {
  color: var(--sd-coral);
}
.sd-agent-modal .sd-insight__pullquote p {
  color: var(--sd-navy-deep) !important;
}

.sd-agent-modal__eyebrow {
  display: inline-block;
  font-family: 'Source Code Pro', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-coral);
  margin: 0 0 10px;
}

.sd-agent-modal h3.sd-agent-modal__title,
.sd-agent-modal .sd-agent-modal__title {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--sd-navy-deep);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: -0.01em;
}

.sd-agent-modal .sd-agent-modal__summary {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--sd-navy-2);
  margin: 0 0 18px;
  font-weight: 500;
}

.sd-agent-modal__figure {
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #11314a;
}
.sd-agent-modal__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}

.sd-agent-modal__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--sd-navy-deep);
}
.sd-agent-modal__body p { margin: 0 0 12px; }
.sd-agent-modal__body p:last-child { margin-bottom: 0; }

.sd-agent-modal__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px;
  background: rgba(84,146,182,0.08);
  border: 1px solid rgba(84,146,182,0.18);
  border-radius: 12px;
}
@media (max-width: 520px) {
  .sd-agent-modal__meta { grid-template-columns: 1fr; }
}
.sd-agent-modal__meta-row {
  margin: 0;
}
.sd-agent-modal__meta dt {
  display: block;
  font-family: 'Source Code Pro', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-navy-2);
  margin: 0 0 4px;
  opacity: 0.78;
}
.sd-agent-modal__meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sd-navy-deep);
  line-height: 1.35;
}
.sd-agent-modal__shipfirst.is-yes dd {
  color: var(--sd-coral);
  font-weight: 600;
}

.sd-agent-modal .sd-insight__pullquote {
  margin: 22px 0 0;
}

.sd-agent-modal__cta {
  margin: 22px 0 0;
  text-align: right;
  font-size: 14px;
}
.sd-agent-modal__cta a {
  color: var(--sd-coral);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.sd-agent-modal__cta a:hover {
  color: var(--sd-navy-2);
}

@media (max-width: 600px) {
  .sd-agent-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }
  .sd-agent-modal__inner {
    padding: 24px 20px;
    max-height: calc(100vh - 24px);
  }
}
/* END AGENT LIST + MODAL */


/* Lock background scroll while a modal is open. */
html.sd-modal-open, html.sd-modal-open body { overflow: hidden; }

/* ============================================================
   GROUP BANNER VARIANT (Apr 25 2026)
   Full-bleed section with banner image as background, navy
   overlay for legibility, and cream waves on TOP and BOTTOM
   so the banner integrates with the cream/warm band rhythm.
   Used in post 4624 to break the 15-agent list into 3 groups
   (customer support, ops, sales). Each banner gets its own
   bg image via inline style on the section element.
   ============================================================ */
.sd-insight__section--group-banner {
  position: relative;
  isolation: isolate;
  background-color: var(--sd-navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: clamp(110px, 13vw, 180px) 0;
  overflow: hidden;
}

/* Navy gradient overlay for cream-text legibility on the bright banner image. */
.sd-insight__section--group-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 31, 46, 0.55) 0%,
    rgba(17, 49, 74, 0.42) 50%,
    rgba(13, 31, 46, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Top wave: drips DOWN from the prior cream/warm band onto the banner.
   Same 5-path mountain-wave SVG as .sd-insight__divider, embedded as a
   data URL mask so the wave silhouette is filled with cream and rides
   the section's top edge. The mask reuses the verbatim path shapes from
   sd-startup-designed.js L17-23 (port mirrored from PHP $wave_svg). */
.sd-insight__section--group-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(70px, 10vw, 150px);
  background: var(--sd-cream);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  /* Top wave needs to be flipped so the silhouette drips DOWN from the
     prior light band onto this banner. Same SVG, scaleY(-1). */
  transform: scaleY(-1);
  z-index: 2;
  pointer-events: none;
}

/* Bottom wave element. Pseudo-elements only give us 2 (::before/::after),
   so the bottom wave rides on a real markup element emitted by the
   template (.sd-insight__group-banner-wave-bottom). Cream wave rising
   UP into the next cream/warm band. */
.sd-insight__group-banner-wave-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(70px, 10vw, 150px);
  background: var(--sd-cream);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
  z-index: 2;
  pointer-events: none;
}

.sd-insight__section--group-banner > .sd-insight__section-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 980px;
  padding: 0 24px;
  margin: 0 auto;
}

.sd-insight__section--group-banner .sd-insight__group-eyebrow,
p.sd-insight__group-eyebrow {
  display: inline-block;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sd-cream);
  background: rgba(255, 246, 232, 0.14);
  border: 1px solid rgba(255, 246, 232, 0.34);
  border-radius: 999px;
  padding: 7px 14px;
  margin: 0 0 18px;
  max-width: none;
  font-size: 12px;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(13, 31, 46, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sd-insight__section--group-banner .sd-insight__group-title,
h2.sd-insight__group-title {
  font-family: "DM Sans", -apple-system, system-ui, sans-serif;
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--sd-cream);
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(13, 31, 46, 0.65), 0 0 32px rgba(13, 31, 46, 0.35);
}

.sd-insight__section--group-banner .sd-insight__group-sub,
p.sd-insight__group-sub {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: rgba(255, 246, 232, 0.92);
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 1px 8px rgba(13, 31, 46, 0.55);
}

@media (max-width: 720px) {
  .sd-insight__section--group-banner {
    padding: clamp(90px, 18vw, 130px) 0;
    background-position: center;
  }
  .sd-insight__group-title {
    font-size: clamp(30px, 8vw, 42px);
  }
}

/* When a group-banner is followed/preceded by another section, the
   adjacent section's clamp(110px,11vw,170px) padding-top from the
   .sd-insight__divider-slot adjacency rule does NOT apply (since the
   banner provides its own waves via pseudos and a real markup element,
   not a divider-slot). The banner's own padding handles vertical rhythm. */
.sd-insight__section--group-banner + .sd-insight__section { padding-top: clamp(56px, 7vw, 96px); }

/* ============================================================
   POST 6 HYBRID FIX (Apr 25 2026)
   - Inline agent cards under each group banner
   - Iframe-based shared modal triggered by "View full idea"
   - Friendly composite as bg for "What they all have in common"
   - Wave restoration after the playbook banner when followed
     by a fill change (cream -> darkblue, etc.)
   ============================================================ */

/* ----- Inline agent cards (replace compact list) ----- */
.sd-agent-inline-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(28px, 3vw, 44px) auto 0;
  max-width: 820px;
  padding: 0 clamp(8px, 2vw, 16px);
}

.sd-agent-inline {
  position: relative;
  background: var(--sd-cream);
  border: 1px solid var(--sd-border-soft, rgba(17, 49, 74, 0.10));
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px);
  color: var(--sd-navy-deep);
  box-shadow: 0 1px 2px rgba(13, 31, 46, 0.04), 0 12px 28px -22px rgba(13, 31, 46, 0.18);
  transition: border-color 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)),
              box-shadow 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)),
              transform 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1));
}

.sd-agent-inline:hover {
  border-color: rgba(219, 99, 93, 0.30);
  box-shadow: 0 1px 2px rgba(13, 31, 46, 0.04), 0 18px 36px -20px rgba(219, 99, 93, 0.20);
  transform: translateY(-1px);
}

.sd-insight__section--cream .sd-agent-inline,
.sd-insight__section--warm  .sd-agent-inline {
  background: #FFF6E8;
}

.sd-insight__section--darkblue .sd-agent-inline,
.sd-insight__section--navy     .sd-agent-inline,
.sd-insight__section--deep     .sd-agent-inline {
  background: var(--sd-cream);
  border-color: rgba(255, 246, 232, 0.14);
}

.sd-agent-inline__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.sd-agent-inline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sd-navy);
  color: var(--sd-cream);
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex: none;
}

.sd-agent-inline__shipbadge {
  display: inline-block;
  font-family: 'Source Code Pro', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-coral);
  padding: 4px 10px;
  background: rgba(219, 99, 93, 0.10);
  border: 1px solid rgba(219, 99, 93, 0.30);
  border-radius: 999px;
  white-space: nowrap;
}

.sd-agent-inline__title {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--sd-navy-deep);
  margin: 6px 0 10px;
  letter-spacing: -0.01em;
}

.sd-agent-inline__summary {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.55;
  color: var(--sd-navy-2, #5492B6);
  margin: 0 0 16px;
  font-weight: 500;
}
.sd-agent-inline__summary em,
.sd-insight__section-card .sd-agent-inline .sd-agent-inline__summary em,
.sd-insight__section-inner .sd-agent-inline .sd-agent-inline__summary em,
.sd-insight__section-card .sd-agent-inline em,
.sd-insight__section-inner .sd-agent-inline em {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--sd-navy-deep) !important;
}

.sd-agent-inline__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sd-navy-deep);
}
.sd-agent-inline__body p { margin: 0 0 12px; }
.sd-agent-inline__body p:last-child { margin-bottom: 0; }
.sd-agent-inline__body strong { color: var(--sd-navy-deep); font-weight: 700; }

.sd-agent-inline__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: rgba(84, 146, 182, 0.08);
  border: 1px solid rgba(84, 146, 182, 0.16);
  border-radius: 10px;
}

.sd-agent-inline__meta-row { margin: 0; }

.sd-agent-inline__meta dt {
  display: block;
  font-family: 'Source Code Pro', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sd-navy-2);
  margin: 0 0 4px;
  opacity: 0.78;
}

.sd-agent-inline__meta dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sd-navy-deep);
  line-height: 1.35;
}

.sd-agent-inline__cta {
  margin: 18px 0 0;
  text-align: right;
}

.sd-agent-inline__readfull {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 0 4px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-coral);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  letter-spacing: 0.01em;
  transition: color 160ms var(--sd-ease, ease), letter-spacing 200ms var(--sd-ease, ease);
}
.sd-agent-inline__readfull:hover,
.sd-agent-inline__readfull:focus-visible {
  color: var(--sd-navy-2);
  outline: none;
  letter-spacing: 0.025em;
}
.sd-agent-inline__readfull:focus-visible {
  outline: 2px solid var(--sd-coral);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

@media (max-width: 600px) {
  .sd-agent-inline { padding: 22px 18px; border-radius: 14px; }
  .sd-agent-inline__title { font-size: 22px; }
  .sd-agent-inline__meta { grid-template-columns: 1fr; padding: 12px 14px; }
}

/* ----- Iframe modal (shared, post 4624) ----- */
.sd-agent-modal--iframe {
  width: min(1100px, calc(100vw - 32px));
  max-width: 1100px;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  background: var(--sd-cream);
  border-radius: 18px;
  overflow: hidden;
  border: none;
}

.sd-agent-modal__iframe-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--sd-cream);
}

.sd-agent-modal__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sd-cream);
}

.sd-agent-modal--iframe .sd-agent-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sd-border, rgba(17, 49, 74, 0.14));
  background: rgba(255, 246, 232, 0.95);
  color: var(--sd-navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -8px rgba(13, 31, 46, 0.35);
  transition: background 160ms var(--sd-ease, ease), color 160ms var(--sd-ease, ease), transform 160ms var(--sd-ease, ease);
}
.sd-agent-modal--iframe .sd-agent-modal__close:hover,
.sd-agent-modal--iframe .sd-agent-modal__close:focus-visible {
  background: var(--sd-coral);
  color: var(--sd-cream);
  border-color: var(--sd-coral);
  outline: none;
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .sd-agent-modal--iframe {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 12px;
  }
}

.sd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ----- "What they all have in common" section bg image ----- */
.sd-insight__section--common-patterns {
  position: relative;
  overflow: hidden;
}
.sd-insight__section--common-patterns::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://scubadev.com/data/uploads/sites/4/2026/02/06-featured-friendly.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.sd-insight__section--common-patterns > .sd-insight__section-inner {
  position: relative;
  z-index: 1;
}
.sd-insight__section--common-patterns .sd-insight__section-card {
  position: relative;
  z-index: 1;
}

/* ----- Wave restoration: only hide divider after playbook banner
     when the divider is heading into the SAME fill (cream-to-cream).
     For fill changes (e.g. cream-to-darkblue on post 6), the wave
     should remain visible so the transition is not a flat hard edge. */
.sd-insight__playbook-banner + .sd-insight__divider-slot {
  display: block !important;
}
.sd-insight__playbook-banner + .sd-insight__divider-slot:has(.sd-insight__divider--cream),
.sd-insight__playbook-banner + .sd-insight__divider-slot:has(.sd-insight__divider--warm) {
  display: none !important;
}
.sd-insight__playbook-banner + .sd-insight__divider-slot + .sd-insight__section {
  padding-top: clamp(56px, 7vw, 96px) !important;
}
/* When the wave is showing (fill change), the next section needs more
   top padding so the wave silhouette has clearance. */
.sd-insight__playbook-banner
  + .sd-insight__divider-slot:not(:has(.sd-insight__divider--cream)):not(:has(.sd-insight__divider--warm))
  + .sd-insight__section {
  padding-top: clamp(110px, 11vw, 170px) !important;
}

/* END POST 6 HYBRID FIX */

/* ----- Inline agent card hero image (post 4624 inject) ----- */
.sd-agent-inline__image {
  margin: 4px 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(13, 31, 46, 0.04);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(13, 31, 46, 0.08);
}
.sd-agent-inline__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--sd-ease, cubic-bezier(.2,.7,.2,1));
}
.sd-agent-inline:hover .sd-agent-inline__image img {
  transform: scale(1.015);
}
@media (max-width: 600px) {
  .sd-agent-inline__image { margin: 2px 0 14px; border-radius: 10px; }
}

/* ==== Iframe modal: hide outer close button when iframe lightbox is open.
   The embedded idea page (single-idea.php) postMessages 'open'/'close' on
   lightbox state; insights JS toggles .sd-agent-modal--lightbox-active.
   Without this, the outer close button (top:14px right:14px, z-index:5) sits
   on top of the iframe content and intercepts clicks meant for the lightbox
   close button -- closing the entire modal instead of just the lightbox. */
.sd-agent-modal--iframe.sd-agent-modal--lightbox-active .sd-agent-modal__close {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms var(--sd-ease, ease);
}

/* ============================================================
   POST 4624 FIX (Apr 25 2026) — 15 AI Agents
   1) View full idea button: brand-aligned coral pill (matches
      .btn-coral canonical from sd-dashboard-designed.css)
   2) Group B agent cards: force navy text inside navy parent
   3) Group B bottom wave: fill navy when next section is navy
   4) Group C top wave: fill navy when prior section is navy
   ============================================================ */

/* ----- 1) Brand pill button for "View full idea" ----- */
.sd-agent-inline__cta {
  margin: 22px 0 0;
  text-align: right;
}

.sd-agent-inline__readfull,
.sd-insight__section--cream .sd-agent-inline__readfull,
.sd-insight__section--warm  .sd-agent-inline__readfull,
.sd-insight__section--navy  .sd-agent-inline__readfull,
.sd-insight__section--darkblue .sd-agent-inline__readfull,
.sd-insight__section--deep .sd-agent-inline__readfull {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--sd-coral);
  color: var(--sd-cream);
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 30px -6px rgba(219, 99, 93, 0.45);
  transition: transform 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)),
              background 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1));
}

.sd-agent-inline__readfull::after {
  content: "\2192";
  font-size: 16px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1));
}

.sd-agent-inline__readfull::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(219, 99, 93, 0.35), transparent 70%);
  filter: blur(12px);
  z-index: -1;
  opacity: 0.55;
  transition: opacity 300ms var(--sd-ease, cubic-bezier(.2,.8,.2,1));
  pointer-events: none;
}

.sd-agent-inline__readfull:hover,
.sd-agent-inline__readfull:focus-visible {
  background: #DB635D;
  color: var(--sd-cream);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px -8px rgba(219, 99, 93, 0.55);
  letter-spacing: -0.005em;
  border-bottom-color: transparent;
  outline: none;
}
.sd-agent-inline__readfull:hover::after,
.sd-agent-inline__readfull:focus-visible::after {
  transform: translateX(3px);
}
.sd-agent-inline__readfull:hover::before,
.sd-agent-inline__readfull:focus-visible::before {
  opacity: 1;
}

.sd-agent-inline__readfull:focus-visible {
  outline: 2px solid var(--sd-cream);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .sd-agent-inline__readfull { padding: 12px 22px; font-size: 14px; }
}

/* ----- 2) Group B agent cards: dark text inside navy parent -----
   The .sd-insight__section--navy parent sets color: var(--sd-cream)
   which inherits down to all card descendants. Cards have cream bg
   so text becomes invisible. Force navy text on every text-bearing
   element inside agent cards regardless of parent section color. */
.sd-insight__section--darkblue .sd-agent-inline,
.sd-insight__section--navy .sd-agent-inline,
.sd-insight__section--deep .sd-agent-inline {
  color: var(--sd-navy-deep);
}
.sd-insight__section--darkblue .sd-agent-inline *,
.sd-insight__section--navy .sd-agent-inline *,
.sd-insight__section--deep .sd-agent-inline * {
  color: inherit;
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__title,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__title,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__title,
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body,
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body strong,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body strong,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body strong,
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body p,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body p,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body p,
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__meta dd,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__meta dd,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__meta dd {
  color: var(--sd-navy-deep);
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__summary,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__summary,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__summary {
  color: var(--sd-navy-2, #5492B6);
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__meta dt,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__meta dt,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__meta dt {
  color: var(--sd-navy-2, #5492B6);
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__num,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__num,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__num {
  color: var(--sd-cream);
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__shipbadge,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__shipbadge,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__shipbadge {
  color: var(--sd-coral);
}
.sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__readfull,
.sd-insight__section--navy .sd-agent-inline .sd-agent-inline__readfull,
.sd-insight__section--deep .sd-agent-inline .sd-agent-inline__readfull {
  color: var(--sd-cream);
}

/* Restore the cream border edge on dark-parent cards (already cream bg). */
.sd-insight__section--darkblue .sd-agent-inline,
.sd-insight__section--navy .sd-agent-inline,
.sd-insight__section--deep .sd-agent-inline {
  background: var(--sd-cream);
  border-color: rgba(17, 49, 74, 0.10);
}

/* ----- 3) Group B bottom wave: navy when next section is navy ----- */
/* Group B (cream banner) flows into a --navy section. Bottom wave fill
   must equal the destination color (navy) so the seam reads continuous. */
.sd-insight__section--group-banner:has(+ .sd-insight__section--navy)
  .sd-insight__group-banner-wave-bottom,
.sd-insight__section--group-banner:has(+ .sd-insight__section--darkblue)
  .sd-insight__group-banner-wave-bottom,
.sd-insight__section--group-banner:has(+ .sd-insight__section--deep)
  .sd-insight__group-banner-wave-bottom {
  background: var(--sd-navy);
}

/* ----- 4) Group C top wave: navy when prior section is navy ----- */
/* Group C banner is preceded by a --navy section (Group B agents).
   Top wave drips DOWN from the prior dark band onto the banner; fill
   must equal the source color (navy) to keep the seam continuous. */
.sd-insight__section--navy + .sd-insight__section--group-banner::after,
.sd-insight__section--darkblue + .sd-insight__section--group-banner::after,
.sd-insight__section--deep + .sd-insight__section--group-banner::after {
  background: var(--sd-navy);
}

/* Themed solution-cell callouts (Apr 26 2026)
   Wider than stat callouts (180px) - used for richer thematic illustrations
   like fractional CTO solution cells. ~38% column width on desktop. */
.sd-insight-callout-float.sd-insight-callout-float--themed {
    max-width: 280px;
    border-radius: 12px;
    border: 1px solid rgba(15, 38, 60, 0.08);
    box-shadow: 0 6px 20px -8px rgba(15, 38, 60, 0.12);
    background: var(--sd-cream);
}
.sd-insight-callout-float.sd-insight-callout-float--themed img {
    border-radius: 12px;
}
.sd-insight-callout-float.sd-insight-callout-float--themed figcaption {
    font-family: var(--sd-mono);
    font-style: italic;
    font-size: 11px;
    color: var(--sd-navy);
    text-align: center;
    padding: 6px 10px 10px;
    line-height: 1.35;
}
@media (max-width: 768px) {
    .sd-insight-callout-float.sd-insight-callout-float--themed { max-width: 100%; }
}

/* =================================================================
   CHANGES 1, 3, 4 (Apr 25 2026) -- SECTION GROUP WRAPPERS
   .sd-insight__group is a parent wrapper around 2+ adjacent sections
   that share a common visual zone (gradient bg, dropshadows that span
   the whole zone, etc). Children sections paint transparent and the
   gradient lives on the group.
   ================================================================= */
.sd-insight__group {
    position: relative;
}

/* CHANGE 1: Hero zone group -- share-band, tldr-band, intro section.
   Vertical gradient cream -> warm-cream. Reads as a continuous warm
   reading zone from below the hero through the end of the intro. */
.sd-insight__group--cream-tan {
    background: linear-gradient(
        to bottom,
        var(--sd-cream) 0%,
        var(--sd-warm) 100%
    );
}
.sd-insight__group--cream-tan > .sd-insight__section {
    background: transparent !important;
}

/* CHANGE 1: hero figure injected as the first child of the intro
   section-card. Renders as a full-width section header image with a
   bottom margin so the body prose follows naturally underneath. The
   --sd-maxw cap from the original hero-figure-band carries over via
   the parent section-card's max-width. */
.sd-insight__hero-figure--in-intro {
    margin: 0 0 clamp(28px, 3vw, 40px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sd-shadow-card, 0 18px 48px rgba(13,31,46,0.16));
    background: #11314a;
}
.sd-insight__hero-figure--in-intro .sd-insight__hero-figure-img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .sd-insight__hero-figure--in-intro { border-radius: 12px; }
}

/* Intro with figure: tighten the section's top padding so the image
   reads as the visual top of the section (it carries the visual
   weight), not floating below 96px of empty cream. */
.sd-insight__section--intro-with-figure {
    padding-top: clamp(28px, 4vw, 56px);
}
/* Wave divider rises into the intro section; once the divider-slot
   sits before --intro-with-figure, override the +divider-slot
   padding-top adjacency rule that would normally push the figure
   60+ px down. */
.sd-insight__divider-slot + .sd-insight__section--intro-with-figure {
    padding-top: clamp(60px, 8vw, 110px);
}

/* CHANGE 3: Stats + next dark prose group -- darkblue -> navy gradient.
   Used when stats section is followed by another darkblue prose section.
   The gradient transitions from medium-blue (#235C81 = navy-2) at the
   top of stats down to navy (#11314a) at the bottom of the prose
   section. Children paint transparent so the gradient shows through. */
.sd-insight__group--blue-navy {
    background: linear-gradient(
        to bottom,
        var(--sd-navy-2) 0%,
        var(--sd-navy) 100%
    );
}
.sd-insight__group--blue-navy > .sd-insight__section {
    background: transparent !important;
}
/* Inside a blue-navy group, gradient blurbs and dropshadows can flow
   across both child sections because they share isolation context. */

/* CHANGE 4: Cream-warm group around the playbook banner + next section.
   The banner sits on top of the gradient (cream) and the prose section
   below picks up the warm-cream stop. Children transparent. */
.sd-insight__group--cream-warm {
    background: linear-gradient(
        to bottom,
        var(--sd-cream) 0%,
        var(--sd-warm) 100%
    );
    /* small top padding so the banner has cream above it when the
       prior section ended on a cream divider; the banner has its own
       margin-top of 48px so this stays comfortably spaced. */
    padding-top: 0;
}
.sd-insight__group--cream-warm > .sd-insight__section {
    background: transparent !important;
}
/* The banner inside the cream-warm group: its own card gradient
   stays intact (linear-gradient navy stuff). Just ensure the
   margin sits inside the group. */
.sd-insight__group--cream-warm > .sd-insight__playbook-banner {
    /* Banner has its own margin: 48px 50px from default rules. Keep. */
}
/* Suppress the divider that the regular section emit creates between
   the banner and the next section -- already display:none in legacy
   rules, but we re-emphasise here for the merged group. */
.sd-insight__group--cream-warm .sd-insight__playbook-banner + .sd-insight__divider-slot {
    display: none !important;
}
.sd-insight__group--cream-warm .sd-insight__playbook-banner
    + .sd-insight__divider-slot
    + .sd-insight__section {
    padding-top: clamp(40px, 5vw, 64px) !important;
}

/* =================================================================
   CHANGE 2 (Apr 25 2026) -- STATS SECTION Z-INDEX FIX
   The stats section has a radial gradient blurb on ::after that was
   creating horizontal seam lines on the wave dividers above/below.
   Fix the stacking:
     - Section is position: relative (already)
     - Section ::after gradient blurb: z-index 0 (was 2)
     - Section content (.sd-insight__stats): z-index 1 (was 3)
     - Wave dividers (siblings) at z-index 4 to clear any seams
   ================================================================= */
.sd-insight__section--stats::after {
    z-index: 0 !important;
}
.sd-insight__stats {
    z-index: 1 !important;
}
.sd-insight__section--stats {
    /* Stay below the divider stack; z-index auto means the section
       paints in normal flow without creating its own stacking
       context that could clip the wave above. */
    z-index: auto;
}
/* Hoist divider-slots adjacent to stats above any decorative gradient. */
.sd-insight__section--stats + .sd-insight__divider-slot,
.sd-insight__divider-slot:has(+ .sd-insight__section--stats),
.sd-insight__group--blue-navy + .sd-insight__divider-slot,
.sd-insight__divider-slot:has(+ .sd-insight__group--blue-navy) {
    z-index: 4 !important;
}

/* =================================================================
   CHANGE 5 (Apr 25 2026) -- FEATURES GRID READABILITY
   The 3-column features grid is too narrow on desktop with each card
   getting ~280px of width. Bumped to 2-column on desktop with bigger
   cards, larger H3, and more breathing room. Mobile stacks 1-col.
   ================================================================= */
.sd-insight__features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
@media (min-width: 1280px) {
    /* Ultra-wide: keep 2-col but cap card width so they do not get
       absurdly wide. Centered group. */
    .sd-insight__features-grid {
        gap: 32px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 700px) {
    .sd-insight__features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* data-cols overrides: respect explicit 2-col / 4-col preferences but
   default 3-col now becomes 2-col. */
.sd-insight__features-grid[data-cols="3"] {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
    .sd-insight__features-grid[data-cols="3"] {
        grid-template-columns: 1fr;
    }
}

/* Bigger cards: more padding, larger heading + body. */
.sd-insight__feature {
    padding: 36px 32px;
    border-radius: 14px;
}
.sd-insight__feature-title {
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.25;
    margin-bottom: 14px;
}
.sd-insight__feature-body {
    font-size: clamp(15.5px, 1.05vw, 17px);
    line-height: 1.62;
}
.sd-insight__feature-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
}
.sd-insight__feature-num {
    font-size: 11px;
    margin-bottom: 8px;
}
@media (max-width: 700px) {
    .sd-insight__feature {
        padding: 28px 24px;
    }
    .sd-insight__feature-title {
        font-size: 18px;
    }
    .sd-insight__feature-body {
        font-size: 15px;
    }
}

/* ============================================================
   FIELD-GUIDE PILOT (post 4068 only, Apr 25 2026)
   New editorial hero language: navy gradient + diver silhouette
   + light rays + bubbles + map ornaments in corners. Utility/
   tools bar swap. Drop caps on TLDR + first paragraph of each
   H2. "Below the surface" Bodoni golden-sand ornamental dividers
   between sections. Brand-colors-only (no #fff/#000 introduced).
   All selectors gated to body.postid-4068 so other posts are
   untouched.
   ============================================================ */

/* --- Hero swap: full-bleed navy gradient + atmospheric SVG --- */
body.postid-4068 .sd-insight__hero--fieldguide {
  background: linear-gradient(180deg, #11314a 0%, #235C81 100%);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 11vw, 160px) 0 clamp(96px, 11vw, 150px);
}
body.postid-4068 .sd-insight__hero-bg--fieldguide {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 22% 6%, rgba(255,246,232,0.18), transparent 50%),
    radial-gradient(ellipse at 92% 88%, rgba(17,49,74,0.55), transparent 60%),
    linear-gradient(180deg, #11314a 0%, #235C81 100%);
  pointer-events: none;
}
body.postid-4068 .sd-insight__hero-bg--fieldguide::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,246,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,246,232,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%);
  opacity: 0.7;
}
body.postid-4068 .sd-insight__fg-scene {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
body.postid-4068 .sd-insight__hero-overlay--fieldguide {
  background:
    radial-gradient(ellipse 60% 55% at 18% 10%, rgba(255,246,232,0.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 92% 88%, rgba(17,49,74,0.40), transparent 60%);
}
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative; z-index: 3;
  max-width: var(--sd-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* --- Eyebrow: mono cream all-caps "FIELD GUIDE 01" --- */
body.postid-4068 .sd-insight__eyebrow--fieldguide {
  display: inline-block;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: #FFF6E8;
  margin: 0 0 32px;
  padding: 0;
}

/* --- Title: DM Sans 700 + last-words italic Bodoni golden-sand --- */
body.postid-4068 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(40px, 5.6vw, 70px);
  line-height: 1.06; letter-spacing: -.025em;
  color: #FFF6E8; font-weight: 700;
  margin: 0 0 22px; max-width: 920px;
}
body.postid-4068 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4068 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', 'Georgia', serif;
  font-style: italic; font-weight: 500;
  color: #F6C893;
}

/* --- Subhead at 75% cream --- */
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(255,246,232,0.78);
  max-width: 720px;
  margin: 0 0 32px;
}

/* --- Field note kicker above byline --- */
body.postid-4068 .sd-insight__byline-kicker {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: #F6C893;
  margin: 24px 0 12px;
  width: 100%;
  display: block;
}
body.postid-4068 .sd-insight__hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px;
  margin-top: 0;
}

/* --- Right-side compact stack: IN THIS GUIDE / N SECTIONS --- */
body.postid-4068 .sd-insight__hero-inner { position: relative; }
body.postid-4068 .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4068 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4068 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4068 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
@media (max-width: 900px) {
  body.postid-4068 .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 8px;
  }
}

/* --- Diver gentle drift animation (subtle, GPU-only) --- */
@media (prefers-reduced-motion: no-preference) {
  body.postid-4068 .sd-insight__fg-diver {
    transform-origin: center;
    animation: sd-fg-diver-drift 14s ease-in-out infinite alternate;
  }
}
@keyframes sd-fg-diver-drift {
  0%   { transform: translate(1130px, 290px) rotate(-1deg); }
  100% { transform: translate(1130px, 320px) rotate(1.5deg); }
}

/* --- UTILITY / TOOLS BAR (replaces the simple share-band) --- */
body.postid-4068 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4068 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4068 .sd-insight__util-pill {
  display: inline-flex; align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4068 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px; height: 16px;
}
body.postid-4068 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex; align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4068 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4068 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 640px) {
  body.postid-4068 .sd-insight__util-counter { display: none; }
}

/* --- DROP CAPS: TLDR opening letter + first paragraph in each H2 --- */
body.postid-4068 .sd-insight__tldr-body p::first-letter {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: #F6C893;
  text-shadow: 0 1px 0 rgba(17,49,74,0.05);
}
body.postid-4068 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4068 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-head + p::first-letter {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: #F6C893;
}

/* Drop cap on darker bands shifts to lighter sand for legibility */
body.postid-4068 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4068 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4068 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4068 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter,
body.postid-4068 .sd-insight__section--navy .sd-insight__section-head + p::first-letter,
body.postid-4068 .sd-insight__section--deep .sd-insight__section-head + p::first-letter {
  color: #FFF6E8;
}

/* --- "Below the surface" ornamental dividers between sections --- */
body.postid-4068 .sd-insight__section--fg-ornament {
  padding: clamp(34px, 5vw, 56px) 0 clamp(20px, 4vw, 36px);
  background: #FFF6E8;
  text-align: center;
}
body.postid-4068 .sd-insight__fg-ornament-phrase {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  color: #F6C893;
  margin: 0;
  letter-spacing: 0.005em;
  position: relative;
  display: inline-block;
  padding: 0 50px;
}
body.postid-4068 .sd-insight__fg-ornament-phrase::before,
body.postid-4068 .sd-insight__fg-ornament-phrase::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px; height: 1px;
  background: rgba(17,49,74,0.20);
}
body.postid-4068 .sd-insight__fg-ornament-phrase::before { left: 0; }
body.postid-4068 .sd-insight__fg-ornament-phrase::after  { right: 0; }

/* The cream-tan group adjacent CSS rule grants 110px+ top padding to the
   section directly after a divider-slot; the ornament uses its own padding
   above so kill the inherited extra. */
body.postid-4068 .sd-insight__divider-slot + .sd-insight__section--fg-ornament {
  padding-top: clamp(34px, 5vw, 56px);
}

/* --- Mobile tightening --- */
@media (max-width: 768px) {
  body.postid-4068 .sd-insight__hero--fieldguide {
    padding: clamp(70px, 14vw, 110px) 0 clamp(70px, 14vw, 110px);
  }
  body.postid-4068 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4068 .sd-insight__fg-scene .sd-insight__fg-diver {
    opacity: 0.55;
  }
}


/* --------------------------------------------------------------
   FIELD-GUIDE HERO REV (Apr 25 2026, post 4068 pilot)
   Replaces the cartoon underwater SVG with a real atmospheric
   photo (set as background-image on the .sd-insight__hero element)
   plus subtle chart/map annotation overlays. Brand colors only.
   -------------------------------------------------------------- */
body.postid-4068 .sd-insight__hero--fieldguide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #11314a;
}
body.postid-4068 .sd-insight__hero-bg--fieldguide {
  display: none !important;
}
body.postid-4068 .sd-insight__hero-overlay--fieldguide {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,49,74,0.55) 0%, rgba(17,49,74,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
body.postid-4068 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
}
/* Mute the legacy diver-drift animation now that the diver group is removed.
   The keyframe + selector still exist higher in the file but with no DOM. */
body.postid-4068 .sd-insight__fg-scene { display: none !important; }

@media (max-width: 720px) {
  body.postid-4068 .sd-insight__fg-annotations {
    /* Keep coords visible but quieter on small screens. */
    opacity: 0.85;
  }
}
/* End FIELD-GUIDE HERO REV. */


/* ==============================================================
   FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026, post 4068)
   Source of truth: ~/Downloads/scubadev-fieldguide-hero.html
   Replaces the prior half-baked hero scoped at postid-4068.
   All selectors gated to body.postid-4068. Brand palette only.
   No #fff, no #000, no browns. Lighter overlay (was 0.55-0.85),
   topo plates layered behind, 9 crosshair plus marks at low
   opacity, coords + tick-ruler, corner labels, FIELD GUIDE NN
   eyebrow, italic Bodoni accent on title, byline pill row.
   ============================================================== */

/* HERO CONTAINER */
body.postid-4068 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* navy overlay above the photo, below content. Lighter than prior
   (was 0.55 -> 0.85). Soft top, deepens to floor. */
body.postid-4068 .sd-insight__fg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* faint cream grid texture */
body.postid-4068 .sd-insight__fg-grid {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* nuke the legacy fieldguide overlay rules so they cannot win cascade */
body.postid-4068 .sd-insight__hero-overlay--fieldguide {
  display: none !important;
}
body.postid-4068 .sd-insight__fg-scene { display: none !important; }
body.postid-4068 .sd-insight__hero-bg--fieldguide { display: none !important; }

/* CORNER MAP PLATES (topographic line art, gold-sand at low opacity).
   620px desktop, scales down at narrower viewports. */
body.postid-4068 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4068 .sd-insight__fg-corner svg { display: block; width: 100%; height: auto; }
body.postid-4068 .sd-insight__fg-corner--tl { top: -80px; left: -100px; width: 620px; }
body.postid-4068 .sd-insight__fg-corner--br { bottom: -80px; right: -100px; width: 620px; }
@media (max-width: 980px) {
  body.postid-4068 .sd-insight__fg-corner--tl { width: 460px; top: -60px; left: -70px; }
  body.postid-4068 .sd-insight__fg-corner--br { width: 460px; bottom: -60px; right: -70px; }
}
@media (max-width: 720px) {
  body.postid-4068 .sd-insight__fg-corner--tl { width: 320px; top: -30px; left: -50px; }
  body.postid-4068 .sd-insight__fg-corner--br { width: 320px; bottom: -30px; right: -50px; }
}

/* CROSSHAIR PLUS MARKS — absolute spans positioned by percentage,
   responsive at any viewport. ~20-45% opacity per design spec. */
body.postid-4068 .sd-insight__fg-annotations {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
body.postid-4068 .sd-insight__fg-cross {
  position: absolute;
  width: 11px; height: 11px;
  opacity: 0.42;
}
body.postid-4068 .sd-insight__fg-cross::before,
body.postid-4068 .sd-insight__fg-cross::after {
  content: ''; position: absolute; background: #FFF6E8;
}
body.postid-4068 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4068 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4068 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4068 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4068 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4068 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4068 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4068 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4068 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4068 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4068 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* COORDS CLUSTER (right side, mono cream low-opacity) */
body.postid-4068 .sd-insight__fg-coords {
  position: absolute; right: 32px; top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: #FFF6E8; opacity: 0.55;
  text-align: right; line-height: 2;
}

/* DEPTH TICK RULER (right edge, vertical) */
body.postid-4068 .sd-insight__fg-tick-ruler {
  position: absolute; right: 16px; top: 96px; bottom: 96px; width: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0.35;
}
body.postid-4068 .sd-insight__fg-tick-ruler i {
  display: block; height: 1px; background: #FFF6E8;
  width: 4px; align-self: flex-end;
}
body.postid-4068 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* CORNER LABELS (top-left + top-right) */
body.postid-4068 .sd-insight__fg-corner-tl,
body.postid-4068 .sd-insight__fg-corner-tr {
  position: absolute; top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.22em;
  color: #FFF6E8; opacity: 0.55;
  line-height: 1.7; text-transform: uppercase;
  z-index: 3;
}
body.postid-4068 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4068 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4068 .sd-insight__fg-coords,
  body.postid-4068 .sd-insight__fg-tick-ruler,
  body.postid-4068 .sd-insight__fg-corner-tl,
  body.postid-4068 .sd-insight__fg-corner-tr { display: none; }
}

/* HERO INNER CONTENT */
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative; z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
}

/* EYEBROW: "FIELD GUIDE NN" with leading hairline */
body.postid-4068 .sd-insight__eyebrow--fieldguide {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #FFF6E8; opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4068 .sd-insight__eyebrow--fieldguide::before {
  content: ''; width: 26px; height: 1px; background: #F6C893; opacity: 0.9;
}

/* TITLE: DM Sans 700 + last-words italic Bodoni gold-sand */
body.postid-4068 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4068 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4068 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* SUBHEAD */
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* HERO META: pill row (chip + byline) */
body.postid-4068 .sd-insight__hero-meta--fieldguide {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4068 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.20em;
  color: #FFF6E8; opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4068 .sd-insight__byline--fieldguide {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px; line-height: 1.45;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* IN THIS GUIDE counter — keep prior right-side placement, override
   only the position math so it lands cleanly above the new layout. */
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}

/* MOBILE TIGHTENING */
@media (max-width: 720px) {
  body.postid-4068 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4068 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}

/* End FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026). */


/* ============================================================
   FIELD-GUIDE FINAL CTA — wave divider + visual nudges
   Gated to body.postid-4068. Sources of truth:
     - design: ~/Downloads/scubadev-fieldguide-hero.html L5448-5640
     - markup: single-insight.php (.sd-insight__cta--fieldguide)
   Only the wave-divider + padding-top adjustments are layered here.
   The coral button + cream text + 999px pill already match the design
   via the base .sd-insight__cta-btn rule (no override needed).
   ============================================================ */

/* Allow the cream wave + coral pulses to bleed past the section edge so the
   layered SVG sits flush with the section above instead of being clipped.
   The base .sd-insight__cta uses overflow:hidden + isolation:isolate; the
   field-guide variant keeps isolation but opens overflow at the top so the
   wave can crest down INTO the navy. */
body.postid-4068 .sd-insight__cta--fieldguide {
  overflow: visible;
  /* Bump padding-top so the layered wave (clamp 70-150px) doesn't crash into
     the eyebrow / heading. Matches design L5454. */
  padding-top: clamp(140px, 14vw, 180px);
}

/* Wave divider — five-path layered SVG positioned at the top of the navy CTA
   band. Cream waves crest DOWN into navy via transform: scaleY(-1). z-index
   sits above the .sd-insight__cta-pulse coral wash so the wave reads cleanly
   while the coral still bleeds up onto the wave's negative space.

   z-index ladder for the field-guide CTA (matches base CTA + adds wave):
     .sd-insight__cta              z-index 2 (above sibling divider-slot)
     .sd-insight__cta-pulse        z-index 2 (coral wash)
     .sd-insight__cta::before      z-index 2 (coral pulse pseudo)
     .sd-insight__cta-wave         z-index 3 (wave silhouette above pulses)
     .sd-insight__cta-inner        z-index 4 (compass/eyebrow/title/btn)
*/
body.postid-4068 .sd-insight__cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 10vw, 150px);
  z-index: 3;
  pointer-events: none;
}
body.postid-4068 .sd-insight__cta-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--sd-cream); /* path fill via currentColor */
  transform: scaleY(-1);
  transform-origin: center;
}
body.postid-4068 .sd-insight__cta-wave svg path {
  fill: currentColor;
}

/* Hoist the inner content above the new wave so the CTA copy never gets
   covered by the silhouette on narrow viewports. */
body.postid-4068 .sd-insight__cta--fieldguide .sd-insight__cta-inner {
  position: relative;
  z-index: 4;
}

/* Mobile: shrink the wave-related top padding so the CTA stays compact and
   the wave still has breathing room above the eyebrow. */
@media (max-width: 720px) {
  body.postid-4068 .sd-insight__cta--fieldguide {
    padding-top: clamp(96px, 18vw, 130px);
  }
  body.postid-4068 .sd-insight__cta-wave {
    height: clamp(56px, 14vw, 110px);
  }
}
/* End FIELD-GUIDE FINAL CTA. */


/* ============================================================
   FIELD-GUIDE POST 4072 SUPPORT - AI Automation Agency
   Mirrors the approved post 4068 field-guide hero and final CTA selectors.
   ============================================================ */
/* ============================================================
   FIELD-GUIDE POST 4072 (post 4068 only, Apr 25 2026)
   New editorial hero language: navy gradient + diver silhouette
   + light rays + bubbles + map ornaments in corners. Utility/
   tools bar swap. Drop caps on TLDR + first paragraph of each
   H2. "Below the surface" Bodoni golden-sand ornamental dividers
   between sections. Brand-colors-only (no #fff/#000 introduced).
   All selectors gated to body.postid-4072 so other posts are
   untouched.
   ============================================================ */

/* --- Hero swap: full-bleed navy gradient + atmospheric SVG --- */
body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
/* End FIELD-GUIDE FINAL CTA. */


/* ============================================================
   FIELD-GUIDE POST 4072 SUPPORT - AI Automation Agency
   Mirrors the approved post 4068 field-guide hero and final CTA selectors.
   ============================================================ */
/* ============================================================
   FIELD-GUIDE POST 4072 (post 4068 only, Apr 25 2026)
   New editorial hero language: navy gradient + diver silhouette
   + light rays + bubbles + map ornaments in corners. Utility/
   tools bar swap. Drop caps on TLDR + first paragraph of each
   H2. "Below the surface" Bodoni golden-sand ornamental dividers
   between sections. Brand-colors-only (no #fff/#000 introduced).
   All selectors gated to body.postid-4624 so other posts are
   untouched.
   ============================================================ */

/* --- Hero swap: full-bleed navy gradient + atmospheric SVG --- */
body.postid-4624 .sd-insight__hero--fieldguide {
  background: linear-gradient(180deg, #11314a 0%, #235C81 100%);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 11vw, 160px) 0 clamp(96px, 11vw, 150px);
}
body.postid-4072 .sd-insight__hero-bg--fieldguide, body.postid-4080 .sd-insight__hero-bg--fieldguide, body.postid-4076 .sd-insight__hero-bg--fieldguide,
body.postid-4624 .sd-insight__hero-bg--fieldguide {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 22% 6%, rgba(255,246,232,0.18), transparent 50%),
    radial-gradient(ellipse at 92% 88%, rgba(17,49,74,0.55), transparent 60%),
    linear-gradient(180deg, #11314a 0%, #235C81 100%);
  pointer-events: none;
}
body.postid-4072 .sd-insight__hero-bg--fieldguide::before, body.postid-4080 .sd-insight__hero-bg--fieldguide::before, body.postid-4076 .sd-insight__hero-bg--fieldguide::before,
body.postid-4624 .sd-insight__hero-bg--fieldguide::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,246,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,246,232,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%);
  opacity: 0.7;
}
body.postid-4072 .sd-insight__fg-scene, body.postid-4080 .sd-insight__fg-scene, body.postid-4076 .sd-insight__fg-scene,
body.postid-4624 .sd-insight__fg-scene {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
body.postid-4072 .sd-insight__hero-overlay--fieldguide, body.postid-4080 .sd-insight__hero-overlay--fieldguide, body.postid-4076 .sd-insight__hero-overlay--fieldguide,
body.postid-4624 .sd-insight__hero-overlay--fieldguide {
  background:
    radial-gradient(ellipse 60% 55% at 18% 10%, rgba(255,246,232,0.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 92% 88%, rgba(17,49,74,0.40), transparent 60%);
}
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative; z-index: 3;
  max-width: var(--sd-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* --- Eyebrow: mono cream all-caps "FIELD GUIDE 01" --- */
body.postid-4072 .sd-insight__eyebrow--fieldguide, body.postid-4080 .sd-insight__eyebrow--fieldguide, body.postid-4076 .sd-insight__eyebrow--fieldguide,
/* --- Eyebrow: mono cream all-caps "FIELD GUIDE 01" --- */
body.postid-4624 .sd-insight__eyebrow--fieldguide {
  display: inline-block;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: #FFF6E8;
  margin: 0 0 32px;
  padding: 0;
}

/* --- Title: DM Sans 700 + last-words italic Bodoni golden-sand --- */
body.postid-4072 .sd-insight__title--fieldguide, body.postid-4080 .sd-insight__title--fieldguide, body.postid-4076 .sd-insight__title--fieldguide,
/* --- Title: DM Sans 700 + last-words italic Bodoni golden-sand --- */
body.postid-4624 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(40px, 5.6vw, 70px);
  line-height: 1.06; letter-spacing: -.025em;
  color: #FFF6E8; font-weight: 700;
  margin: 0 0 22px; max-width: 920px;
}
body.postid-4072 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4080 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4076 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4072 .sd-insight__title--fieldguide em, body.postid-4080 .sd-insight__title--fieldguide em, body.postid-4076 .sd-insight__title--fieldguide em,
body.postid-4624 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4624 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', 'Georgia', serif;
  font-style: italic; font-weight: 500;
  color: #F6C893;
}

/* --- Subhead at 75% cream --- */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__subhead, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__subhead, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__subhead,
/* --- Subhead at 75% cream --- */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(255,246,232,0.78);
  max-width: 720px;
  margin: 0 0 32px;
}

/* --- Field note kicker above byline --- */
body.postid-4072 .sd-insight__byline-kicker, body.postid-4080 .sd-insight__byline-kicker, body.postid-4076 .sd-insight__byline-kicker,
/* --- Field note kicker above byline --- */
body.postid-4624 .sd-insight__byline-kicker {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: #F6C893;
  margin: 24px 0 12px;
  width: 100%;
  display: block;
}
body.postid-4072 .sd-insight__hero-meta, body.postid-4080 .sd-insight__hero-meta, body.postid-4076 .sd-insight__hero-meta,
body.postid-4624 .sd-insight__hero-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px;
  margin-top: 0;
}

/* --- Right-side compact stack: IN THIS GUIDE / N SECTIONS --- */
body.postid-4072 .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero-inner,
/* --- Right-side compact stack: IN THIS GUIDE / N SECTIONS --- */
body.postid-4624 .sd-insight__hero-inner { position: relative; }
body.postid-4072 .sd-insight__fg-counter, body.postid-4080 .sd-insight__fg-counter, body.postid-4076 .sd-insight__fg-counter,
body.postid-4624 .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4072 .sd-insight__fg-counter-label, body.postid-4080 .sd-insight__fg-counter-label, body.postid-4076 .sd-insight__fg-counter-label,
body.postid-4624 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4072 .sd-insight__fg-counter-value, body.postid-4080 .sd-insight__fg-counter-value, body.postid-4076 .sd-insight__fg-counter-value,
body.postid-4624 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4072 .sd-insight__fg-counter-sub, body.postid-4080 .sd-insight__fg-counter-sub, body.postid-4076 .sd-insight__fg-counter-sub,
body.postid-4624 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
@media (max-width: 900px) {
  body.postid-4072 .sd-insight__fg-counter, body.postid-4080 .sd-insight__fg-counter, body.postid-4076 .sd-insight__fg-counter,
body.postid-4624 .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 8px;
  }
}

/* --- Diver gentle drift animation (subtle, GPU-only) --- */
@media (prefers-reduced-motion: no-preference) {
  body.postid-4072 .sd-insight__fg-diver, body.postid-4080 .sd-insight__fg-diver, body.postid-4076 .sd-insight__fg-diver,
body.postid-4624 .sd-insight__fg-diver {
    transform-origin: center;
    animation: sd-fg-diver-drift 14s ease-in-out infinite alternate;
  }
}
@keyframes sd-fg-diver-drift {
  0%   { transform: translate(1130px, 290px) rotate(-1deg); }
  100% { transform: translate(1130px, 320px) rotate(1.5deg); }
}

/* --- UTILITY / TOOLS BAR (replaces the simple share-band) --- */
body.postid-4072 .sd-insight__section--utility-bar, body.postid-4080 .sd-insight__section--utility-bar, body.postid-4076 .sd-insight__section--utility-bar,
/* --- UTILITY / TOOLS BAR (replaces the simple share-band) --- */
body.postid-4624 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4072 .sd-insight__section--utility-bar .sd-insight__share--utility, body.postid-4080 .sd-insight__section--utility-bar .sd-insight__share--utility, body.postid-4076 .sd-insight__section--utility-bar .sd-insight__share--utility,
body.postid-4624 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4072 .sd-insight__util-pill, body.postid-4080 .sd-insight__util-pill, body.postid-4076 .sd-insight__util-pill,
body.postid-4624 .sd-insight__util-pill {
  display: inline-flex; align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4072 .sd-insight__share--utility .sd-insight__share-list, body.postid-4080 .sd-insight__share--utility .sd-insight__share-list, body.postid-4076 .sd-insight__share--utility .sd-insight__share-list,
body.postid-4624 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4072 .sd-insight__share--utility .sd-insight__share-btn, body.postid-4080 .sd-insight__share--utility .sd-insight__share-btn, body.postid-4076 .sd-insight__share--utility .sd-insight__share-btn,
body.postid-4624 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4072 .sd-insight__share--utility .sd-insight__share-btn:hover, body.postid-4080 .sd-insight__share--utility .sd-insight__share-btn:hover, body.postid-4076 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4072 .sd-insight__share--utility .sd-insight__share-btn:focus-visible, body.postid-4080 .sd-insight__share--utility .sd-insight__share-btn:focus-visible, body.postid-4076 .sd-insight__share--utility .sd-insight__share-btn:focus-visible,
body.postid-4624 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4624 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4072 .sd-insight__share--utility .sd-insight__share-btn svg, body.postid-4080 .sd-insight__share--utility .sd-insight__share-btn svg, body.postid-4076 .sd-insight__share--utility .sd-insight__share-btn svg,
body.postid-4624 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px; height: 16px;
}
body.postid-4072 .sd-insight__util-counter, body.postid-4080 .sd-insight__util-counter, body.postid-4076 .sd-insight__util-counter,
body.postid-4624 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex; align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4072 .sd-insight__util-counter-sep, body.postid-4080 .sd-insight__util-counter-sep, body.postid-4076 .sd-insight__util-counter-sep,
body.postid-4624 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4072 .sd-insight__util-counter-value, body.postid-4080 .sd-insight__util-counter-value, body.postid-4076 .sd-insight__util-counter-value,
body.postid-4624 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 640px) {
  body.postid-4072 .sd-insight__util-counter, body.postid-4080 .sd-insight__util-counter, body.postid-4076 .sd-insight__util-counter,
body.postid-4624 .sd-insight__util-counter { display: none; }
}

/* Cursor vs Claude Code field guide utility bar */
body.postid-4062 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4062 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4062 .sd-insight__util-pill {
  display: inline-flex; align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4062 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4062 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4062 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4062 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4062 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px; height: 16px;
}
body.postid-4062 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex; align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4062 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4062 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 640px) {
  body.postid-4062 .sd-insight__util-counter { display: none; }
}

/* --- DROP CAPS: TLDR opening letter + first paragraph in each H2 --- */
body.postid-4072 .sd-insight__tldr-body p::first-letter, body.postid-4080 .sd-insight__tldr-body p::first-letter, body.postid-4076 .sd-insight__tldr-body p::first-letter,
/* --- DROP CAPS: TLDR opening letter + first paragraph in each H2 --- */
body.postid-4624 .sd-insight__tldr-body p::first-letter {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: #F6C893;
  text-shadow: 0 1px 0 rgba(17,49,74,0.05);
}
body.postid-4072 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4076 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4080 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4072 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-head + p::first-letter , body.postid-4076 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-head + p::first-letter , body.postid-4080 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-head + p::first-letter,
body.postid-4624 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4624 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament)
  .sd-insight__section-head + p::first-letter {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: #F6C893;
}

/* Drop cap on darker bands shifts to lighter sand for legibility */
body.postid-4072 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4080 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4076 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4072 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4080 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4076 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4072 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4080 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4076 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4072 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter, body.postid-4080 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter, body.postid-4076 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter,
body.postid-4072 .sd-insight__section--navy .sd-insight__section-head + p::first-letter, body.postid-4080 .sd-insight__section--navy .sd-insight__section-head + p::first-letter, body.postid-4076 .sd-insight__section--navy .sd-insight__section-head + p::first-letter,
body.postid-4072 .sd-insight__section--deep .sd-insight__section-head + p::first-letter, body.postid-4080 .sd-insight__section--deep .sd-insight__section-head + p::first-letter, body.postid-4076 .sd-insight__section--deep .sd-insight__section-head + p::first-letter,
/* Drop cap on darker bands shifts to lighter sand for legibility */
body.postid-4624 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4624 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4624 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter,
body.postid-4624 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter,
body.postid-4624 .sd-insight__section--navy .sd-insight__section-head + p::first-letter,
body.postid-4624 .sd-insight__section--deep .sd-insight__section-head + p::first-letter {
  color: #FFF6E8;
}

/* --- "Below the surface" ornamental dividers between sections --- */
body.postid-4072 .sd-insight__section--fg-ornament, body.postid-4080 .sd-insight__section--fg-ornament, body.postid-4076 .sd-insight__section--fg-ornament,
/* --- "Below the surface" ornamental dividers between sections --- */
body.postid-4624 .sd-insight__section--fg-ornament {
  padding: clamp(34px, 5vw, 56px) 0 clamp(20px, 4vw, 36px);
  background: #FFF6E8;
  text-align: center;
}
body.postid-4072 .sd-insight__fg-ornament-phrase, body.postid-4080 .sd-insight__fg-ornament-phrase, body.postid-4076 .sd-insight__fg-ornament-phrase,
body.postid-4624 .sd-insight__fg-ornament-phrase {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  color: #F6C893;
  margin: 0;
  letter-spacing: 0.005em;
  position: relative;
  display: inline-block;
  padding: 0 50px;
}
body.postid-4072 .sd-insight__fg-ornament-phrase::before, body.postid-4080 .sd-insight__fg-ornament-phrase::before, body.postid-4076 .sd-insight__fg-ornament-phrase::before,
body.postid-4072 .sd-insight__fg-ornament-phrase::after, body.postid-4080 .sd-insight__fg-ornament-phrase::after, body.postid-4076 .sd-insight__fg-ornament-phrase::after,
body.postid-4624 .sd-insight__fg-ornament-phrase::before,
body.postid-4624 .sd-insight__fg-ornament-phrase::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38px; height: 1px;
  background: rgba(17,49,74,0.20);
}
body.postid-4072 .sd-insight__fg-ornament-phrase::before, body.postid-4080 .sd-insight__fg-ornament-phrase::before, body.postid-4076 .sd-insight__fg-ornament-phrase::before,
body.postid-4624 .sd-insight__fg-ornament-phrase::before { left: 0; }
body.postid-4072 .sd-insight__fg-ornament-phrase::after, body.postid-4080 .sd-insight__fg-ornament-phrase::after, body.postid-4076 .sd-insight__fg-ornament-phrase::after,
body.postid-4624 .sd-insight__fg-ornament-phrase::after { right: 0; }

/* The cream-tan group adjacent CSS rule grants 110px+ top padding to the
   section directly after a divider-slot; the ornament uses its own padding
   above so kill the inherited extra. */
body.postid-4072 .sd-insight__divider-slot + .sd-insight__section--fg-ornament, body.postid-4080 .sd-insight__divider-slot + .sd-insight__section--fg-ornament, body.postid-4076 .sd-insight__divider-slot + .sd-insight__section--fg-ornament,
/* The cream-tan group adjacent CSS rule grants 110px+ top padding to the
   section directly after a divider-slot; the ornament uses its own padding
   above so kill the inherited extra. */
body.postid-4624 .sd-insight__divider-slot + .sd-insight__section--fg-ornament {
  padding-top: clamp(34px, 5vw, 56px);
}

/* --- Mobile tightening --- */
@media (max-width: 768px) {
  body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
body.postid-4624 .sd-insight__hero--fieldguide {
    padding: clamp(70px, 14vw, 110px) 0 clamp(70px, 14vw, 110px);
  }
  body.postid-4072 .sd-insight__title--fieldguide, body.postid-4080 .sd-insight__title--fieldguide, body.postid-4076 .sd-insight__title--fieldguide,
body.postid-4624 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4072 .sd-insight__fg-scene .sd-insight__fg-diver, body.postid-4080 .sd-insight__fg-scene .sd-insight__fg-diver, body.postid-4076 .sd-insight__fg-scene .sd-insight__fg-diver,
body.postid-4624 .sd-insight__fg-scene .sd-insight__fg-diver {
    opacity: 0.55;
  }
}


/* --------------------------------------------------------------
   FIELD-GUIDE HERO REV (Apr 25 2026, post 4068 pilot)
   Replaces the cartoon underwater SVG with a real atmospheric
   photo (set as background-image on the .sd-insight__hero element)
   plus subtle chart/map annotation overlays. Brand colors only.
   -------------------------------------------------------------- */
body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
/* --------------------------------------------------------------
   FIELD-GUIDE HERO REV (Apr 25 2026, post 4068 pilot)
   Replaces the cartoon underwater SVG with a real atmospheric
   photo (set as background-image on the .sd-insight__hero element)
   plus subtle chart/map annotation overlays. Brand colors only.
   -------------------------------------------------------------- */
body.postid-4624 .sd-insight__hero--fieldguide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #11314a;
}
body.postid-4072 .sd-insight__hero-bg--fieldguide, body.postid-4080 .sd-insight__hero-bg--fieldguide, body.postid-4076 .sd-insight__hero-bg--fieldguide,
body.postid-4624 .sd-insight__hero-bg--fieldguide {
  display: none !important;
}
body.postid-4072 .sd-insight__hero-overlay--fieldguide, body.postid-4080 .sd-insight__hero-overlay--fieldguide, body.postid-4076 .sd-insight__hero-overlay--fieldguide,
body.postid-4624 .sd-insight__hero-overlay--fieldguide {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,49,74,0.55) 0%, rgba(17,49,74,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
body.postid-4072 .sd-insight__fg-annotations, body.postid-4080 .sd-insight__fg-annotations, body.postid-4076 .sd-insight__fg-annotations,
body.postid-4624 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
}
/* Mute the legacy diver-drift animation now that the diver group is removed.
   The keyframe + selector still exist higher in the file but with no DOM. */
body.postid-4072 .sd-insight__fg-scene, body.postid-4080 .sd-insight__fg-scene, body.postid-4076 .sd-insight__fg-scene,
/* Mute the legacy diver-drift animation now that the diver group is removed.
   The keyframe + selector still exist higher in the file but with no DOM. */
body.postid-4624 .sd-insight__fg-scene { display: none !important; }

@media (max-width: 720px) {
  body.postid-4072 .sd-insight__fg-annotations, body.postid-4080 .sd-insight__fg-annotations, body.postid-4076 .sd-insight__fg-annotations,
body.postid-4624 .sd-insight__fg-annotations {
    /* Keep coords visible but quieter on small screens. */
    opacity: 0.85;
  }
}
/* End FIELD-GUIDE HERO REV. */


/* ==============================================================
   FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026, post 4068)
   Source of truth: ~/Downloads/scubadev-fieldguide-hero.html
   Replaces the prior half-baked hero scoped at postid-4072.
   All selectors gated to body.postid-4072. Brand palette only.
   No #fff, no #000, no browns. Lighter overlay (was 0.55-0.85),
   topo plates layered behind, 9 crosshair plus marks at low
   opacity, coords + tick-ruler, corner labels, FIELD GUIDE NN
   eyebrow, italic Bodoni accent on title, byline pill row.
   ============================================================== */

/* HERO CONTAINER */
body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
/* End FIELD-GUIDE HERO REV. */


/* ==============================================================
   FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026, post 4068)
   Source of truth: ~/Downloads/scubadev-fieldguide-hero.html
   Replaces the prior half-baked hero scoped at postid-4072.
   All selectors gated to body.postid-4624. Brand palette only.
   No #fff,
byline pill row.
   ============================================================== */

/* HERO CONTAINER */
body.postid-4624 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* navy overlay above the photo, below content. Lighter than prior
   (was 0.55 -> 0.85). Soft top, deepens to floor. */
body.postid-4072 .sd-insight__fg-overlay, body.postid-4080 .sd-insight__fg-overlay, body.postid-4076 .sd-insight__fg-overlay,
deepens to floor. */
body.postid-4624 .sd-insight__fg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* faint cream grid texture */
body.postid-4072 .sd-insight__fg-grid, body.postid-4080 .sd-insight__fg-grid, body.postid-4076 .sd-insight__fg-grid,
/* faint cream grid texture */
body.postid-4624 .sd-insight__fg-grid {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* nuke the legacy fieldguide overlay rules so they cannot win cascade */
body.postid-4072 .sd-insight__hero-overlay--fieldguide, body.postid-4080 .sd-insight__hero-overlay--fieldguide, body.postid-4076 .sd-insight__hero-overlay--fieldguide,
/* nuke the legacy fieldguide overlay rules so they cannot win cascade */
body.postid-4624 .sd-insight__hero-overlay--fieldguide {
  display: none !important;
}
body.postid-4072 .sd-insight__fg-scene, body.postid-4080 .sd-insight__fg-scene, body.postid-4076 .sd-insight__fg-scene,
body.postid-4624 .sd-insight__fg-scene { display: none !important; }
body.postid-4072 .sd-insight__hero-bg--fieldguide, body.postid-4080 .sd-insight__hero-bg--fieldguide, body.postid-4076 .sd-insight__hero-bg--fieldguide,
body.postid-4624 .sd-insight__hero-bg--fieldguide { display: none !important; }

/* CORNER MAP PLATES (topographic line art, gold-sand at low opacity).
   620px desktop, scales down at narrower viewports. */
body.postid-4072 .sd-insight__fg-corner, body.postid-4080 .sd-insight__fg-corner, body.postid-4076 .sd-insight__fg-corner,
scales down at narrower viewports. */
body.postid-4624 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4072 .sd-insight__fg-corner svg, body.postid-4080 .sd-insight__fg-corner svg, body.postid-4076 .sd-insight__fg-corner svg,
body.postid-4624 .sd-insight__fg-corner svg { display: block; width: 100%; height: auto; }
body.postid-4072 .sd-insight__fg-corner--tl, body.postid-4080 .sd-insight__fg-corner--tl, body.postid-4076 .sd-insight__fg-corner--tl,
body.postid-4624 .sd-insight__fg-corner--tl { top: -80px; left: -100px; width: 620px; }
body.postid-4072 .sd-insight__fg-corner--br, body.postid-4080 .sd-insight__fg-corner--br, body.postid-4076 .sd-insight__fg-corner--br,
body.postid-4624 .sd-insight__fg-corner--br { bottom: -80px; right: -100px; width: 620px; }
@media (max-width: 980px) {
  body.postid-4072 .sd-insight__fg-corner--tl, body.postid-4080 .sd-insight__fg-corner--tl, body.postid-4076 .sd-insight__fg-corner--tl,
body.postid-4624 .sd-insight__fg-corner--tl { width: 460px; top: -60px; left: -70px; }
  body.postid-4072 .sd-insight__fg-corner--br, body.postid-4080 .sd-insight__fg-corner--br, body.postid-4076 .sd-insight__fg-corner--br,
body.postid-4624 .sd-insight__fg-corner--br { width: 460px; bottom: -60px; right: -70px; }
}
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__fg-corner--tl, body.postid-4080 .sd-insight__fg-corner--tl, body.postid-4076 .sd-insight__fg-corner--tl,
body.postid-4624 .sd-insight__fg-corner--tl { width: 320px; top: -30px; left: -50px; }
  body.postid-4072 .sd-insight__fg-corner--br, body.postid-4080 .sd-insight__fg-corner--br, body.postid-4076 .sd-insight__fg-corner--br,
body.postid-4624 .sd-insight__fg-corner--br { width: 320px; bottom: -30px; right: -50px; }
}

/* CROSSHAIR PLUS MARKS — absolute spans positioned by percentage,
   responsive at any viewport. ~20-45% opacity per design spec. */
body.postid-4072 .sd-insight__fg-annotations, body.postid-4080 .sd-insight__fg-annotations, body.postid-4076 .sd-insight__fg-annotations,
responsive at any viewport. ~20-45% opacity per design spec. */
body.postid-4624 .sd-insight__fg-annotations {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
body.postid-4072 .sd-insight__fg-cross, body.postid-4080 .sd-insight__fg-cross, body.postid-4076 .sd-insight__fg-cross,
body.postid-4624 .sd-insight__fg-cross {
  position: absolute;
  width: 11px; height: 11px;
  opacity: 0.42;
}
body.postid-4072 .sd-insight__fg-cross::before, body.postid-4080 .sd-insight__fg-cross::before, body.postid-4076 .sd-insight__fg-cross::before,
body.postid-4072 .sd-insight__fg-cross::after, body.postid-4080 .sd-insight__fg-cross::after, body.postid-4076 .sd-insight__fg-cross::after,
body.postid-4624 .sd-insight__fg-cross::before,
body.postid-4624 .sd-insight__fg-cross::after {
  content: ''; position: absolute; background: #FFF6E8;
}
body.postid-4072 .sd-insight__fg-cross::before, body.postid-4080 .sd-insight__fg-cross::before, body.postid-4076 .sd-insight__fg-cross::before,
body.postid-4624 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4072 .sd-insight__fg-cross::after, body.postid-4080 .sd-insight__fg-cross::after, body.postid-4076 .sd-insight__fg-cross::after,
body.postid-4624 .sd-insight__fg-cross::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4072 .sd-insight__fg-cross--1, body.postid-4080 .sd-insight__fg-cross--1, body.postid-4076 .sd-insight__fg-cross--1,
body.postid-4624 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4072 .sd-insight__fg-cross--2, body.postid-4080 .sd-insight__fg-cross--2, body.postid-4076 .sd-insight__fg-cross--2,
body.postid-4624 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4072 .sd-insight__fg-cross--3, body.postid-4080 .sd-insight__fg-cross--3, body.postid-4076 .sd-insight__fg-cross--3,
body.postid-4624 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4072 .sd-insight__fg-cross--4, body.postid-4080 .sd-insight__fg-cross--4, body.postid-4076 .sd-insight__fg-cross--4,
body.postid-4624 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4072 .sd-insight__fg-cross--5, body.postid-4080 .sd-insight__fg-cross--5, body.postid-4076 .sd-insight__fg-cross--5,
body.postid-4624 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4072 .sd-insight__fg-cross--6, body.postid-4080 .sd-insight__fg-cross--6, body.postid-4076 .sd-insight__fg-cross--6,
body.postid-4624 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4072 .sd-insight__fg-cross--7, body.postid-4080 .sd-insight__fg-cross--7, body.postid-4076 .sd-insight__fg-cross--7,
body.postid-4624 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4072 .sd-insight__fg-cross--8, body.postid-4080 .sd-insight__fg-cross--8, body.postid-4076 .sd-insight__fg-cross--8,
body.postid-4624 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4072 .sd-insight__fg-cross--9, body.postid-4080 .sd-insight__fg-cross--9, body.postid-4076 .sd-insight__fg-cross--9,
body.postid-4624 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* COORDS CLUSTER (right side, mono cream low-opacity) */
body.postid-4072 .sd-insight__fg-coords, body.postid-4080 .sd-insight__fg-coords, body.postid-4076 .sd-insight__fg-coords,
/* COORDS CLUSTER (right side, mono cream low-opacity) */
body.postid-4624 .sd-insight__fg-coords {
  position: absolute; right: 32px; top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: #FFF6E8; opacity: 0.55;
  text-align: right; line-height: 2;
}

/* DEPTH TICK RULER (right edge, vertical) */
body.postid-4072 .sd-insight__fg-tick-ruler, body.postid-4080 .sd-insight__fg-tick-ruler, body.postid-4076 .sd-insight__fg-tick-ruler,
/* DEPTH TICK RULER (right edge, vertical) */
body.postid-4624 .sd-insight__fg-tick-ruler {
  position: absolute; right: 16px; top: 96px; bottom: 96px; width: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0.35;
}
body.postid-4072 .sd-insight__fg-tick-ruler i, body.postid-4080 .sd-insight__fg-tick-ruler i, body.postid-4076 .sd-insight__fg-tick-ruler i,
body.postid-4624 .sd-insight__fg-tick-ruler i {
  display: block; height: 1px; background: #FFF6E8;
  width: 4px; align-self: flex-end;
}
body.postid-4072 .sd-insight__fg-tick-ruler i:nth-child(5n+1), body.postid-4080 .sd-insight__fg-tick-ruler i:nth-child(5n+1), body.postid-4076 .sd-insight__fg-tick-ruler i:nth-child(5n+1),
body.postid-4624 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* CORNER LABELS (top-left + top-right) */
body.postid-4072 .sd-insight__fg-corner-tl, body.postid-4080 .sd-insight__fg-corner-tl, body.postid-4076 .sd-insight__fg-corner-tl,
body.postid-4072 .sd-insight__fg-corner-tr, body.postid-4080 .sd-insight__fg-corner-tr, body.postid-4076 .sd-insight__fg-corner-tr,
/* CORNER LABELS (top-left + top-right) */
body.postid-4624 .sd-insight__fg-corner-tl,
body.postid-4624 .sd-insight__fg-corner-tr {
  position: absolute; top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.22em;
  color: #FFF6E8; opacity: 0.55;
  line-height: 1.7; text-transform: uppercase;
  z-index: 3;
}
body.postid-4072 .sd-insight__fg-corner-tl, body.postid-4080 .sd-insight__fg-corner-tl, body.postid-4076 .sd-insight__fg-corner-tl,
body.postid-4624 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4072 .sd-insight__fg-corner-tr, body.postid-4080 .sd-insight__fg-corner-tr, body.postid-4076 .sd-insight__fg-corner-tr,
body.postid-4624 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__fg-coords, body.postid-4080 .sd-insight__fg-coords, body.postid-4076 .sd-insight__fg-coords,
  body.postid-4072 .sd-insight__fg-tick-ruler, body.postid-4080 .sd-insight__fg-tick-ruler, body.postid-4076 .sd-insight__fg-tick-ruler,
  body.postid-4072 .sd-insight__fg-corner-tl, body.postid-4080 .sd-insight__fg-corner-tl, body.postid-4076 .sd-insight__fg-corner-tl,
  body.postid-4072 .sd-insight__fg-corner-tr, body.postid-4080 .sd-insight__fg-corner-tr, body.postid-4076 .sd-insight__fg-corner-tr,
body.postid-4624 .sd-insight__fg-coords,
body.postid-4624 .sd-insight__fg-tick-ruler,
body.postid-4624 .sd-insight__fg-corner-tl,
body.postid-4624 .sd-insight__fg-corner-tr { display: none; }
}

/* HERO INNER CONTENT */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
/* HERO INNER CONTENT */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative; z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
}

/* EYEBROW: "FIELD GUIDE NN" with leading hairline */
body.postid-4072 .sd-insight__eyebrow--fieldguide, body.postid-4080 .sd-insight__eyebrow--fieldguide, body.postid-4076 .sd-insight__eyebrow--fieldguide,
/* EYEBROW: "FIELD GUIDE NN" with leading hairline */
body.postid-4624 .sd-insight__eyebrow--fieldguide {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #FFF6E8; opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4072 .sd-insight__eyebrow--fieldguide::before, body.postid-4080 .sd-insight__eyebrow--fieldguide::before, body.postid-4076 .sd-insight__eyebrow--fieldguide::before,
body.postid-4624 .sd-insight__eyebrow--fieldguide::before {
  content: ''; width: 26px; height: 1px; background: #F6C893; opacity: 0.9;
}

/* TITLE: DM Sans 700 + last-words italic Bodoni gold-sand */
body.postid-4072 .sd-insight__title--fieldguide, body.postid-4080 .sd-insight__title--fieldguide, body.postid-4076 .sd-insight__title--fieldguide,
/* TITLE: DM Sans 700 + last-words italic Bodoni gold-sand */
body.postid-4624 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4072 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4080 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4076 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4072 .sd-insight__title--fieldguide em, body.postid-4080 .sd-insight__title--fieldguide em, body.postid-4076 .sd-insight__title--fieldguide em,
body.postid-4624 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4624 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic; font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* SUBHEAD */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__subhead, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__subhead, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__subhead,
/* SUBHEAD */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* HERO META: pill row (chip + byline) */
body.postid-4072 .sd-insight__hero-meta--fieldguide, body.postid-4080 .sd-insight__hero-meta--fieldguide, body.postid-4076 .sd-insight__hero-meta--fieldguide,
/* HERO META: pill row (chip + byline) */
body.postid-4624 .sd-insight__hero-meta--fieldguide {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4072 .sd-insight__fg-chip, body.postid-4080 .sd-insight__fg-chip, body.postid-4076 .sd-insight__fg-chip,
body.postid-4624 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.20em;
  color: #FFF6E8; opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4072 .sd-insight__byline--fieldguide, body.postid-4080 .sd-insight__byline--fieldguide, body.postid-4076 .sd-insight__byline--fieldguide,
body.postid-4624 .sd-insight__byline--fieldguide {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-meta, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-meta, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-meta,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px; line-height: 1.45;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-author, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-author, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-author,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sub, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sub, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sub,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sub time, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sub time, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sub time,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sep, body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sep, body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sep,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* IN THIS GUIDE counter — keep prior right-side placement, override
   only the position math so it lands cleanly above the new layout. */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__fg-counter, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__fg-counter, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__fg-counter,
override
   only the position math so it lands cleanly above the new layout. */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}

/* MOBILE TIGHTENING */
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
body.postid-4624 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4072 .sd-insight__title--fieldguide, body.postid-4080 .sd-insight__title--fieldguide, body.postid-4076 .sd-insight__title--fieldguide,
body.postid-4624 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__fg-counter, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__fg-counter, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__fg-counter,
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}

/* End FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026). */


/* ============================================================
   FIELD-GUIDE FINAL CTA — wave divider + visual nudges
   Gated to body.postid-4072. Sources of truth:
     - design: ~/Downloads/scubadev-fieldguide-hero.html L5448-5640
     - markup: single-insight.php (.sd-insight__cta--fieldguide)
   Only the wave-divider + padding-top adjustments are layered here.
   The coral button + cream text + 999px pill already match the design
   via the base .sd-insight__cta-btn rule (no override needed).
   ============================================================ */

/* Allow the cream wave + coral pulses to bleed past the section edge so the
   layered SVG sits flush with the section above instead of being clipped.
   The base .sd-insight__cta uses overflow:hidden + isolation:isolate; the
   field-guide variant keeps isolation but opens overflow at the top so the
   wave can crest down INTO the navy. */
body.postid-4072 .sd-insight__cta--fieldguide, body.postid-4080 .sd-insight__cta--fieldguide, body.postid-4076 .sd-insight__cta--fieldguide, body.postid-4062 .sd-insight__cta--fieldguide,
/* End FIELD-GUIDE HERO — CANONICAL REWRITE (Apr 27 2026). */


/* ============================================================
   FIELD-GUIDE FINAL CTA — wave divider + visual nudges
   Gated to body.postid-4624. Sources of truth:
     - design: ~/Downloads/scubadev-fieldguide-hero.html L5448-5640
     - markup: single-insight.php (.sd-insight__cta--fieldguide)
   Only the wave-divider + padding-top adjustments are layered here.
   The coral button + cream text + 999px pill already match the design
   via the base .sd-insight__cta-btn rule (no override needed).
   ============================================================ */

/* Allow the cream wave + coral pulses to bleed past the section edge so the
   layered SVG sits flush with the section above instead of being clipped.
   The base .sd-insight__cta uses overflow:hidden + isolation:isolate; the
   field-guide variant keeps isolation but opens overflow at the top so the
   wave can crest down INTO the navy. */
body.postid-4624 .sd-insight__cta--fieldguide {
  overflow: visible;
  /* Bump padding-top so the layered wave (clamp 70-150px) doesn't crash into
     the eyebrow / heading. Matches design L5454. */
  padding-top: clamp(140px, 14vw, 180px);
}

/* Wave divider — five-path layered SVG positioned at the top of the navy CTA
   band. Cream waves crest DOWN into navy via transform: scaleY(-1). z-index
   sits above the .sd-insight__cta-pulse coral wash so the wave reads cleanly
   while the coral still bleeds up onto the wave's negative space.

   z-index ladder for the field-guide CTA (matches base CTA + adds wave):
     .sd-insight__cta              z-index 2 (above sibling divider-slot)
     .sd-insight__cta-pulse        z-index 2 (coral wash)
     .sd-insight__cta::before      z-index 2 (coral pulse pseudo)
     .sd-insight__cta-wave         z-index 3 (wave silhouette above pulses)
     .sd-insight__cta-inner        z-index 4 (compass/eyebrow/title/btn)
*/
body.postid-4072 .sd-insight__cta-wave, body.postid-4080 .sd-insight__cta-wave, body.postid-4076 .sd-insight__cta-wave, body.postid-4062 .sd-insight__cta-wave,
/* Wave divider — five-path layered SVG positioned at the top of the navy CTA
   band. Cream waves crest DOWN into navy via transform: scaleY(-1). z-index
   sits above the .sd-insight__cta-pulse coral wash so the wave reads cleanly
   while the coral still bleeds up onto the wave's negative space.

   z-index ladder for the field-guide CTA (matches base CTA + adds wave):
     .sd-insight__cta              z-index 2 (above sibling divider-slot)
     .sd-insight__cta-pulse        z-index 2 (coral wash)
     .sd-insight__cta::before      z-index 2 (coral pulse pseudo)
     .sd-insight__cta-wave         z-index 3 (wave silhouette above pulses)
     .sd-insight__cta-inner        z-index 4 (compass/eyebrow/title/btn)
*/
body.postid-4624 .sd-insight__cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 10vw, 150px);
  z-index: 3;
  pointer-events: none;
}
body.postid-4072 .sd-insight__cta-wave svg, body.postid-4080 .sd-insight__cta-wave svg, body.postid-4076 .sd-insight__cta-wave svg, body.postid-4062 .sd-insight__cta-wave svg,
body.postid-4624 .sd-insight__cta-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--sd-cream); /* path fill via currentColor */
  transform: scaleY(-1);
  transform-origin: center;
}
body.postid-4072 .sd-insight__cta-wave svg path, body.postid-4080 .sd-insight__cta-wave svg path, body.postid-4076 .sd-insight__cta-wave svg path, body.postid-4062 .sd-insight__cta-wave svg path,
body.postid-4624 .sd-insight__cta-wave svg path {
  fill: currentColor;
}

/* Hoist the inner content above the new wave so the CTA copy never gets
   covered by the silhouette on narrow viewports. */
body.postid-4072 .sd-insight__cta--fieldguide .sd-insight__cta-inner, body.postid-4080 .sd-insight__cta--fieldguide .sd-insight__cta-inner, body.postid-4076 .sd-insight__cta--fieldguide .sd-insight__cta-inner, body.postid-4062 .sd-insight__cta--fieldguide .sd-insight__cta-inner,
/* Hoist the inner content above the new wave so the CTA copy never gets
   covered by the silhouette on narrow viewports. */
body.postid-4624 .sd-insight__cta--fieldguide .sd-insight__cta-inner {
  position: relative;
  z-index: 4;
}

/* Mobile: shrink the wave-related top padding so the CTA stays compact and
   the wave still has breathing room above the eyebrow. */
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__cta--fieldguide, body.postid-4080 .sd-insight__cta--fieldguide, body.postid-4076 .sd-insight__cta--fieldguide, body.postid-4062 .sd-insight__cta--fieldguide,
body.postid-4624 .sd-insight__cta--fieldguide {
    padding-top: clamp(96px, 18vw, 130px);
  }
  body.postid-4072 .sd-insight__cta-wave, body.postid-4080 .sd-insight__cta-wave, body.postid-4076 .sd-insight__cta-wave, body.postid-4062 .sd-insight__cta-wave,
body.postid-4624 .sd-insight__cta-wave {
    height: clamp(56px, 14vw, 110px);
  }
}
/* End FIELD-GUIDE FINAL CTA. */


body.postid-4072 .sd-insight__hero--fieldguide, body.postid-4080 .sd-insight__hero--fieldguide, body.postid-4076 .sd-insight__hero--fieldguide,
/* End FIELD-GUIDE FINAL CTA. */


body.postid-4624 .sd-insight__hero--fieldguide {
  background-position: center 42%;
}
body.postid-4068 .sd-insight__hero--fieldguide {
  background-position: center 42%;
}
body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  padding-top: 50px !important;
}
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  padding-top: 50px !important;
}
@media (max-width: 760px) {
  body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
    padding-top: 80px !important;
  }
}
@media (max-width: 760px) {
  body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner, body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
    padding-top: 80px !important;
  }
}

/* AI Automation section 5 list: keep the common-agents rows in the same
   type scale as the other field-guide bullet sections. */
body.postid-4072 .sd-insight__section--what-we-run .sd-insight__what-we-run-title, body.postid-4080 .sd-insight__section--what-we-run .sd-insight__what-we-run-title, body.postid-4076 .sd-insight__section--what-we-run .sd-insight__what-we-run-title,
/* AI Automation section 5 list: keep the common-agents rows in the same
   type scale as the other field-guide bullet sections. */
body.postid-4624 .sd-insight__section--what-we-run .sd-insight__what-we-run-title {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
body.postid-4072 .sd-insight__section--what-we-run .sd-insight__what-we-run-body, body.postid-4080 .sd-insight__section--what-we-run .sd-insight__what-we-run-body, body.postid-4076 .sd-insight__section--what-we-run .sd-insight__what-we-run-body,
body.postid-4624 .sd-insight__section--what-we-run .sd-insight__what-we-run-body {
  font-size: 15px !important;
  line-height: 1.65 !important;
}
@media (max-width: 760px) {
  body.postid-4072 .sd-insight__section--what-we-run .sd-insight__what-we-run-title, body.postid-4080 .sd-insight__section--what-we-run .sd-insight__what-we-run-title, body.postid-4076 .sd-insight__section--what-we-run .sd-insight__what-we-run-title,
body.postid-4624 .sd-insight__section--what-we-run .sd-insight__what-we-run-title {
    font-size: 12.5px !important;
  }
  body.postid-4072 .sd-insight__section--what-we-run .sd-insight__what-we-run-body, body.postid-4080 .sd-insight__section--what-we-run .sd-insight__what-we-run-body, body.postid-4076 .sd-insight__section--what-we-run .sd-insight__what-we-run-body,
body.postid-4624 .sd-insight__section--what-we-run .sd-insight__what-we-run-body {
    font-size: 14.5px !important;
  }
}

/* ============================================================
   FIELD-GUIDE HERO PORT (May 7 2026)
   Ports the canonical post-4068 hero rules to posts 4072 and 4076.
   Prior CSS contained comment-broken selector lists that meant the
   master `min-height` / `padding` / `isolation` / `overflow` rules
   never reached 4072 and 4076 reliably across browsers, leaving
   their heroes uncontrolled in size and missing the navy gradient
   overlay. These rules are clean, brand-palette only, no #fff,
   no #000, no em-dashes, no emojis.
   ============================================================ */

/* HERO CONTAINER -- mirror canonical 4068 rule */
body.postid-4072 .sd-insight__hero--fieldguide,
body.postid-4076 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Navy overlay above the photo, below content */
body.postid-4072 .sd-insight__fg-overlay,
body.postid-4076 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* Faint cream grid texture */
body.postid-4072 .sd-insight__fg-grid,
body.postid-4076 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* Hide the legacy fieldguide bg + overlay + scene (markup leaves them empty) */
body.postid-4072 .sd-insight__hero-bg--fieldguide,
body.postid-4076 .sd-insight__hero-bg--fieldguide,
body.postid-4072 .sd-insight__hero-overlay--fieldguide,
body.postid-4076 .sd-insight__hero-overlay--fieldguide,
body.postid-4072 .sd-insight__fg-scene,
body.postid-4076 .sd-insight__fg-scene {
  display: none !important;
}

/* HERO INNER CONTENT */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__hero-inner,
body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
  padding-top: 50px;
}

/* CORNER MAP PLATES */
body.postid-4072 .sd-insight__fg-corner,
body.postid-4076 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4072 .sd-insight__fg-corner svg,
body.postid-4076 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4072 .sd-insight__fg-corner--tl,
body.postid-4076 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4072 .sd-insight__fg-corner--br,
body.postid-4076 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
@media (max-width: 980px) {
  body.postid-4072 .sd-insight__fg-corner--tl,
  body.postid-4076 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4072 .sd-insight__fg-corner--br,
  body.postid-4076 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__fg-corner--tl,
  body.postid-4076 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4072 .sd-insight__fg-corner--br,
  body.postid-4076 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
}

/* Crosshair plus marks */
body.postid-4072 .sd-insight__fg-annotations,
body.postid-4076 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4072 .sd-insight__fg-cross,
body.postid-4076 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4072 .sd-insight__fg-cross::before,
body.postid-4072 .sd-insight__fg-cross::after,
body.postid-4076 .sd-insight__fg-cross::before,
body.postid-4076 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4072 .sd-insight__fg-cross::before,
body.postid-4076 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4072 .sd-insight__fg-cross::after,
body.postid-4076 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4072 .sd-insight__fg-cross--1, body.postid-4076 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4072 .sd-insight__fg-cross--2, body.postid-4076 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4072 .sd-insight__fg-cross--3, body.postid-4076 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4072 .sd-insight__fg-cross--4, body.postid-4076 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4072 .sd-insight__fg-cross--5, body.postid-4076 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4072 .sd-insight__fg-cross--6, body.postid-4076 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4072 .sd-insight__fg-cross--7, body.postid-4076 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4072 .sd-insight__fg-cross--8, body.postid-4076 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4072 .sd-insight__fg-cross--9, body.postid-4076 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* Coords cluster */
body.postid-4072 .sd-insight__fg-coords,
body.postid-4076 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}

/* Tick ruler */
body.postid-4072 .sd-insight__fg-tick-ruler,
body.postid-4076 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4072 .sd-insight__fg-tick-ruler i,
body.postid-4076 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4072 .sd-insight__fg-tick-ruler i:nth-child(5n+1),
body.postid-4076 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* Corner labels */
body.postid-4072 .sd-insight__fg-corner-tl,
body.postid-4072 .sd-insight__fg-corner-tr,
body.postid-4076 .sd-insight__fg-corner-tl,
body.postid-4076 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4072 .sd-insight__fg-corner-tl, body.postid-4076 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4072 .sd-insight__fg-corner-tr, body.postid-4076 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__fg-coords,
  body.postid-4072 .sd-insight__fg-tick-ruler,
  body.postid-4072 .sd-insight__fg-corner-tl,
  body.postid-4072 .sd-insight__fg-corner-tr,
  body.postid-4076 .sd-insight__fg-coords,
  body.postid-4076 .sd-insight__fg-tick-ruler,
  body.postid-4076 .sd-insight__fg-corner-tl,
  body.postid-4076 .sd-insight__fg-corner-tr { display: none; }
}

/* Eyebrow */
body.postid-4072 .sd-insight__eyebrow--fieldguide,
body.postid-4076 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4072 .sd-insight__eyebrow--fieldguide::before,
body.postid-4076 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}

/* Title */
body.postid-4072 .sd-insight__title--fieldguide,
body.postid-4076 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4072 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4072 .sd-insight__title--fieldguide em,
body.postid-4076 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4076 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* Subhead */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__subhead,
body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* Hero meta pill row */
body.postid-4072 .sd-insight__hero-meta--fieldguide,
body.postid-4076 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4072 .sd-insight__fg-chip,
body.postid-4076 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4072 .sd-insight__byline--fieldguide,
body.postid-4076 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-meta,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-author,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sub,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sub time,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4072 .sd-insight__byline--fieldguide .sd-insight__byline-sep,
body.postid-4076 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* In this guide counter */
body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__fg-counter,
body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4072 .sd-insight__fg-counter-label,
body.postid-4076 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4072 .sd-insight__fg-counter-value,
body.postid-4076 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4072 .sd-insight__fg-counter-sub,
body.postid-4076 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

/* Mobile tightening */
@media (max-width: 720px) {
  body.postid-4072 .sd-insight__hero--fieldguide,
  body.postid-4076 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4072 .sd-insight__title--fieldguide,
  body.postid-4076 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4072 .sd-insight__hero--fieldguide .sd-insight__fg-counter,
  body.postid-4076 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
/* End FIELD-GUIDE HERO PORT (May 7 2026). */

/* =====================================================================
   ICON SIZE PARITY (May 7 2026) — post 4076 only
   Productized Engineering: when-frac__icon and beats-fulltime__icon
   were rendered too small to show artwork detail. Bring them up to
   match .stat__icon (the "By the Numbers" plates) which are the
   correct scale for the WebP artwork in this batch.

   Scope: body.postid-4076 only. Posts 4068 and 4072 keep their
   original sizes.
   ===================================================================== */
body.postid-4076 .when-frac__icon {
  width: 83px !important;
  height: 83px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #11314A !important;
  border: 1px solid rgba(246, 200, 147, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(246, 200, 147, 0.22),
    0 10px 28px rgba(17, 49, 74, 0.32) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
body.postid-4076 .when-frac__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #11314A;
  pointer-events: none;
}
body.postid-4076 .when-frac__icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  transform: scale(1.24) !important;
  transform-origin: center center !important;
}
body.postid-4076 .when-frac__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

body.postid-4076 .beats-fulltime__icon {
  width: 83px !important;
  height: 83px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #11314A !important;
  border: 1px solid rgba(246, 200, 147, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(246, 200, 147, 0.18),
    0 10px 28px rgba(17, 49, 74, 0.28) !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
body.postid-4076 .beats-fulltime__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #11314A;
  pointer-events: none;
}
body.postid-4076 .beats-fulltime__icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  transform: scale(1.24) !important;
  transform-origin: center center !important;
}
body.postid-4076 .beats-fulltime__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* The beats-fulltime row at desktop is a 3-col grid (.beats-fulltime__num
   is display:none in this template). Widen the icon column from 54px to
   95px so the new 83px plate sits cleanly. Title and body columns keep
   their original ratios. */
body.postid-4076 .beats-fulltime__row {
  grid-template-columns: 95px minmax(200px, 30%) 1fr !important;
}

/* Tablet (matches stats responsive ladder). */
@media (max-width: 900px) {
  body.postid-4076 .when-frac__icon,
  body.postid-4076 .beats-fulltime__icon {
    width: 78px !important;
    height: 78px !important;
  }
  body.postid-4076 .beats-fulltime__row {
    grid-template-columns: 90px minmax(200px, 30%) 1fr !important;
  }
}

/* Stats switches to mobile horizontal layout at 760px with 106px icons.
   Match that scale here. */
@media (max-width: 760px) {
  body.postid-4076 .when-frac__icon,
  body.postid-4076 .beats-fulltime__icon {
    width: 96px !important;
    height: 96px !important;
  }
  body.postid-4076 .beats-fulltime__row {
    grid-template-columns: 110px 1fr !important;
  }
}

/* Single-column mobile. */
@media (max-width: 560px) {
  body.postid-4076 .when-frac__icon,
  body.postid-4076 .beats-fulltime__icon {
    width: 73px !important;
    height: 73px !important;
  }
  body.postid-4076 .beats-fulltime__row {
    grid-template-columns: 86px 1fr !important;
  }
}
/* End ICON SIZE PARITY (May 7 2026). */

/* =====================================================================
   ICON SIZE PARITY EXTENSION (May 8 2026) — post 4076 only
   The "Three cases where subscription pricing breaks" section uses
   .skip-spread__mark (56px / 44px mobile) which the previous May 7
   fix did not cover. Bring those plates up to match the .stat__icon
   ladder (83 / 78 / 96 / 73) so the WebP artwork reads at the same
   scale as the "By the Numbers" plates and the beats-fulltime row.

   Scope: body.postid-4076 only. Other field-guide posts that use
   .skip-spread__mark (4068 scope-of-work, 4072 ai-agents) keep
   their original 56px sizing.
   ===================================================================== */
body.postid-4076 .skip-spread__mark {
  width: 83px !important;
  height: 83px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #11314A !important;
  border: 1px solid rgba(246, 200, 147, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(246, 200, 147, 0.22),
    0 10px 28px rgba(17, 49, 74, 0.32) !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
body.postid-4076 .skip-spread__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #11314A;
  pointer-events: none;
}
body.postid-4076 .skip-spread__mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  transform: scale(1.24) !important;
  transform-origin: center center !important;
}
body.postid-4076 .skip-spread__mark svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* The skip-spread row at desktop is a 2-col grid clamped at 56px.
   Widen the icon column to 95px so the new 83px plate sits cleanly. */
body.postid-4076 .skip-spread__item {
  grid-template-columns: 95px minmax(0, 1fr) !important;
}

/* Tablet — match stats responsive ladder. */
@media (max-width: 900px) {
  body.postid-4076 .skip-spread__mark {
    width: 78px !important;
    height: 78px !important;
  }
  body.postid-4076 .skip-spread__item {
    grid-template-columns: 90px minmax(0, 1fr) !important;
  }
}

/* Stats switches to mobile horizontal layout at 760px with larger icons. */
@media (max-width: 760px) {
  body.postid-4076 .skip-spread__mark {
    width: 96px !important;
    height: 96px !important;
  }
  body.postid-4076 .skip-spread__item {
    grid-template-columns: 110px minmax(0, 1fr) !important;
  }
}

/* Single-column mobile. */
@media (max-width: 560px) {
  body.postid-4076 .skip-spread__mark {
    width: 73px !important;
    height: 73px !important;
  }
  body.postid-4076 .skip-spread__item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }
}

/* =====================================================================
   POST 4624 -- AGENT CARD V2 (May 8 2026)
   15 AI Agents Every Small Team Should Build First.
   Restructure each .sd-agent-inline--v2 card to a 2-column spec block:
     - Left column: 3 facet rows (Effort, Payback, Stack). Each row uses
       an 83px circular navy plate that mirrors the .stat__icon pattern
       on post 4076 (border, double-border, drop shadow). SVG icons
       inherit color via currentColor (cream stroke on navy plate).
     - Right column: full-bleed featured image (.sd-agent-inline__image)
       inherited from the existing markup. Image stretches to fill the
       column at a 4/3 aspect ratio for richer presence than the prior
       16/9 thumb.
   Title + summary sit ABOVE the spec block. Body prose + CTA sit BELOW.
   Brand palette only (no #fff, no #000, no browns).
   Mobile: collapses to single column at 760px.
   Scope: body.postid-4624. Other field-guide posts unaffected.
   ===================================================================== */

/* Card wrapper inherits the existing .sd-agent-inline canvas (cream bg,
   navy border, soft shadow). The --v2 modifier just hangs the new
   spec-block layout off the same article. */
body.postid-4624 .sd-agent-inline--v2 {
  padding: clamp(28px, 2.8vw, 40px) clamp(24px, 2.6vw, 36px);
}

/* SPEC BLOCK: 2-column on desktop, 1-column on mobile. */
body.postid-4624 .sd-agent-spec {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  margin: 18px 0 24px;
}

/* LEFT COLUMN: vertical stack of 3 facet rows. */
body.postid-4624 .sd-agent-spec__facets {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  align-self: center;
}

body.postid-4624 .sd-agent-spec__facet {
  display: grid;
  grid-template-columns: 83px minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.4vw, 18px);
}

/* 83px circular navy plate — mirrors the .stat__icon pattern on 4076.
   Border ring + inner shadow ring + drop shadow. */
body.postid-4624 .sd-agent-spec__icon {
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: #11314A;
  border: 1px solid rgba(246, 200, 147, 0.30);
  box-shadow:
    0 0 0 1px rgba(246, 200, 147, 0.22),
    0 10px 28px rgba(17, 49, 74, 0.32);
  display: inline-grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  color: #FFF6E8; /* svg currentColor inherits */
}
body.postid-4624 .sd-agent-spec__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #11314A;
  pointer-events: none;
}
body.postid-4624 .sd-agent-spec__icon svg {
  position: relative;
  z-index: 1;
  display: block;
}

/* Facet text: monospace label, DM Sans value. */
body.postid-4624 .sd-agent-spec__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.postid-4624 .sd-agent-spec__label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(17, 49, 74, 0.62);
}

body.postid-4624 .sd-agent-spec__value {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  color: #11314A;
  letter-spacing: -0.005em;
}

/* RIGHT COLUMN: image takes full column height. Override the inherited
   .sd-agent-inline__image (which uses 16/9 aspect-ratio + 18px margin)
   to fill the spec column at 4/3 for stronger presence on the page. */
body.postid-4624 .sd-agent-spec__media {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
body.postid-4624 .sd-agent-spec__media .sd-agent-inline__image {
  margin: 0;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(13, 31, 46, 0.10);
}
body.postid-4624 .sd-agent-spec__media .sd-agent-inline__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card-level: ensure dark-band variants of the card still legible. */
body.postid-4624 .sd-insight__section--darkblue .sd-agent-inline--v2 .sd-agent-spec__label,
body.postid-4624 .sd-insight__section--navy .sd-agent-inline--v2 .sd-agent-spec__label,
body.postid-4624 .sd-insight__section--deep .sd-agent-inline--v2 .sd-agent-spec__label {
  color: rgba(17, 49, 74, 0.62);
}
/* (cards switch to cream bg on dark sections via existing rule, so navy
   text inside the card still reads correctly) */

/* CTA: convert "View full idea" button styling to anchor variant.
   The existing .sd-agent-inline__readfull rules already match an <a>;
   here we just nudge the link affordance (underline-on-focus etc.) and
   add an external-link cue. */
body.postid-4624 .sd-agent-inline__readfull[target="_blank"]::before {
  content: "";
  /* slot for an external-link glyph if desired; left empty to avoid
     visual noise next to the existing arrow */
}

/* Title sizing inside v2 cards — bump slightly because the title now
   has more breathing room (no image directly below it). */
body.postid-4624 .sd-agent-inline--v2 .sd-agent-inline__title {
  font-size: clamp(24px, 2.6vw, 30px);
  margin: 8px 0 12px;
}

body.postid-4624 .sd-agent-inline--v2 .sd-agent-inline__summary {
  margin: 0 0 4px;
}

body.postid-4624 .sd-agent-inline--v2 .sd-agent-inline__body {
  margin-top: 4px;
}

/* TABLET (matches stats responsive ladder on 4076). */
@media (max-width: 980px) {
  body.postid-4624 .sd-agent-spec {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
  body.postid-4624 .sd-agent-spec__icon {
    width: 78px;
    height: 78px;
  }
  body.postid-4624 .sd-agent-spec__facet {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

/* MOBILE: collapse to single column. Image stacks ABOVE icon list so the
   visual hits first, then the spec rows clarify what the agent costs. */
@media (max-width: 760px) {
  body.postid-4624 .sd-agent-spec {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.postid-4624 .sd-agent-spec__media {
    order: 1;
  }
  body.postid-4624 .sd-agent-spec__facets {
    order: 2;
    align-self: stretch;
  }
  body.postid-4624 .sd-agent-spec__icon {
    width: 73px;
    height: 73px;
  }
  body.postid-4624 .sd-agent-spec__facet {
    grid-template-columns: 73px minmax(0, 1fr);
    gap: 14px;
  }
  body.postid-4624 .sd-agent-spec__media .sd-agent-inline__image {
    aspect-ratio: 16 / 9;
  }
}

/* SMALL MOBILE (single column, icon stays visible). */
@media (max-width: 480px) {
  body.postid-4624 .sd-agent-inline--v2 {
    padding: 22px 18px;
  }
  body.postid-4624 .sd-agent-spec__value {
    font-size: 14.5px;
  }
}
/* End POST 4624 -- AGENT CARD V2. */

/* =====================================================================
   POST 4624 -- AGENT SPEC BLOCK (May 8 2026, retarget)
   Earlier May 8 attempt scoped rules to .sd-agent-inline--v2 (a class
   that lives in the post body but is invisible at render time because
   the actual page is rendered by single-insight-fieldguide-ai-agents.php
   which emits .sd-insight__what-we-run-row instead). Retarget all spec
   selectors to .sd-insight__what-we-run-row > div > .sd-agent-spec so
   they actually take effect against the live DOM.

   Section context: dark navy band (.sd-insight__section--showcase).
   Text colors must be cream / sand, not navy. Image fills the right
   column at 4/3. Facet text shows label (caps, sand) + value (cream).
   ===================================================================== */

/* SPEC BLOCK: 2-column on desktop, 1-column on mobile.
   Lives inside the rendered <div> child of .sd-insight__what-we-run-row. */
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  margin: 14px 0 18px;
}

/* LEFT: vertical stack of 3 facet rows. */
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facets {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  align-self: center;
}

body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facet {
  display: grid;
  grid-template-columns: 83px minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.4vw, 18px);
}

/* 83px circular navy plate. Mirrors the .stat__icon pattern from 4076.
   Navy plate sits on navy band -> add a light-sand outer ring so the
   plate edge is visible against the dark section bg. */
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon {
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: #11314A;
  border: 1px solid rgba(246, 200, 147, 0.42);
  box-shadow:
    0 0 0 1px rgba(246, 200, 147, 0.30),
    0 10px 28px rgba(7, 19, 30, 0.42);
  display: inline-grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  color: #FFF6E8; /* SVG currentColor -> cream */
}
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #11314A;
  pointer-events: none;
}
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon svg {
  position: relative;
  z-index: 1;
  display: block;
}

/* Facet text column: monospace caps label, DM Sans value. */
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F6C893; /* golden sand for caps label, matches FIELD GUIDE eyebrow */
  opacity: 0.85;
}

body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__value {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  color: #FFF6E8; /* cream on the navy band */
  letter-spacing: -0.005em;
}

/* RIGHT: featured image fills the column at 4/3.
   The figure has zero margins so it bleeds to the column edges. */
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__media {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(246, 200, 147, 0.18);
  background: rgba(7, 19, 30, 0.35);
  align-self: stretch;
}
body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Tablet (matches stats responsive ladder on 4076). */
@media (max-width: 980px) {
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr);
    gap: 22px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon {
    width: 78px;
    height: 78px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facet {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

/* Mobile: collapse to single column. Image first, facets second. */
@media (max-width: 760px) {
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__media {
    order: 1;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facets {
    order: 2;
    align-self: stretch;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon {
    width: 73px;
    height: 73px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facet {
    grid-template-columns: 73px minmax(0, 1fr);
    gap: 14px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__media img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__icon {
    width: 64px;
    height: 64px;
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__facet {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  body.postid-4624 .sd-insight__what-we-run-row .sd-agent-spec__value {
    font-size: 14.5px;
  }
}
/* End POST 4624 -- AGENT SPEC BLOCK (retarget). */


/* ============================================================
   FIELD-GUIDE HERO PORT FOR POST 4624 (May 8 2026)
   Hero rules for post 4624 (15 AI Agents, AGENT MAP).
   Mirrors the May 7 2026 port for posts 4072 and 4076.
   Post 4624 was missing from that port, leaving its hero
   uncontrolled in size with the orchestrator-reef featured
   image showing through unfiltered. The legacy block at
   lines 6610-6700 contains comment-leakage syntax errors
   that drop fg-overlay, fg-corner, fg-annotations rules
   for 4624. This append-only block at end of file wins
   the cascade and restores the canonical underwater hero.
   Brand-palette only, no #fff, no #000, circular icons.
   ============================================================ */
/* HERO CONTAINER -- mirror canonical 4068 rule */
body.postid-4624 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Navy overlay above the photo, below content */
body.postid-4624 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* Faint cream grid texture */
body.postid-4624 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* Hide the legacy fieldguide bg + overlay + scene (markup leaves them empty) */
body.postid-4624 .sd-insight__hero-bg--fieldguide,
body.postid-4624 .sd-insight__hero-bg--fieldguide,
body.postid-4624 .sd-insight__hero-overlay--fieldguide,
body.postid-4624 .sd-insight__hero-overlay--fieldguide,
body.postid-4624 .sd-insight__fg-scene {
  display: none !important;
}

/* HERO INNER CONTENT */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
  padding-top: 50px;
}

/* CORNER MAP PLATES */
body.postid-4624 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4624 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4624 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4624 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
@media (max-width: 980px) {
  body.postid-4624 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4624 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4624 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4624 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
}

/* Crosshair plus marks */
body.postid-4624 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4624 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4624 .sd-insight__fg-cross::before,
body.postid-4624 .sd-insight__fg-cross::after,
body.postid-4624 .sd-insight__fg-cross::before,
body.postid-4624 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4624 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4624 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4624 .sd-insight__fg-cross--1, body.postid-4624 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4624 .sd-insight__fg-cross--2, body.postid-4624 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4624 .sd-insight__fg-cross--3, body.postid-4624 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4624 .sd-insight__fg-cross--4, body.postid-4624 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4624 .sd-insight__fg-cross--5, body.postid-4624 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4624 .sd-insight__fg-cross--6, body.postid-4624 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4624 .sd-insight__fg-cross--7, body.postid-4624 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4624 .sd-insight__fg-cross--8, body.postid-4624 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4624 .sd-insight__fg-cross--9, body.postid-4624 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* Coords cluster */
body.postid-4624 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}

/* Tick ruler */
body.postid-4624 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4624 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4624 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* Corner labels */
body.postid-4624 .sd-insight__fg-corner-tl,
body.postid-4624 .sd-insight__fg-corner-tr,
body.postid-4624 .sd-insight__fg-corner-tl,
body.postid-4624 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4624 .sd-insight__fg-corner-tl, body.postid-4624 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4624 .sd-insight__fg-corner-tr, body.postid-4624 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4624 .sd-insight__fg-coords,
  body.postid-4624 .sd-insight__fg-tick-ruler,
  body.postid-4624 .sd-insight__fg-corner-tl,
  body.postid-4624 .sd-insight__fg-corner-tr,
  body.postid-4624 .sd-insight__fg-coords,
  body.postid-4624 .sd-insight__fg-tick-ruler,
  body.postid-4624 .sd-insight__fg-corner-tl,
  body.postid-4624 .sd-insight__fg-corner-tr { display: none; }
}

/* Eyebrow */
body.postid-4624 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4624 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}

/* Title */
body.postid-4624 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4624 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4624 .sd-insight__title--fieldguide em,
body.postid-4624 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4624 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* Subhead */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* Hero meta pill row */
body.postid-4624 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4624 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4624 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4624 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* In this guide counter */
body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4624 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4624 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4624 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

/* Mobile tightening */
@media (max-width: 720px) {
  body.postid-4624 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4624 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4624 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
/* End FIELD-GUIDE HERO PORT (May 7 2026). */

/* End FIELD-GUIDE HERO PORT FOR POST 4624 (May 8 2026). */


/* ============================================================
   FIELD-GUIDE HERO PORT FOR POST 4080 (May 8 2026)
   Hero rules for post 4080 (Scope of Work Template for Software Projects).
   Mirrors the canonical 4068 rules and the May 8 2026 port for 4624.
   Post 4080 was entangled in the multi-line selector list at
   lines 6140-6322 which contains comment-tail syntax errors
   that silently drop fg-overlay, fg-corner, fg-annotations
   rules for 4080. This append-only block at end of file wins
   
   Document order wins. No !important.
   
   Brand-palette only, no #fff, no #000, circular icons.
   ============================================================ */
/* HERO CONTAINER -- mirror canonical 4068 rule */
body.postid-4080 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Navy overlay above the photo, below content */
body.postid-4080 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* Faint cream grid texture */
body.postid-4080 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* Hide the legacy fieldguide bg + overlay + scene (markup leaves them empty) */
body.postid-4080 .sd-insight__hero-bg--fieldguide,
body.postid-4080 .sd-insight__hero-bg--fieldguide,
body.postid-4080 .sd-insight__hero-overlay--fieldguide,
body.postid-4080 .sd-insight__hero-overlay--fieldguide,
body.postid-4080 .sd-insight__fg-scene {
  display: none !important;
}

/* HERO INNER CONTENT */
body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
  padding-top: 50px;
}

/* CORNER MAP PLATES */
body.postid-4080 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4080 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4080 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4080 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
@media (max-width: 980px) {
  body.postid-4080 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4080 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4080 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4080 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
}

/* Crosshair plus marks */
body.postid-4080 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4080 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4080 .sd-insight__fg-cross::before,
body.postid-4080 .sd-insight__fg-cross::after,
body.postid-4080 .sd-insight__fg-cross::before,
body.postid-4080 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4080 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4080 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4080 .sd-insight__fg-cross--1, body.postid-4080 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4080 .sd-insight__fg-cross--2, body.postid-4080 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4080 .sd-insight__fg-cross--3, body.postid-4080 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4080 .sd-insight__fg-cross--4, body.postid-4080 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4080 .sd-insight__fg-cross--5, body.postid-4080 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4080 .sd-insight__fg-cross--6, body.postid-4080 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4080 .sd-insight__fg-cross--7, body.postid-4080 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4080 .sd-insight__fg-cross--8, body.postid-4080 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4080 .sd-insight__fg-cross--9, body.postid-4080 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* Coords cluster */
body.postid-4080 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}

/* Tick ruler */
body.postid-4080 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4080 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4080 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* Corner labels */
body.postid-4080 .sd-insight__fg-corner-tl,
body.postid-4080 .sd-insight__fg-corner-tr,
body.postid-4080 .sd-insight__fg-corner-tl,
body.postid-4080 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4080 .sd-insight__fg-corner-tl, body.postid-4080 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4080 .sd-insight__fg-corner-tr, body.postid-4080 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4080 .sd-insight__fg-coords,
  body.postid-4080 .sd-insight__fg-tick-ruler,
  body.postid-4080 .sd-insight__fg-corner-tl,
  body.postid-4080 .sd-insight__fg-corner-tr,
  body.postid-4080 .sd-insight__fg-coords,
  body.postid-4080 .sd-insight__fg-tick-ruler,
  body.postid-4080 .sd-insight__fg-corner-tl,
  body.postid-4080 .sd-insight__fg-corner-tr { display: none; }
}

/* Eyebrow */
body.postid-4080 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4080 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}

/* Title */
body.postid-4080 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4080 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4080 .sd-insight__title--fieldguide em,
body.postid-4080 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4080 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* Subhead */
body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* Hero meta pill row */
body.postid-4080 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4080 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4080 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4080 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* In this guide counter */
body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4080 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4080 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4080 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

/* Mobile tightening */
@media (max-width: 720px) {
  body.postid-4080 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4080 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4080 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
/* End FIELD-GUIDE HERO PORT (May 7 2026). */

/* End FIELD-GUIDE HERO PORT FOR POST 4080 (May 8 2026). */


/* ============================================================
   FIELD-GUIDE HERO PORT FOR POST 4062 (May 8 2026)
   Hero rules for post 4062 (Cursor vs Claude Code, IDE PICKER).
   Mirrors the May 7-8 2026 ports for posts 4068, 4072, 4076,
   4624, 4080. Post 4062 was previously routed to the legacy
   single-insight hero (no fieldguide variant) and is now in
   the fieldguide allowlist (single-insight.php line 214).
   Stray comment-tails inside multi-line selector lists in
   earlier rule sets silently kill fg-overlay, fg-corner,
   fg-annotations for affected post IDs. This append-only
   block at end of file wins the cascade and restores the
   canonical underwater hero, brand-palette only, no #fff,
   no #000, circular icons.
   ============================================================ */
/* HERO CONTAINER -- mirror canonical 4068 rule */
body.postid-4062 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Navy overlay above the photo, below content */
body.postid-4062 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* Faint cream grid texture */
body.postid-4062 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* Hide the legacy fieldguide bg + overlay + scene (markup leaves them empty) */
body.postid-4062 .sd-insight__hero-bg--fieldguide,
body.postid-4062 .sd-insight__hero-bg--fieldguide,
body.postid-4062 .sd-insight__hero-overlay--fieldguide,
body.postid-4062 .sd-insight__hero-overlay--fieldguide,
body.postid-4062 .sd-insight__fg-scene {
  display: none !important;
}

/* HERO INNER CONTENT */
body.postid-4062 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
  padding-top: 50px;
}

/* CORNER MAP PLATES */
body.postid-4062 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4062 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4062 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4062 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
@media (max-width: 980px) {
  body.postid-4062 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4062 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4062 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4062 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
}

/* Crosshair plus marks */
body.postid-4062 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4062 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4062 .sd-insight__fg-cross::before,
body.postid-4062 .sd-insight__fg-cross::after,
body.postid-4062 .sd-insight__fg-cross::before,
body.postid-4062 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4062 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4062 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4062 .sd-insight__fg-cross--1, body.postid-4062 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4062 .sd-insight__fg-cross--2, body.postid-4062 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4062 .sd-insight__fg-cross--3, body.postid-4062 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4062 .sd-insight__fg-cross--4, body.postid-4062 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4062 .sd-insight__fg-cross--5, body.postid-4062 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4062 .sd-insight__fg-cross--6, body.postid-4062 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4062 .sd-insight__fg-cross--7, body.postid-4062 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4062 .sd-insight__fg-cross--8, body.postid-4062 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4062 .sd-insight__fg-cross--9, body.postid-4062 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* Coords cluster */
body.postid-4062 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}

/* Tick ruler */
body.postid-4062 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4062 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4062 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* Corner labels */
body.postid-4062 .sd-insight__fg-corner-tl,
body.postid-4062 .sd-insight__fg-corner-tr,
body.postid-4062 .sd-insight__fg-corner-tl,
body.postid-4062 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4062 .sd-insight__fg-corner-tl, body.postid-4062 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4062 .sd-insight__fg-corner-tr, body.postid-4062 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4062 .sd-insight__fg-coords,
  body.postid-4062 .sd-insight__fg-tick-ruler,
  body.postid-4062 .sd-insight__fg-corner-tl,
  body.postid-4062 .sd-insight__fg-corner-tr,
  body.postid-4062 .sd-insight__fg-coords,
  body.postid-4062 .sd-insight__fg-tick-ruler,
  body.postid-4062 .sd-insight__fg-corner-tl,
  body.postid-4062 .sd-insight__fg-corner-tr { display: none; }
}

/* Eyebrow */
body.postid-4062 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4062 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}

/* Title */
body.postid-4062 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4062 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4062 .sd-insight__title--fieldguide em,
body.postid-4062 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4062 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* Subhead */
body.postid-4062 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* Hero meta pill row */
body.postid-4062 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4062 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4062 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4062 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* In this guide counter */
body.postid-4062 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4062 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4062 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4062 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

/* Mobile tightening */
@media (max-width: 720px) {
  body.postid-4062 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4062 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4062 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
/* End FIELD-GUIDE HERO PORT (mirror of May 7-8 2026 canonical). */

/* End FIELD-GUIDE HERO PORT FOR POST 4062 (May 8 2026). */

/* Build/Buy/Partner field-guide final CTA: match approved Productized/Scope contrast. */
body.postid-4084 .sd-insight__cta--fieldguide {
  overflow: visible;
  padding-top: clamp(140px, 14vw, 180px);
}

body.postid-4084 .sd-insight__cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 10vw, 150px);
  z-index: 3;
  pointer-events: none;
}

body.postid-4084 .sd-insight__cta-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF6E8;
  transform: scaleY(-1);
  transform-origin: center;
}

body.postid-4084 .sd-insight__cta-wave svg path {
  fill: currentColor;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-inner {
  position: relative;
  z-index: 4;
}

body.postid-4118 .sd-insight__cta--fieldguide {
  overflow: visible;
  padding-top: clamp(140px, 14vw, 180px);
}

body.postid-4118 .sd-insight__cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 10vw, 150px);
  z-index: 3;
  pointer-events: none;
}

body.postid-4118 .sd-insight__cta-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF6E8;
  transform: scaleY(-1);
  transform-origin: center;
}

body.postid-4118 .sd-insight__cta-wave svg path {
  fill: currentColor;
}

body.postid-4118 .sd-insight__cta--fieldguide .sd-insight__cta-inner {
  position: relative;
  z-index: 4;
}

body.postid-4118 .sd-insight__cta--fieldguide .sd-insight__cta-eyebrow,
body.postid-4118 .sd-insight__cta--fieldguide .sd-insight__cta-h2 em {
  color: #F6C893;
}

body.postid-4118 .sd-insight__cta--fieldguide .sd-insight__cta-h2 {
  color: #FFF6E8;
}

body.postid-4118 .sd-insight__cta--fieldguide .sd-insight__cta-body {
  color: rgba(255,246,232,0.88);
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-eyebrow,
body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-h2 em {
  color: #F6C893;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-h2 {
  color: #FFF6E8;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-body {
  color: rgba(255,246,232,0.88);
}

/* Build/Buy/Partner field-guide chrome: use the approved field-guide utility,
   hero counter, and final CTA selector coverage for post 4084. */
body.postid-4084 .sd-insight__hero-inner {
  position: relative;
}

body.postid-4084 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}

body.postid-4084 .sd-insight__fg-counter-label,
body.postid-4084 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

body.postid-4084 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}

body.postid-4084 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}

body.postid-4084 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}

body.postid-4084 .sd-insight__util-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}

body.postid-4084 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}

body.postid-4084 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}

body.postid-4084 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4084 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}

body.postid-4084 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px;
  height: 16px;
}

body.postid-4084 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}

body.postid-4084 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}

body.postid-4084 .sd-insight__util-counter-value {
  color: #235C81;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-eyebrow,
body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-h2 em {
  color: #F6C893 !important;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-h2 {
  color: #FFF6E8 !important;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-body {
  color: rgba(255,246,232,0.88) !important;
}

body.postid-4084 .sd-insight__cta--fieldguide .sd-insight__cta-btn {
  background: #DB635D !important;
  color: #FFF6E8 !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  body.postid-4084 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  body.postid-4084 .sd-insight__util-counter {
    display: none;
  }
}

@media (max-width: 720px) {
  body.postid-4084 .sd-insight__cta--fieldguide {
    padding-top: clamp(96px, 18vw, 130px);
  }

  body.postid-4084 .sd-insight__cta-wave {
    height: clamp(56px, 14vw, 110px);
  }
}

/* n8n vs Zapier field-guide chrome: scoped copy of the approved 4084 utility,
   hero counter, and final CTA coverage for post 4088. */
body.postid-4088 .sd-insight__cta--fieldguide {
  overflow: visible;
  padding-top: clamp(140px, 14vw, 180px);
}

body.postid-4088 .sd-insight__cta-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 10vw, 150px);
  z-index: 3;
  pointer-events: none;
}

body.postid-4088 .sd-insight__cta-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF6E8;
  transform: scaleY(-1);
  transform-origin: center;
}

body.postid-4088 .sd-insight__cta-wave svg path {
  fill: currentColor;
}

body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-inner {
  position: relative;
  z-index: 4;
}

body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-eyebrow,
body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-h2 em {
  color: #F6C893 !important;
}

body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-h2 {
  color: #FFF6E8 !important;
}

body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-body {
  color: rgba(255,246,232,0.88) !important;
}

body.postid-4088 .sd-insight__cta--fieldguide .sd-insight__cta-btn {
  background: #DB635D !important;
  color: #FFF6E8 !important;
  border: 0 !important;
}

body.postid-4088 .sd-insight__hero-inner {
  position: relative;
}

body.postid-4088 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}

body.postid-4088 .sd-insight__fg-counter-label,
body.postid-4088 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

body.postid-4088 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}

body.postid-4088 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}

body.postid-4088 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}

body.postid-4088 .sd-insight__util-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}

body.postid-4088 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}

body.postid-4088 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}

body.postid-4088 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4088 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}

body.postid-4088 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px;
  height: 16px;
}

body.postid-4088 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}

body.postid-4088 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}

body.postid-4088 .sd-insight__util-counter-value {
  color: #235C81;
}

@media (max-width: 900px) {
  body.postid-4088 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  body.postid-4088 .sd-insight__util-counter {
    display: none;
  }
}

@media (max-width: 720px) {
  body.postid-4088 .sd-insight__cta--fieldguide {
    padding-top: clamp(96px, 18vw, 130px);
  }

  body.postid-4088 .sd-insight__cta-wave {
    height: clamp(56px, 14vw, 110px);
  }
}

/* Idea-library background panel polish: keep decorative cartography readable
   at the top of long idea lists instead of stretching through the full list. */
body.postid-4072
  .sd-insight__section--showcase:has(.sd-ai-auto-idea-list)
  > .sd-navy-imagegen-panel,
body.postid-4103
  .cream-flow.sd-cartography-flow:has(.sd-dora-ideas)
  > .sd-imagegen-map-panel,
body.postid-4107
  .cream-flow.sd-cartography-flow:has(.sd-agent-build-idea-list)
  > .sd-imagegen-map-panel,
body.postid-4110
  .cream-flow.sd-cartography-flow:has(.sd-wl-idea-list)
  > .sd-imagegen-map-panel,
body.postid-4151
  .cream-flow.sd-cartography-flow:has(.sd-fin-idea-groups)
  > .sd-imagegen-map-panel {
  top: 0 !important;
  bottom: auto !important;
  height: var(--sd-idea-bg-panel-height, clamp(1600px, 115vw, 1760px)) !important;
  max-height: var(--sd-idea-bg-panel-height, clamp(1600px, 115vw, 1760px)) !important;
  min-height: 0 !important;
  object-fit: cover !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
}

body.postid-4624
  .sd-ai-agents-shared-cream:has(+ .sd-insight__section--agent-groups)
  > .sd-imagegen-map-panel {
  height: min(100%, var(--sd-idea-bg-panel-height, clamp(1600px, 115vw, 1760px))) !important;
  max-height: var(--sd-idea-bg-panel-height, clamp(1600px, 115vw, 1760px)) !important;
}

body.postid-4072
  .sd-insight__section--showcase:has(.sd-ai-auto-idea-list)
  > .sd-navy-imagegen-panel--left,
body.postid-4103
  .cream-flow.sd-cartography-flow:has(.sd-dora-ideas)
  > .sd-imagegen-map-panel--left,
body.postid-4107
  .cream-flow.sd-cartography-flow:has(.sd-agent-build-idea-list)
  > .sd-imagegen-map-panel--left,
body.postid-4110
  .cream-flow.sd-cartography-flow:has(.sd-wl-idea-list)
  > .sd-imagegen-map-panel--left,
body.postid-4151
  .cream-flow.sd-cartography-flow:has(.sd-fin-idea-groups)
  > .sd-imagegen-map-panel--left,
body.postid-4624
  .sd-ai-agents-shared-cream:has(+ .sd-insight__section--agent-groups)
  > .sd-imagegen-map-panel--left {
  object-position: left top !important;
}

body.postid-4072
  .sd-insight__section--showcase:has(.sd-ai-auto-idea-list)
  > .sd-navy-imagegen-panel--right,
body.postid-4103
  .cream-flow.sd-cartography-flow:has(.sd-dora-ideas)
  > .sd-imagegen-map-panel--right,
body.postid-4107
  .cream-flow.sd-cartography-flow:has(.sd-agent-build-idea-list)
  > .sd-imagegen-map-panel--right,
body.postid-4110
  .cream-flow.sd-cartography-flow:has(.sd-wl-idea-list)
  > .sd-imagegen-map-panel--right,
body.postid-4151
  .cream-flow.sd-cartography-flow:has(.sd-fin-idea-groups)
  > .sd-imagegen-map-panel--right,
body.postid-4624
  .sd-ai-agents-shared-cream:has(+ .sd-insight__section--agent-groups)
  > .sd-imagegen-map-panel--right {
  object-position: right top !important;
}

@media (max-width: 760px) {
  body.postid-4072
    .sd-insight__section--showcase:has(.sd-ai-auto-idea-list)
    > .sd-navy-imagegen-panel,
  body.postid-4103
    .cream-flow.sd-cartography-flow:has(.sd-dora-ideas)
    > .sd-imagegen-map-panel,
  body.postid-4107
    .cream-flow.sd-cartography-flow:has(.sd-agent-build-idea-list)
    > .sd-imagegen-map-panel,
  body.postid-4110
    .cream-flow.sd-cartography-flow:has(.sd-wl-idea-list)
    > .sd-imagegen-map-panel,
  body.postid-4151
    .cream-flow.sd-cartography-flow:has(.sd-fin-idea-groups)
    > .sd-imagegen-map-panel {
    --sd-idea-bg-panel-height: 1600px;
  }
}


/* ============================================================
   POST 4118 FIELD-GUIDE HERO SELECTOR FIX (Jun 8 2026)
   Exact post-scoped copy of the approved post 4624 compact
   field-guide hero port. Keeps post 4118 draft while restoring
   absolute overlay, hero inner, annotations, counter, and mobile
   treatment.
   ============================================================ */
/* ============================================================
   FIELD-GUIDE HERO PORT FOR POST 4118 (Jun 8 2026)
   Hero rules for post 4118 (Content Marketing for SaaS, CONTENT ENGINE).
   Mirrors the May 7 2026 port for posts 4072 and 4076.
   Post 4118 was missing from that port, leaving its hero
   uncontrolled in size with the orchestrator-reef featured
   image showing through unfiltered. The legacy block at
   lines 6610-6700 contains comment-leakage syntax errors
   that drop fg-overlay, fg-corner, fg-annotations rules
   for 4118. This append-only block at end of file wins
   the cascade and restores the canonical underwater hero.
   Brand-palette only, no #fff, no #000, circular icons.
   ============================================================ */
/* HERO CONTAINER -- mirror canonical 4068 rule */
body.postid-4118 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Navy overlay above the photo, below content */
body.postid-4118 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}

/* Faint cream grid texture */
body.postid-4118 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}

/* Hide the legacy fieldguide bg + overlay + scene (markup leaves them empty) */
body.postid-4118 .sd-insight__hero-bg--fieldguide,
body.postid-4118 .sd-insight__hero-bg--fieldguide,
body.postid-4118 .sd-insight__hero-overlay--fieldguide,
body.postid-4118 .sd-insight__hero-overlay--fieldguide,
body.postid-4118 .sd-insight__fg-scene {
  display: none !important;
}

/* HERO INNER CONTENT */
body.postid-4118 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
  padding-top: 50px;
}

/* CORNER MAP PLATES */
body.postid-4118 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4118 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4118 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4118 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
@media (max-width: 980px) {
  body.postid-4118 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4118 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4118 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4118 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
}

/* Crosshair plus marks */
body.postid-4118 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4118 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4118 .sd-insight__fg-cross::before,
body.postid-4118 .sd-insight__fg-cross::after,
body.postid-4118 .sd-insight__fg-cross::before,
body.postid-4118 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4118 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
body.postid-4118 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
body.postid-4118 .sd-insight__fg-cross--1, body.postid-4118 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4118 .sd-insight__fg-cross--2, body.postid-4118 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4118 .sd-insight__fg-cross--3, body.postid-4118 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; }
body.postid-4118 .sd-insight__fg-cross--4, body.postid-4118 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4118 .sd-insight__fg-cross--5, body.postid-4118 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4118 .sd-insight__fg-cross--6, body.postid-4118 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4118 .sd-insight__fg-cross--7, body.postid-4118 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4118 .sd-insight__fg-cross--8, body.postid-4118 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4118 .sd-insight__fg-cross--9, body.postid-4118 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }

/* Coords cluster */
body.postid-4118 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}

/* Tick ruler */
body.postid-4118 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4118 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4118 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; }

/* Corner labels */
body.postid-4118 .sd-insight__fg-corner-tl,
body.postid-4118 .sd-insight__fg-corner-tr,
body.postid-4118 .sd-insight__fg-corner-tl,
body.postid-4118 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4118 .sd-insight__fg-corner-tl, body.postid-4118 .sd-insight__fg-corner-tl { left: 32px; text-align: left; }
body.postid-4118 .sd-insight__fg-corner-tr, body.postid-4118 .sd-insight__fg-corner-tr { right: 32px; text-align: right; }
@media (max-width: 720px) {
  body.postid-4118 .sd-insight__fg-coords,
  body.postid-4118 .sd-insight__fg-tick-ruler,
  body.postid-4118 .sd-insight__fg-corner-tl,
  body.postid-4118 .sd-insight__fg-corner-tr,
  body.postid-4118 .sd-insight__fg-coords,
  body.postid-4118 .sd-insight__fg-tick-ruler,
  body.postid-4118 .sd-insight__fg-corner-tl,
  body.postid-4118 .sd-insight__fg-corner-tr { display: none; }
}

/* Eyebrow */
body.postid-4118 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4118 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}

/* Title */
body.postid-4118 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4118 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4118 .sd-insight__title--fieldguide em,
body.postid-4118 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4118 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}

/* Subhead */
body.postid-4118 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}

/* Hero meta pill row */
body.postid-4118 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4118 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4118 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg,
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4118 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}

/* In this guide counter */
body.postid-4118 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4118 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4118 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4118 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}

/* Mobile tightening */
@media (max-width: 720px) {
  body.postid-4118 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4118 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4118 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
/* End FIELD-GUIDE HERO PORT (May 7 2026). */

/* End FIELD-GUIDE HERO PORT FOR POST 4118 (Jun 8 2026). */

/* POST 4118 UTILITY BAR SELECTOR FIX (approved post 4624 copy). */
body.postid-4118 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4118 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4118 .sd-insight__util-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4118 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4118 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4118 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4118 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4118 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px;
  height: 16px;
}
body.postid-4118 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4118 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4118 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 640px) {
  body.postid-4118 .sd-insight__util-counter {
    display: none;
  }
}

/* POST 4121 FIELD GUIDE HERO AND UTILITY CHROME.
   Copied from the approved AI Agents field-guide hero pattern and scoped to
   post 4121 so the draft gets the shared counter, map chrome, and tools bar. */
body.postid-4121 .sd-insight__hero--fieldguide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px);
  color: #FFF6E8;
  background-color: #11314a;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
body.postid-4121 .sd-insight__fg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%),
    linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%);
  pointer-events: none;
}
body.postid-4121 .sd-insight__fg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px);
}
body.postid-4121 .sd-insight__hero-bg--fieldguide,
body.postid-4121 .sd-insight__hero-overlay--fieldguide,
body.postid-4121 .sd-insight__fg-scene {
  display: none !important;
}
body.postid-4121 .sd-insight__hero--fieldguide .sd-insight__hero-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 50px clamp(20px, 4vw, 28px) 0;
}
body.postid-4121 .sd-insight__fg-corner {
  position: absolute;
  pointer-events: none;
  color: #F6C893;
  opacity: 0.18;
  z-index: 2;
}
body.postid-4121 .sd-insight__fg-corner svg {
  display: block;
  width: 100%;
  height: auto;
}
body.postid-4121 .sd-insight__fg-corner--tl {
  top: -80px;
  left: -100px;
  width: 620px;
}
body.postid-4121 .sd-insight__fg-corner--br {
  bottom: -80px;
  right: -100px;
  width: 620px;
}
body.postid-4121 .sd-insight__fg-annotations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.postid-4121 .sd-insight__fg-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.42;
}
body.postid-4121 .sd-insight__fg-cross::before,
body.postid-4121 .sd-insight__fg-cross::after {
  content: '';
  position: absolute;
  background: #FFF6E8;
}
body.postid-4121 .sd-insight__fg-cross::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
body.postid-4121 .sd-insight__fg-cross::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}
body.postid-4121 .sd-insight__fg-cross--1 { top: 12%; left: 16%; }
body.postid-4121 .sd-insight__fg-cross--2 { top: 22%; left: 70%; }
body.postid-4121 .sd-insight__fg-cross--3 { top: 38%; left: 8%; opacity: 0.30; }
body.postid-4121 .sd-insight__fg-cross--4 { top: 50%; left: 82%; }
body.postid-4121 .sd-insight__fg-cross--5 { top: 62%; left: 12%; }
body.postid-4121 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; }
body.postid-4121 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; }
body.postid-4121 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; }
body.postid-4121 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; }
body.postid-4121 .sd-insight__fg-coords {
  position: absolute;
  right: 32px;
  top: 220px;
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #FFF6E8;
  opacity: 0.55;
  text-align: right;
  line-height: 2;
}
body.postid-4121 .sd-insight__fg-tick-ruler {
  position: absolute;
  right: 16px;
  top: 96px;
  bottom: 96px;
  width: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.35;
}
body.postid-4121 .sd-insight__fg-tick-ruler i {
  display: block;
  height: 1px;
  background: #FFF6E8;
  width: 4px;
  align-self: flex-end;
}
body.postid-4121 .sd-insight__fg-tick-ruler i:nth-child(5n+1) {
  width: 8px;
}
body.postid-4121 .sd-insight__fg-corner-tl,
body.postid-4121 .sd-insight__fg-corner-tr {
  position: absolute;
  top: 28px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #FFF6E8;
  opacity: 0.55;
  line-height: 1.7;
  text-transform: uppercase;
  z-index: 3;
}
body.postid-4121 .sd-insight__fg-corner-tl {
  left: 32px;
  text-align: left;
}
body.postid-4121 .sd-insight__fg-corner-tr {
  right: 32px;
  text-align: right;
}
body.postid-4121 .sd-insight__eyebrow--fieldguide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E8;
  opacity: 0.85;
  margin: 0 0 28px;
  padding: 0;
}
body.postid-4121 .sd-insight__eyebrow--fieldguide::before {
  content: '';
  width: 26px;
  height: 1px;
  background: #F6C893;
  opacity: 0.9;
}
body.postid-4121 .sd-insight__title--fieldguide {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFF6E8;
  max-width: 760px;
  margin: 0 0 22px;
}
body.postid-4121 .sd-insight__title--fieldguide .sd-insight__title-italic,
body.postid-4121 .sd-insight__title--fieldguide em {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #F6C893;
  letter-spacing: -0.01em;
}
body.postid-4121 .sd-insight__hero--fieldguide .sd-insight__subhead {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,246,232,0.80);
  margin: 0 0 36px;
  font-weight: 400;
}
body.postid-4121 .sd-insight__hero-meta--fieldguide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
body.postid-4121 .sd-insight__fg-chip {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: #FFF6E8;
  opacity: 0.65;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(255,246,232,0.22);
  border-radius: 999px;
}
body.postid-4121 .sd-insight__byline--fieldguide {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #11314a;
  color: #DB635D;
  border: 1.5px solid rgba(255,246,232,0.40);
  flex-shrink: 0;
  overflow: hidden;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img,
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-meta {
  font-size: 12px;
  line-height: 1.45;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-author {
  display: block;
  color: #FFF6E8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,246,232,0.55);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-sub time {
  color: inherit;
}
body.postid-4121 .sd-insight__byline--fieldguide .sd-insight__byline-sep {
  color: rgba(255,246,232,0.35);
}
body.postid-4121 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: clamp(96px, 12vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  z-index: 4;
  border-left: 1px solid rgba(255,246,232,0.22);
  padding-left: 16px;
}
body.postid-4121 .sd-insight__fg-counter-label {
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4121 .sd-insight__fg-counter-value {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  color: #F6C893;
}
body.postid-4121 .sd-insight__fg-counter-sub {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,246,232,0.62);
}
body.postid-4121 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4121 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4121 .sd-insight__util-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4121 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4121 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4121 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4121 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4121 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px;
  height: 16px;
}
body.postid-4121 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4121 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4121 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 980px) {
  body.postid-4121 .sd-insight__fg-corner--tl {
    width: 460px;
    top: -60px;
    left: -70px;
  }
  body.postid-4121 .sd-insight__fg-corner--br {
    width: 460px;
    bottom: -60px;
    right: -70px;
  }
}
@media (max-width: 720px) {
  body.postid-4121 .sd-insight__hero--fieldguide {
    padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px);
    min-height: 540px;
  }
  body.postid-4121 .sd-insight__fg-corner--tl {
    width: 320px;
    top: -30px;
    left: -50px;
  }
  body.postid-4121 .sd-insight__fg-corner--br {
    width: 320px;
    bottom: -30px;
    right: -50px;
  }
  body.postid-4121 .sd-insight__fg-coords,
  body.postid-4121 .sd-insight__fg-tick-ruler,
  body.postid-4121 .sd-insight__fg-corner-tl,
  body.postid-4121 .sd-insight__fg-corner-tr {
    display: none;
  }
  body.postid-4121 .sd-insight__title--fieldguide {
    font-size: clamp(32px, 7vw, 44px);
  }
  body.postid-4121 .sd-insight__hero--fieldguide .sd-insight__fg-counter {
    position: static;
    align-self: flex-start;
    align-items: flex-start;
    border-left: none;
    border-top: 1px solid rgba(255,246,232,0.22);
    padding: 16px 0 0;
    margin-top: 16px;
  }
}
@media (max-width: 640px) {
  body.postid-4121 .sd-insight__util-counter {
    display: none;
  }
}

/* POST 4121 PUBLIC STATS DIVIDER FIX.
   Keep the By the Numbers bottom wave as the final painted element so logged-out
   public/WPH rendering cannot leave navy stats padding below the cream wave. */
body.postid-4121 .stats {
  padding-bottom: 0 !important;
}
body.postid-4121 .stats .stats__inner {
  padding-bottom: max(18px, calc(clamp(120px, 11vw, 170px) - clamp(82px, 9.5vw, 138px))) !important;
}
body.postid-4121 .stats__bottom-wave {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: block !important;
  height: clamp(82px, 9.5vw, 138px) !important;
  margin-bottom: -1px !important;
  color: #FFF6E8 !important;
  pointer-events: none !important;
}
body.postid-4121 .stats__bottom-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 8px;
  background: #FFF6E8;
}
body.postid-4121 .stats__bottom-wave svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
body.postid-4121 .stats__bottom-wave path {
  fill: currentColor !important;
}
body.postid-4121 .stats + .cream-flow.sd-ai-agents-shared-cream {
  position: relative !important;
  z-index: 2 !important;
  background: #FFF6E8 !important;
  margin-top: -1px !important;
}
body.postid-4121 .stats + .cream-flow.sd-ai-agents-shared-cream::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(84px, 10vw, 132px);
  z-index: 1;
  background: #FFF6E8;
  pointer-events: none;
}
body.postid-4121 .stats + .cream-flow.sd-ai-agents-shared-cream > *:not(.sd-imagegen-map-panel) {
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  body.postid-4121 .stats + .cream-flow.sd-ai-agents-shared-cream::after {
    top: 0;
    height: 118px;
  }
}

/* Railway vs Render draft utility strip alignment. */
body.postid-4129 .sd-insight__section--utility-bar {
  background: #FFF6E8;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(17,49,74,0.10);
}
body.postid-4129 .sd-insight__section--utility-bar .sd-insight__share--utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
body.postid-4129 .sd-insight__util-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  padding: 7px 13px;
  border: 1px solid rgba(17,49,74,0.30);
  border-radius: 999px;
  background: transparent;
}
body.postid-4129 .sd-insight__share--utility .sd-insight__share-list {
  gap: 8px;
}
body.postid-4129 .sd-insight__share--utility .sd-insight__share-btn {
  --sd-share-size: 36px;
  background: transparent;
  border: 1px solid rgba(17,49,74,0.30);
  color: #11314a;
  box-shadow: none;
}
body.postid-4129 .sd-insight__share--utility .sd-insight__share-btn:hover,
body.postid-4129 .sd-insight__share--utility .sd-insight__share-btn:focus-visible {
  background: #DB635D;
  border-color: #DB635D;
  color: #FFF6E8;
}
body.postid-4129 .sd-insight__share--utility .sd-insight__share-btn svg {
  width: 16px;
  height: 16px;
}
body.postid-4129 .sd-insight__util-counter {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #11314a;
  opacity: 0.78;
}
body.postid-4129 .sd-insight__util-counter-sep {
  color: #DB635D;
  opacity: 0.65;
  font-size: 13px;
  letter-spacing: 0;
}
body.postid-4129 .sd-insight__util-counter-value {
  color: #235C81;
}
@media (max-width: 640px) {
  body.postid-4129 .sd-insight__util-counter {
    display: none;
  }
}