/* ===========================================================================
   SuperSeoAI - 2026 marketing pages
   Loads AFTER style.css. The demo stylesheet stays untouched; everything new
   or overridden lives here.

   Contents
     1  Tokens
     2  Buttons          .ssa-btn
     3  Offer pills      .ssa-pill          (bigger 01 / DIY labels)
     4  Three paths      overrides for the homepage section
     5  Page banner      slim CTA ribbon on posts and interior pages
     6  Section shell    headings, eyebrows, spacing
     7  Pricing cards
     8  Comparison table
     9  Testimonials
    10  Workflow band    (dark)
    11  CTA band + footer
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  --ssa-blue-a: #2a80cb;
  --ssa-blue-b: #1663be;
  --ssa-orange-a: #f8993a;
  --ssa-orange-b: #e9582c;
  --ssa-navy-a: #0d2a44;
  --ssa-navy-b: #123f66;
  --ssa-ring: rgba(30, 120, 210, 0.32);
  --ssa-card-shadow: 0 1px 2px rgba(12, 40, 62, 0.05), 0 18px 40px -28px rgba(12, 40, 62, 0.38);
  --ssa-card-shadow-lift: 0 2px 4px rgba(12, 40, 62, 0.07), 0 26px 56px -30px rgba(12, 40, 62, 0.46);
}

/* --- 2. Buttons --------------------------------------------------------- */

.ssa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  font-family: inherit;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease, color 0.22s ease;
}

.ssa-btn-lg {
  min-height: 54px;
  padding: 0 30px;
  font-size: 15.5px;
}

.ssa-btn-md {
  min-height: 46px;
  padding: 0 22px;
  font-size: 14px;
}

.ssa-btn-block {
  width: 100%;
}

.ssa-btn-arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.18s ease;
}

.ssa-btn:hover .ssa-btn-arrow {
  transform: translateX(3px);
}

/* Primary - blue gradient, orange on hover. The house button. */
.ssa-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-blue-a) 0%, var(--ssa-blue-b) 100%);
  box-shadow: 0 10px 24px -12px rgba(21, 99, 190, 0.75);
}

.ssa-btn-primary:hover,
.ssa-btn-primary:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-orange-a) 0%, var(--ssa-orange-b) 100%);
  box-shadow: 0 12px 26px -12px rgba(233, 88, 44, 0.7);
  transform: translateY(-1px);
}

/* Orange - primary action on dark grounds, where blue recedes. */
.ssa-btn-orange {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-orange-a) 0%, var(--ssa-orange-b) 100%);
  box-shadow: 0 12px 26px -12px rgba(233, 88, 44, 0.7);
}

.ssa-btn-orange:hover,
.ssa-btn-orange:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #ffa94f 0%, #f2663a 100%);
  transform: translateY(-1px);
}

/* Ghost - secondary on dark grounds. */
.ssa-btn-ghost {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.ssa-btn-ghost:hover,
.ssa-btn-ghost:focus-visible {
  color: #0d2a44;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
  transform: translateY(-1px);
}

/* Outline - secondary on light grounds. */
.ssa-btn-outline {
  color: #1663be;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(22, 99, 190, 0.4);
}

.ssa-btn-outline:hover,
.ssa-btn-outline:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-orange-a) 0%, var(--ssa-orange-b) 100%);
  box-shadow: 0 12px 26px -12px rgba(233, 88, 44, 0.7);
  transform: translateY(-1px);
}

.ssa-btn:focus-visible {
  outline: 3px solid var(--ssa-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ssa-btn,
  .ssa-btn-arrow {
    transition: none;
  }
  .ssa-btn:hover {
    transform: none;
  }
}

/* --- 3. Offer pills ----------------------------------------------------- */

.ssa-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.ssa-pill b {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
}

.ssa-pill-blue  { color: #1663be; background: #e7f1fb; }
.ssa-pill-mint  { color: #17835f; background: #e2f6ee; }
.ssa-pill-coral { color: #c14a30; background: #fdeee8; }

.ssa-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #c14a30;
  background: #fdeee8;
}

.ssa-badge-live {
  color: #17835f;
  background: #e2f6ee;
}

/* --- 4. Three paths - homepage section overrides ------------------------ */

.paths-grid .path {
  padding-top: 34px;
  padding-bottom: 34px;
}

/* Bigger, rounder pill in place of the small bordered tag. */
.path .path-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.path .path-label b {
  margin-right: 0;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
}

.path-blue  .path-label { color: #1663be; background: #e7f1fb; }
.path-mint  .path-label { color: #17835f; background: #e2f6ee; }
.path-coral .path-label { color: #c14a30; background: #fdeee8; }

.path .path-symbol {
  margin: 24px 0 15px;
}

.path p {
  max-width: 260px;
  font-size: 14px;
}

.path small {
  font-size: 12px;
}

/* The three bottom buttons, now real buttons. */
.paths-grid .path-cta,
.paths-grid a.path-cta,
.paths-grid button.path-cta {
  width: 100%;
  min-height: 52px;
  margin-top: 26px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-blue-a) 0%, var(--ssa-blue-b) 100%);
  box-shadow: 0 10px 24px -12px rgba(21, 99, 190, 0.75);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
}

.paths-grid .path-cta:hover,
.paths-grid .path-cta:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-orange-a) 0%, var(--ssa-orange-b) 100%);
  box-shadow: 0 12px 26px -12px rgba(233, 88, 44, 0.7);
  transform: translateY(-1px);
}

/* The third path is not purchasable yet - quieter, so the hierarchy is honest. */
.paths-grid .path-coral .path-cta {
  color: #1663be;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(22, 99, 190, 0.4);
}

.paths-grid .path-coral .path-cta:hover,
.paths-grid .path-coral .path-cta:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-orange-a) 0%, var(--ssa-orange-b) 100%);
  box-shadow: 0 12px 26px -12px rgba(233, 88, 44, 0.7);
}

.paths-grid .path + .path {
  border-left: 0;
}

.paths-grid {
  gap: 22px;
}

.paths-grid .path {
  padding-left: 26px;
  padding-right: 26px;
  border: 1px solid #e3eaef;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ssa-card-shadow);
}

@media (max-width: 860px) {
  .paths-grid {
    gap: 16px;
  }
}

/* --- 5. Page banner ----------------------------------------------------- */

.ssa-page-banner {
  color: #fff;
  background:
    radial-gradient(1100px 300px at 78% -40%, rgba(56, 160, 235, 0.42) 0%, rgba(56, 160, 235, 0) 70%),
    linear-gradient(100deg, var(--ssa-navy-a) 0%, var(--ssa-navy-b) 100%);
}

.ssa-page-banner-inner {
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.ssa-page-banner h2 {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: #fff;
}

.ssa-page-banner p {
  margin: 7px 0 0;
  font-size: 15px;
  color: rgba(226, 240, 250, 0.85);
}

.ssa-page-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- 6. Section shell --------------------------------------------------- */

.ssa-section {
  padding: 78px 0;
}

.ssa-section-tight {
  padding: 56px 0;
}

.ssa-section-soft {
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f8 100%);
}

.ssa-section-dark {
  color: #fff;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(52, 152, 232, 0.3) 0%, rgba(52, 152, 232, 0) 68%),
    radial-gradient(900px 420px at 88% 100%, rgba(44, 201, 211, 0.22) 0%, rgba(44, 201, 211, 0) 68%),
    linear-gradient(160deg, #0b2540 0%, #123f66 100%);
}

.ssa-head {
  max-width: 720px;
  margin: 0 auto 46px;
  text-align: center;
}

.ssa-head-left {
  margin-left: 0;
  text-align: left;
}

.ssa-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2f8fd4;
}

.ssa-section-dark .ssa-eyebrow {
  color: #56c7f0;
}

.ssa-head h2 {
  margin: 0;
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.14;
  font-weight: 780;
  letter-spacing: -0.025em;
  color: var(--navy);
  text-wrap: balance;
}

.ssa-section-dark .ssa-head h2 {
  color: #fff;
}

.ssa-head h2 em {
  font-style: normal;
  color: #2f8fd4;
}

.ssa-section-dark .ssa-head h2 em {
  color: #56c7f0;
}

.ssa-head p {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

.ssa-head-left p {
  margin-left: 0;
}

.ssa-section-dark .ssa-head p {
  color: rgba(220, 236, 248, 0.82);
}

.ssa-kicker {
  margin-top: 44px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d919f;
}

.ssa-section-dark .ssa-kicker {
  color: rgba(190, 216, 236, 0.62);
}

/* --- 7. Pricing cards --------------------------------------------------- */

.ssa-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}

.ssa-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid #e3eaef;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ssa-card-shadow);
}

.ssa-plan-featured {
  border-color: #3b93da;
  border-width: 1.5px;
  box-shadow: var(--ssa-card-shadow-lift);
}

.ssa-plan-flag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-blue-a) 0%, var(--ssa-blue-b) 100%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ssa-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.ssa-plan h3 {
  margin: 14px 0 4px;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.ssa-plan-tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.ssa-plan-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 20px 0 0;
}

.ssa-plan-amount {
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.ssa-plan-period {
  font-size: 15px;
  font-weight: 600;
  color: #6d8090;
}

.ssa-plan-was {
  font-size: 16px;
  font-weight: 650;
  color: #9aabb7;
  text-decoration: line-through;
}

.ssa-plan-note {
  margin: 12px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaf0f4;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6d8090;
}

.ssa-plan-features {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ssa-plan-features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: #3f5769;
}

.ssa-tick {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #2bb583;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.ssa-plan-cta {
  margin-top: auto;
}

/* --- 8. Comparison table ------------------------------------------------ */

.ssa-compare-wrap {
  overflow-x: auto;
  border: 1px solid #e3eaef;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ssa-card-shadow);
}

.ssa-compare {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.ssa-compare th,
.ssa-compare td {
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid #eaf0f4;
}

.ssa-compare thead th {
  font-size: 14px;
  font-weight: 780;
  color: var(--navy);
  border-bottom: 1px solid #d9e3ea;
  white-space: nowrap;
}

.ssa-compare th:first-child,
.ssa-compare td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--navy);
}

.ssa-compare tbody tr:last-child th,
.ssa-compare tbody tr:last-child td {
  border-bottom: 0;
}

.ssa-compare-featured {
  background: #f3f9fe;
}

.ssa-compare thead .ssa-compare-featured {
  color: #1663be;
}

.ssa-compare td {
  color: #4b6274;
}

/* --- 9. Testimonials ---------------------------------------------------- */

.ssa-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.ssa-quote {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid #e3eaef;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ssa-card-shadow);
}

.ssa-quote-mark {
  font-size: 34px;
  line-height: 0.8;
  font-weight: 800;
  color: #b9d6ef;
}

.ssa-quote blockquote {
  margin: 16px 0 22px;
  font-size: 15.5px;
  line-height: 1.62;
  color: #33495a;
}

.ssa-quote figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #eef3f6;
}

.ssa-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7f1fb;
  color: #1663be;
  font-size: 13px;
  font-weight: 800;
}

.ssa-quote-who b {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: var(--navy);
}

.ssa-quote-who span {
  font-size: 12.5px;
  color: #7b8d9a;
}

/* --- 10. Workflow band -------------------------------------------------- */

.ssa-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.ssa-flow-step {
  text-align: center;
}

.ssa-flow-disc {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(58, 158, 232, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(96, 190, 240, 0.42), 0 0 44px rgba(48, 150, 230, 0.28);
  font-size: 34px;
  line-height: 1;
}

.ssa-flow-num {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ssa-blue-a) 0%, var(--ssa-blue-b) 100%);
  font-size: 12.5px;
  font-weight: 800;
}

.ssa-flow-step h3 {
  margin: 0 0 9px;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.015em;
  color: #fff;
}

.ssa-flow-step > p {
  margin: 0 auto 20px;
  max-width: 280px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(214, 233, 247, 0.82);
}

.ssa-flow-list {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: grid;
  gap: 11px;
  text-align: left;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(140, 190, 230, 0.16);
}

.ssa-flow-list li {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(224, 239, 250, 0.9);
}

/* --- 11. CTA band + footer ---------------------------------------------- */

.ssa-cta-band {
  padding: 76px 0 70px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(760px 300px at 50% 118%, rgba(72, 176, 245, 0.55) 0%, rgba(72, 176, 245, 0) 66%),
    linear-gradient(165deg, #0a2138 0%, #103a5e 100%);
}

.ssa-cta-band h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.12;
  font-weight: 790;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
}

.ssa-cta-band p {
  margin: 15px auto 30px;
  max-width: 560px;
  font-size: 17px;
  color: rgba(214, 233, 247, 0.84);
}

.ssa-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Rich footer - replaces the single-line one on every page. */
.ssa-footer {
  color: rgba(206, 226, 242, 0.78);
  background: linear-gradient(180deg, #0a2138 0%, #071a2c 100%);
}

.ssa-footer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px;
  padding: 58px 0 44px;
}

.ssa-footer .brand-name,
.ssa-footer .brand-name span {
  color: #fff;
}

.ssa-footer-blurb {
  margin: 18px 0 0;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(196, 220, 240, 0.72);
}

.ssa-footer-strap {
  margin: 18px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(110, 190, 240, 0.72);
}

.ssa-footer-col h3 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(160, 200, 232, 0.72);
}

.ssa-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ssa-footer-col a {
  color: rgba(216, 233, 247, 0.86);
  font-size: 14px;
  text-decoration: none;
}

.ssa-footer-col a:hover,
.ssa-footer-col a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ssa-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 0 30px;
  border-top: 1px solid rgba(120, 165, 200, 0.18);
  font-size: 13px;
}

.ssa-footer-legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ssa-footer-legal a {
  color: rgba(196, 220, 240, 0.75);
  text-decoration: none;
}

.ssa-footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .ssa-footer-top {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 30px;
  }
  .ssa-section {
    padding: 56px 0;
  }
  .ssa-page-banner-inner {
    padding: 22px 0;
  }
}

/* --- Fixes ------------------------------------------------------------- */

/* Pills and badges are labels, not paragraphs - they must never wrap. */
.ssa-pill,
.path .path-label,
.ssa-badge {
  white-space: nowrap;
}

/* When a card is narrow, the badge drops below the pill rather than
   squeezing it. */
.ssa-plan-top {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Long offer labels get a slightly tighter pill so three cards still fit
   comfortably at tablet widths. */
@media (max-width: 1180px) {
  .ssa-pill,
  .path .path-label {
    padding: 10px 15px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .ssa-pill b,
  .path .path-label b {
    font-size: 14px;
  }
}

/* The closing CTA band is full-bleed and sits directly on the footer, so the
   main element's trailing padding would show as a white seam between them. */
.site-main:has(.ssa-cta-band) {
  padding-bottom: 0;
}

/* The footer's own spacing comes from .ssa-footer-top / .ssa-footer-bottom;
   the demo stylesheet's padding would double it. */
.site-footer.ssa-footer {
  padding-top: 0;
  padding-bottom: 0;
}

/* ===========================================================================
   12  Product pages
   =========================================================================== */

/* --- Product hero ------------------------------------------------------- */

.ssa-phero {
  color: #fff;
  background:
    radial-gradient(900px 460px at 82% -10%, rgba(56, 160, 235, 0.4) 0%, rgba(56, 160, 235, 0) 68%),
    radial-gradient(700px 400px at 6% 110%, rgba(44, 201, 211, 0.22) 0%, rgba(44, 201, 211, 0) 66%),
    linear-gradient(150deg, #0b2540 0%, #123f66 100%);
}

.ssa-phero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 54px;
  align-items: center;
  padding: 74px 0 78px;
}

@media (max-width: 940px) {
  .ssa-phero-inner {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 54px 0 58px;
  }
}

.ssa-phero h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06;
  font-weight: 790;
  letter-spacing: -0.032em;
  color: #fff;
  text-wrap: balance;
}

.ssa-phero h1 em {
  font-style: normal;
  color: #56c7f0;
}

.ssa-phero-lead {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.62;
  color: rgba(219, 236, 249, 0.86);
}

.ssa-phero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.ssa-phero-under {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: rgba(190, 217, 238, 0.72);
}

/* --- Framed UI panel ---------------------------------------------------- */

.ssa-panel {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(150, 197, 236, 0.22), 0 30px 70px -40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.ssa-panel-light {
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaef, var(--ssa-card-shadow);
}

.ssa-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.ssa-panel-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(150, 197, 236, 0.18);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(180, 214, 240, 0.8);
}

.ssa-panel-light .ssa-panel-bar {
  border-bottom-color: #eaf0f4;
  color: #8497a5;
}

.ssa-panel-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(150, 197, 236, 0.35);
}

.ssa-panel-body {
  padding: 22px;
  display: grid;
  gap: 14px;
}

/* A scored check, the way the plugin actually presents one. */
.ssa-check-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(150, 197, 236, 0.14);
}

.ssa-panel-light .ssa-check-row {
  background: #f7fafc;
  box-shadow: inset 0 0 0 1px #e8eff4;
}

.ssa-check-row b {
  display: block;
  font-size: 14px;
  font-weight: 730;
  color: #fff;
}

.ssa-panel-light .ssa-check-row b {
  color: var(--navy);
}

.ssa-check-row span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(206, 228, 245, 0.78);
}

.ssa-panel-light .ssa-check-row span {
  color: var(--text);
}

.ssa-dot {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ssa-dot-good { background: #2bb583; }
.ssa-dot-warn { background: #e2a33c; }
.ssa-dot-bad  { background: #d9614a; }

.ssa-fix {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ssa-blue-a) 0%, var(--ssa-blue-b) 100%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
}

/* --- Alternating feature rows ------------------------------------------- */

.ssa-rows {
  display: grid;
  gap: 64px;
}

.ssa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.ssa-row:nth-child(even) .ssa-row-media {
  order: -1;
}

@media (max-width: 900px) {
  .ssa-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ssa-row:nth-child(even) .ssa-row-media {
    order: 0;
  }
  .ssa-rows {
    gap: 46px;
  }
}

.ssa-row h3 {
  margin: 12px 0 0;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.18;
  font-weight: 770;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}

.ssa-row > div > p {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}

.ssa-row-tag {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: #e7f1fb;
  color: #1663be;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Check list --------------------------------------------------------- */

.ssa-checks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ssa-checks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.55;
  color: #3f5769;
}

.ssa-section-dark .ssa-checks li {
  color: rgba(220, 238, 250, 0.88);
}

/* --- Callout ------------------------------------------------------------ */

.ssa-callout {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 44px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, #eef5fb 0%, #e6f2f6 100%);
  box-shadow: inset 0 0 0 1px #dbe8f1;
}

.ssa-callout p {
  margin: 0;
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}

.ssa-callout small {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 620px) {
  .ssa-callout {
    padding: 28px 24px;
  }
}

/* --- Guardrail grid ----------------------------------------------------- */

.ssa-guards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.ssa-guard {
  padding: 24px 24px 26px;
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaef, var(--ssa-card-shadow);
}

.ssa-guard-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e7f1fb;
  color: #1663be;
  font-size: 19px;
}

.ssa-guard h3 {
  margin: 16px 0 8px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.012em;
  color: var(--navy);
}

.ssa-guard p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}

/* --- FAQ ---------------------------------------------------------------- */

.ssa-faq {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.ssa-faq details {
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaef;
  overflow: hidden;
}

.ssa-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.012em;
  color: var(--navy);
}

.ssa-faq summary::-webkit-details-marker {
  display: none;
}

.ssa-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  color: #6f93b0;
  transition: transform 0.2s ease;
}

.ssa-faq details[open] summary::after {
  content: "\2212";
}

.ssa-faq summary:hover {
  background: #f7fafc;
}

.ssa-faq-answer {
  padding: 0 22px 21px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text);
}

.ssa-faq-answer p {
  margin: 0 0 12px;
  max-width: none;
}

.ssa-faq-answer p:last-child {
  margin-bottom: 0;
}

/* --- Risk reversal strip ------------------------------------------------ */

.ssa-reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

.ssa-reassure div {
  padding: 20px 22px;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaef;
}

.ssa-reassure b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 750;
  color: var(--navy);
}

.ssa-reassure span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* `.ssa-check-row span` blockifies every span in the row, which is right for
   the description line and wrong for the fix pill. Win on specificity rather
   than reordering, so the description rule stays simple. */
.ssa-check-row .ssa-fix {
  display: inline-block;
  width: auto;
  align-self: flex-start;
}

/* --- Admin-bar overlap fix ---------------------------------------------- */

/* style.css sets `.admin-bar .site-header { top: 32px }` on a relatively
   positioned header. WordPress already pushes the document down with
   `html { margin-top: 32px !important }`, so the offset is counted twice: the
   header shifts down 32px but keeps its original space in the flow, and laps
   over whatever follows it. Invisible to logged-out visitors, and invisible on
   the homepage because a dark hero sits underneath - but it clips the top of
   the interior page banner. Zero it out; WordPress's own margin is enough. */
.admin-bar .site-header {
  top: 0;
}

/* A little more breathing room so the ribbon never feels cramped against the
   header, whoever is looking at it. */
.ssa-page-banner-inner {
  padding: 30px 0;
}

/* ===========================================================================
   13  Forms
   =========================================================================== */

.ssa-formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 52px;
  align-items: start;
}

@media (max-width: 940px) {
  .ssa-formwrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.ssa-form {
  padding: 30px 30px 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3eaef, var(--ssa-card-shadow-lift);
}

.ssa-form-field {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.ssa-form-field label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.ssa-form-field label span {
  font-weight: 400;
  color: #8497a5;
}

.ssa-form-field input[type="text"],
.ssa-form-field input[type="email"],
.ssa-form-field input[type="url"],
.ssa-form-field select,
.ssa-form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d6e0e7;
  border-radius: 10px;
  background: #fbfdfe;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ssa-form-field textarea {
  min-height: 108px;
  resize: vertical;
}

.ssa-form-field input:focus,
.ssa-form-field select:focus,
.ssa-form-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #3b93da;
  box-shadow: 0 0 0 3px var(--ssa-ring);
}

/* The honeypot. Hidden from people, reachable by bots. Not display:none,
   because some bots skip those. */
.ssa-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.ssa-form-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #7b8d9a;
}

.ssa-form-note a {
  color: #1663be;
}

.ssa-form-error {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fdeee8;
  color: #a8412a;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px #f3cfc2;
}

/* Side panel beside a form - what you get, what happens next. */
.ssa-form-aside h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.012em;
  color: var(--navy);
}

.ssa-form-aside > p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text);
}

.ssa-aside-block {
  padding: 22px 24px;
  border-radius: 15px;
  background: #f4f9fc;
  box-shadow: inset 0 0 0 1px #e0ebf2;
  margin-bottom: 16px;
}

.ssa-aside-block:last-child {
  margin-bottom: 0;
}

.ssa-aside-block h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5b7f9c;
}

/* Numbered "what happens next" list. */
.ssa-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ssastep;
  display: grid;
  gap: 15px;
}

.ssa-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
  color: #3f5769;
}

.ssa-steps li::before {
  counter-increment: ssastep;
  content: counter(ssastep);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dfeefb;
  color: #1663be;
  font-size: 12.5px;
  font-weight: 800;
}

.ssa-steps b {
  display: block;
  font-weight: 730;
  color: var(--navy);
}

/* ===========================================================================
   14  Long-form legal / policy pages
   =========================================================================== */

.ssa-legal {
  max-width: 720px;
  margin: 0 auto;
}

.ssa-legal h2 {
  margin: 42px 0 14px;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.018em;
  color: var(--navy);
}

.ssa-legal h2:first-child {
  margin-top: 0;
}

.ssa-legal h3 {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 730;
  color: var(--navy);
}

.ssa-legal p,
.ssa-legal li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text);
}

.ssa-legal p {
  margin: 0 0 16px;
  max-width: none;
}

.ssa-legal ul {
  margin: 0 0 18px;
  padding-left: 22px;
  max-width: none;
}

.ssa-legal li {
  margin-bottom: 9px;
}

.ssa-legal a {
  color: #1663be;
}

.ssa-legal-updated {
  display: inline-block;
  margin-bottom: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #eef3f7;
  color: #5b7f9c;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ssa-legal-lede {
  margin: 0 0 30px;
  padding: 20px 22px;
  border-radius: 13px;
  background: #f4f9fc;
  box-shadow: inset 0 0 0 1px #e0ebf2;
  font-size: 16px;
  line-height: 1.65;
  color: #3f5769;
}


/* The demo styled these as <span>; they are <button> now so they can be
   clicked and reached by keyboard. Carry the original span geometry across,
   otherwise the tabs collapse to the browser's default button padding. */
.platform-tabs button {
  position: relative;
  min-height: 66px;
  padding: 0 28px;
  width: 100%;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #fff;
  background: none;
  color: #284b63;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.platform-tabs button:hover {
  color: #195b92;
  background: rgba(255, 255, 255, 0.55);
}

.platform-tabs button[aria-selected="true"] {
  color: #195b92;
  background: #fff;
  font-weight: 780;
}

.platform-tabs button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #3789c5;
}

.platform-tabs button:focus-visible {
  outline: 2px solid #3789c5;
  outline-offset: -3px;
}

/* ===========================================================================
   15  Price strip
   A compact, repeatable band that puts real numbers in front of someone who
   is deep in a content page. Pricing used to be reachable only from the header
   and a couple of product pages, which is how a visitor ends up looping.
   =========================================================================== */

.ssa-pricestrip {
  padding: 30px 34px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef5fb 0%, #e6f2f6 100%);
  box-shadow: inset 0 0 0 1px #dbe8f1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
}

@media (max-width: 860px) {
  .ssa-pricestrip {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 24px;
  }
}

.ssa-pricestrip-head {
  margin: 0 0 18px;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.018em;
  color: var(--navy);
}

.ssa-pricestrip-rows {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.ssa-pricestrip-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ssa-pricestrip-row .lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #5b7f9c;
}

.ssa-pricestrip-row .amt {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ssa-pricestrip-row .amt small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: #6d8090;
}

.ssa-pricestrip-row .was {
  font-size: 12.5px;
  color: #93a6b3;
  text-decoration: line-through;
}

.ssa-pricestrip-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
}

.ssa-pricestrip-note {
  margin: 0;
  font-size: 12.5px;
  color: #6d8090;
  text-align: center;
}

/* Quiet tertiary link under a pair of buttons. */
.ssa-cta-more {
  margin: 20px 0 0;
  font-size: 15px;
}

.ssa-cta-more a {
  color: #bcdcf4;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.ssa-cta-more a:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   16. Brand logo
   The image lockup replaces the CSS-drawn bars + wordmark. Sized by height so
   a replacement file of different proportions still fits the header.
   --------------------------------------------------------------------------- */

.brand-has-logo img,
.brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 42px;
}

.ssa-footer .brand img {
  max-height: 40px;
}

@media (max-width: 720px) {
  .brand-has-logo img,
  .brand img {
    max-height: 34px;
  }
}