/* ==========================================================
   HORSEY — responsive layer for inner pages
   (about, contact, privacy-policy, terms-of-use)
   Loaded last. Edit this file to tweak inner-page responsiveness.
   ========================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;min-width:320px;-webkit-tap-highlight-color:transparent}
img,video,svg,canvas,picture,iframe{max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,li,a,span,td,th{overflow-wrap:anywhere}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
.w{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}

/* Footer store buttons: wrap instead of overflowing */
.store-btns,.fg .store-btns{flex-wrap:wrap}
.store-btn,.fg a.store-btn{box-sizing:border-box;min-width:0;max-width:100%;flex:1 1 170px}
.title-accent{white-space:normal!important}
*,*::before,*::after{box-sizing:border-box}

@media (pointer:coarse){
  .btn,button,summary,input[type=submit]{min-height:44px}
}
input,select,textarea{font-size:16px;max-width:100%}

/* Tablet */
@media (max-width:800px){
  .fg{grid-template-columns:1fr 1fr;gap:32px 24px}
  .fg>div:first-child{grid-column:1/-1}
}

/* Phones */
@media (max-width:600px){
  nav .w{padding-left:16px;padding-right:16px}
  .logo{font-size:19px;gap:8px}
  .logo img{width:38px;height:38px}
  nav .btn{padding:10px 16px;font-size:14px;white-space:nowrap}
  .fg{gap:28px 16px}
  .fg .store-btns{flex-direction:column;align-items:stretch}
  .fg a.store-btn{width:100%;flex:none;justify-content:flex-start;height:54px}
  .bot{justify-content:center;text-align:center;flex-wrap:wrap;gap:8px}
  .pp-title{font-size:clamp(30px,9vw,44px);line-height:1.1}
}
@media (max-width:360px){
  .fg{grid-template-columns:1fr}
  .logo{font-size:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}