* { margin: 0; padding: 0; box-sizing: border-box; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #04078e; border-radius: 4px; }
    .grain::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 1;
    }
    html { scroll-behavior: smooth; }
    .heading-tight { letter-spacing: -0.03em; }
    .body-relaxed { line-height: 1.7; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes orbit {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes pulse-ring {
      0% { transform: scale(0.95); opacity: 0.6; }
      50% { transform: scale(1.05); opacity: 0.2; }
      100% { transform: scale(0.95); opacity: 0.6; }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes dot-pulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.4); opacity: 1; }
    }
    .product-showcase {
      position: relative;
    }
    .product-showcase .orbit-ring {
      position: absolute;
      border-radius: 50%;
      border: 1.5px solid rgba(234,83,41,0.15);
      animation: orbit linear infinite;
      pointer-events: none;
    }
    .product-showcase .orbit-ring::after {
      content: '';
      position: absolute;
      top: -4px;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ea5329;
      box-shadow: 0 0 12px 3px rgba(234,83,41,0.5);
    }
    .product-showcase .orbit-ring-1 {
      inset: -20px;
      animation-duration: 8s;
    }
    .product-showcase .orbit-ring-2 {
      inset: -40px;
      border-color: rgba(4,7,142,0.12);
      animation-duration: 12s;
      animation-direction: reverse;
    }
    .product-showcase .orbit-ring-2::after {
      background: #4345a7;
      box-shadow: 0 0 12px 3px rgba(67,69,167,0.5);
    }
    .product-showcase .glow-base {
      position: absolute;
      inset: -10%;
      background: radial-gradient(ellipse at center, rgba(234,83,41,0.12) 0%, transparent 70%);
      animation: pulse-ring 4s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    .product-showcase .shimmer-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(234,83,41,0.6), transparent);
      background-size: 200% 100%;
      animation: shimmer 3s ease-in-out infinite;
      border-radius: 2px;
    }
    .product-showcase .feature-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ea5329;
      box-shadow: 0 0 0 4px rgba(234,83,41,0.2);
      animation: dot-pulse 2.5s ease-in-out infinite;
      z-index: 20;
    }
    .product-showcase .feature-dot::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px solid rgba(234,83,41,0.3);
      animation: pulse-ring 2.5s ease-in-out infinite;
    }
    .animate-fade-up {
      animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }
    .animate-fade-in {
      animation: fadeIn 0.6s ease forwards;
      opacity: 0;
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .btn-primary {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }
    .btn-primary:hover {
      transform: scale(1.04);
      box-shadow: 0 8px 30px -8px rgba(234, 83, 41, 0.5);
    }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary:focus-visible { outline: 3px solid #f58d72; outline-offset: 3px; }
    .btn-secondary {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
    }
    .btn-secondary:hover { transform: scale(1.04); background-color: rgba(255,255,255,0.15); }
    .btn-secondary:active { transform: scale(0.98); }
    .btn-secondary:focus-visible { outline: 3px solid rgba(255,255,255,0.6); outline-offset: 3px; }
    .card-hover {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 60px -15px rgba(4, 7, 142, 0.15), 0 8px 20px -8px rgba(4, 7, 142, 0.1);
    }
    .story-card { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; }
    .story-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px -15px rgba(4, 7, 142, 0.18), 0 6px 16px -6px rgba(4, 7, 142, 0.10); }
    .story-card-img { filter: saturate(0.92); transition: filter 0.4s ease, transform 0.5s ease; }
    .story-card:hover .story-card-img { filter: saturate(1.08); transform: scale(1.04); }
    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #ea5329;
      transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .nav-link:hover::after { width: 100%; }
    .nav-link:hover { color: #ea5329; }
    .stat-card {
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #04078e, #ea5329);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .stat-card:hover::before { transform: scaleX(1); }
    .mesh-bg {
      background:
        radial-gradient(ellipse at 20% 50%, rgba(4, 7, 142, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(234, 83, 41, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(4, 7, 142, 0.04) 0%, transparent 50%);
    }
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-menu.open { transform: translateX(0); }
    @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }
    .shadow-elevated {
      box-shadow: 0 1px 2px rgba(4,7,142,0.04), 0 4px 12px rgba(4,7,142,0.06), 0 12px 36px rgba(4,7,142,0.08);
    }
    .shadow-floating {
      box-shadow: 0 2px 4px rgba(4,7,142,0.04), 0 8px 24px rgba(4,7,142,0.08), 0 24px 60px rgba(4,7,142,0.12);
    }
    /* Comparison table */
    .comparison-row { transition: background-color 0.3s ease; }
    .comparison-row:hover { background-color: rgba(4,7,142,0.02); }
      .reg{font-size:.55em;vertical-align:super;line-height:0;}

/* Physicians SVG charts: the draw-in animation script isn't ported, so reveal
   the lines/paths that are otherwise left at opacity:0 (they'd be invisible). */
.pressure-line, .pressure-draw, .pressure-draw2, .pressure-dots, .pressure-dots2,
.drain-phase, .drain-line, .drain-line-somavac, .drain-dots-gray, .drain-dots-navy {
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
}

/* ===== Flush full-bleed sections =====
   Baked page bodies are a stack of full-width <section>s, each carrying its own
   vertical padding (py-*). On page.html they render as flow-layout children of
   .wp-block-post-content, so WordPress' default block-gap rule
   — :where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--50) } —
   inserts a page-background strip between adjacent sections. Cancel that margin for
   <section> children only (this selector's specificity beats the :where() default,
   so source order is irrelevant): colored/full-bleed sections then sit flush while
   their internal py-* padding is untouched. Non-section blocks (news, legal, story
   bodies) keep their normal block spacing. Front-page sections aren't flow children,
   so this is a no-op there. */
.is-layout-flow > section { margin-block-start: 0; }

/* ===== News article (single post) ===== */
.somavac-article-hero { position: relative; padding: 8rem 1.5rem 4rem; background: linear-gradient(135deg, #01022f 0%, #04078e 60%, #020347 100%); }
.somavac-article-hero .somavac-back a { color: #f58d72; font-weight: 600; font-size: .875rem; text-decoration: none; }
.somavac-article-hero .somavac-back a:hover { color: #fcd9d0; }
.somavac-article-hero .somavac-eyebrow { color: #f26743; font-weight: 700; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; margin: 1rem 0 .75rem; }
.somavac-article-hero .somavac-eyebrow a { color: inherit; text-decoration: none; }
.somavac-article-title { color: #fff !important; font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 .75rem; }
.somavac-article-date { color: #9a9bcf; font-size: 1rem; }
.somavac-article-wrap { padding: 4rem 1.5rem; }
.somavac-article-wrap .article-body { font-family: "Source Sans 3", sans-serif; color: #374151; font-size: 1.125rem; line-height: 1.7; }

/* Hide the hero story image until JS swaps in the real photo (prevents the
   leftover placeholder from flashing on load). JS sets visibility:visible. */
[data-story-image] { visibility: hidden; }

/* ===== Patient story reader body (was missing — restores paragraph spacing + drop cap) ===== */
.story-body p {
  font-family: 'Source Sans 3', Verdana, Geneva, sans-serif;
  font-size: 1.125rem;
  line-height: 1.85;
  color: #2d3748;
  margin-bottom: 1.5rem;
}
.story-body p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .story-body p { font-size: 1.1875rem; line-height: 1.9; }
}
.story-body p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  float: left;
  font-size: 4.5rem;
  line-height: 0.9;
  padding: 0.4rem 0.85rem 0 0;
  color: #04078e;
}

/* ===== Large-screen scaling =====
   The design's content is capped at ~1280px. On big monitors that looks small,
   so scale the whole layout up proportionally by nudging the root font size
   (everything is rem-based, so text, spacing, and the content width all grow
   together). Reverts to normal on laptops/tablets/phones. */
@media (min-width: 1500px) { html { font-size: 17px; } }
@media (min-width: 1800px) { html { font-size: 18.5px; } }
@media (min-width: 2100px) { html { font-size: 20px; } }
@media (min-width: 2560px) { html { font-size: 22px; } }

/* ===== Fluent Forms — match the SOMAVAC brand (navy/coral, rounded inputs) ===== */
/* Baked into the theme so it ships on every re-upload. Scoped to .frm-fluent-form.   */
/* White card wrapper to match the original design's bg-white rounded-2xl shadow-floating p-8 form */
.frm-fluent-form {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(4,7,142,.04), 0 8px 24px rgba(4,7,142,.08), 0 24px 60px rgba(4,7,142,.12);
  padding: 2rem;
  font-family: "Source Sans 3", Verdana, sans-serif;
}
@media (min-width: 1024px) { .frm-fluent-form { padding: 2.5rem; } }
.frm-fluent-form .ff-el-group { margin-bottom: 1.5rem; }
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-input--label {
  color: #02055e;            /* navy-700 */
  font-weight: 500;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-is-required.asterisk-left label:before { color: #ea5329; }
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type=text], .frm-fluent-form input[type=email],
.frm-fluent-form input[type=tel], .frm-fluent-form input[type=number], .frm-fluent-form textarea, .frm-fluent-form select {
  border-radius: 12px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  padding: 12px 16px !important;
  font-size: .95rem !important;
  color: #1f2937 !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
.frm-fluent-form .ff-el-form-control::placeholder { color: #9ca3af !important; }
.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form input:focus, .frm-fluent-form textarea:focus, .frm-fluent-form select:focus {
  border-color: #4345a7 !important;           /* navy-400 */
  background: #fff !important;
  box-shadow: 0 0 0 3px #c5c6e3 !important;    /* navy-100 focus ring */
  outline: none !important;
}
.frm-fluent-form textarea { resize: none; }
/* Multi-select fields render via Choices.js — style the WRAPPER, strip the inner
   control, so it reads as one clean field instead of a box-in-a-box. */
.frm-fluent-form .choices { margin-bottom: 0 !important; }
/* Choices.js copies the original <select>'s `.ff-el-form-control` class onto its wrapper, so the wrapper
   picks up the field border above AND `.choices__inner` adds a second one => box-in-a-box. Neutralize the
   wrapper; `.choices__inner` is the one visible field. (Rehearsal #25) */
.frm-fluent-form .choices.ff-el-form-control {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.frm-fluent-form .choices__inner {
  border-radius: 12px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  padding: 9px 14px !important;
  min-height: 47px !important;
  font-size: .95rem !important;
}
.frm-fluent-form .choices.is-focused .choices__inner,
.frm-fluent-form .choices.is-open .choices__inner {
  border-color: #4345a7 !important;
  box-shadow: 0 0 0 3px #c5c6e3 !important;
  background: #fff !important;
}
.frm-fluent-form .choices__input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: .95rem !important;
}
.frm-fluent-form .choices__list--dropdown {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(4,7,142,.10) !important;
}
.frm-fluent-form .choices__list--multiple .choices__item {
  background: #04078e !important;   /* navy-500 chips */
  border: none !important;
  border-radius: 8px !important;
}
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type=submit] {
  width: 100%;
  background: #ea5329 !important;   /* coral-500 */
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 16px 32px !important;
  font-family: "Source Sans 3", Verdana, sans-serif;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background-color .2s;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type=submit]:hover {
  background: #c44422 !important;   /* coral-600 */
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -8px rgba(234,83,41,.5);
}
.frm-fluent-form .ff-btn-submit:active,
.frm-fluent-form button[type=submit]:active { transform: translateY(0); }

/* --- Phone field (intl-tel-input): flag gutter + submit-button alignment --- */
/* The brand input rule above sets `padding: 12px 16px !important` on tel inputs, which overrides the
   left gutter intl-tel-input reserves for the country-flag button — so the placeholder slides under
   the flag. Restore that gutter from iti's own var (tracks the real flag + arrow width; not a magic
   48px). Scoped to the dropdown-enabled tel input so plain tel fields are untouched. */
.frm-fluent-form .iti--allow-dropdown input[type=tel] {
  padding-left: var(--iti-selected-country-arrow-padding) !important;
}
/* Where a phone input and the Submit button share a 2-column row ("Enable Mobile Support"),
   give them a single shared height and align their tops so they read as one control pair.
   Each keeps its own horizontal padding; vertical padding is dropped in favour of the fixed
   height so the two boxes match exactly regardless of font-size/padding differences. */
.frm-fluent-form .ff-column-container { align-items: flex-start; }
.frm-fluent-form .ff-column-container input[type=tel],
.frm-fluent-form .ff-column-container .ff-btn-submit {
  height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Clinical citation superscripts --- */
sup.refnum {
  font-size: .62em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  color: #f26743; /* coral-400 */
  margin-left: 1px;
  white-space: nowrap;
}
sup.refnum a { color: inherit; text-decoration: none; }

/* --- References section (rendered below the footer) --- */
.somavac-references {
  background: #01022f; /* navy-900, continues the footer */
  border-top: 1px solid rgba(255,255,255,0.08);
}
.somavac-references__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
}
@media (min-width: 1024px) {
  .somavac-references__inner { padding-left: 2rem; padding-right: 2rem; }
}
.somavac-references__title {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 .75rem;
}
.somavac-references__list {
  list-style: decimal;
  padding-left: 1.35rem;
  margin: 0;
  max-width: 64rem;
}
.somavac-references__list li {
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin-bottom: .3rem;
  padding-left: .2rem;
}
.somavac-references__list li em { font-style: italic; color: rgba(255,255,255,0.55); }

/* ------------------------------------------------------------------ */
/* De-Kadence: legal / core-block content pages (page.html post-content). */
/* theme.css loads after tailwind.css, so these beat Tailwind's preflight  */
/* reset (which would otherwise flatten core-block heading sizes + lists). */
/* ------------------------------------------------------------------ */
.sv-page-hero {
  background: linear-gradient(135deg, #04078e 0%, #02055e 60%, #01022f 100%);
}
.sv-page-hero h1 {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800; color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.sv-prose { color: #1f2937; font-family: "Source Sans 3", Verdana, Geneva, sans-serif; }
.sv-prose h2 { font-family:"Montserrat",Arial,sans-serif; font-weight:700; color:#020347; font-size:clamp(1.6rem,3vw,2rem);   line-height:1.2; margin:2.5rem 0 1rem; }
.sv-prose h3 { font-family:"Montserrat",Arial,sans-serif; font-weight:700; color:#02055e; font-size:clamp(1.2rem,2vw,1.4rem); line-height:1.3; margin:2rem 0 .75rem; }
.sv-prose h4 { font-family:"Montserrat",Arial,sans-serif; font-weight:700; color:#02055e; font-size:1.1rem; margin:1.5rem 0 .5rem; }
.sv-prose p  { font-size:1rem; line-height:1.7; margin:0 0 1.1rem; }
.sv-prose ul, .sv-prose ol { margin:0 0 1.2rem; padding-left:1.5rem; }
.sv-prose ul { list-style: disc; } .sv-prose ol { list-style: decimal; }
.sv-prose li { font-size:1rem; line-height:1.7; margin-bottom:.4rem; }
.sv-prose a  { color:#ea5329; text-decoration: underline; }
.sv-prose a:hover { color:#c44422; }
.sv-prose strong, .sv-prose b { font-weight:700; }

/* De-Kadence: accordion (Kadence accordion/pane -> core/details) styled to the design system. */
.sv-accordion { max-width: 820px; margin-inline: auto; }
.sv-accordion details {
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
  margin-bottom: .85rem; box-shadow: 0 1px 3px rgba(4,7,142,0.06); overflow: hidden;
}
.sv-accordion summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; color: #020347; font-size: 1.05rem;
}
.sv-accordion summary::-webkit-details-marker { display: none; }
.sv-accordion summary::after { content: "+"; color: #ea5329; font-size: 1.6rem; line-height: 1; font-weight: 400; }
.sv-accordion details[open] summary { border-bottom: 1px solid #eef0f5; }
.sv-accordion details[open] summary::after { content: "\2212"; } /* minus */
.sv-accordion details > :not(summary) { margin: .75rem 1.25rem; }
.sv-accordion details > :not(summary):first-of-type { margin-top: 1rem; }
.sv-accordion details p { line-height: 1.7; color: #1f2937; }
/* Native <details> open/close is a native snap. Left native by design: it's fully
   accessible and it's low-traffic legacy transcript content. (A ::details-content /
   interpolate-size progressive enhancement was tried and reverted — it clipped the
   open content in a supporting engine; not worth a bespoke JS accordion here.) */

/* ===== FAQ accordion (button-based disclosure; toggled by theme.js) =====
   Content pages (patient-support, physicians) bake <button.faq-toggle> +
   <div.faq-content.hidden> (single <p>, with px-6 pb-6) + <svg.faq-icon>. theme.js
   flips aria-expanded, drives the panel's max-height, and toggles .faq-icon-open.
   Eased open/close via max-height (JS measures scrollHeight, then releases to none
   so the open panel still reflows on resize). The baked px-6 pb-6 is stripped off
   the collapsing box and moved onto the inner <p>: an element's OWN padding is a
   hard floor that neither max-height:0 nor a 0fr grid track can shrink past, but the
   child's padding is just clipped overflow, so the panel collapses fully to 0.
   Chevron shares the easing; prefers-reduced-motion makes both instant (JS then
   sets max-height directly, no transition to wait on). */
.faq-content {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: max-height 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-content > * { padding: 0 1.5rem 1.5rem; }
.faq-icon { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
.faq-icon-open { transform: rotate(180deg); }
.faq-toggle:focus-visible { outline: 2px solid #ea5329; outline-offset: -2px; border-radius: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .faq-content, .faq-icon { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Landing pages (single-landing-page.html) — minimal chrome for SMS   */
/* training pages opened on phones. Component classes (theme.css loads  */
/* after tailwind) so the DB post_content needs no Tailwind scan.       */
/* ------------------------------------------------------------------ */
.sv-lp-header { background:#fff; border-bottom:1px solid #e8e8f4; }
.sv-lp-header__inner { max-width:760px; margin-inline:auto; padding:.6rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.sv-lp-header__logo img { height:34px; width:auto; display:block; }
@media (min-width:768px){ .sv-lp-header__logo img { height:52px; } .sv-lp-header__inner { padding:.85rem 1.5rem; } }
.sv-lp-header__support { display:inline-flex; align-items:center; gap:.4rem; color:#ea5329; font-family:"Source Sans 3",sans-serif; font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap; }
.sv-lp-header__support svg { width:1.15rem; height:1.15rem; }
.sv-lp-header__support-label { color:#02055e; font-weight:600; }
@media (max-width:480px){ .sv-lp-header__support-label { display:none; } }

.sv-lp-main { max-width:760px; width:100%; margin-inline:auto; box-sizing:border-box; padding:2.25rem 1.25rem 1rem; }
.sv-lp-main > * { max-width:100%; }
.sv-lp-header__inner, .sv-lp-footer__inner { box-sizing:border-box; }
.sv-lp-title { text-align:center; font-family:"Montserrat",Arial,sans-serif; font-weight:800; color:#02055e; font-size:clamp(1.7rem,5vw,2.4rem); line-height:1.15; letter-spacing:-.01em; margin:0 0 1.5rem; }

.sv-lp-video { position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(4,7,142,0.12); background:#01022f; }
.sv-lp-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.sv-lp-more { margin-top:2rem; text-align:center; }
.sv-lp-more__label { font-family:"Source Sans 3",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:#6b7280; margin:0 0 .85rem; }
.sv-lp-more__links { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.sv-lp-more__links a { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.1rem; border:2px solid #c5c6e3; border-radius:9999px; background:#fff; color:#02055e; font-family:"Source Sans 3",sans-serif; font-weight:600; font-size:.95rem; text-decoration:none; transition:border-color .2s,color .2s; }
.sv-lp-more__links a:hover { border-color:#ea5329; color:#ea5329; }
.sv-lp-more__links svg { width:1.1rem; height:1.1rem; color:#ea5329; flex:none; }

.sv-lp-footer { background:#020347; color:#fff; margin-top:3rem; }
.sv-lp-footer__inner { max-width:760px; margin-inline:auto; padding:2rem 1.25rem; text-align:center; }
.sv-lp-footer__nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.25rem; margin-bottom:1rem; }
.sv-lp-footer__nav a { color:#c5c6e3; font-family:"Source Sans 3",sans-serif; font-size:.9rem; text-decoration:none; }
.sv-lp-footer__nav a:hover { color:#fff; }
.sv-lp-footer__support { display:inline-block; color:#f26743; font-family:"Source Sans 3",sans-serif; font-weight:700; font-size:.95rem; text-decoration:none; }
.sv-lp-footer__copy { color:#9a9bcf; font-size:.78rem; margin:.9rem 0 0; }

/* Sticky footer for ALL templates: on short pages (legal, landing) the footer   */
/* pins to the viewport bottom; on long pages it sits in normal flow.            */
.wp-site-blocks { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.wp-site-blocks > footer { margin-top:auto; }

/* Landing page document card (drain-tracker PDF) — upgraded in place by the landing bundle. */
.sv-lp-intro { text-align:center; color:#4b5563; font-family:"Source Sans 3",sans-serif; font-size:1.05rem; line-height:1.6; max-width:34rem; margin:0 auto; }
.sv-lp-doc { max-width:420px; margin:1.75rem auto 0; text-align:center; padding:2rem 1.5rem; border:1px solid #e5e7eb; border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(4,7,142,0.08); }
.sv-lp-doc__icon svg { width:44px; height:44px; color:#ea5329; margin:0 auto .75rem; display:block; }
.sv-lp-doc__title { font-family:"Montserrat",Arial,sans-serif; font-weight:700; color:#02055e; font-size:1.15rem; margin:0 0 .25rem; }
.sv-lp-doc__meta { color:#6b7280; font-family:"Source Sans 3",sans-serif; font-size:.85rem; margin:0 0 1.25rem; }
.sv-lp-doc__actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.sv-lp-doc__btn { display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.4rem; border-radius:9999px; font-family:"Source Sans 3",sans-serif; font-weight:600; font-size:.95rem; text-decoration:none; border:2px solid #c5c6e3; color:#02055e; background:#fff; cursor:pointer; }
.sv-lp-doc__btn:hover { border-color:#ea5329; color:#ea5329; }
.sv-lp-doc__btn--primary { background:#ea5329; border-color:#ea5329; color:#fff; }
.sv-lp-doc__btn--primary:hover { background:#c44422; border-color:#c44422; color:#fff; }

/* News category filter pills — active (aria-pressed) state + hover.             */
/* JS (news-filter.js) toggles aria-pressed; the active pill reads navy-filled.  */
.filter-chip { cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.filter-chip:hover { border-color:#02055e; color:#02055e; }
.filter-chip[aria-pressed="true"] { background:#02055e; border-color:#02055e; color:#fff; }
.filter-chip[aria-pressed="true"]:hover { background:#02055e; border-color:#02055e; color:#fff; }

/* News filter animation (driven by news-filter.js). The grid gets .is-filtering only while a swap  */
/* is in flight, so these fast transitions never fight the cards' .reveal / .card-hover ones. The   */
/* grid height is animated between states so the footer doesn't jump; overflow is clipped meanwhile. */
[data-news-grid] { transition: height .22s ease; }
[data-news-grid].is-filtering { overflow: hidden; }
[data-news-grid].is-filtering .news-card { transition: opacity .2s ease, transform .2s cubic-bezier(0.16,1,0.3,1); }
[data-news-grid] .news-card.is-leaving  { opacity: 0; transform: translateY(6px); }
[data-news-grid] .news-card.is-entering { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  [data-news-grid] { transition: none; }
  [data-news-grid].is-filtering .news-card { transition: none; }
  [data-news-grid] .news-card.is-leaving,
  [data-news-grid] .news-card.is-entering { opacity: 1; transform: none; }
}