/* Approved aesthetic pass, October 23. No changes to copy or interaction code. */
#heroline {text-wrap:balance}
#heroline > span, #heroline > span > b, #heroline > span > i {display:inline}
#heroline > span + span::before {content:' '}
.video-hero .hero-grid > div:first-child {max-width:520px}
@media(min-width:761px){
 .video-hero .hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:48px}
 #what:has(.quiet-example) > .container {align-items:start}
 #what:has(.quiet-example) .sec-head {align-self:start;padding-top:0;margin-top:0}
 #what:has(.quiet-example) .sec-head h2 {margin-top:0}
 #how .sec-head {margin-bottom:16px}
 #how .setup-note {margin-bottom:28px}
 #how .scroll-chapter:first-child {justify-content:flex-start;padding-top:40px}
 #how .scroll-stage {margin-top:0}
 .road-hero.container {padding-top:72px;padding-bottom:56px;min-height:0}
 .road-hero h1 {margin-top:24px;margin-bottom:24px}
 .road-hero .sub {margin-bottom:24px}
}
/* Preserve each heading's size and brand face; regularize spacing around it. */
#pricing .sec-head h2, #how .sec-head h2 {margin-top:20px;margin-bottom:20px}
.merge-nav > .btn {display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;line-height:1.25}
@media(max-width:760px){
 #heroline {max-width:100%;text-wrap:balance}
 #pricing .sec-head {margin-bottom:26px}
 #pricing .tier-name {margin-bottom:12px}
 #pricing .tier-price {margin-top:0}
 #pricing .mobile-plan-tabs {margin-bottom:16px}
 #pricing .tier-purpose {margin-top:18px;margin-bottom:20px}
 #how .sec-head {margin-bottom:16px}
 #how .setup-note {margin-bottom:24px}
 .road-hero.container {padding-top:48px;padding-bottom:40px;min-height:0}
 .merge-nav > .btn {min-height:44px;padding:10px 16px}
}
@media(max-width:360px){
 #heroline{font-size:36px;line-height:1.12}
}