/* Growth — Figma 10007:21921 */
.growth { padding: 1px 0 clamp(56px, calc(100 / 1728 * 100vw), 100px); }
.growth-inner {
  display: grid; grid-template-columns: minmax(0, 708px) minmax(0, 462px);
  column-gap: clamp(32px, calc(147 / 1728 * 100vw), 147px); align-items: center;
}

.growth-copy { grid-column: 2; grid-row: 1; position: relative; top: -1px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.growth-titles { display: flex; flex-direction: column; gap: 8px; }
.growth-title { font-size: clamp(40px, calc(78.83 / 1728 * 100vw), 78.83px); color: var(--text-primary); }
.growth-kicker { font-size: clamp(22px, calc(38.02 / 1728 * 100vw), 38.02px); color: var(--text-success); }
.growth-sub { width: 100%; max-width: 462px; font-size: clamp(16px, calc(22 / 1728 * 100vw), 22px); line-height: normal; color: var(--text-primary); }

/* Canvas: 708x829 composition in a scale box (js/scale.js) */
.growth-canvas { --w: 708; --h: 829; grid-column: 1; grid-row: 1; background: #e5e9f3; border-radius: 20px; }
.growth-glow { position: absolute; left: 246px; top: 472px; width: 774px; height: 770px; }
.growth-glow img { position: absolute; left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }

/* Operator message: avatar + bubble */
.growth-row { position: absolute; left: 64px; top: 109px; display: flex; gap: 4.792px; align-items: flex-end; }
.growth-bubble {
  position: relative; flex-shrink: 0;
  width: 465px; height: 503px; padding: 22.002px 0;
  display: flex; flex-direction: column; gap: 11.689px; align-items: center;
  background: rgba(255,255,255,0.3);
  border-radius: 16.886px 16.886px 16.886px 0;
}
.growth-ts { position: absolute; color: var(--text-unavailable); white-space: nowrap; line-height: normal; }
.growth-bubble > .growth-ts { right: 6.11px; bottom: 8.11px; font-size: 16.89px; letter-spacing: .3378px; }
.growth-text { width: 100%; display: flex; justify-content: center; padding: 11.258px 28.144px 11.258px 16.886px; }
.growth-text p { width: 422.291px; font-size: 22.515px; line-height: 30.958px; color: var(--text-primary); }

/* Campaign preview card */
.growth-campaign {
  display: flex; flex-direction: column; gap: 30px; align-items: center;
  padding: 30px 25.44px;
  background: rgba(250,250,250,0.3);
  border: 0.688px solid var(--text-selected);
  border-radius: 13.751px;
}
.growth-campaign-copy { width: 100%; display: flex; flex-direction: column; gap: 17.189px; align-items: center; text-align: center; }
.growth-campaign-title { font-size: 18.654px; color: #b94ab6; }
.growth-campaign-body { width: 372.664px; font-size: 18px; color: var(--text-primary); }
.growth-campaign-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 11.307px;
  background: rgba(255,255,255,0.2);
  border: 1px solid var(--text-selected);
  border-radius: 706.714px;
  font-size: 16px; color: var(--text-primary); text-decoration: none; white-space: nowrap;
}

/* Scissors icon (pieces rotated per design) */
.growth-icon { position: relative; flex-shrink: 0; width: 90px; height: 90px; background: rgba(255,255,255,0.2); border-radius: 20px; }
.growth-icon .piece { position: absolute; display: flex; align-items: center; justify-content: center; }
.growth-icon .piece > div { position: relative; flex: none; transform: rotate(89.94deg); }
.growth-icon img { position: absolute; display: block; width: 100%; height: 100%; }
.growth-icon .p-vector { left: 27.59px; top: 44.83px; width: 17.491px; height: 7.457px; }
.growth-icon .p-vector > div { width: 7.439px; height: 17.484px; }
.growth-icon .p-vector img { inset: 0; }
.growth-icon .p-group { left: 6px; top: 6px; width: 77.235px; height: 77.235px; }
.growth-icon .p-group > div { width: 77.156px; height: 77.156px; }
.growth-icon .p-group .frame { position: absolute; inset: 7.5% 22.5% 6% 22.5%; }
.growth-icon .p-group img { left: -1.15%; top: -0.73%; width: 102.3%; height: 101.46%; }
.growth-icon .p-ring { width: 10.582px; height: 10.582px; }
.growth-icon .p-ring > div { width: 10.571px; height: 10.571px; }
.growth-icon .p-ring img { inset: 0; }
.growth-icon .p-ring.r1 { left: 15.39px; top: 28.39px; }
.growth-icon .p-ring.r2 { left: 15.55px; top: 50.86px; }
.growth-icon .p-line { left: 45.65px; top: 41.53px; width: 12.088px; height: 3.543px; }
.growth-icon .p-line > div { width: 12.597px; height: 0; transform: rotate(16.34deg); }
.growth-icon .p-line img { left: 0; top: -0.54px; width: 100%; height: 0.54px; }

/* Reply bubble (dark, tail bottom-right) */
.growth-reply {
  position: absolute; left: 459px; top: 628px; width: 185px; height: 61px;
  background: rgba(42,42,42,0.9);
  border-radius: 18.486px 18.486px 0 18.486px;
}
.growth-reply p { position: absolute; right: 60px; top: 11px; font-size: 24.648px; line-height: 33.891px; color: var(--text-selected); white-space: nowrap; }
.growth-reply .growth-ts { left: 133px; bottom: 4px; font-size: 18.49px; letter-spacing: .3698px; }

/* Reaction */
.growth-reaction {
  position: absolute; left: 595.33px; top: 682.47px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6.667px 11.333px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  font-family: "SF Pro", -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 19.293px; line-height: 22.114px; text-align: center; color: #fff;
}

/* Body text in Inter (Shane: Inter everywhere, no Helvetica) */
.growth-sub { font-family: var(--font-body); }

/* ---- Tablet: keep the design's column ratio so the mockup stays legible ---- */
@media (max-width: 1199px) {
  .growth-inner { grid-template-columns: minmax(0, 708fr) minmax(0, 462fr); }
}

/* ---- Mobile: stacked, text first ---- */
@media (max-width: 899px) {
  .growth { padding-top: clamp(56px, calc(100 / 1728 * 100vw), 100px); }
  .growth-inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .growth-copy, .growth-canvas { grid-column: 1; grid-row: auto; top: 0; }
  .growth-sub { max-width: 560px; }
}
/* Phones: tighter 540x656 crop of the composition so text stays >= ~11px at 390 */
@media (max-width: 599px) {
  .growth-canvas { --w: 540; --h: 656; border-radius: 16px; }
  .growth-row { left: 8px; top: 24px; }
  .growth-reply { left: 339px; top: 543px; }
  .growth-reaction { left: 475.33px; top: 597.47px; }
  .growth-glow { left: 160px; top: 300px; }
}