/* Heading hierarchy shared with SnapX. Product stage deliberately uses the previous ClipFlow family.css styles. */
.family-hero {
  /* Override the legacy wide-screen cap: family.css keeps fixed outer gutters. */
  max-width: none;
  padding: 0 28px;
  border-radius: 36px;
  background: radial-gradient(ellipse at 50% 25%, #fffdfb 10%, transparent 59%), radial-gradient(ellipse at 0 25%, #ece8df 0%, transparent 65%), radial-gradient(ellipse at 100% 45%, #e0e9f5 0%, transparent 65%), linear-gradient(180deg, #f0f2f5, #f8f9fb);
}
.family-hero .hero-heading { padding-top: 108px; }
.family-hero .hero-icon { display:block; width:112px; height:112px; margin:0 auto; filter:drop-shadow(0 14px 20px #5079b720); }
.family-hero .hero-wordmark { width:max-content; margin:14px auto 0; font-size:30px; line-height:1.1833; font-weight:650; letter-spacing:-1.5px; }
.family-hero .hero-wordmark>span { font-size:13px; font-weight:400; color:#7a8797; margin-left:5px; letter-spacing:1px; vertical-align:middle; }
.family-hero h1 { width:max-content; max-width:100%; font-size:clamp(40px,4.5vw,64px); font-weight:600; line-height:1.25; letter-spacing:-2.6px; margin:26px auto 0; text-wrap:balance; }
.family-hero h1>.title-second { color:inherit; }
.family-hero .mobile-break { display:none; }
.family-hero .hero-positioning { max-width:650px; margin:18px auto 0; padding:0 16px; font-size:14px; line-height:1.8; letter-spacing:.1px; color:#62748c; }
.family-hero .flow-hero-after { padding:30px 12px 64px; }
.family-hero .flow-hero-after>p:first-child { margin:0; font-size:16px; line-height:1.9; color:#6b7785; }
.family-hero .flow-hero-actions { margin:27px 0 18px; gap:27px; }
.family-hero .flow-hero-actions .button { min-height:52px; padding:0 26px; font-size:14px; }
.family-hero .flow-compat { font-size:10px; margin:0; }
@media(min-width:1600px) { .family-hero .hero-heading{padding-top:125px} }
@media(min-width:721px) and (max-width:1000px) {
  .family-hero {padding-inline:20px}
}
@media(max-width:720px) {
  .family-hero {padding:0 14px;border-radius:28px}
  .family-hero .hero-heading {padding-top:116px}
  .family-hero .hero-icon {width:112px;height:112px}
  .family-hero .hero-wordmark {font-size:28px;margin-top:12px;line-height:1.2}
  .family-hero .hero-wordmark>span{font-size:12px}
  .family-hero h1 {font-size:37px;line-height:1.38;letter-spacing:-1.8px;margin-top:39px}
  .family-hero .mobile-break {display:block}
  .family-hero .hero-positioning {font-size:12px;line-height:1.8;margin-top:16px;max-width:370px;padding:0 8px}
  .family-hero .hero-positioning>span {display:block}
  .family-hero .flow-hero-after {padding:27px 6px 42px}
  .family-hero .flow-hero-after>p:first-child {font-size:13px}
  .family-hero .flow-hero-actions {gap:20px;flex-wrap:wrap;margin:22px 0 17px}
  .family-hero .flow-hero-actions .button{min-height:48px;padding:0 21px;font-size:13px}
  .family-hero .flow-compat{font-size:8px;gap:8px;flex-wrap:wrap}
}
@media(max-width:380px) { .family-hero h1 {font-size:34px} }