/* ════════════════════════════════════════════════════════════════
   SellerVine — Design Layer
   A site-wide visual refinement that sits on top of the Tailwind bundle
   and sv-motion.css. It only restyles existing markup: no content,
   layout structure or element order is changed.

   Plain CSS on purpose: the shipped Tailwind bundle is purged, so new
   utility classes would render unstyled. Selectors target the classes
   the static pages already use. Every rule degrades to the original
   look if a selector does not match (for example where :has() is not
   supported).
   ════════════════════════════════════════════════════════════════ */

:root {
  --sv-ink: #0b1220;
  --sv-text: #334155;
  --sv-line: rgba(15, 23, 42, .08);
  --sv-blue: #2563eb;
  --sv-electric: #3b82f6;
  --sv-cyan: #22d3ee;
  --sv-violet: #7c3aed;
  --sv-grad: linear-gradient(135deg, #3b82f6 0%, #22d3ee 50%, #7c3aed 100%);
  --sv-grad-ink: linear-gradient(120deg, #0b1220 0%, #1e3a8a 55%, #6d28d9 100%);
  --sv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --sv-shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -12px rgba(15, 23, 42, .14);
  --sv-shadow-lg: 0 2px 6px rgba(15, 23, 42, .04), 0 28px 56px -20px rgba(30, 41, 90, .24);
  --sv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── 1. Global rendering ────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(59, 130, 246, .2); color: #0b1220; }
:focus-visible { outline: 2px solid var(--sv-electric); outline-offset: 3px; }

/* ── 2. Typography ──────────────────────────────────────────────── */
main h1, main h2 { letter-spacing: -.028em; text-wrap: balance; }
main h3 { letter-spacing: -.012em; }
main p { text-wrap: pretty; }

/* Section eyebrows ("TRUSTED BY", "OUR APPROACH" ...) become refined pills */
main :is(span, p).uppercase.text-electric:has(+ :is(h1, h2)) {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(59, 130, 246, .08), rgba(124, 58, 237, .06));
  border: 1px solid rgba(59, 130, 246, .18);
  color: #1d4ed8; letter-spacing: .14em; line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}
main :is(span, p).uppercase.text-electric:has(+ :is(h1, h2))::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sv-grad); box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* Large stat figures get a deep ink-to-violet gradient */
main .text-3xl.font-bold > .font-tabular,
main :is(.text-4xl, .text-5xl).font-bold > .font-tabular,
main :is(.text-4xl, .text-5xl).font-tabular {
  background: var(--sv-grad-ink); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* ...but white-on-dark bands stay bright */
main .bg-midnight :is(.text-white, .text-white *) .font-tabular,
main .bg-midnight .text-white.font-tabular,
main .bg-midnight .text-white > .font-tabular {
  background: linear-gradient(120deg, #ffffff 0%, #a5f3fc 60%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── 3. Header ──────────────────────────────────────────────────── */
header.fixed.bg-white {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--sv-line), 0 10px 30px -18px rgba(15, 23, 42, .25) !important;
}
header .nav-link { position: relative; }
header .nav-link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--sv-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--sv-ease);
}
header .nav-link:hover::after, header .nav-link[data-active="true"]::after { transform: scaleX(1); }

/* ── 4. Buttons ─────────────────────────────────────────────────── */
:is(a, button).animated-gradient { position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(37, 99, 235, .55); }
:is(a, button).animated-gradient::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .8s var(--sv-ease);
}
:is(a, button).animated-gradient:hover::after { transform: translateX(130%); }
:is(a, button).animated-gradient:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 32px -12px rgba(37, 99, 235, .6); }

/* Secondary (outlined white) buttons */
main a.border.border-border.bg-white:is(.rounded-full, .rounded-xl),
main a.bg-transparent.border.border-border:is(.rounded-full, .rounded-xl) {
  box-shadow: var(--sv-shadow-sm); transition: border-color .25s, box-shadow .25s, transform .25s var(--sv-ease);
}
main a.border.border-border.bg-white:is(.rounded-full, .rounded-xl):hover,
main a.bg-transparent.border.border-border:is(.rounded-full, .rounded-xl):hover {
  border-color: rgba(59, 130, 246, .45); box-shadow: var(--sv-shadow-md); transform: translateY(-1px);
}

/* ── 5. Cards ───────────────────────────────────────────────────── */
main .bg-white.border.border-border:is(.rounded-xl, .rounded-2xl) { box-shadow: var(--sv-shadow-sm); }
main .card-hover {
  transition: transform .45s var(--sv-ease), box-shadow .45s var(--sv-ease), border-color .3s;
}
main .card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sv-shadow-lg);
  border-color: rgba(59, 130, 246, .3);
}
/* icon tiles inside cards get a soft inner highlight */
main :is(.w-10, .w-11, .w-12).rounded-xl:is(.bg-gradient-to-br, [class*="bg-electric"]) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 18px -8px rgba(59, 130, 246, .55);
}

/* ── 6. Section rhythm ──────────────────────────────────────────── */
/* a faint top glow on tinted sections so the page does not read as flat bands */
main > section.bg-offwhite:not(:first-child) {
  background-image:
    radial-gradient(900px 340px at 50% 0%, rgba(59, 130, 246, .07), transparent 70%),
    radial-gradient(700px 300px at 100% 100%, rgba(124, 58, 237, .05), transparent 70%);
}
/* dark bands and dark CTA panels get an aurora wash */
main .bg-midnight {
  background-image:
    radial-gradient(800px 320px at 15% 0%, rgba(59, 130, 246, .28), transparent 60%),
    radial-gradient(700px 320px at 90% 100%, rgba(124, 58, 237, .26), transparent 60%),
    radial-gradient(500px 260px at 60% 40%, rgba(34, 211, 238, .10), transparent 70%);
}
/* section dividers become a gradient hairline */
main .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .35), rgba(124, 58, 237, .35), transparent); border: 0; }

/* ── 7. Imagery ─────────────────────────────────────────────────── */
/* Blog cards that use a generated SVG illustration get a brand-tinted backdrop */
main .aspect-video:has(> img[src*="/blog-svg/"]) {
  background: linear-gradient(135deg, #e0ecff 0%, #dff7fd 50%, #ede5ff 100%);
}
main .aspect-video > img[src*="/blog-svg/"] { mix-blend-mode: multiply; }
main article.card-hover .aspect-video img { transition: transform .8s var(--sv-ease); }
main article.card-hover:hover .aspect-video img { transform: scale(1.04); }

/* ── 8. Blog article typography ─────────────────────────────────── */
.blog-post-hero .post-title { font-family: var(--font-heading), "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; color: var(--sv-ink); text-wrap: balance; }
.blog-post-hero .post-intro { font-size: 1.15rem; line-height: 1.7; color: #475569; }
.blog-post-hero .post-cat { box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset; }
.post-content h2 { font-family: var(--font-heading), "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -.022em; color: var(--sv-ink); }
.post-content h3 { font-family: var(--font-heading), "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; color: var(--sv-ink); }
.post-content p, .post-content li { font-size: 1.0625rem; line-height: 1.8; color: var(--sv-text); }
.post-content a:not(.btn):not([class*="bg-"]) {
  color: var(--sv-blue); text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .3);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s;
}
.post-content a:not(.btn):not([class*="bg-"]):hover { text-decoration-color: currentColor; }
.post-content table { border-radius: 12px; overflow: hidden; box-shadow: var(--sv-shadow-sm); }
.post-content img { border-radius: 14px; }
.post-content .callout {
  background: linear-gradient(180deg, #fbfaff, #f6f8ff);
}
.post-sidebar .sidebar-card { border-color: var(--sv-line); box-shadow: var(--sv-shadow-md); border-radius: 16px; }
.post-content .related-reading { box-shadow: var(--sv-shadow-sm); }

/* ── 9. Footer ──────────────────────────────────────────────────── */
footer { position: relative; }
footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .5), rgba(34, 211, 238, .5), rgba(124, 58, 237, .5), transparent);
}
footer a:not([class*="bg-"]) { transition: color .2s; }


/* ── 11. Hero atmosphere ────────────────────────────────────────── */
/* soft drifting aurora + a fine grid that fades out, behind every page hero */
main > section:first-child { position: relative; isolation: isolate; overflow-x: clip; }
main > section:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 12% 18%, rgba(59, 130, 246, .16), transparent 70%),
    radial-gradient(480px 360px at 88% 30%, rgba(124, 58, 237, .13), transparent 70%),
    radial-gradient(520px 320px at 60% 95%, rgba(34, 211, 238, .12), transparent 70%);
  animation: svAurora 18s ease-in-out infinite alternate;
}
main > section:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
}
.blog-post-hero { isolation: isolate; }
@keyframes svAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}

/* the hero dashboard illustration floats gently (uses `translate`, so any
   inline `transform: scale()` on the image is kept) */
main img[src*="hero-dashboard"] { animation: svFloat 7s ease-in-out infinite; }
@keyframes svFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ── 12. Card hover: gradient hairline border ───────────────────── */
main .card-hover.bg-white:hover {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, rgba(59, 130, 246, .55), rgba(34, 211, 238, .45), rgba(124, 58, 237, .55)) border-box;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  main > section:first-child::before, main img[src*="hero-dashboard"] { animation: none !important; }
}

/* ── 10. Motion safety ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  main .card-hover, main .card-hover:hover, main article.card-hover:hover .aspect-video img { transform: none !important; transition: none !important; }
  :is(a, button).animated-gradient::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Round 2: section-level upgrades
   ════════════════════════════════════════════════════════════════ */

/* ── 13. Editorial heading scale on large screens ───────────────── */
@media (min-width: 1024px) {
  main > section h2:is([class*="text-3xl"], [class*="text-4xl"]):not([class*="text-5xl"]):not(.post-content h2) {
    font-size: clamp(2.25rem, 1.55rem + 1.1vw, 2.8rem); line-height: 1.12;
  }
}

/* ── 14. Brand strip: names become refined chips ────────────────── */
.sv-marquee-track { gap: 14px; }
.sv-marquee-item {
  font-size: 15px; font-weight: 600; letter-spacing: 0; color: #334155;
  padding: 11px 20px; border-radius: 999px; background: #fff;
  border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow-sm);
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .3s var(--sv-ease), box-shadow .3s, border-color .3s, color .3s;
}
.sv-marquee-item::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-grad); opacity: .85;
}
.sv-marquee-item:hover { color: var(--sv-ink); border-color: rgba(59, 130, 246, .4); box-shadow: var(--sv-shadow-md); transform: translateY(-2px); }
@media (max-width: 640px) { .sv-marquee-track { gap: 10px; } .sv-marquee-item { font-size: 14px; padding: 9px 16px; } }

/* ── 15. Testimonial card ───────────────────────────────────────── */
[data-testimonial-slide] > .bg-white.rounded-2xl {
  border-color: var(--sv-line) !important; box-shadow: var(--sv-shadow-lg) !important; border-radius: 22px !important;
}
[data-testimonial-slide] > .bg-white.rounded-2xl::before {
  content: "\201C"; position: absolute; top: -18px; right: 28px; z-index: 0; pointer-events: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 190px; line-height: 1; font-weight: 700;
  background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .13;
}
[data-testimonial-slide] > .bg-white.rounded-2xl::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sv-grad);
}
[data-testimonial-prev], [data-testimonial-next] { transition: transform .25s var(--sv-ease), box-shadow .25s, border-color .25s; box-shadow: var(--sv-shadow-sm); }
[data-testimonial-prev]:hover, [data-testimonial-next]:hover { transform: translateY(-2px); box-shadow: var(--sv-shadow-md); border-color: rgba(59, 130, 246, .45) !important; }

/* ── 16. "Why" rows ─────────────────────────────────────────────── */
.why-row { border-radius: 14px; transition: background .3s, transform .3s var(--sv-ease); }
.why-row:hover { background: linear-gradient(90deg, rgba(59, 130, 246, .06), transparent 70%); }
.why-icon { transition: transform .35s var(--sv-ease), box-shadow .35s; }
.why-row:hover .why-icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 24px -10px rgba(59, 130, 246, .6); }

/* ── 17. Process / approach steps ───────────────────────────────── */
main .relative > .absolute.w-px.bg-border { background: linear-gradient(180deg, rgba(59, 130, 246, .5), rgba(34, 211, 238, .5), rgba(124, 58, 237, .5)); }
main .w-14.h-14.rounded-2xl.bg-white.border { box-shadow: var(--sv-shadow-md), 0 0 0 6px rgba(59, 130, 246, .06); transition: transform .3s var(--sv-ease), box-shadow .3s; }
main .relative.flex.gap-6:hover > .w-14.h-14.rounded-2xl.bg-white.border { transform: scale(1.06); box-shadow: var(--sv-shadow-lg), 0 0 0 8px rgba(59, 130, 246, .1); }

/* ── 18. Pricing cards ──────────────────────────────────────────── */
main .bg-white.rounded-2xl.p-8.flex.flex-col:is(.border, .border-2) { transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease); }
main .bg-white.rounded-2xl.p-8.flex.flex-col:is(.border, .border-2):hover { transform: translateY(-6px); box-shadow: var(--sv-shadow-lg); }
main .bg-white.rounded-2xl.p-8.border-2.border-electric {
  border-color: transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--sv-grad) border-box !important;
  box-shadow: 0 24px 60px -24px rgba(37, 99, 235, .45), 0 2px 6px rgba(15, 23, 42, .05) !important;
}
main .bg-white.rounded-2xl.p-8.flex.flex-col .text-4xl.font-bold {
  font-size: 2.75rem; letter-spacing: -.03em;
  background: var(--sv-grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── 19. Case study cards: KPI numbers ──────────────────────────── */
main .case-kpis .text-2xl.font-bold {
  background: var(--sv-grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em;
}
main .case-kpis { background: linear-gradient(180deg, #fbfcfe, #f4f7fb) !important; }

/* ── 20. Dark CTA panel: gradient ring ──────────────────────────── */
main .cta-glow-card { box-shadow: 0 40px 80px -40px rgba(30, 41, 90, .55); }
main .cta-glow-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(59, 130, 246, .8), rgba(34, 211, 238, .25) 40%, rgba(124, 58, 237, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── 21. Soft outline buttons ("Explore All Services") ──────────── */
.sv-btn-soft { transition: transform .3s var(--sv-ease), box-shadow .3s, border-color .3s, background .3s; }
.sv-btn-soft:hover { box-shadow: var(--sv-shadow-md); }

/* ── 22. FAQ accordions ─────────────────────────────────────────── */
main .border-b.border-border > button.w-full { transition: color .2s; border-radius: 8px; }
main .border-b.border-border > button.w-full:hover { color: var(--sv-blue); }
main .border-b.border-border > button.w-full svg { transition: transform .35s var(--sv-ease), color .2s; }

/* ── 23. Footer: deep navy finish ───────────────────────────────── */
footer.bg-offwhite {
  background: #0b1220 !important; border-top-color: transparent !important; color: #94a3b8;
  background-image:
    radial-gradient(700px 300px at 0% 0%, rgba(59, 130, 246, .16), transparent 65%),
    radial-gradient(700px 320px at 100% 100%, rgba(124, 58, 237, .16), transparent 65%) !important;
}
footer.bg-offwhite :is(h4, .text-darktext) { color: #fff !important; }
footer.bg-offwhite :is(p, li, .text-muted, .text-xs) { color: #94a3b8; }
footer.bg-offwhite a:not(.animated-gradient):not([aria-label]) { color: #cbd5e1; }
footer.bg-offwhite a:not(.animated-gradient):hover { color: #fff !important; }
footer.bg-offwhite a > img[alt="SellerVine"] { filter: brightness(0) invert(1); }
footer.bg-offwhite a[aria-label] {
  background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; color: #cbd5e1 !important;
  transition: background .25s, border-color .25s, transform .25s var(--sv-ease), color .25s;
}
footer.bg-offwhite a[aria-label]:hover { background: rgba(59, 130, 246, .25) !important; border-color: rgba(59, 130, 246, .6) !important; transform: translateY(-2px); color: #fff !important; }
footer.bg-offwhite input {
  background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; color: #fff !important;
}
footer.bg-offwhite input::placeholder { color: #64748b; }
footer.bg-offwhite input:focus { border-color: rgba(59, 130, 246, .7) !important; outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); }
footer.bg-offwhite .border-t.border-border { border-top-color: rgba(255, 255, 255, .08) !important; }
footer.bg-offwhite img.rounded-lg.shadow-sm { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .15) !important; }
footer.bg-offwhite .link-underline { text-decoration: none; }
footer.bg-offwhite .link-underline:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(59, 130, 246, .7); }
/* the old flat grey quote glyph is replaced by the gradient one above */
[data-testimonial-slide] > .bg-white.rounded-2xl > svg[viewBox="0 0 32 32"]:first-child { display: none; }

/* ════════════════════════════════════════════════════════════════
   Round 3: blog articles, case studies, about, mobile hero
   ════════════════════════════════════════════════════════════════ */

/* ── 24. Smooth in-page scrolling (TOC links, anchors) ──────────── */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 25. Blog article sidebar stays in view while reading ───────── */
@media (min-width: 1024px) {
  .post-sidebar { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .18) transparent; }
  .post-sidebar::-webkit-scrollbar { width: 6px; }
  .post-sidebar::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 6px; }
}
.post-sidebar .sidebar-card h4 { display: flex; align-items: center; gap: 8px; font-size: .92rem; letter-spacing: -.01em; }
.post-sidebar .toc-list a { padding: 3px 0; border-left: 2px solid transparent; margin-left: -10px; padding-left: 8px; transition: color .2s, border-color .2s; }
.post-sidebar .toc-list a:hover { color: var(--sv-blue); border-left-color: var(--sv-blue); }
.post-sidebar .rel-item a { transition: color .2s; }
.post-sidebar .rel-item a:hover { color: var(--sv-blue); }
/* the promo card in the sidebar */
.post-sidebar .sidebar-card[style*="amber-dim"] {
  background: linear-gradient(160deg, #eff6ff 0%, #f5f3ff 100%) !important;
  border: 1px solid transparent !important;
  background: linear-gradient(160deg, #eff6ff, #f5f3ff) padding-box, linear-gradient(135deg, rgba(59, 130, 246, .55), rgba(124, 58, 237, .55)) border-box !important;
  box-shadow: 0 18px 40px -20px rgba(37, 99, 235, .45) !important;
}
.post-sidebar .sidebar-card .btn.btn-primary { border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(37, 99, 235, .6); }

/* ── 26. Article FAQ: question + answer read as cards ───────────── */
.post-content :is(h2#faq, h2#faqs) ~ h3 {
  margin: 14px 0 0; padding: 16px 20px 10px; border: 1px solid var(--sv-line); border-bottom: 0;
  border-radius: 14px 14px 0 0; background: #f8fafc; font-size: 1.05rem;
}
.post-content :is(h2#faq, h2#faqs) ~ h3 + p {
  margin: 0 0 6px; padding: 10px 20px 18px; border: 1px solid var(--sv-line); border-top: 0;
  border-radius: 0 0 14px 14px; background: #fff;
}
.post-content :is(h2#faq, h2#faqs) ~ .callout { border-radius: 14px; border-left-width: 3px; }
.post-content .callout-title { font-weight: 700; color: var(--sv-ink); }

/* ── 27. "Related reading" block ────────────────────────────────── */
.post-content .related-reading { background: linear-gradient(160deg, #f8fafc, #f3f6fb) !important; border-radius: 16px !important; }
.post-content .related-reading h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem !important; }
.post-content .related-reading h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-grad); }
.post-content .related-reading ul { list-style: none !important; padding-left: 0 !important; margin: 4px 0 0 !important; }
.post-content .related-reading li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--sv-line); line-height: 1.5; }
.post-content .related-reading li::before { content: "\2192"; position: absolute; left: 2px; top: 9px; color: var(--sv-blue); font-weight: 700; }
.post-content .related-reading li a { text-decoration: none; font-weight: 500; }
.post-content .related-reading li a:hover { text-decoration: underline; }

/* ── 28. End-of-article promo panel ─────────────────────────────── */
.post-cta { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 60px -30px rgba(37, 99, 235, .4); }
.post-cta::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .18), transparent), radial-gradient(closest-side at 80% 30%, rgba(124, 58, 237, .16), transparent);
}
.post-cta > * { position: relative; }
.post-cta h3 { font-family: var(--font-heading), "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }

/* ── 29. Generic content cards (case studies, about, services) ──── */
main .bg-white.border.border-border.rounded-2xl:not(.card-hover):has(> h3, > .w-12 + h3, > div + h3) {
  transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease), border-color .3s;
}
main .bg-white.border.border-border.rounded-2xl:not(.card-hover):has(> h3, > .w-12 + h3, > div + h3):hover {
  transform: translateY(-3px); box-shadow: var(--sv-shadow-md); border-color: rgba(59, 130, 246, .28);
}
/* light icon tiles inside those cards */
main .w-12.h-12.rounded-xl.bg-gradient-to-br { box-shadow: 0 1px 0 #fff inset, 0 8px 18px -10px rgba(59, 130, 246, .5); }

/* case study "results" tiles on the dark band */
main .bg-midnight .rounded-2xl.border { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .1) !important; transition: background .3s, transform .3s var(--sv-ease); }
main .bg-midnight .rounded-2xl.border:hover { background: rgba(255, 255, 255, .07) !important; transform: translateY(-3px); }

/* ── 30. About: leadership avatars ──────────────────────────────── */
main .w-20.h-20.rounded-full { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(59, 130, 246, .22), 0 14px 28px -12px rgba(59, 130, 246, .55); transition: transform .35s var(--sv-ease); }
main .card-hover:hover .w-20.h-20.rounded-full { transform: scale(1.06); }

/* ── 31. Mobile hero: tighter stack ─────────────────────────────── */
@media (max-width: 1023px) {
  main .hero-lede { font-size: 1.02rem; max-width: 420px; }
  main .hero-trust-row { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 12px !important; margin-top: 22px !important; }
  main .hero-trust-row > div:last-child { text-align: left; }
  main .hero-badge-row { margin-top: 12px !important; }
  main .hero-badge-row .hero-partner-badge { height: 64px !important; border: 1px solid var(--sv-line) !important; box-shadow: var(--sv-shadow-sm) !important; border-radius: 10px; }
  main .hero-img-col { margin-top: -4px; }
}
/* blog pages set overflow-x:hidden on <main>, which turns it into a scroll
   container and silently disables position:sticky. `clip` keeps the
   horizontal clipping without that side effect. */
main:has(.post-sidebar) { overflow-x: clip !important; overflow-y: visible !important; }

/* ── Mobile article fit ─────────────────────────────────────────────
   The article grid used `1fr` (= minmax(auto, 1fr)), so one wide child
   (a table, the promo panel, a long unbroken string) stretched the whole
   column past the screen and the page got cropped on the right. */
.post-layout > * { min-width: 0; }
.post-content { min-width: 0; overflow-wrap: break-word; }
.post-content img, .post-content video, .post-content iframe, .post-content svg { max-width: 100%; height: auto; }
@media (max-width: 1024px) {
  main .post-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; padding: 36px 0; }
  .post-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content table::-webkit-scrollbar { height: 6px; }
  .post-content table::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .2); border-radius: 6px; }
  .post-cta { padding: 28px 20px !important; }
  .post-cta p { max-width: 100% !important; }
  .post-cta a { max-width: 100%; white-space: normal; text-align: center; }
  .post-content .related-reading { padding: 18px !important; }
}
/* long inline code or formulas must wrap instead of widening the page */
.post-content code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.post-content pre { max-width: 100%; overflow-x: auto; }