/* Same hierarchy for personal and business, with mobile reflow. */
.hero { gap:32px; }
.hero h1 { max-width:19ch; font-weight:600; letter-spacing:-.04em; }
.hero .subtitle { max-width:52ch; }
.hero-card,.feature-card,.showcase-card { box-shadow:none; }
.hero-actions .btn { min-height:48px; padding:14px 22px; white-space:normal; line-height:1.4; }
.hero-content,.hero-visual,.feature-card,.feature-showcase,.showcase-content,.showcase-visual { min-width:0; }
@media(max-width:768px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:32px; }
  .hero h1 { font-size:clamp(28px,8vw,38px); line-height:1.15; max-width:100%; }
  .hero-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:24px; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .features-grid,.feature-showcase { grid-template-columns:minmax(0,1fr); }
  .feature-showcase { gap:24px; padding-block:28px; }
  .hero-visual { width:100%; max-width:100%; transform:none; }
  .hero-card { padding:20px; }
  .section-title { overflow-wrap:anywhere; font-size:28px!important; }
  .showcase-content,.showcase-visual,.hero-content { max-width:100%; }
  .hero-stats { flex-wrap:wrap; gap:20px; }
}