/* v21: show the face with the headline, before launch information, on phones. */
@media screen and (max-width:720px){
 .hero{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:0;padding:22px var(--gutter) 42px;align-items:start}
 .hero-copy{display:contents}
 .hero-copy>.eyebrow{grid-row:1;font-size:10px;line-height:1.6;margin:0 0 14px;align-self:start}
 .hero h1{grid-row:2;font-size:clamp(28px,8.7vw,52px);line-height:1.45;letter-spacing:-.03em;margin:0}
 .hero-visual{grid-row:3;grid-column:1;justify-self:center;align-self:start;width:82%;max-width:340px;height:clamp(230px,39svh,335px);min-height:0;margin:12px 0 16px;padding:0;transform:rotate(3deg);border-radius:46% 46% 38% 8%;overflow:hidden}
 .hero-visual>img{width:156%;max-width:none;height:auto;left:-28%;top:0;margin:0;transform:rotate(-3deg);object-fit:initial}
 .hero-lead{grid-row:4;margin:0;font-size:15px;line-height:1.9}
 .hero-announcement{grid-row:5;margin-top:22px}
 .hero-line-cta{grid-row:6;margin-top:20px}
 .hero-offer-terms{grid-row:7;margin-top:11px}
 .hero>.motion-rule{top:0;left:var(--gutter);right:var(--gutter)}
}
@media screen and (max-width:360px){.hero-copy>.eyebrow{font-size:9px}.hero-lead{font-size:14px}.hero-visual{width:86%;margin-bottom:14px}}