/* 13 / 14: let the mobile opening graphic share the space with its typography. */
@media(max-width:768px){
 :is(.variant-13,.variant-14) .intro-overlap>.form-hero{
  height:100svh;min-height:0;max-height:none;top:0;
 }
 :is(.variant-13,.variant-14) .form-hero-layout{bottom:60px}
 :is(.variant-13,.variant-14) .form-hero-bottom{
  bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));
 }
 :is(.variant-13,.variant-14) .geometry-hero{
  width:min(120vw,calc(104svh - 312px));
  left:50%;right:auto;bottom:-10px;
  margin:0;translate:-50% 0;
  pointer-events:none;
 }
}
/* Compact the copy on shorter phones while keeping the link and its underline in view. */
@media(max-width:768px) and (max-height:740px){
 :is(.variant-13,.variant-14) .form-hero-layout{top:80px}
 :is(.variant-13,.variant-14) .form-hero h1{font-size:clamp(48px,14vw,60px);margin:14px 0}
 :is(.variant-13,.variant-14) .form-hero-tag{font-size:16px}
 :is(.variant-13,.variant-14) .form-japanese{margin-top:10px}
}
@media(max-width:768px) and (orientation:landscape) and (max-height:500px){
 :is(.variant-13,.variant-14) .form-hero-layout{top:80px;bottom:64px;display:grid;grid-template-columns:53% 47%;align-items:center}
 :is(.variant-13,.variant-14) .form-hero-copy>.form-label{font-size:8px}
 :is(.variant-13,.variant-14) .form-hero h1{font-size:clamp(36px,6vw,44px);margin:10px 0}
 :is(.variant-13,.variant-14) .form-hero-tag{font-size:13px;line-height:1.35}
 :is(.variant-13,.variant-14) .form-japanese{font-size:9px;margin-top:6px}
 :is(.variant-13,.variant-14) .geometry-hero{width:min(46.5vw,80.5svh);left:auto;right:-6px;bottom:-26px;translate:none}
}