.social-growth-page {
  --social-blue: #214f61;
  --social-blue-soft: #dbe9e9;
  --social-amber: #e8b75d;
}

.social-growth-page .social-hero {
  max-width: 900px;
}

.social-growth-page .social-hero h1 {
  max-width: 16ch;
}

.social-story-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid rgba(31, 48, 40, .25);
  border-radius: 20px;
  background: #1f3028;
  box-shadow: 0 24px 58px rgba(31, 48, 40, .14);
  color: #fff;
}

.social-story-rail article {
  min-width: 0;
  padding: clamp(20px, 4vw, 34px);
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.social-story-rail article:last-child {
  border-right: 0;
}

.social-story-rail span {
  color: var(--social-amber);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.social-story-rail h2 {
  margin: 13px 0 9px;
  color: #fff;
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.06;
}

.social-story-rail p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: .88rem;
  line-height: 1.65;
}

.social-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px 42px;
  align-items: end;
  overflow: hidden;
  border-left: 6px solid var(--social-amber);
  background:
    radial-gradient(circle at 100% 0, rgba(33, 79, 97, .13), transparent 34%),
    #fffdf8;
}

.social-answer h2,
.social-answer p {
  margin-top: 0;
}

.social-answer .button {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
}

.social-growth-page #social-fit-chooser {
  scroll-margin-top: 6.5rem;
}

/* The guide shell uses ordered flex children. Keep the revealed proof card
   in the reading flow after the chooser instead of letting it fall into the
   shell's default order before the hero. */
.social-growth-page .social-first-visit {
  order: 3;
  scroll-margin-top: 6.5rem;
}

.social-growth-page .creative-best-match {
  border-top-color: var(--social-blue);
}

.social-growth-page .creative-best-label,
.social-growth-page .creative-match-label {
  background: var(--social-blue-soft);
}

.social-first-visit blockquote {
  margin: 0;
  border-left: 4px solid var(--social-blue);
  padding: 14px 18px;
  background: rgba(219, 233, 233, .62);
  color: #1f3028;
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.45;
}

.social-idea-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.social-idea-columns article {
  min-width: 0;
  border: 1px solid rgba(31, 48, 40, .18);
  border-radius: 16px;
  padding: 20px;
  background: #fffdf8;
}

.social-idea-columns article:nth-child(2) {
  background: #f4f0e6;
}

.social-idea-columns article:nth-child(3) {
  background: #e9f0ea;
}

.social-idea-columns span {
  color: #a94739;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.social-idea-columns h3 {
  margin: 10px 0 16px;
  font-size: 1.35rem;
  line-height: 1.1;
}

.social-idea-columns ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 1.15rem;
  color: #3d5046;
  line-height: 1.45;
}

@media (max-width: 800px) {
  .social-story-rail,
  .social-idea-columns {
    grid-template-columns: 1fr;
  }

  .social-story-rail article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .social-story-rail article:last-child {
    border-bottom: 0;
  }

  .social-answer {
    grid-template-columns: 1fr;
  }

  .social-answer .button {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .social-answer .button {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-growth-page *,
  .social-growth-page *::before,
  .social-growth-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}