/* ==========================================================================
   StudyWorms component styles.
   Applied via the "Additional CSS class(es)" field on core blocks inside
   the patterns in /patterns. Colors, fonts, and spacing come from
   theme.json (--wp--preset--*); this file only covers layout/shape that
   theme.json can't express (grids, cards, badges, the accordion, etc).
   ========================================================================== */

/* ---- Header / navigation ---------------------------------------------- */
.sw-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--line-soft);
}
.sw-header .wp-block-navigation{ font-family: var(--wp--preset--font-family--body); }
.sw-header .wp-block-navigation a{ font-weight: 500; }
.sw-header .wp-block-navigation .current-menu-item > a{ font-weight: 700; color: var(--wp--preset--color--ink); }
.sw-header .wp-block-site-logo img{ display:block; }
.sw-header .wp-block-navigation__submenu-container{
  border-radius: var(--wp--custom--radius-sm, 10px) !important;
  box-shadow: 0 24px 48px -18px rgba(22,35,63,.26), 0 8px 20px -8px rgba(22,35,63,.12) !important;
}

/* ---- Hero panel (dark card with mascot + credential list) ------------- */
.sw-hero-panel{
  background: var(--wp--preset--gradient--hero-navy);
  border-radius: var(--wp--preset--spacing--md, 24px);
  padding: 34px 32px;
  color: #fff;
  position: relative;
  box-shadow: 0 24px 48px -18px rgba(22,35,63,.26), 0 8px 20px -8px rgba(22,35,63,.12);
}
.sw-hero-panel h2, .sw-hero-panel h3, .sw-hero-panel p{ color: #fff; }
.sw-mascot-box{ position: relative; text-align: center; padding: 6px 0 22px; }
.sw-mascot-box img{ max-height: 215px; width: auto; display: inline-block; }

.sw-price-sticker{
  position: absolute; top: -16px; right: -16px;
  background: var(--wp--preset--gradient--warm);
  color: #fff;
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; line-height: 1.1;
  box-shadow: 0 14px 28px -10px rgba(224,106,79,.6), 0 0 0 4px #fff;
}
.sw-price-sticker .sw-from{ font-family: var(--wp--preset--font-family--body); font-size: .6rem; font-weight: 600; opacity: .85; margin-bottom: 1px; }
.sw-price-sticker .sw-amount{ font-size: 1.05rem; display: block; }
.sw-price-sticker .sw-per{ font-size: .62rem; font-weight: 500; letter-spacing: .02em; }

.sw-credential-row{
  display: flex; gap: 14px; padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  /* Same fix as .sw-step: neutralize the parent's "constrained" layout
     auto-centering per child, which otherwise indents rows differently
     depending on how long their title text is. */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sw-credential-row:first-of-type{ border-top: none; }
.sw-credential-row .sw-ct-title,
.sw-credential-row .sw-ct-sub{
  /* .sw-credential-row itself is declared "constrained" in the pattern,
     so WP adds margin:auto + a max-width to these two children too.
     On a flex row that auto-margin eats the row's leftover space and
     shoves shorter titles to the right. Kill it and use fixed flex
     columns instead so alignment doesn't depend on text length. */
  margin: 0 !important;
  max-width: none !important;
}
.sw-credential-row .sw-ct-title{ font-weight: 600; font-size: .96rem; color: #fff; flex: 0 0 38%; }
.sw-credential-row .sw-ct-sub{ font-size: .84rem; color: #A9B1C9; flex: 1; }

/* ---- Trust chips / pills ------------------------------------------------ */
.sw-trust-strip{ display: flex; flex-wrap: wrap; gap: 10px; }
.sw-trust-chip{
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal);
  border-radius: 999px; padding: 7px 15px; font-size: .83rem; font-weight: 600;
}
.sw-trust-chip.is-gold{ background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); }
.sw-trust-chip.is-blue{ background: var(--wp--preset--color--blue-tint); color: var(--wp--preset--color--blue); }
.sw-trust-chip.is-plum{ background: var(--wp--preset--color--plum-tint); color: var(--wp--preset--color--plum); }
.sw-trust-chip.is-coral{ background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--coral); }

/* ---- Writer profile cards ---------------------------------------------- */
.sw-writer-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sw-writer-card{
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--preset--spacing--sm, 16px);
  padding: 18px 18px 14px;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-writer-card .sw-w-head{
  display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
  /* Proactive: .sw-writer-card is a "constrained" group, so without
     this its width (and therefore centering) would depend on how
     long the name/degree text is. See README "Lessons" section. */
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.sw-writer-card .sw-w-head img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sw-writer-card .sw-w-name{ font-weight: 600; font-size: .95rem; line-height: 1.3; margin: 0 0 2px !important; }
.sw-writer-card .sw-w-deg{ font-size: .79rem; color: var(--wp--preset--color--ink-soft); font-weight: 500; margin: 0 !important; }
.sw-writer-card .sw-w-sub{ font-size: .85rem; color: var(--wp--preset--color--ink-soft); margin: 0 0 12px; }
.sw-writer-card .sw-w-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--wp--preset--color--line-soft); padding-top: 10px;
  font-size: .82rem; color: var(--wp--preset--color--ink-soft);
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.sw-writer-card .sw-w-rate{ color: var(--wp--preset--color--gold-deep); font-weight: 600; }
@media (max-width: 880px){ .sw-writer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .sw-writer-grid{ grid-template-columns: 1fr; } }

/* ---- Testimonial cards --------------------------------------------------- */
.sw-testi-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.sw-testi-card{
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--preset--spacing--md, 24px);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-testi-card p{ font-style: italic; }
.sw-stars{ color: var(--wp--preset--color--gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: .4em; }
.sw-testi-foot{
  display: flex; align-items: center; gap: 12px; margin-top: 1em;
  /* Same proactive fix as .sw-w-head — see README "Lessons" section. */
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.sw-testi-foot img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sw-testi-name{ font-weight: 600; font-size: .9rem; margin: 0 0 2px !important; }
.sw-testi-role{ font-size: .8rem; font-weight: 500; color: var(--wp--preset--color--ink-soft); margin: 0 !important; }
@media (max-width: 880px){ .sw-testi-grid{ grid-template-columns: 1fr; } }

/* ---- Pricing panel -------------------------------------------------------- */
.sw-price-panel{ display: grid; grid-template-columns: 1fr 1fr; }
.sw-price-panel > .wp-block-group{ padding: 26px 28px; }
.sw-price-panel > .wp-block-group + .wp-block-group{ border-left: 1px solid var(--wp--preset--color--line); }
.sw-price-list{ list-style: none; margin: 0; padding: 0; }
.sw-price-list li{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-top: 1px dashed var(--wp--preset--color--line);
  font-size: .92rem;
}
.sw-price-list li:first-child{ border-top: none; }
.sw-price-list .sw-tag{ font-size: .78rem; font-weight: 600; color: var(--wp--preset--color--teal); }
@media (max-width: 880px){
  .sw-price-panel{ grid-template-columns: 1fr; }
  .sw-price-panel > .wp-block-group + .wp-block-group{ border-left: none; border-top: 1px solid var(--wp--preset--color--line); }
}

/* ---- Check-list (icon + text) ---------------------------------------------- */
.sw-check-list{ list-style: none; margin: 1.2em 0 1.6em; padding: 0; }
.sw-check-list li{
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-top: 1px solid var(--wp--preset--color--line-soft);
  font-size: .95rem;
}
.sw-check-list li:first-child{ border-top: none; }
.sw-check-list svg{ flex-shrink: 0; margin-top: 3px; color: var(--wp--preset--color--teal); }

/* ---- Definition cards (2-col, colored top border) --------------------------- */
.sw-def-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.sw-def-card{
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--teal);
  border-radius: var(--wp--preset--spacing--sm, 10px);
  padding: 16px 18px; font-size: .92rem; color: var(--wp--preset--color--ink-soft);
}
.sw-def-card.is-coral{ border-top-color: var(--wp--preset--color--coral); }
.sw-def-card.is-blue{ border-top-color: var(--wp--preset--color--blue); }
.sw-def-card.is-gold{ border-top-color: var(--wp--preset--color--gold); }
.sw-def-card b{ display: block; color: var(--wp--preset--color--ink); font-weight: 600; margin-bottom: 3px; font-size: .95rem; }
@media (max-width: 880px){ .sw-def-grid{ grid-template-columns: 1fr; } }

/* ---- Comparison table -------------------------------------------------------- */
.sw-cmp-table{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; border-radius: var(--wp--preset--spacing--sm, 10px); overflow: hidden; box-shadow: 0 1px 2px rgba(22,35,63,.05); }
.sw-cmp-table th{ text-align: left; padding: 12px 16px; font-size: .82rem; font-weight: 600; }
.sw-cmp-table th:first-child{ background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal); }
.sw-cmp-table th:last-child{ background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--coral); }
.sw-cmp-table td{ padding: 13px 16px; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.sw-cmp-table td:first-child{ background: rgba(220,241,234,.35); }
.sw-cmp-table td:last-child{ background: rgba(251,226,217,.3); }
@media (max-width: 880px){
  .sw-cmp-table, .sw-cmp-table tbody, .sw-cmp-table tr, .sw-cmp-table td{ display: block; width: 100%; }
  .sw-cmp-table thead{ display: none; }
  .sw-cmp-table td{ border-radius: var(--wp--preset--spacing--sm, 10px); margin-bottom: 8px; border-bottom: 1px solid var(--wp--preset--color--line); }
}

/* ---- Numbered steps list (ordered list, distinct look from .sw-steps) -------- */
.sw-step-ol{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--wp--preset--color--line);
  /* Defensive from the start this time: neutralize the "constrained"
     layout auto-margin the parent group injects into each direct
     child, so alignment never depends on how long the row's text is
     (see .sw-step / .sw-credential-row for where this bit us before). */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sw-step-ol:first-child{ border-top: none; }
.sw-step-ol-num{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: #fff; font-size: 1.05rem;
  background: var(--wp--preset--gradient--warm);
}
.sw-step-ol:nth-child(2) .sw-step-ol-num{ background: linear-gradient(135deg,#3B6FE0,#8B4FBF); }
.sw-step-ol:nth-child(3) .sw-step-ol-num{ background: linear-gradient(135deg,#1E8272,#3B6FE0); }
.sw-step-ol:nth-child(4) .sw-step-ol-num{ background: linear-gradient(135deg,#8B4FBF,#E86A4F); }
.sw-step-ol:nth-child(5) .sw-step-ol-num{ background: linear-gradient(135deg,#E86A4F,#E0A62E); }
.sw-step-ol-title{ display: block; font-weight: 600; margin: 0 !important; }
.sw-step-ol-text{ font-size: .94rem; color: var(--wp--preset--color--ink-soft); margin: 0 !important; }

/* ---- FAQ accordion (core/details) ---------------------------------------- */
.sw-faq-list{ border-top: 1px solid var(--wp--preset--color--line); }
.sw-faq-list details{ border-bottom: 1px solid var(--wp--preset--color--line); padding: 18px 0; }
.sw-faq-list summary{
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.02rem;
}
.sw-faq-list summary::-webkit-details-marker{ display: none; }
.sw-faq-list summary::after{
  content: "+"; font-family: var(--wp--preset--font-family--body); font-size: 1.4rem; font-weight: 400;
  color: var(--wp--preset--color--gold); margin-left: 16px; flex-shrink: 0;
  transition: transform .18s ease;
}
.sw-faq-list details[open] summary::after{ transform: rotate(45deg); }
.sw-faq-list details p{ margin-top: 14px; font-size: .94rem; }

/* ---- Simple 2-4 col info cards (reasons / icon list / def cards) ------- */
.sw-card-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.sw-card{
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--teal);
  border-radius: var(--wp--preset--spacing--sm, 10px);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-card.is-coral{ border-top-color: var(--wp--preset--color--coral); }
.sw-card.is-blue{ border-top-color: var(--wp--preset--color--blue); }
.sw-card.is-gold{ border-top-color: var(--wp--preset--color--gold); }
.sw-card.is-plum{ border-top-color: var(--wp--preset--color--plum); }
@media (max-width: 880px){ .sw-card-grid{ grid-template-columns: 1fr; } }

/* ---- Subject badge strip ------------------------------------------------- */
.sw-field-strip{ display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 2.2em; border-bottom: 1px solid var(--wp--preset--color--line); }
.sw-subj-badge{ display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; }
.sw-subj-badge .sw-subj-ic{
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--gradient--warm);
  color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700;
}

/* ---- Tile grid (short situational blurbs) -------------------------------- */
.sw-tile-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.sw-tile{
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--teal);
  border-radius: var(--wp--preset--spacing--sm, 10px);
  padding: 18px 20px;
  font-size: .94rem;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-tile.is-coral{ border-top-color: var(--wp--preset--color--coral); }
.sw-tile.is-blue{ border-top-color: var(--wp--preset--color--blue); }
.sw-tile.is-gold{ border-top-color: var(--wp--preset--color--gold); }
@media (max-width: 880px){ .sw-tile-grid{ grid-template-columns: 1fr; } }

/* ---- Pill grid ------------------------------------------------------------ */
.sw-pill-grid{ display: flex; flex-wrap: wrap; gap: 10px; }
.sw-pill{
  display: inline-block;
  background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal);
  border-radius: 999px; padding: 9px 18px; font-size: .88rem; font-weight: 600;
}
.sw-pill.is-coral{ background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--coral); }
.sw-pill.is-blue{ background: var(--wp--preset--color--blue-tint); color: var(--wp--preset--color--blue); }
.sw-pill.is-gold{ background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); }
.sw-pill.is-plum{ background: var(--wp--preset--color--plum-tint); color: var(--wp--preset--color--plum); }

/* ---- Numbered process steps ------------------------------------------------ */
.sw-steps{ display: flex; flex-direction: column; }
.sw-step{
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--wp--preset--color--line);
  /* Twenty Twenty-Five's "constrained" group layout auto-centers each
     direct child with margin:auto + a max-width, so rows with shorter
     text end up indented more than rows with longer text — a
     staircase effect. Force full width + left alignment instead. */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sw-step:first-child{ border-top: none; }
.sw-step-num{
  font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 700; color: #fff;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--gradient--warm);
}
.sw-step:nth-child(2) .sw-step-num{ background: linear-gradient(135deg,#3B6FE0,#8B4FBF); }
.sw-step:nth-child(3) .sw-step-num{ background: linear-gradient(135deg,#1E8272,#3B6FE0); }
.sw-step:nth-child(4) .sw-step-num{ background: linear-gradient(135deg,#8B4FBF,#E86A4F); }
.sw-step:nth-child(5) .sw-step-num{ background: linear-gradient(135deg,#E86A4F,#E0A62E); }

/* ---- Icon cards (2x2 benefit grid) ----------------------------------------- */
.sw-icon-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.sw-icon-card{
  display: flex; gap: 14px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--preset--spacing--sm, 10px);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-icon-card .sw-ic{
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
}
.sw-icon-card.is-gold .sw-ic{ background: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--gold-deep); }
.sw-icon-card.is-coral .sw-ic{ background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--coral); }
.sw-icon-card.is-blue .sw-ic{ background: var(--wp--preset--color--blue-tint); color: var(--wp--preset--color--blue); }
.sw-icon-card.is-plum .sw-ic{ background: var(--wp--preset--color--plum-tint); color: var(--wp--preset--color--plum); }
.sw-icon-card .sw-ic-title{ font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.sw-icon-card .sw-ic-sub{ font-size: .84rem; color: var(--wp--preset--color--ink-soft); margin: 0; }
@media (max-width: 880px){ .sw-icon-grid{ grid-template-columns: 1fr; } }

/* ---- Chain diagram / timeline ---------------------------------------------- */
.sw-chain-diagram{
  display: flex; align-items: flex-start;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--preset--spacing--md, 16px);
  padding: 30px 26px 26px;
  box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04);
}
.sw-chain-node{ display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; flex: 1; min-width: 0; padding: 0 6px; position: relative; }
.sw-chain-node:not(:last-child)::after{ content: ''; position: absolute; top: 26px; left: 50%; width: 100%; height: 2px; background: var(--wp--preset--color--line); z-index: 1; }
.sw-chain-node span{ font-size: .84rem; font-weight: 600; line-height: 1.3; position: relative; z-index: 2; }
.sw-chain-ic{
  width: 52px; height: 52px; border-radius: 50%; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp--preset--gradient--warm); color: #fff;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  box-shadow: 0 0 0 5px var(--wp--preset--color--white);
}
.sw-chain-node:nth-child(2) .sw-chain-ic{ background: linear-gradient(135deg,#1E8272,#3B6FE0); }
.sw-chain-node:nth-child(3) .sw-chain-ic{ background: linear-gradient(135deg,#E0A62E,#E86A4F); }
.sw-chain-node:nth-child(4) .sw-chain-ic{ background: linear-gradient(135deg,#E86A4F,#8B4FBF); }
@media (max-width: 880px){
  .sw-chain-diagram{ flex-direction: column; padding: 22px 20px; }
  .sw-chain-node{ flex-direction: row; justify-content: flex-start; text-align: left; align-items: center; gap: 14px; padding: 13px 0; }
  .sw-chain-node:not(:last-child)::after{ top: 39px; left: 26px; width: 2px; height: 100%; }
}

/* ---- Open-marketplace vs StudyWorms comparison ----------------------------- */
.sw-vs-panel{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sw-vs-card{ border-radius: var(--wp--preset--spacing--md, 16px); padding: 24px 26px; box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 1px 1px rgba(22,35,63,.04); }
.sw-vs-bad{ background: var(--wp--preset--color--coral-tint); border: 1px solid #EFC9BB; }
.sw-vs-good{ background: var(--wp--preset--color--teal-tint); border: 1px solid #BEDFD5; }
.sw-vs-label{ font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.05rem; margin-bottom: .7em; }
.sw-vs-panel ul{ list-style: none; margin: 0; padding: 0; }
.sw-vs-panel li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; margin-bottom: .6em; }
.sw-vs-divider{
  width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
  margin: 0 -8px; position: relative; z-index: 2; font-family: var(--wp--preset--font-family--heading);
}
@media (max-width: 880px){ .sw-vs-panel{ grid-template-columns: 1fr; } .sw-vs-divider{ margin: 8px auto; } }

/* ---- Dark final CTA band ---------------------------------------------------- */
.sw-cta-final{ background: var(--wp--preset--gradient--hero-navy); color: #fff; }
.sw-cta-final h2, .sw-cta-final p{ color: #fff; }
.sw-cta-final img{ max-width: min(250px,40vw); height: auto; }

/* ---- Footer --------------------------------------------------------------- */
.sw-footer{ background: var(--wp--preset--color--ink); color: #9AA3BC; }
.sw-footer h4{ color: #fff; font-size: .85rem; font-weight: 600; }
.sw-footer a{ color: #9AA3BC; text-decoration: none; }
.sw-footer a:hover{ color: #fff; }
.sw-footer .sw-footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }