/* ==========================================================================
   KPro Shared Theme Styles
   Animations and utilities used across every page.
   Editorial / minimal aesthetic — square corners, thin borders, subtle motion.
   ========================================================================== */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; }

/* ==========================================================================
   Global border radius
   Subtle rounding across all surface elements — cards, floating widgets,
   buttons, and the partner grid. Override per-element with rounded-* if
   needed.
   ========================================================================== */
:root {
  --radius:    8px;  /* Cards, surfaces */
  --radius-sm: 4px;  /* Buttons, badges */
}

/* Cards using .lift class (most card patterns) */
.lift {
  border-radius: var(--radius);
}

/* Hero floating dashboard widgets */
.shadow-float,
.shadow-card {
  border-radius: var(--radius);
}

/* CTA buttons — anchors with brand backgrounds or outlined variants */
a[class*="bg-accent"],
a[class*="bg-ink"]:not(.flex.items-center),
a[class*="border-white/25"],
a[class*="border-ink"],
button {
  border-radius: var(--radius-sm);
}

/* Top-of-card image area inherits parent's top corners */
.lift > div:first-child[class*="aspect"],
.lift > a:first-child[class*="aspect"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ----- Reveal on scroll (reusable) ----- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

/* ----- Subtle float (hero dashboard widgets) ----- */
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float-a { animation: floatA 6.5s ease-in-out infinite; }
.float-b { animation: floatB 8s   ease-in-out infinite; }
.float-c { animation: floatC 7.2s ease-in-out infinite; }

/* ----- Animated trend line ----- */
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawLine 2.2s ease-out .6s forwards;
}

/* ==========================================================================
   Hero dashboard widget data animations
   Subtle entrance + ambient animations on the floating cards in the hero.
   ========================================================================== */

/* ----- Developments card: bar chart grow-in ----- */
.hero-bars > div {
  transform: scaleY(0);
  transform-origin: bottom;
}
.reveal.is-visible .hero-bars > div {
  animation: hero-bar-grow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.reveal.is-visible .hero-bars > div:nth-child(1) { animation-delay: 0.40s; }
.reveal.is-visible .hero-bars > div:nth-child(2) { animation-delay: 0.46s; }
.reveal.is-visible .hero-bars > div:nth-child(3) { animation-delay: 0.52s; }
.reveal.is-visible .hero-bars > div:nth-child(4) { animation-delay: 0.58s; }
.reveal.is-visible .hero-bars > div:nth-child(5) { animation-delay: 0.64s; }
.reveal.is-visible .hero-bars > div:nth-child(6) { animation-delay: 0.70s; }
.reveal.is-visible .hero-bars > div:nth-child(7) { animation-delay: 0.76s; }
.reveal.is-visible .hero-bars > div:nth-child(8) { animation-delay: 0.82s; }
.reveal.is-visible .hero-bars > div:nth-child(9) { animation-delay: 0.88s; }

@keyframes hero-bar-grow {
  to { transform: scaleY(1); }
}

/* ----- Leads per channel: donut segments draw in ----- */
.hero-donut .seg {
  stroke-dasharray: 0 100;
}
.hero-donut .seg-2 { stroke-dashoffset: -42; }
.hero-donut .seg-3 { stroke-dashoffset: -70; }

.reveal.is-visible .hero-donut .seg-1 { animation: hero-donut-1 1.0s ease-out 0.7s forwards; }
.reveal.is-visible .hero-donut .seg-2 { animation: hero-donut-2 0.8s ease-out 1.4s forwards; }
.reveal.is-visible .hero-donut .seg-3 { animation: hero-donut-3 0.6s ease-out 1.9s forwards; }

@keyframes hero-donut-1 { to { stroke-dasharray: 42 58; } }
@keyframes hero-donut-2 { to { stroke-dasharray: 28 72; } }
@keyframes hero-donut-3 { to { stroke-dasharray: 18 82; } }

/* ----- Trend line endpoint halo: continuous pulse ----- */
.hero-trend-halo {
  transform-origin: center;
  transform-box: fill-box;
}
.reveal.is-visible .hero-trend-halo {
  animation: hero-halo-pulse 2.2s ease-out 2.5s infinite;
}
@keyframes hero-halo-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bars > div { transform: scaleY(1); animation: none; }
  .hero-donut .seg { animation: none; }
  .hero-donut .seg-1 { stroke-dasharray: 42 58; }
  .hero-donut .seg-2 { stroke-dasharray: 28 72; }
  .hero-donut .seg-3 { stroke-dasharray: 18 82; }
  .hero-trend-halo { animation: none; }
}

/* ==========================================================================
   Flow diagram animations
   Icons pop in sequentially when the section scrolls into view, with stroke
   draw-in on the icon paths and arrows between steps. Hover replays it.
   ========================================================================== */

/* Pre-reveal: only the SVG itself is hidden — the container background stays visible */
.flow-anim .flow-icon svg {
  opacity: 0;
  transform: scale(0.5);
}
.flow-anim .flow-icon svg path,
.flow-anim .flow-icon svg circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.flow-anim .flow-arrow path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* Settled (visible) state — applied once parent .reveal is in view.
   Animation plays on the SVG only (not the bg-ink/bg-accent container). */
.reveal.is-visible .flow-anim .flow-icon svg {
  opacity: 1;
  transform: scale(1);
  animation: flow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.is-visible .flow-anim .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-icon svg circle {
  stroke-dashoffset: 0;
  animation: flow-draw 0.8s ease-out;
}
.reveal.is-visible .flow-anim .flow-arrow path {
  stroke-dashoffset: 0;
  animation: flow-arrow-draw 0.4s ease-out;
}

/* Stagger left → right */
.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg { animation-delay: 0.0s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg { animation-delay: 0.3s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg { animation-delay: 0.6s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(4) .flow-icon svg { animation-delay: 0.9s; }

.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg circle { animation-delay: 0.2s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg circle { animation-delay: 0.5s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg circle { animation-delay: 0.8s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(4) .flow-icon svg path { animation-delay: 1.1s; }

.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-arrow path { animation-delay: 0.35s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-arrow path { animation-delay: 0.65s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-arrow path { animation-delay: 0.95s; }

/* Hover replays the cascade — also targets svg only */
.flow-anim:hover .flow-icon svg                  { animation: flow-pop        0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flow-anim:hover .flow-icon svg path,
.flow-anim:hover .flow-icon svg circle           { animation: flow-draw       0.8s ease-out; }
.flow-anim:hover .flow-arrow path                { animation: flow-arrow-draw 0.4s ease-out; }
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg { animation-delay: 0s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg { animation-delay: 0.15s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg { animation-delay: 0.30s; }
.flow-anim:hover .flow-step:nth-child(4) .flow-icon svg { animation-delay: 0.45s; }
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg circle { animation-delay: 0.10s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg circle { animation-delay: 0.25s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg circle { animation-delay: 0.40s; }
.flow-anim:hover .flow-step:nth-child(4) .flow-icon svg path   { animation-delay: 0.55s; }
.flow-anim:hover .flow-step:nth-child(1) .flow-arrow path      { animation-delay: 0.20s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-arrow path      { animation-delay: 0.35s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-arrow path      { animation-delay: 0.50s; }

@keyframes flow-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes flow-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes flow-arrow-draw {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-anim .flow-icon svg { opacity: 1; transform: none; animation: none; }
  .flow-anim .flow-icon svg path,
  .flow-anim .flow-icon svg circle,
  .flow-anim .flow-arrow path { stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   Reusable .icon-anim
   For card icons (Challenge, Capabilities, etc) where each icon lives in its
   own .reveal card. The icon pops in + path draws when its card becomes
   visible. Hovering the parent .lift card replays it.
   ========================================================================== */

/* Pre-reveal: only the SVG inside is hidden — container background stays visible */
.icon-anim svg {
  opacity: 0;
  transform: scale(0.5);
}
.icon-anim svg path,
.icon-anim svg circle,
.icon-anim svg rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Settled (visible) state — animation plays on SVG only, then settles. */
.reveal.is-visible .icon-anim svg {
  opacity: 1;
  transform: scale(1);
  animation: flow-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.reveal.is-visible .icon-anim svg path,
.reveal.is-visible .icon-anim svg circle,
.reveal.is-visible .icon-anim svg rect {
  stroke-dashoffset: 0;
  animation: flow-draw 1.1s ease-out 0.45s;
}

/* Stagger per card position (reveal-delay-N is already on each card). */
.reveal-delay-1.is-visible .icon-anim svg { animation-delay: 0.10s; }
.reveal-delay-2.is-visible .icon-anim svg { animation-delay: 0.28s; }
.reveal-delay-3.is-visible .icon-anim svg { animation-delay: 0.46s; }
.reveal-delay-4.is-visible .icon-anim svg { animation-delay: 0.64s; }
.reveal-delay-5.is-visible .icon-anim svg { animation-delay: 0.82s; }

.reveal-delay-1.is-visible .icon-anim svg path,
.reveal-delay-1.is-visible .icon-anim svg circle,
.reveal-delay-1.is-visible .icon-anim svg rect { animation-delay: 0.40s; }
.reveal-delay-2.is-visible .icon-anim svg path,
.reveal-delay-2.is-visible .icon-anim svg circle,
.reveal-delay-2.is-visible .icon-anim svg rect { animation-delay: 0.58s; }
.reveal-delay-3.is-visible .icon-anim svg path,
.reveal-delay-3.is-visible .icon-anim svg circle,
.reveal-delay-3.is-visible .icon-anim svg rect { animation-delay: 0.76s; }
.reveal-delay-4.is-visible .icon-anim svg path,
.reveal-delay-4.is-visible .icon-anim svg circle,
.reveal-delay-4.is-visible .icon-anim svg rect { animation-delay: 0.94s; }
.reveal-delay-5.is-visible .icon-anim svg path,
.reveal-delay-5.is-visible .icon-anim svg circle,
.reveal-delay-5.is-visible .icon-anim svg rect { animation-delay: 1.12s; }

/* Replay on hover of the parent .lift card (no stagger — single card replay) */
.lift:hover .icon-anim svg {
  animation: flow-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lift:hover .icon-anim svg path,
.lift:hover .icon-anim svg circle,
.lift:hover .icon-anim svg rect {
  animation: flow-draw 0.9s ease-out 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .icon-anim svg { opacity: 1; transform: none; animation: none; }
  .icon-anim svg path,
  .icon-anim svg circle,
  .icon-anim svg rect { stroke-dashoffset: 0; animation: none; }
}

/* ----- Logo marquee ----- */
.marquee {
  overflow: hidden;
  padding: 8px 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scroll-x 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Client logo treatment — fixed height for visual consistency (per Sandy 2026-07-05).
   All logos render at the same rendered height regardless of source pixel size;
   width scales with aspect ratio, capped so extreme-wide logos don't dominate.
   PNGs were trimmed of transparent padding on 2026-07-07 so no per-logo scale
   compensation is needed. */
.client-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Square / portrait marks need more height to carry the same visual weight
   as wide wordmarks at the same row height. */
.client-logo--tall {
  height: 60px;
  max-width: 120px;
}

/* Channel / integration logo treatment — full color, larger for readability */
.channel-logo {
  max-height: 60px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ----- Card lift on hover ----- */
.lift {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lift:hover {
  transform: translateY(-3px);
  border-color: #203b5c;
  box-shadow: 0 12px 28px rgba(32,59,92,0.10);
}

/* ----- Animated underline link ----- */
.ul-link { position: relative; }
.ul-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.ul-link:hover::after { transform: scaleX(1); }

/* ----- Nav: subtle separator over hero (default) + opaque on scroll ----- */
#nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: #eef0f2;
}
.nav-scrolled .nav-link { color: #475569; }
.nav-scrolled .nav-link:hover { color: #203b5c; }
.nav-scrolled .logo-text { color: #203b5c; }
/* Mobile hamburger turns dark on the white scrolled nav so it stays visible */
.nav-scrolled .menu-btn { color: #203b5c; }

/* ----- Logo (KPro-Nav-Logo.svg is white by default) ----- */
.logo-img {
  height: 26px;
  width: auto;
  transition: filter .3s ease;
}
/* Recolor the white SVG to navy ink (#203b5c) — used on white bg (scrolled nav, footer) */
.nav-scrolled .logo-img,
.logo-dark {
  filter: brightness(0) saturate(100%) invert(20%) sepia(22%) saturate(1900%) hue-rotate(186deg) brightness(94%) contrast(92%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-a, .float-b, .float-c { animation: none; }
  .draw-line { animation: none; stroke-dashoffset: 0; }
  .marquee-track { animation: none; }
}

/* ==========================================================================
   Article content (single insight / blog post)
   Styles for content rendered by WordPress Gutenberg's core blocks.
   The post author writes in Gutenberg — Paragraph, Heading, List, Quote,
   Group, Buttons, Image, Separator — and WP emits the class hooks below.
   No custom classes required.

   Colour slugs (cream, ink, accent) are registered in theme.json → users
   pick them from the block colour picker → WP emits e.g.
     has-cream-background-color has-background
   Font size slugs (small, medium, large) come from the size dropdown → WP
   emits e.g. has-large-font-size.
   ========================================================================== */
.article-content {
  color: #14253d;
  font-size: 17px;
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto;
}
.article-content > * + * { margin-top: 1.5rem; }

/* ----- Headings (Heading block emits h2/h3 + .wp-block-heading + id) ----- */
.article-content h2,
.article-content .wp-block-heading[class*="h2"],
.article-content > .wp-block-heading {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 0.25rem;
  scroll-margin-top: 100px;
}
.article-content h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 2.25rem;
  margin-bottom: 0.25rem;
  scroll-margin-top: 100px;
}
.article-content h4 { font-size: 18px; font-weight: 600; margin-top: 1.75rem; }

/* ----- Paragraph block ----- */
.article-content p { margin-top: 1.25rem; }
.article-content strong { font-weight: 600; color: #14253d; }
.article-content em { font-style: italic; }

/* ----- Font-size dropdown (Paragraph/Heading blocks) ----- */
.article-content .has-small-font-size  { font-size: 14px; line-height: 1.6; }
.article-content .has-medium-font-size { font-size: 18px; line-height: 1.6; }
.article-content .has-large-font-size  { font-size: 21px; line-height: 1.55; color: #334155; }
.article-content .has-x-large-font-size,
.article-content .has-huge-font-size   { font-size: 28px; line-height: 1.35; font-weight: 500; }

/* ----- Text-align dropdown ----- */
.article-content .has-text-align-center { text-align: center; }
.article-content .has-text-align-right  { text-align: right; }
.article-content .has-text-align-left   { text-align: left; }

/* ----- Colour palette (theme.json → block colour picker) ----- */
.article-content .has-white-color                { color: #ffffff; }
.article-content .has-ink-color                  { color: #14253d; }
.article-content .has-accent-color               { color: #3bd4c3; }
.article-content .has-cream-color                { color: #f6f2ec; }
.article-content .has-slate-color                { color: #64748b; }

.article-content .has-white-background-color     { background-color: #ffffff; }
.article-content .has-ink-background-color       { background-color: #14253d; }
.article-content .has-accent-background-color    { background-color: #3bd4c3; }
.article-content .has-cream-background-color     { background-color: #f6f2ec; }

/* ----- Link block ----- */
.article-content a {
  color: #14253d;
  text-decoration: underline;
  text-decoration-color: #3bd4c3;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.article-content a:hover { color: #3bd4c3; }

/* ----- List block ----- */
.article-content ul,
.article-content ol,
.article-content .wp-block-list {
  padding-left: 1.5rem;
  margin-top: 1.25rem;
}
.article-content ul,
.article-content .wp-block-list { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-top: 0.5rem; }
.article-content li::marker { color: #3bd4c3; }
.article-content li > ul,
.article-content li > ol { margin-top: 0.5rem; }

/* ----- Quote block (core/quote) — styled left-bar quote ----- */
.article-content .wp-block-quote,
.article-content blockquote {
  border-left: 3px solid #3bd4c3;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-size: 20px;
  line-height: 1.5;
  color: #14253d;
  font-weight: 500;
  margin: 2.25rem 0;
  font-style: normal;
}
.article-content .wp-block-quote p,
.article-content blockquote p { margin: 0; }
.article-content .wp-block-quote cite,
.article-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 14px;
  color: #64748b;
  font-style: normal;
  font-weight: 400;
}

/* ----- Pullquote block (core/pullquote) — full-width feature quote ----- */
.article-content .wp-block-pullquote {
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 2rem 0;
  margin: 2.5rem 0;
  text-align: center;
}
.article-content .wp-block-pullquote p {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 500;
  color: #14253d;
  margin: 0;
}
.article-content .wp-block-pullquote cite {
  display: block;
  font-size: 13px;
  color: #64748b;
  margin-top: 1rem;
  font-style: normal;
}

/* ----- Group block (core/group) — a coloured background makes it a callout ----- */
.article-content .wp-block-group {
  margin: 2rem 0;
}
.article-content .wp-block-group.has-background {
  padding: 1.5rem 1.75rem;
}
.article-content .wp-block-group.has-cream-background-color {
  border-left: 3px solid #3bd4c3;
}
.article-content .wp-block-group.has-ink-background-color,
.article-content .wp-block-group.has-ink-background-color p,
.article-content .wp-block-group.has-ink-background-color h2,
.article-content .wp-block-group.has-ink-background-color h3 {
  color: #ffffff;
}
.article-content .wp-block-group.has-ink-background-color {
  padding: 2rem 1.75rem;
}
.article-content .wp-block-group > * { margin-top: 1rem; }
.article-content .wp-block-group > *:first-child { margin-top: 0; }
/* Classic-theme inner container fallback */
.article-content .wp-block-group__inner-container > * { margin-top: 1rem; }
.article-content .wp-block-group__inner-container > *:first-child { margin-top: 0; }

/* ----- Buttons block (core/buttons + core/button) ----- */
.article-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.article-content .has-text-align-center > .wp-block-buttons,
.article-content .wp-block-group.has-ink-background-color .wp-block-buttons {
  justify-content: center;
}
.article-content .wp-block-button__link,
.article-content .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #3bd4c3;
  color: #14253d;
  padding: 0.85rem 1.5rem;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  border-radius: 4px;
}
.article-content .wp-block-button__link:hover {
  background: #2fc0af;
  color: #14253d;
  text-decoration: none;
}
.article-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}
/* Editor colour presets apply with !important and would leave the label
   unreadable on a dark fill — keep buttons on the brand colours. */
.article-content .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background {
  background: #3bd4c3 !important;
  color: #14253d !important;
}

/* ----- Image block (core/image) ----- */
.article-content figure,
.article-content .wp-block-image {
  margin: 2rem 0;
}
.article-content figure img,
.article-content .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}
.article-content figcaption,
.article-content .wp-element-caption {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  margin-top: 0.75rem;
}
/* Image alignment (align dropdown in the block toolbar) */
.article-content .wp-block-image.alignleft  { float: left;  margin: 0.5rem 1.5rem 1rem 0; max-width: 45%; }
.article-content .wp-block-image.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; max-width: 45%; }
.article-content .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
.article-content .wp-block-image.alignwide   { max-width: 960px; margin-left: auto; margin-right: auto; }
.article-content .wp-block-image.alignfull   { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ----- Separator block (core/separator) ----- */
.article-content hr,
.article-content .wp-block-separator {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 3rem 0;
  height: 0;
}
.article-content .wp-block-separator.is-style-wide  { border-top-width: 1px; }
.article-content .wp-block-separator.is-style-dots  { border-top: none; text-align: center; }
.article-content .wp-block-separator.is-style-dots::before {
  content: '···'; letter-spacing: 1em; color: #94a3b8; font-size: 20px;
}
/* Colour picker on the Separator block emits .has-background + a bg colour.
   Switch from border to a solid coloured bar so the picked colour shows. */
.article-content .wp-block-separator.has-background {
  border-top: 0;
  height: 2px;
  margin: 2.5rem 0;
}
/* A "white" separator on our white article body is intentionally invisible —
   it acts as a spacer / block boundary in the live KPro Gutenberg source. */
.article-content .wp-block-separator.has-white-background-color {
  background: transparent;
  margin: 1.25rem 0;
}

/* ----- Spacer block (core/spacer) — height is set inline via style attr ----- */
.article-content .wp-block-spacer { margin: 0; }
.article-content > .wp-block-spacer + * { margin-top: 0; }

/* ----- First heading used as dek/subtitle
   Live KPro Gutenberg source opens with an H3 acting as a lede.
   Kept as-is so the source round-trips; restyle it via first-child. ----- */
.article-content > h3:first-child,
.article-content > .wp-block-heading:first-child {
  margin-top: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: #334155;
  letter-spacing: normal;
}

/* ----- HubSpot CTA embed (wp:html block on the live site) ----- */
.article-content .hs-cta-wrapper {
  display: block;
  margin: 2.25rem 0;
  text-align: center;
}
.article-content .hs-cta-wrapper img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ----- Footnote references (inline <sup>) ----- */
.article-content sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: #3bd4c3;
  font-weight: 600;
}
.article-content sup a { text-decoration: none; color: inherit; }

/* ----- Code block (core/code) + inline code ----- */
.article-content code {
  background: #f6f2ec;
  padding: 2px 6px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.article-content .wp-block-code {
  background: #f6f2ec;
  padding: 1rem 1.25rem;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14px;
  overflow-x: auto;
}

/* ----- Table block (core/table) ----- */
.article-content .wp-block-table { margin: 2rem 0; overflow-x: auto; }
.article-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-content .wp-block-table th,
.article-content .wp-block-table td { border: 1px solid #e2e8f0; padding: 0.75rem 1rem; text-align: left; }
.article-content .wp-block-table th { background: #f6f2ec; font-weight: 600; }