/* EasyPay Thai responsive + AEO presentation layer, 2026-08-21.
   Bounded override: layout, hit targets, wide-screen readability, AEO answer cards. */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
main,header,footer,section,.wrap,.hero-grid,.grid,.steps,.systems,.form-layout{min-width:0}
img,svg,video,canvas,iframe,picture{max-width:100%;height:auto}
button,.btn,a.btn,input[type="submit"],summary,.hamb{min-height:44px;min-width:44px}
.hamb{display:inline-grid!important;place-items:center;padding:4px 10px!important;line-height:1!important}
body.route-home #aeo-answers{display:block}
.aeo-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.aeo-answer-card{min-width:0;padding:22px;border:1px solid #dbe5f2;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(15,31,63,.06)}
.aeo-answer-card h3{margin:0 0 8px;color:#0b1f3f;font:600 clamp(19px,2vw,24px)/1.35 Prompt,'Noto Sans Thai',sans-serif}
.aeo-answer-card p{margin:0;line-height:1.75}
.aeo-disclaimer{margin:20px 0 0;padding:14px 18px;border-radius:14px;background:#f7fafc;color:#53647d;font-size:14px}

/* Prevent the decorative hero image from extending outside the usable viewport. */
@media (max-width:1366px){
  .hero-grid{overflow:clip}
  .hero-visual{right:0!important;max-width:100%!important;overflow:clip!important}
  .hero-photo-shell{right:0!important;width:100%!important;max-width:100%!important}
  .hero-photo-shell picture,.hero-photo-shell img{width:100%!important;max-width:100%!important}
}
@media (min-width:681px) and (max-width:1120px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:20px!important}
  .hero-visual{width:100%!important;margin-inline:0!important}
  .hero-photo-shell{top:0!important;height:100%!important;min-height:420px!important}
}
@media (max-width:680px){
  :root{--header-offset:72px}
  .wrap{width:min(calc(100% - 28px),680px)!important}
  .section{padding-block:52px!important}
  .hero{overflow:clip!important}
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
  .hero-visual{right:0!important;left:auto!important;width:min(46vw,180px)!important;height:230px!important;max-width:46vw!important;overflow:clip!important}
  .hero-photo-shell{inset:0 0 auto auto!important;width:100%!important;height:230px!important;max-width:100%!important}
  .hero-photo-shell picture,.hero-photo-shell img{width:100%!important;height:100%!important;object-fit:cover!important}
  .hero-grid>div:first-child{padding-right:min(24vw,82px)!important}
  .hero h1,.hero-subtitle,.hero .lead{max-width:100%!important}
  .hero .actions,.actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .hero .actions .btn,.actions .btn{width:100%!important;justify-content:center!important}
  .aeo-answer-grid{grid-template-columns:1fr}
  .aeo-answer-card{padding:18px}
}
@media (max-width:360px){
  .wrap{width:calc(100% - 24px)!important}
  .hero-grid>div:first-child{padding-right:0!important}
  .hero-visual{display:none!important}
  h1{overflow-wrap:anywhere}
}
@media (orientation:landscape) and (max-height:430px){
  .topbar{display:none!important}
  .navin{height:58px!important}
  .hero{padding-block:24px!important}
  .hero-grid{min-height:0!important}
  .hero-visual{max-height:260px!important;min-height:0!important}
  .hero-photo-shell{max-height:260px!important;min-height:0!important}
  .section{padding-block:42px!important}
}
/* Use more of a TV/4K canvas while preserving readable line lengths. */
@media (min-width:2200px){
  :root{--wrap:3200px;--header-offset:128px}
  body{font-size:26px}
  .wrap{width:min(var(--wrap),calc(100% - 240px))}
  .topbar{font-size:18px}
  .links a,.nav-actions .btn,.nav-actions a{font-size:22px!important}
  button,.btn,a.btn,input[type="submit"],summary,.hamb{min-height:60px}
  .section{padding-block:112px}
  .navin{height:104px}
  .brand-logo,.brand-logo img{width:150px!important;max-width:150px!important}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:96px}
  .hero h1{font-size:clamp(62px,3.1vw,104px)!important;line-height:1.13!important}
  .hero-subtitle{font-size:clamp(25px,1.1vw,38px)!important}
  .hero .lead{font-size:clamp(20px,.82vw,30px)!important;max-width:42ch!important}
  .hero-visual{width:100%!important;max-width:1100px!important;min-height:760px!important}
  .hero-photo-shell{right:0!important;top:-30px!important;width:100%!important;max-width:1100px!important;height:800px!important}
  .hero-visual .hero-card{max-width:520px!important}
  .section-head{max-width:1300px}
  .section-head h2{font-size:clamp(44px,2vw,72px)!important}
  .grid,.steps,.systems,.aeo-answer-grid{gap:30px}
  .card,.step-card,.aeo-answer-card{padding:34px}
  .article-shell,.article-layout,.hub-shell{max-width:1700px!important}
  article p,article li{font-size:25px;line-height:1.8}
  .card p,.step-card p,.system p,.partner-type-card p,.income-card p,.aeo-answer-card p{font-size:23px!important;line-height:1.75!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}