/* A consistent reading order and a compact teacher card on phones and tablets. */
.trial-note{font-size:.9rem;color:var(--ink-soft);margin:12px 0 0;line-height:1.6}
@media(max-width:960px){
 .hero{padding-top:28px;padding-bottom:32px}
 .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px}
 .hero-copy,.hero-grid>div:first-child{display:contents}
 .hero .hi{order:0;margin:0}
 .hero h1{order:1;font-size:clamp(2rem,5.4vw,3rem);margin:0;line-height:1.12;text-wrap:balance}
 .hero .role{order:2;max-width:62ch;margin:0;font-size:1.04rem}
 .hero-media{order:3;width:100%;max-width:480px;margin:0;gap:12px;align-self:flex-start}
 .hero .idcard{display:flex;align-items:center;gap:16px;padding:14px;margin:0;transform:none;border-radius:20px}
 .hero .idphoto{width:112px;min-width:112px;max-width:112px;border-radius:12px;flex:0 0 auto}
 .hero .idmeta{display:block;margin:0;min-width:0;padding:0}
 .hero .idname{font-size:1.15rem;line-height:1.3}
 .hero .idrole{font-size:.8rem;line-height:1.5}
 .hero .idstars{text-align:left;margin-top:6px}
 .hero .idstars .sub{font-size:0.8rem;line-height:1.5}
 .hero .idflags,.hero .idphoto .sun,.hero .idphoto .q{display:none}
 .hero .badge-row{justify-content:flex-start}
 .hero .cta-row{order:4;width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:12px;margin:0}
 .hero .cta-row>a{min-height:48px;max-width:100%;white-space:normal}
 .hero .trial-note{order:5;margin:0;max-width:65ch}
 .hero .chips{order:6;margin:0;gap:8px}
}
@media(max-width:640px){
 .hero .cta-row .btn-primary{width:100%}
 .hero .idcard{gap:12px;padding:12px}
 .hero .idphoto{width:96px;min-width:96px;max-width:96px}
 .hero .idname{font-size:1.08rem}
 .hero .idstars .sub{font-size:0.8rem}
 .hero .teacher-summary .badge{box-shadow:none}
}
@media(max-width:360px){
 .hero .idphoto{width:80px;min-width:80px;max-width:80px}
 .hero .idcard{gap:12px}
 .hero .idrole{font-size:0.8rem}
 .hero .idstars .sub{font-size:0.8rem}
}