/* Smartphone optimization for Android and other narrow screens */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
a,button{touch-action:manipulation}
.hero-copy,.world-copy,.section-heading{min-width:0}

@media(max-width:760px){
  .masthead{height:76px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .brand{flex:0 0 auto;width:84px;height:60px}
  .brand img{width:84px;height:84px;transform:translateY(-12px)}
  .brand-image{width:84px;height:60px}
  .brand-image img{width:84px;height:84px;transform:translateY(-12px)}
  nav{gap:14px;font-size:12px;white-space:nowrap}
  nav a{display:inline-flex;align-items:center;min-height:44px}
  .hero{min-height:calc(100svh - 76px);min-height:max(620px,calc(100svh - 76px))}
  .hero-copy{width:100%;padding:96px 22px 104px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .eyebrow{font-size:11px;line-height:1.55;letter-spacing:.18em;margin-bottom:20px}
  h1{font-size:clamp(38px,10.5vw,52px);line-height:1.08;letter-spacing:-.035em}
  h2{font-size:clamp(32px,8.5vw,42px)}
  .intro{font-size:16px;line-height:1.65;margin-top:24px}
  .explore{min-height:48px;margin-top:20px;padding:12px 0;gap:28px}
  .hero-bottom{bottom:max(20px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));font-size:10px;letter-spacing:.1em}
  .section{padding:56px 22px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .world{gap:28px}
  .world-copy{font-size:16px}
  .development-note{font-size:13px;margin-top:25px}
  .section-heading{margin-bottom:28px}
  .concept figcaption{font-size:13px;margin-top:14px}
  .closing{padding-top:18px;padding-bottom:64px}
  .closing p:not(.eyebrow){font-size:16px;line-height:1.65}
  .closing>a{min-height:48px;display:inline-flex;align-items:center}
  footer{padding:14px max(22px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));gap:2px}
  .powered{font-size:14px}
  .powered img{width:82px;height:82px}
  .footer-domain{padding-bottom:8px}
}

@media(max-width:420px){
  .masthead{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .brand{width:76px}
  .brand-image{width:76px}
  .brand img,.brand-image img{width:76px;height:76px;transform:translateY(-8px)}
  nav{gap:9px;font-size:11px}
  .hero-image{object-position:66% center}
  .hero-copy{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  h1{font-size:clamp(36px,11vw,44px)}
  .section{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .hero-bottom{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
}

@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:560px}
  .hero-copy{padding-top:80px}
  .masthead{height:68px}
}

@media(max-width:760px){.masthead{height:auto;min-height:76px;gap:16px;padding-top:8px;padding-bottom:8px}.masthead nav{flex-wrap:wrap;justify-content:flex-end;row-gap:0}.masthead nav a{white-space:nowrap}}
