/* Keep the example business card readable on narrow phones. */
.mock-window h2{font-size:30px;line-height:1.2;letter-spacing:-1px}
.mock-window p{font-size:11px;line-height:1.7;max-width:100%}
@media(max-width:760px){
  .hero-copy h1{font-size:36px;line-height:1.14;letter-spacing:-1.2px}
  .hero-visual{padding:18px 16px 20px}
  .mock-window{padding:0 20px 22px}
  .window-bar{margin:0 -20px 20px;padding:11px 14px}
  .mock-window h2{font-size:26px;line-height:1.22;letter-spacing:-.7px;margin:20px 0 12px}
  .mock-window p{font-size:11px;line-height:1.65;margin:0 0 14px}
  .sample-brand{font-size:15px}
  .sample-cta{margin:2px 0 18px;padding:10px 15px}
  .mock-grid{padding-top:16px;font-size:11px}
  .float-note{position:static;transform:none;margin:14px 0 0;padding:13px 15px;gap:10px}
  .float-note strong{font-size:11px}
  .float-note small{font-size:9px;line-height:1.5}
  .visual-caption{margin-top:14px;font-size:9px}
  .visual-top{margin-bottom:16px;flex-wrap:wrap;gap:8px}
}
@media(max-width:380px){
  .hero-copy h1{font-size:32px;line-height:1.15;letter-spacing:-1px}
  .mock-window h2{font-size:23px}
  .mock-window p{font-size:10px}
  .mock-window{padding-left:16px;padding-right:16px}
  .window-bar{margin-left:-16px;margin-right:-16px}
  .mock-grid small{font-size:7px;line-height:1.5}
}