/* ===== 02-problem.css ===== */
/* ---------- Shared text utilities (s-problem / s-pain / s-andromeda) ---------- */

.s-problem .lg,
.s-pain .lg,
.s-andromeda .lg {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
}

.s-problem .xl,
.s-pain .xl,
.s-andromeda .xl {
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-problem .lede,
.s-pain .lede,
.s-andromeda .lede {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-andromeda .grad {
  background-image: linear-gradient(91deg, rgb(135, 84, 254) 0%, rgb(70, 157, 244) 49.85%, rgb(228, 89, 170) 118%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Section base ---------- */

.s-problem,
.s-pain,
.s-andromeda {
  background: var(--bg-hero);
  text-align: center;
}

.s-problem {
  padding: 20px 0 0;
}

.s-pain {
  padding: 48px 0 0;
}

.s-andromeda {
  padding: 64px 0 88px;
}

.s-problem h2,
.s-pain h2,
.s-andromeda h2 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Heading after the Old/2025 Reality comparison ("2025 has been the toughest
   year..."). Needs its own top gap — nothing followed the grid before. */
.reality + h2 {
  margin-top: 48px;
}

/* ---------- Intro quote block ---------- */

.problem-quote {
  max-width: 800px;
  margin: 28px auto 0;
  color: rgb(18, 10, 11);
}

.problem-quote p {
  font-family: "Satoshi", var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: rgb(18, 10, 11);
}

p.problem-quote-line {
  font-family: "Satoshi", var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  line-height: 1.7;
  color: rgb(18, 10, 11);
  margin-top: 4px;
}

.problem-quote .lg {
  color: rgb(18, 10, 11);
  margin-top: 4px;
}

.problem-quote p:first-child {
  margin-top: 0;
}

.problem-lede {
  max-width: 800px;
  margin: 40px auto 0;
  font-family: "Satoshi", var(--font-body);
  color: rgb(18, 10, 11);
}

/* ---------- "Here's the Real Problem" heading + checklist ---------- */

.problem-h {
  margin-top: 64px;
}

.problem-checklist {
  max-width: 660px;
  margin: 32px auto 0;
  text-align: left;
}

.problem-checklist p {
  margin-top: 30px;
}

.problem-checklist p:first-child {
  margin-top: 0;
}

.problem-truth {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Old Reality / 2025 Reality comparison ---------- */

.reality {
  display: grid;
  grid-template-columns: repeat(2, 387px);
  justify-content: center;
  column-gap: 20px;
  max-width: 794px;
  margin: 40px auto 0;
}

.reality-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.reality-new .reality-label {
  font-weight: 700;
  font-size: 24px;
  color: var(--blue);
}

.reality-track {
  position: relative;
  height: 19px;
  margin: 16px 0 24px;
}

.reality-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px dotted rgb(223, 231, 235);
  transform: translateY(-50%);
}

.reality-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
}

.dot-old {
  width: 15px;
  height: 15px;
  background: rgb(216, 225, 230);
}

.dot-new {
  width: 19px;
  height: 19px;
  background: #fff;
  border: 3px solid var(--blue);
}

.reality-card {
  border-radius: 22px;
  padding: 36px 24px;
  box-shadow:
    rgba(64, 65, 66, 0.04) 0 -2.4px 0 0 inset,
    rgba(139, 143, 148, 0.2) 0 1px 3px 0,
    rgba(225, 231, 235, 0.6) 0 0 0 1px;
}

.reality-card p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 72px;
}

.card-old {
  background: rgb(240, 245, 252);
  color: var(--ink);
}

.card-new {
  background: var(--blue);
  color: #fff;
  box-shadow:
    rgba(62, 62, 62, 0.04) 0 -2.4px 0 0 inset,
    rgba(143, 143, 143, 0.2) 0 1px 3px 0,
    rgba(237, 237, 237, 0.6) 0 0 0 1px;
}

/* ---------- "2025 has been the toughest year" + "Everyone's telling you" ---------- */

.s-problem h2 + .xl {
  margin-top: 20px;
}

.telling-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  max-width: 1198px;
  /* Bleeds past the 1080px container content on desktop (live panel is
     1198px wide against an 1080px grid) — negative side-margins pull it
     out symmetrically. Tablet below overrides back to 100%. */
  margin: 48px calc((1080px - 1198px) / 2) 0;
  padding: 48px 40px 56px;
}

.telling-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.telling-panel .telling-heading {
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 33px;
  line-height: 1.3;
  color: var(--ink);
  max-width: none;
}

.telling-pills {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px 16px;
  margin-top: 48px;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 100px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
  white-space: nowrap;
  box-shadow: rgba(24, 29, 38, 0.08) 0 10px 24px -6px;
}

.pill::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 10px solid #fff;
}

/* ---------- Pain point cards ---------- */

.s-pain .xl {
  max-width: 520px;
  margin: 0 auto;
}

.pain-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  max-width: 462px;
  margin: 76px auto 0;
}

.pain-card {
  width: 100%;
  border-radius: 20px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(24, 29, 38, 0.08);
  box-shadow: rgba(9, 13, 3, 0.05) 0 1px 2px 0;
}

.pain-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: none;
}

.pain-card p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--body);
}

.pain-card-1 {
  background: rgb(247, 237, 225);
  transform: rotate(-4deg);
  margin-bottom: 8px;
}

.pain-card-2 {
  background: rgb(235, 252, 244);
}

.pain-card-3 {
  background: rgb(224, 240, 255);
}

.pain-card-4 {
  background: rgb(236, 232, 253);
}

/* ---------- Andromeda / solution copy ---------- */

.s-andromeda .xl,
.s-andromeda .lg,
.s-andromeda .lede {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

.s-andromeda .xl {
  margin-top: 30px;
}

.s-andromeda .lg,
.s-andromeda .lede {
  margin-top: 30px;
  text-align: left;
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
  .reality {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }

  .telling-panel {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 809px) {
  .s-problem .xl,
  .s-pain .xl,
  .s-andromeda .xl {
    font-size: 20px;
    line-height: 1.6;
  }

  .problem-quote,
  .problem-lede {
    margin-top: 24px;
  }

  .problem-h {
    margin-top: 48px;
  }

  .reality + h2 {
    margin-top: 34px;
  }

  .problem-checklist {
    margin-top: 32px;
  }

  .problem-checklist p {
    margin-top: 24px;
  }

  .reality {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-top: 40px;
  }

  .reality-new .reality-label {
    font-weight: 600;
    font-size: 22px;
  }

  .reality-card p {
    font-size: 16px;
    line-height: 57.6px;
  }

  .telling-panel {
    margin-top: 40px;
    padding: 40px 24px 44px;
  }

  .telling-panel .telling-heading {
    font-size: 26px;
  }

  .telling-pills {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    margin-top: 44px;
  }

  .pill-copy {
    order: 2;
  }

  .pill-broader {
    order: 3;
  }

  .pill-hire {
    order: 4;
  }

  .pain-cards {
    gap: 16px;
    margin-top: 40px;
    max-width: 295px;
  }

  .pain-card {
    padding: 31px 20px;
  }

  .pain-card-1 {
    transform: none;
    margin-bottom: 0;
  }

  .pain-card h3 {
    font-size: 18px;
    line-height: 1.6;
  }

  .pain-card p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }

  .s-andromeda {
    padding: 48px 0 32px;
  }
}

/* ===== 03-meet.css ===== */
/* ============================================================
   03-meet — "Meet WinningAds" intro, Old Way / New Way comparison,
   vision copy and the track-record stat counters.
   ============================================================ */

/* ---------- shared gradient-text utility (scoped to this fragment) ---------- */

.s-meet .grad,
.s-oldnew .grad {
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 1. Meet WinningAds intro ---------- */

.s-meet {
  background: var(--bg-hero);
  padding: 64px 0 32px;
  text-align: center;
}

.s-meet__kicker {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.3;
  background-image: linear-gradient(99deg, var(--pink) -30%, var(--purple) 49.8498%, var(--blue) 108%);
}

.s-meet__title {
  max-width: 640px;
  margin: 4px auto 0;
}

.s-meet__copy {
  max-width: 660px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-meet__bold {
  max-width: 660px;
  margin: 24px auto 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-meet__cta {
  margin-top: 32px;
}

/* the live site renders large green pill CTAs in Urbanist 20px/34px, not the
   base .btn's DM Sans 16px — match the reference exactly */
.s-meet__cta .btn {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 34px;
}

.s-meet__cta-more {
  display: inline;
}

.s-meet__bullets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 40px;
  margin-top: 20px;
}

.s-meet__bullets p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}

.s-meet__bullets img {
  flex-shrink: 0;
}

.s-meet__laptop {
  flex-shrink: 0;
}

.s-meet__laptop rect,
.s-meet__laptop path {
  fill: #64748b;
}

.s-meet__laptop .s-meet__laptop-notch {
  fill: var(--bg-hero);
}

/* ---------- 2. Old Way / New Way comparison + vision ---------- */

.s-oldnew {
  background: var(--bg-hero);
  padding: 32px 0 56px;
  text-align: center;
  overflow: visible;
}

.s-oldnew__lead {
  max-width: 520px;
  margin: 0 auto 36px;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-oldnew__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 20px;
  text-align: left;
  margin-bottom: 32px;
}

.s-oldnew__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 22px;
  padding: 40px 25px;
  box-shadow:
    rgba(64, 65, 66, 0.04) 0 -2.4px 0 0 inset,
    rgba(139, 143, 148, 0.2) 0 1px 3px 0,
    rgba(225, 231, 235, 0.6) 0 0 0 1px;
}

.s-oldnew__wrap {
  position: relative;
  display: flex;
  background: var(--green);
  border-radius: 21px;
  padding: 6px;
  box-shadow:
    rgba(180, 156, 197, 0.08) 0 0 16px 4px,
    rgba(64, 65, 66, 0.1) 0 -2.402px 0 0 inset,
    rgba(190, 198, 230, 0.4) 0 0 0 1px;
}

.s-oldnew__card--new {
  flex: 1;
  border-radius: 17px;
  padding: 34px 30px;
  box-shadow: none;
}

.s-oldnew__card--new .s-oldnew__list {
  flex: 1;
}

.s-oldnew__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.s-oldnew__title {
  margin: 0;
  font-size: 40px;
  text-align: center;
}

.s-oldnew__sub {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}

.grad--accent {
  background-image: linear-gradient(96deg, rgb(94, 130, 248) 0%, rgb(72, 154, 244) 33.6336%, rgb(123, 134, 219) 69.97%, rgb(180, 92, 209) 100%);
}

.s-oldnew__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.s-oldnew__step {
  background: var(--bg-hero);
  border-radius: 16px;
  padding: 15px 25px;
}

.s-oldnew__card--old .s-oldnew__step {
  text-align: center;
}

.s-oldnew__card--new .s-oldnew__step {
  text-align: left;
}

.s-oldnew__step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.s-oldnew__num {
  font-weight: 700;
  color: var(--ink);
}

.s-oldnew__num--new {
  color: var(--green);
}

.s-oldnew__step--result {
  background: #d12e2e;
}

.s-oldnew__step--result p,
.s-oldnew__step--result .s-oldnew__num {
  color: #f4f8fd;
}

.s-oldnew__step--result-new {
  background: var(--green);
  margin-top: auto;
}

.s-oldnew__step--result-new p,
.s-oldnew__step--result-new .s-oldnew__num {
  color: #fff;
}

/* decorative curved arrows + handwritten notes (desktop / tablet positions) */

.s-oldnew__arrow {
  position: absolute;
  pointer-events: none;
}

.s-oldnew__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.s-oldnew__arrow--old {
  left: -139px;
  bottom: 167px;
  width: 285px;
  height: 219px;
}

.s-oldnew__arrow--new {
  left: 477px;
  top: 372px;
  width: 46px;
  height: 58px;
}

.s-oldnew__note {
  position: absolute;
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  pointer-events: none;
}

.s-oldnew__note--old {
  left: -100px;
  bottom: 143px;
  width: 152px;
  transform: rotate(-8deg);
}

.s-oldnew__note--new {
  left: 418px;
  top: 442px;
  width: 155px;
  transform: rotate(-6deg);
}

.s-oldnew__vision {
  max-width: 660px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-oldnew__vision + .s-oldnew__vision {
  margin-top: 28px;
}

.s-oldnew__welcome {
  margin: 28px 0 0;
}

.s-oldnew__welcome strong {
  display: inline-block;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  background-image: linear-gradient(275deg, var(--pink) 0%, var(--blue) 55.5556%, var(--purple) 100%);
}

/* ---------- 3. Track record stat counters ---------- */

.s-track {
  background: var(--bg-hero);
  padding: 32px 0 28px;
  text-align: center;
}

.s-track__title {
  max-width: 800px;
  margin: 0 auto;
}

.s-track__grid {
  max-width: 800px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}

.s-track__card {
  background: #e8f0fa;
  border-radius: 22px;
  padding: 40px;
  box-shadow: rgba(96, 107, 128, 0.1) 0 -2px 2px 1px inset;
}

.s-track__num {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--ink);
}

.s-track__suffix {
  color: #ccdaed;
}

.s-track__label {
  margin: 0;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}

/* ============================================================
   Tablet — 810px to 1199px
   ============================================================ */

@media (max-width: 1199px) {
  .s-meet__kicker {
    font-size: 52px;
  }

  .s-oldnew__title {
    font-size: 36px;
  }

  .s-oldnew__sub {
    font-size: 24px;
  }

  .s-oldnew__arrow--old {
    left: -70px;
    bottom: 129px;
    width: 220px;
    height: 169px;
  }

  .s-oldnew__note--old {
    left: -30px;
  }

  .s-oldnew__note--new {
    left: 330px;
  }

  .s-track__num {
    font-size: 48px;
  }
}

/* ============================================================
   Mobile — up to 809px (matches strips-375)
   ============================================================ */

@media (max-width: 809px) {
  .s-meet {
    padding: 48px 0 24px;
  }

  .s-meet__kicker {
    font-size: 40px;
  }

  .s-meet__title {
    font-size: 24px;
  }

  .s-meet__cta-more {
    display: none;
  }

  .s-meet__cta .btn {
    font-size: 16px;
    line-height: 27.2px;
  }

  .s-meet__bullets {
    flex-direction: column;
    gap: 12px;
  }

  .s-oldnew {
    padding: 24px 0 48px;
  }

  .s-oldnew__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .s-oldnew__card--new .s-oldnew__list {
    flex: initial;
  }

  .s-oldnew__step--result-new {
    margin-top: 0;
  }

  .s-oldnew__title {
    font-size: 28px;
  }

  .s-oldnew__sub {
    font-size: 23px;
  }

  .s-oldnew__arrow--old {
    left: -134px;
    bottom: auto;
    top: 559px;
    width: 285px;
    height: 219px;
  }

  .s-oldnew__note--old {
    left: -22px;
    bottom: auto;
    top: 775px;
    width: 100px;
    font-size: 14px;
  }

  .s-oldnew__arrow--new {
    left: 272px;
    top: 444px;
  }

  .s-oldnew__note--new {
    left: 224px;
    top: 484px;
    width: 114px;
    font-size: 14px;
  }

  .s-track {
    padding: 24px 0 20px;
  }

  .s-track__grid {
    margin-top: 20px;
    gap: 10px;
  }

  .s-track__card {
    padding: 20px;
  }

  .s-track__num {
    font-size: 33px;
    line-height: 1.2;
  }

  .s-track__label {
    font-size: 16px;
    white-space: nowrap;
  }
}

/* ===== 04-founder.css ===== */
/* ==========================================================================
   04-founder.html — founder letter / how-it-works / secret sauce
   Sections: .s-founder (#about), .s-how (#how-it-works), .s-sauce
   ========================================================================== */

/* Section vertical rhythm: top/bottom padding is intentionally asymmetric
   between these three sections (matches live measurements) rather than a
   uniform 64px — .s-how in particular carries much less top/bottom padding
   than .s-founder/.s-sauce. */
.s-founder {
  padding: 64px 0 64px;
}

.s-how {
  padding: 56px 0 20px;
}

.s-sauce {
  padding: 40px 0 64px;
}

/* shared "floating card" shadow used on the letter card + step cards */
.s-founder .letter-card,
.s-how .step-card {
  background: var(--white);
  border-radius: 22px;
  box-shadow:
    rgba(64, 65, 66, 0.04) 0 -2.4px 0 0 inset,
    rgba(139, 143, 148, 0.2) 0 1px 3px 0,
    rgba(225, 231, 235, 0.6) 0 0 0 1px;
}

/* ---------- Founder letter ---------- */

.s-founder .letter-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.s-founder .letter-card > * {
  width: 100%;
  max-width: 700px;
}

.s-founder p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--body);
  text-align: left;
}

.s-founder .lede {
  font-weight: 700;
  color: var(--ink);
}

.s-founder strong {
  font-weight: 700;
  color: var(--ink);
}

.s-founder .letter-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.s-founder .letter-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.s-founder .letter-from {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.s-founder .letter-shot {
  max-width: 602px;
  height: auto;
  border-radius: 12px;
}

.s-founder .letter-photos {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  height: 220px;
}

/* Two consecutive image blocks sit closer together (10px) than an
   image next to a text paragraph (20px, from the card's flex gap). */
.s-founder .letter-photos + .letter-photo-full,
.s-founder .letter-photo-full + .letter-photos {
  margin-top: -10px;
}

.s-founder .letter-photos img {
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.s-founder .w-218 {
  flex: 218 1 0;
}

.s-founder .w-330 {
  flex: 330 1 0;
}

.s-founder .w-162 {
  flex: 162 1 0;
}

.s-founder .w-386 {
  flex: 386 1 0;
}

.s-founder .letter-photo-full {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 220px;
  border-radius: 20px;
  object-fit: cover;
}

.s-founder .letter-comment {
  max-width: 600px;
  height: auto;
  border-radius: 12px;
}

.s-founder .letter-sign {
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.7;
  color: var(--ink);
  /* signature sits slightly further from the preceding line, then the
     role line directly under it with no extra gap */
  margin-top: 9px;
}

.s-founder .letter-role {
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
  margin-top: -20px;
}

/* ---------- How it works ---------- */

.s-how .container {
  text-align: center;
}

.s-how .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 16px;
  padding: 2px 16px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  box-shadow:
    rgba(134, 150, 181, 0.14) 0 -2px 1px 1px inset,
    rgba(150, 161, 181, 0.2) 0 4px 6px 0;
}

.s-how h2 {
  margin-top: 20px;
}

.s-how .how-sub {
  margin: 20px auto 0;
  max-width: 520px;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
}

.s-how .how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}

.s-how .step-card {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.s-how .step-num {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.15) 0 -2px 2px 1px inset;
}

.s-how .step-num h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
}

.s-how .step-num--1 {
  background: linear-gradient(139deg, #8754fe -16%, #47a4f5 33.03%, #af80cf 78.68%, #e459aa 114%);
}

.s-how .step-num--2 {
  background: linear-gradient(139deg, #e459aa -53%, #af80cf 18.02%, #47a4f5 68.17%, #8754fe 100%);
}

.s-how .step-num--3 {
  background: linear-gradient(139deg, #8754fe 0%, #47a4f5 43.84%, #af80cf 84.08%, #e459aa 114%);
}

.s-how .step-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-how .step-body {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--body);
  /* sits closer to the title than the card's 20px flex gap */
  margin-top: -13px;
  /* on rows where the grid stretches this card taller than its own
     content (a sibling card has a longer 2-line body), this element
     absorbs the extra space so the mock preview below still lines up
     across the row; single-column mobile has no such stretch, so this
     has no effect there */
  flex: 1;
}

.s-how .mock {
  width: 100%;
  border-radius: 20px;
  position: relative;
}

/* --- step 1: fake url input mockup --- */

.s-how .mock--url {
  background: #f0f6fc;
  min-height: 250px;
  padding: 40px 20px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-how .mock-panel {
  width: 100%;
  max-width: 250px;
  background: var(--white);
  border-radius: 11px;
  padding: 13px 19px 19px;
  box-shadow: rgba(169, 180, 199, 0.25) 0 11px 22px 0;
}

.s-how .mock-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 16px;
}

.s-how .mock-input {
  border: 1px solid #e1e7f0;
  border-radius: 6px;
  padding: 10px 17px;
  font-size: 12px;
  line-height: 1.2;
  color: #6f7d98;
  margin-bottom: 8px;
}

.s-how .mock-enter {
  background: var(--blue);
  border-radius: 6px;
  padding: 11px 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  box-shadow:
    rgba(0, 0, 0, 0.15) 0 -2px 1px 1px inset,
    rgba(255, 255, 255, 0.45) 0 2px 1px 0 inset;
}

.s-how .mock-enter svg {
  width: 14px;
  height: 14px;
}

.s-how .mock-chip {
  position: absolute;
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 16px 16px 16px 4px;
  z-index: 2;
}

.s-how .mock-chip--jastin {
  /* sits fully above the panel's label, not overlapping it */
  top: 8px;
  left: 26px;
}

.s-how .mock-chip--you {
  background: var(--purple);
  border-radius: 16px 16px 4px 16px;
  bottom: 26px;
  right: 10px;
}

/* --- step 2: product grid + logo mockup --- */

.s-how .mock--grid {
  background: var(--ink);
  min-height: 250px;
  padding: 19px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.s-how .mock--grid img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.s-how .mock-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-how .mock-logo-icon {
  width: 46px;
  height: 24px;
  position: relative;
  z-index: 2;
}

.s-how .sparkle {
  position: absolute;
  z-index: 1;
}

.s-how .sparkle--a {
  top: -2px;
  right: 6px;
}

.s-how .sparkle--b {
  bottom: -4px;
  left: 8px;
}

.s-how .sparkle--c {
  bottom: 10px;
  right: 2px;
}

.s-how .sparkle--d {
  bottom: -10px;
  left: 40px;
  opacity: 0.4;
}

/* --- step 3: stacked phone previews mockup --- */

.s-how .mock--phones {
  background: #f0f6fc;
  min-height: 250px;
  padding: 20px;
}

.s-how .mock--phones .phone {
  position: absolute;
  border-radius: 7px;
  object-fit: cover;
}

.s-how .phone--left {
  left: 8%;
  top: 8%;
  width: 41%;
  height: auto;
  transform: rotate(-8deg);
}

.s-how .phone--right {
  right: 8%;
  top: 8%;
  width: 41%;
  height: auto;
  transform: rotate(8deg);
}

.s-how .phone--center {
  left: 50%;
  top: 8%;
  width: 36%;
  height: auto;
  transform: translateX(-50%);
  box-shadow: rgba(69, 75, 87, 0.25) 0 11px 22px 0;
  border-radius: 7px;
}

.s-how .how-cta {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ---------- Secret sauce ---------- */

.s-sauce .container {
  text-align: center;
}

.s-sauce h3 {
  max-width: 660px;
  margin: 0 auto;
}

.s-sauce .sauce-copy {
  max-width: 660px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--body);
}

.s-sauce .sauce-copy strong {
  font-weight: 700;
  color: var(--ink);
}

.s-sauce .layers {
  max-width: 800px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.s-sauce .layer-card {
  border-radius: 22px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-sauce .layer-card--blue {
  background: rgb(224, 240, 255);
}

.s-sauce .layer-card--purple {
  background: rgb(240, 235, 255);
}

.s-sauce .layer-card--green {
  background: rgb(235, 252, 244);
}

.s-sauce .layer-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-sauce .layer-title span {
  margin-right: 4px;
}

.s-sauce .layer-card--blue .layer-title span {
  color: var(--blue);
}

.s-sauce .layer-card--purple .layer-title span {
  color: var(--purple);
}

.s-sauce .layer-card--green .layer-title span {
  color: var(--green);
}

.s-sauce .layer-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--body);
}

.s-sauce .layer-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

.s-sauce .layer-card--blue .layer-item svg {
  color: var(--blue);
}

.s-sauce .layer-card--purple .layer-item svg {
  color: var(--purple);
}

.s-sauce .layer-card--green .layer-item svg {
  color: var(--green);
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1199px) {
  .s-founder .letter-card {
    padding: 40px;
  }

  .s-how .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .s-how .step-card {
    padding: 24px;
  }

  .s-sauce .layer-card {
    padding: 30px;
  }
}

/* ==========================================================================
   Mobile (matches strips-375 reference)
   ========================================================================== */

@media (max-width: 809px) {
  .s-founder {
    padding: 40px 0 40px;
  }

  .s-how {
    padding: 20px 0 20px;
  }

  .s-sauce {
    padding: 20px 0 40px;
  }

  .s-founder .letter-card {
    padding: 20px;
    border-radius: 22px;
    gap: 20px;
  }

  .s-founder .letter-card > * {
    max-width: 100%;
  }

  .s-founder p {
    font-size: 14px;
    line-height: 21px;
  }

  .s-founder .lede {
    font-size: 16px;
    line-height: 24px;
  }

  .s-founder .letter-from {
    font-size: 18px;
  }

  .s-founder .letter-shot,
  .s-founder .letter-photo-full,
  .s-founder .letter-comment,
  .s-founder .letter-photos {
    max-width: 100%;
  }

  .s-founder .letter-photo-full,
  .s-founder .letter-photos {
    height: 140px;
  }

  .s-founder .letter-sign {
    font-size: 27px;
  }

  .s-how h2 {
    margin-top: 20px;
  }

  .s-how .how-sub {
    font-size: 20px;
    margin-top: 20px;
  }

  .s-how .how-steps {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .s-how .step-card {
    padding: 30px;
  }

  .s-how .mock--url,
  .s-how .mock--grid,
  .s-how .mock--phones {
    min-height: 237px;
  }

  .s-how .mock--grid img {
    height: 63px;
    aspect-ratio: auto;
  }

  .s-how .step-num {
    width: 50px;
    height: 50px;
  }

  .s-how .step-num h3 {
    font-size: 20px;
  }

  .s-how .how-cta {
    margin-top: 32px;
  }

  .s-sauce h3 {
    font-size: 32px;
    line-height: 1.4;
  }

  .s-sauce .sauce-copy {
    font-size: 14px;
    line-height: 21px;
  }

  .s-sauce .sauce-copy--keep {
    font-size: 16px;
    line-height: 24px;
  }

  .s-sauce .layers {
    margin-top: 24px;
    gap: 16px;
  }

  .s-sauce .layer-card {
    padding: 20px;
  }

  .s-sauce .layer-title {
    font-size: 18px;
  }

  .s-sauce .layer-item {
    font-size: 14px;
    line-height: 21px;
  }
}

/* ===== 05-results.css ===== */
/* ==========================================================================
   05-results — "Result Ads" comparison, Industry Leaders, Feedback, User Results
   ========================================================================== */

/* ---------- Shared heading treatment ---------- */

.s-vs h3,
.s-leaders h2,
.s-feedback h3,
.s-userresults h3 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ==========================================================================
   .s-vs — The Result Ads That Actually Work
   ========================================================================== */

.s-vs {
  padding: 60px 0 120px;
  overflow: hidden;
}

/* -- marquee -- */

.s-vs .marquee {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.s-vs .marquee-row {
  overflow: hidden;
}

.s-vs .marquee-track {
  display: flex;
  align-items: center;
  gap: 25px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: s-vs-scroll 46s linear infinite;
}

.s-vs .marquee-track--reverse {
  animation-direction: reverse;
  animation-duration: 52s;
}

.s-vs .marquee-track li {
  flex: 0 0 auto;
}

.s-vs .marquee-track img {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: #fff 0 0 0 5px;
}

@keyframes s-vs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-vs .marquee-track {
    animation: none;
  }
}

/* -- lede -- */

.s-vs .lede {
  max-width: 660px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* -- compare cards -- */

.s-vs .compare {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 80px;
  max-width: 1080px;
  margin: 42px auto 0;
}

.s-vs .card-chatgpt,
.s-vs .card-winning {
  flex: 1 1 0;
  max-width: 500px;
  min-width: 0;
  border-radius: 20px;
}

.s-vs .card-chatgpt {
  background: rgb(33, 33, 33);
  overflow: hidden;
}

.s-vs .card-chatgpt .card-head {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.s-vs .card-chatgpt .card-head p {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.45);
}

.s-vs .card-chatgpt .card-body {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-vs .card-chatgpt .card-body img {
  width: 100%;
  max-width: 436px;
  aspect-ratio: 436 / 399;
  object-fit: cover;
  height: auto;
}

.s-vs .card-winning {
  padding: 2px;
  background: linear-gradient(180deg, rgb(135, 84, 254) 0%, rgb(70, 157, 244) 35.8783%, rgb(138, 67, 225) 69.922%, rgb(213, 17, 253) 100%);
}

.s-vs .card-winning-inner {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
}

.s-vs .card-winning .card-head {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #edf0f3;
}

.s-vs .card-winning .card-head img {
  width: 230px;
  height: 43px;
}

.s-vs .card-winning .card-body {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-vs .card-winning .card-body img {
  width: 100%;
  max-width: 436px;
  aspect-ratio: 436 / 400;
  object-fit: cover;
  height: auto;
}

.s-vs .vs-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.s-vs .connector {
  position: absolute;
  top: 113px;
}

.s-vs .connector-l {
  left: calc(50% - 44px);
}

.s-vs .connector-r {
  left: calc(50% + 6px);
}

.s-vs .vs-badge {
  position: absolute;
  left: calc(50% - 29px);
  top: 95px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  white-space: nowrap;
}

/* -- closing copy + banner -- */

.s-vs .closing {
  max-width: 660px;
  margin: 41px auto 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-vs .learn-banner {
  max-width: 800px;
  margin: 22px auto 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: rgba(96, 107, 128, 0.1) 0 -2px 2px 1px inset;
  padding: 40px;
  text-align: center;
}

.s-vs .learn-banner p {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-vs .gradient-text {
  background: linear-gradient(91deg, rgb(135, 84, 254) 0%, rgb(70, 157, 244) 49.8499%, rgb(228, 89, 170) 118%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   .s-leaders — Why Industry Leaders Choose Our Platforms
   ========================================================================== */

.s-leaders {
  padding: 0 0 15px;
}

.s-leaders .stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

.s-leaders .stats-label {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-leaders .pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  padding: 12px 22px;
}

.s-leaders .pill strong {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-leaders .check {
  flex-shrink: 0;
}

.s-leaders .copy {
  max-width: 720px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
}

/* ==========================================================================
   .s-feedback / .s-userresults — shared quote-card system
   ========================================================================== */

.s-feedback {
  padding: 15px 0 40px;
}

.s-userresults {
  padding: 40px 0 70px;
}

.s-feedback .tag-pill,
.s-userresults .tag-pill {
  display: table;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 2px 16px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  box-shadow: rgba(134, 150, 181, 0.14) 0 -2px 1px 1px inset, rgba(150, 161, 181, 0.2) 0 4px 6px 0;
}

.s-feedback h3,
.s-userresults h3 {
  margin-top: 10px;
}

.s-feedback .grid,
.s-userresults .grid {
  max-width: 800px;
  margin: 42px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.s-feedback .col,
.s-userresults .col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s-feedback .quote-card,
.s-userresults .quote-card {
  margin: 0;
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: rgba(62, 62, 62, 0.04) 0 -2.4px 0 0 inset, rgba(143, 143, 143, 0.2) 0 1px 3px 0, rgba(237, 237, 237, 0.6) 0 0 0 1px;
}

.s-feedback .quote-mark,
.s-userresults .quote-mark {
  display: block;
  margin-bottom: 16px;
}

.s-feedback .quote-card blockquote,
.s-userresults .quote-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-feedback .quote-card figcaption,
.s-userresults .quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.s-feedback .quote-card .avatar,
.s-userresults .quote-card .avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.s-userresults .quote-card .avatar.square {
  border-radius: 7px;
}

.s-feedback .quote-card .who,
.s-userresults .quote-card .who {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-feedback .quote-card .role,
.s-userresults .quote-card .role {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-userresults .quote-card a.role:hover {
  color: var(--purple);
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1199px) {
  .s-vs .compare {
    gap: 40px;
  }

  .s-feedback .grid,
  .s-userresults .grid {
    max-width: 640px;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 809px) {
  .s-vs h3 {
    font-size: 24px;
    line-height: 33.6px;
  }

  .s-feedback h3,
  .s-userresults h3 {
    font-size: 32px;
    line-height: 44.8px;
  }

  .s-vs {
    padding: 40px 0 59px;
  }

  .s-vs .marquee {
    margin-top: 25px;
  }

  .s-vs .lede {
    margin-top: 25px;
    font-size: 20px;
  }

  .s-vs .compare {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
  }

  .s-vs .card-chatgpt,
  .s-vs .card-winning {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .s-vs .card-chatgpt .card-body img,
  .s-vs .card-winning .card-body img {
    width: 100%;
    max-width: none;
    aspect-ratio: 271 / 299;
    object-fit: cover;
    height: auto;
  }

  .s-vs .vs-wrap {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
  }

  .s-vs .vs-badge {
    position: static;
  }

  .s-vs .connector {
    display: none;
  }

  .s-vs .closing {
    margin-top: 21px;
  }

  .s-vs .learn-banner {
    margin-top: 22px;
    padding: 20px;
  }

  .s-leaders {
    padding-bottom: 14px;
  }

  .s-leaders h2 {
    font-size: 30px;
    line-height: 39px;
  }

  .s-leaders .stats {
    margin-top: 20px;
    flex-direction: column;
    gap: 10px;
  }

  .s-leaders .copy {
    margin-top: 20px;
  }

  .s-feedback {
    padding: 15px 0 16px;
  }

  .s-userresults {
    padding: 16px 0 56px;
  }

  .s-feedback .grid,
  .s-userresults .grid {
    flex-direction: column;
    margin-top: 22px;
    gap: 16px;
    max-width: 480px;
  }

  .s-feedback .col,
  .s-userresults .col {
    gap: 16px;
  }

  /* longest feedback quote wraps tighter on mobile, matching live */
  .s-feedback .col:first-child .quote-card:first-child blockquote {
    font-size: 14px;
    line-height: 21px;
  }
}

/* ===== 06-features.css ===== */
/* ==========================================================================
   06 - Features / Pricing / Guarantees
   ========================================================================== */

/* ---------- Shared intro/lede patterns ---------- */

.s-features__title,
.s-pricing__title {
  text-align: center;
}

.s-features__intro,
.s-pricing__intro {
  max-width: 660px;
  margin: 30px auto 0;
  text-align: center;
}

.s-features__intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}

/* ==========================================================================
   .s-features
   ========================================================================== */

.s-features {
  padding: 110px 0 70px;
}

.s-features__title {
  max-width: 970px;
  margin: 0 auto;
}

/* ---- alternating feature groups ---- */

.s-features__group {
  background: var(--white);
  border-radius: 22px;
  box-shadow:
    rgba(62, 62, 62, 0.04) 0 -2.4px 0 0 inset,
    rgba(143, 143, 143, 0.2) 0 1px 3px 0,
    rgba(237, 237, 237, 0.6) 0 0 0 1px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 60px;
}

.s-features__row + .s-features__row {
  margin-top: 20px;
}

.s-features__group-title {
  max-width: 640px;
  text-align: center;
}

.s-features__row {
  width: 100%;
  display: grid;
  grid-template-columns: 422px 470px;
  column-gap: 68px;
  align-items: center;
}

.s-features__row--rev {
  grid-template-columns: 470px 422px;
}

.s-features__row--rev .s-features__media {
  order: -1;
}

.s-features__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s-features__text h4 {
  font-size: 32px;
  line-height: 1.4;
}

.s-features__text p {
  color: var(--body);
}

.s-features__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.s-features__icon svg {
  width: 100%;
  height: 100%;
}

.s-features__icon--purple { color: var(--purple); }
.s-features__icon--green { color: var(--green); }
.s-features__icon--pink { color: var(--pink); }

.s-features__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---- Group 4: 3-up icon cards, no image ---- */

.s-features__group4 {
  margin-top: 60px;
}

.s-features__group4 .s-features__group-title {
  margin-bottom: 30px;
}

.s-features__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.s-features__card {
  background: var(--white);
  border-radius: 20px;
  box-shadow:
    rgba(62, 62, 62, 0.07) 0 -2.4px 0 0 inset,
    rgba(143, 143, 143, 0.2) 0 1px 3px 0,
    rgba(237, 237, 237, 0.25) 0 0 0 1px;
  padding: 30px;
}

.s-features__card h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 30px 0 10px;
}

.s-features__card p {
  color: var(--body);
}

.s-features__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 54px;
  border-radius: 100px;
  box-shadow:
    rgba(104, 120, 153, 0.12) 0 6px 12px 0,
    rgba(104, 120, 153, 0.12) 0 2px 5px 0,
    rgba(104, 120, 153, 0.05) 0 6px 11px 0;
}

.s-features__badge--blue { background: var(--blue); }
.s-features__badge--purple { background: var(--purple); }
.s-features__badge--green { background: var(--green); }

.s-features__badge-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 98px;
  background: var(--ink);
}

.s-features__badge-inner svg {
  width: 30px;
  height: 30px;
}

.s-features__badge--blue .s-features__badge-inner svg { color: var(--blue); }
.s-features__badge--purple .s-features__badge-inner svg { color: var(--purple); }
.s-features__badge--green .s-features__badge-inner svg { color: var(--green); }

/* ---- closing copy ---- */

.s-features__closing {
  max-width: 660px;
  margin: 60px auto 0;
  text-align: center;
  color: var(--body);
}

.s-features__lede {
  margin: 32px auto 0;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ==========================================================================
   .s-pricing
   ========================================================================== */

.s-pricing {
  padding: 90px 0;
}

.s-pricing__subhead {
  margin: 30px auto 0;
  max-width: 660px;
  text-align: center;
  font-size: 24px;
  line-height: 1.6;
  color: var(--ink);
}

.s-pricing__intro {
  color: var(--ink);
}

.s-pricing__cards {
  margin-top: 60px;
  display: flex;
  gap: 24px;
}

.s-pricing__card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 30px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-height: 616px;
}

.s-pricing__card--pro {
  background: var(--white);
}

.s-pricing__card--agency {
  background: #ccdaed;
}

.s-pricing__head {
  background: var(--white);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.s-pricing__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.s-pricing__name {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.7;
  color: #120a0b;
}

.s-pricing__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #120a0b;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  padding: 2px 16px;
  border-radius: 16px;
  white-space: nowrap;
}

.s-pricing__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.s-pricing__price {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: #120a0b;
}

.s-pricing__period {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: #454140;
}

.s-pricing__desc {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #454140;
}

.s-pricing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-pricing__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
}

.s-pricing__list--pro li {
  color: #454140;
}

.s-pricing__list--agency li {
  color: #120a0b;
}

.s-pricing__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: var(--blue);
}

.s-pricing__check--white {
  background: var(--white);
}

.s-pricing__cta.btn {
  width: 100%;
}

.s-pricing__card--agency .s-pricing__cta.btn-blue {
  color: var(--ink);
}

/* ==========================================================================
   .s-guarantees
   ========================================================================== */

.s-guarantees {
  padding: 0 0 90px;
}

.s-guarantees__title {
  text-align: center;
}

.s-guarantees__list {
  max-width: 660px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s-guarantees__card {
  background: var(--white);
  border-radius: 22px;
  box-shadow: rgba(96, 107, 128, 0.1) 0 -2px 2px 1px inset;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.s-guarantees__badge {
  flex: none;
  object-fit: cover;
}

.s-guarantees__badge--money {
  border-radius: 16px;
}

.s-guarantees__badge--perf {
  border-radius: 20px;
}

.s-guarantees__card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 8px;
}

.s-guarantees__body p {
  color: var(--body);
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1199px) {
  .s-features {
    padding: 90px 0 60px;
  }

  .s-features__group {
    padding: 44px;
  }

  .s-features__row {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }

  .s-features__text h4 {
    font-size: 27px;
  }

  .s-features__card h4 {
    font-size: 23px;
  }

  .s-pricing {
    padding: 70px 0;
  }

  .s-pricing__card {
    padding: 32px;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 809px) {
  .s-features {
    padding: 64px 0 48px;
  }

  .s-features__intro,
  .s-pricing__intro {
    margin-top: 20px;
  }

  .s-features__group {
    padding: 30px;
    border-radius: 22px;
    gap: 30px;
    margin-top: 30px;
  }

  .s-features__group-title {
    font-size: 30px;
    line-height: 42px;
  }

  .s-features__row {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .s-features__row + .s-features__row {
    margin-top: 0;
  }

  .s-features__row--rev .s-features__media {
    order: 0;
  }

  .s-features__text h4 {
    font-size: 20px;
    line-height: 28px;
  }

  .s-features__text p,
  .s-features__card p {
    font-size: 14px;
  }

  .s-features__group4 {
    margin-top: 30px;
  }

  .s-features__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .s-features__card h4 {
    font-size: 21px;
    line-height: 29.4px;
    margin: 30px 0 10px;
  }

  .s-features__closing {
    margin-top: 40px;
    font-size: 14px;
  }

  .s-features__lede {
    margin-top: 24px;
  }

  .s-pricing {
    padding: 48px 0 60px;
  }

  .s-pricing__subhead {
    font-size: 20px;
    line-height: 32px;
  }

  .s-pricing__cards {
    flex-direction: column;
    margin-top: 40px;
  }

  .s-pricing__card {
    min-height: auto;
  }

  .s-guarantees {
    padding: 0 0 60px;
  }

  .s-guarantees__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 20px;
  }

  .s-guarantees__badge--money,
  .s-guarantees__badge--perf {
    width: 100px;
    height: auto;
  }
}

/* ===== 07-compare.css ===== */
/* ==========================================================================
   07 — Comparison / Cost / Risk-free guarantee / FAQ
   Sections: .s-invest, .s-costs, .s-riskfree, .s-faq
   ========================================================================== */

/* ---------- shared measure utilities (used across all 4 sections) ---------- */

.s-invest .measure-660,
.s-costs .measure-660,
.s-riskfree .measure-660,
.s-faq .measure-660 {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

.s-invest .measure-800,
.s-costs .measure-800,
.s-riskfree .measure-800,
.s-faq .measure-800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.s-invest .lead,
.s-invest .lede,
.s-costs .lede,
.s-riskfree .lede,
.s-faq .container > p {
  text-align: center;
}

.s-invest .lead {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
}

.s-invest .lede,
.s-costs .lede,
.s-riskfree .lede {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-invest .body-lg,
.s-costs .body-lg {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-invest .body-lg strong,
.s-costs .body-lg strong {
  font-weight: 700;
}

/* gradient "WinningAds" wordmark */

.s-invest .wa-logo,
.s-costs .wa-logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  background: linear-gradient(106deg, #8754fe 0%, #469df4 55.5%, #e459aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-costs .wa-logo-alt {
  background: linear-gradient(284deg, #e459aa 0%, #8754fe 44.1%, #469df4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- s-invest ---------- */

.s-invest {
  background: var(--bg-soft);
  padding: 96px 0 60px;
}

.s-invest .container > h2 {
  margin: 0 0 28px;
}

.s-invest .container > .lead {
  margin: 0 0 28px;
}

.s-invest .lead + .lede {
  margin: 0 0 28px;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.s-invest .cmp-table-wrap {
  margin-bottom: 28px;
}

.s-invest .cmp-table-wrap + .lede {
  margin: 0;
}

/* comparison table */

.s-invest .cmp-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 20px;
  -webkit-overflow-scrolling: touch;
}

.s-invest .cmp-table {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 800px;
  background: var(--bg-hero);
  border-radius: 20px;
}

.s-invest .cmp-winner-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20%;
  background: var(--white);
  border: 2px solid var(--purple);
  border-radius: 20px;
}

.s-invest .cmp-row {
  display: flex;
}

.s-invest .cmp-cell {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 160px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 10px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-invest .cmp-cell.cmp-label {
  align-items: flex-start;
  text-align: left;
  padding-left: 24px;
  font-weight: 500;
}

.s-invest .cmp-head .cmp-cell {
  min-height: 80px;
  font-weight: 700;
  padding-top: 20px;
  padding-bottom: 20px;
}

.s-invest .cmp-line {
  display: block;
}

.s-invest .cmp-note {
  font-size: 16px;
  color: var(--ink);
}

.s-invest .cmp-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.s-invest .cmp-winner {
  font-weight: 700;
}

/* ---------- s-costs ---------- */

.s-costs {
  background: var(--bg-soft);
  padding: 0 0 24px;
}

.s-costs .container > h3 {
  text-align: center;
  margin: 60px 0 30px;
}

.s-costs .container > h3:first-child {
  margin-top: 0;
}

.s-costs p.measure-660 + p.measure-660 {
  margin-top: 30px;
}

.s-costs p.perspective-line + p.perspective-line {
  margin-top: 20px;
}

.s-costs h3 + p {
  margin-top: 0;
}

/* AI tool list */

.s-costs .tool-list {
  list-style: none;
  margin: 30px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s-costs .tool-list li {
  display: flex;
  align-items: center;
  gap: 26px;
}

.s-costs .tool-list img {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: cover;
}

.s-costs .tool-list p {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-costs .tool-list strong {
  font-weight: 700;
}

/* perspective lines + price card */

.s-costs .perspective-line {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-costs .perspective-line strong {
  font-weight: 700;
}

.s-costs .price-highlight {
  margin: 30px auto;
  background: var(--white);
  border-radius: 22px;
  box-shadow: rgba(96, 107, 128, 0.1) 0 -2px 2px 1px inset;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s-costs .price-highlight strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* CTA + guarantee bullets (shared look, reused in s-riskfree) */

.s-costs .cta-block {
  margin-top: 30px;
  text-align: center;
}

.s-costs .cta-block .btn,
.s-riskfree .guarantee-card .btn {
  display: inline-flex;
}

.s-costs .cta-guarantees,
.s-riskfree .cta-guarantees {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.s-costs .cta-guarantees span,
.s-riskfree .cta-guarantees span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--body);
}

.s-costs .g-ico,
.s-riskfree .g-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- s-riskfree ---------- */

.s-riskfree {
  background: var(--bg-soft);
  padding: 96px 0 24px;
}

.s-riskfree .container > h2 {
  margin-bottom: 40px;
}

.s-riskfree .guarantee-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 22px;
  box-shadow: rgba(96, 107, 128, 0.1) 0 -2px 2px 1px inset;
  padding: 50px 70px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.s-riskfree .guarantee-card > * {
  margin-top: 30px;
}

.s-riskfree .guarantee-card > *:first-child {
  margin-top: 0;
}

.s-riskfree .guarantee-card > h4 {
  margin-top: 32px;
}

.s-riskfree .guarantee-card > .btn {
  margin-top: 20px;
}

.s-riskfree .guarantee-card > .cta-guarantees {
  margin-top: 20px;
}

.s-riskfree .guarantee-card p,
.s-riskfree .guarantee-card p strong {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.s-riskfree .guarantee-card p {
  color: var(--body);
}

.s-riskfree .guarantee-card p strong {
  color: var(--ink);
  font-weight: 700;
}

.s-riskfree .guarantee-card p.lede {
  font-size: 22px;
  line-height: 35.2px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.s-riskfree .badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.s-riskfree .badge-row img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.s-riskfree .badge-row img:last-child {
  width: 132px;
}

/* ---------- s-faq ---------- */

.s-faq {
  background: var(--bg-soft);
  padding: 96px 0 64px;
}

.s-faq .tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  background: var(--white);
  border-radius: 16px;
  box-shadow:
    rgba(134, 150, 181, 0.14) 0 -2px 1px 1px inset,
    rgba(150, 161, 181, 0.2) 0 4px 6px 0;
  padding: 3px 16px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}

.s-faq .container > h2 {
  text-align: center;
  margin-bottom: 20px;
}

.s-faq .container > p {
  color: var(--body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  margin-bottom: 52px;
}

.s-faq h3 {
  text-align: center;
  margin: 0 0 20px;
}

.s-faq h3:not(:first-of-type) {
  margin-top: 56px;
}

.s-faq .faq-group {
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
}

.s-faq .faq-item {
  border-bottom: 1px solid #e2e8f0;
}

.s-faq .faq-item:last-child {
  border-bottom: 0;
}

.s-faq .faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.s-faq .faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-faq .faq-icon::before,
.s-faq .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #020617;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.s-faq .faq-icon::before {
  width: 2px;
  height: 16px;
}

.s-faq .faq-icon::after {
  width: 16px;
  height: 2px;
}

.s-faq .faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.s-faq .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}

.s-faq .faq-item.open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
}

.s-faq .faq-a-panel {
  overflow: hidden;
}

.s-faq .faq-a-body {
  margin: 0 20px 22px 60px;
  padding: 20px 24px;
  background: var(--bg-soft);
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
}

.s-faq .faq-a-body p + p {
  margin-top: 16px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1199px) {
  .s-invest {
    padding: 72px 0 32px;
  }

  .s-costs {
    padding: 0 0 72px;
  }

  .s-riskfree {
    padding: 72px 0;
  }

  .s-faq {
    padding: 72px 0 48px;
  }

  .s-riskfree .guarantee-card {
    padding: 48px 40px;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 809px) {
  .s-invest {
    padding: 56px 0 30px;
  }

  .s-invest .container > h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }

  .s-invest .container > .lead {
    margin-bottom: 30px;
  }

  .s-invest .lead + .lede {
    margin-bottom: 30px;
    line-height: 33.6px;
  }

  .s-invest .cmp-table-wrap + .lede {
    font-size: 20px;
    line-height: 28px;
  }

  .s-invest .cmp-table-wrap {
    margin-bottom: 30px;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    border-radius: 0;
  }

  .s-invest .cmp-table {
    border-radius: 0;
    min-width: 880px;
  }

  .s-invest .cmp-winner-bg {
    border-radius: 0;
  }

  .s-costs {
    padding: 0 0 36px;
  }

  .s-costs .container > h3 {
    margin: 30px 0 20px;
  }

  .s-costs p.measure-660 + p.measure-660 {
    margin-top: 20px;
  }

  .s-costs .tool-list {
    margin: 20px auto;
  }

  .s-costs .tool-list li {
    gap: 10px;
  }

  .s-costs .price-highlight {
    margin: 20px auto;
    padding: 24px 20px;
    flex-wrap: nowrap;
  }

  .s-costs .price-highlight .wa-logo-alt,
  .s-costs .price-highlight strong {
    font-size: 19px;
  }

  .s-costs .cta-block {
    margin-top: 20px;
  }

  .s-costs .cta-guarantees,
  .s-riskfree .cta-guarantees {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .s-riskfree {
    padding: 56px 0 0;
  }

  .s-riskfree .container > h2 {
    margin-bottom: 20px;
  }

  .s-riskfree .guarantee-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .s-riskfree .guarantee-card > * {
    margin-top: 22px;
  }

  .s-riskfree .guarantee-card > h4 {
    margin-top: 22px;
  }

  .s-riskfree .guarantee-card p.lede {
    font-size: 20px;
    line-height: 32px;
  }

  .s-riskfree .badge-row img {
    width: 100px;
    height: 100px;
  }

  .s-riskfree .badge-row img:last-child {
    width: 121px;
    height: 110px;
  }

  .s-faq {
    padding: 56px 0 40px;
  }

  .s-faq .tag-pill {
    margin-bottom: 20px;
  }

  .s-faq .container > p {
    margin-bottom: 25px;
  }

  .s-faq h3:not(:first-of-type) {
    margin-top: 28px;
  }

  .s-faq .faq-q {
    padding: 20px 24px;
    font-size: 16px;
  }

  .s-faq .faq-a-body {
    margin: 0 16px 18px 48px;
    padding: 16px 18px;
  }
}