/* soyes.ai — phone layout. Desktop keeps the 1440 design; below 821px everything reflows to one column. */
.mnav-btn,.mnav{display:none}
@media (min-width: 821px){main{min-width:1440px}}
@media (max-width: 820px){
  html,body{overflow-x:hidden}
  main{width:100%!important;min-width:0!important;height:auto!important;margin:0!important}
  main *{max-width:100%}
  img,video{height:auto}

  /* ---- navigation: logo + menu button, links in a drop-down panel */
  nav[data-nav]{width:100%!important;height:64px!important;padding:0 16px!important;gap:12px!important;position:relative;z-index:30}
  nav[data-nav] > div,nav[data-nav] > a[href^="book"]{display:none!important}
  nav[data-nav] > a:first-child{font-size:24px!important}
  .mnav-btn{display:inline-flex;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid currentColor;background:transparent;color:inherit;align-items:center;justify-content:center;cursor:pointer}
  .mnav{position:absolute;left:0;right:0;top:64px;z-index:40;flex-direction:column;gap:2px;padding:12px 16px 20px;background:#0B0D1A;border-bottom:1px solid rgba(238,240,247,0.15);box-shadow:0 20px 40px rgba(0,0,0,0.4)}
  .mnav.open{display:flex}
  .mnav a{padding:12px 4px;color:#EEF0F7;font-size:17px;font-weight:500;border-bottom:1px solid rgba(238,240,247,0.08)}
  .mnav .mnav-langs{display:flex;gap:8px;padding:14px 0}
  .mnav .mnav-langs a{border:1px solid rgba(238,240,247,0.25);border-radius:8px;padding:8px 12px;font-size:14px}
  .mnav .mnav-cta{margin-top:10px;text-align:center;border-radius:999px;background:#3FD8F2;color:#06121A!important;font-weight:700;border:none}

  /* ---- sections: comfortable gutters, natural heights */
  main > section{padding-left:20px!important;padding-right:20px!important;padding-top:56px!important;padding-bottom:56px!important;height:auto!important;gap:28px!important}
  main > section[style*="border-radius"]{margin-left:16px!important;margin-right:16px!important;margin-bottom:56px!important;padding:32px 20px!important}
  main > section:first-of-type{padding-top:40px!important}

  /* ---- type scale */
  h1{font-size:40px!important;line-height:1.06!important}
  html[lang^="zh"] h1{font-size:34px!important;line-height:1.2!important}
  h2{font-size:30px!important;line-height:1.12!important}
  h3{font-size:24px!important}
  [style*="font-size: 140px"]{font-size:60px!important}
  [style*="font-size: 104px"],[style*="font-size: 96px"],[style*="font-size: 92px"],[style*="font-size: 88px"],[style*="font-size: 84px"],[style*="font-size: 80px"]{font-size:40px!important}
  [style*="font-size: 72px"],[style*="font-size: 64px"],[style*="font-size: 60px"],[style*="font-size: 56px"]{font-size:34px!important}
  [style*="font-size: 52px"],[style*="font-size: 48px"],[style*="font-size: 44px"]{font-size:28px!important}
  [style*="font-size: 40px"],[style*="font-size: 36px"]{font-size:24px!important}
  p,li{font-size:16px}

  /* ---- layout: rows wrap, wide grids collapse */
  main [style*="display: flex"]:not([style*="flex-direction: column"]){flex-wrap:wrap}
  main [style*="justify-content: space-between"][style*="align-items: flex-end"]{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}
  main [style*="gap: 96px"],main [style*="gap: 88px"],main [style*="gap: 80px"],main [style*="gap: 72px"],main [style*="gap: 64px"]{gap:28px!important}
  main [style*="grid-template-columns: repeat(3"],main [style*="grid-template-columns: repeat(5"]{grid-template-columns:1fr!important}
  main [style*="grid-template-columns: repeat(4"],main [style*="grid-template-columns: repeat(6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main [style*="grid-template-columns: repeat(2"]{grid-template-columns:1fr!important}
  main [style*="grid-template-columns: 1fr 64px 1fr"],main [style*="grid-template-columns: 300px 1fr 200px"],main [style*="grid-template-columns: 160px 1fr 1fr"],
  main [style*="grid-template-columns: 200px 140px 1fr"],main [style*="grid-template-columns: 400px minmax"],main [style*="grid-template-columns: 380px 72px"]{grid-template-columns:1fr!important;gap:10px!important}
  main [style*="grid-template-columns: 120px 1fr 200px 1fr 200px"]{grid-template-columns:70px 1fr 1fr!important;gap:10px!important;padding:16px!important}
  main [style*="grid-template-columns: 120px 1fr 200px 1fr 200px"] > :nth-child(3),main [style*="grid-template-columns: 120px 1fr 200px 1fr 200px"] > :nth-child(5){display:none}
  main [style*="grid-template-columns: 180px repeat(15"]{grid-template-columns:78px repeat(15,minmax(0,1fr))!important;font-size:9px!important}
  main [style*="width: 1312px"]{width:100%!important}
  main [style*="grid-template-columns: repeat(4"]:has(> [style*="padding: 28px"]){grid-template-columns:1fr!important}
  main > section > div[style*="width: 640px"][style*="padding: 1"]{padding:8px 0 0!important;width:100%!important}
  main :has(> [style*="grid-template-columns: 56px repeat(5"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
  main [style*="grid-template-columns: 56px repeat(5"]{min-width:560px}
  main [style*="grid-template-columns: 1.5fr 1fr"][style*="height: 480px"]{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:210px;height:auto!important}
  main [style*="width: 440px; height: 900px"]{max-width:none!important;zoom:.76}
  main [style*="grid-template-columns: 120px 1fr 200px 1fr 200px"] [style*="font-size: 26px"]{font-size:17px!important}
  main [style*="width: 50%"]:not([style*="position: absolute"]){width:100%!important;padding:28px 20px!important}
  main [style*="width: 50%"] > [style*="flex-grow: 1"][style*="overflow: hidden"]{min-height:320px}

  /* ---- media: keep natural proportions instead of being squashed to a sliver */
  main :is(img,video):not([style*="position: absolute"]){height:auto!important;aspect-ratio:16/9}
  main img:not([style*="position: absolute"]){aspect-ratio:auto}

  /* ---- full-bleed heroes and banners: copy drops into the flow over the video/photo */
  main > section[style*="overflow: hidden"]:has(> video[style*="position: absolute"], > img[style*="position: absolute"]){display:flex!important;flex-direction:column!important;justify-content:flex-end;gap:24px!important;padding:150px 0 44px!important;min-height:0}
  main > section:first-of-type[style*="overflow: hidden"]:has(> video[style*="position: absolute"]){min-height:640px;padding-top:120px!important;justify-content:flex-end}
  main > section:first-of-type[style*="overflow: hidden"]:has(nav){min-height:760px;padding-top:0!important}
  main > section[style*="overflow: hidden"] > div[style*="position: absolute"]:not([style*="height: 100%"]){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;margin:0 20px!important}
  main > section[style*="overflow: hidden"] > div[style*="position: absolute; left: 0; top: 0"]:not([style*="height: 100%"]){margin:0 0 auto!important;align-self:stretch}
  main > section[style*="overflow: hidden"] > div[style*="position: absolute"] p[style*="width:"]{width:auto!important}

  /* ---- fixed-size illustrations scale down as a whole instead of distorting */
  main [style*="width: 560px; height: 560px"]{max-width:none!important;zoom:.6}
  main [style*="width: 520px; height: 520px"]{max-width:none!important;zoom:.64}
  main [style*="width: 400px; height: 280px"],main [style*="width: 420px; height: 280px"]{max-width:none!important;zoom:.72}
  main [style*="width: 330px; height: 660px"],main [style*="width: 340px; height: 690px"]{max-width:none!important;zoom:.88}
  main [style*="width: 1312px; height: 560px"]{height:300px!important}

  /* ---- app-window mock-ups: drop the sidebar, let the content set the height */
  main [style*="height: 620px"],.pubwin{height:auto!important}
  main [style*="height: 620px"] [style*="width: 220px; flex-shrink: 0"],.pubwin [style*="width: 300px; flex-shrink: 0"]{display:none!important}
  main [style*="height: 620px"] > div,.pubwin > div{flex-wrap:nowrap!important}
  main [style*="height: 104px"]{height:auto!important;min-height:104px}

  /* ---- buttons stay tappable */
  .btn{height:50px!important;padding:0 22px!important;font-size:15px!important}

  /* ---- footer */
  footer{width:100%!important;height:auto!important;padding:40px 20px 28px!important}
  footer > div:first-child{flex-direction:column!important;gap:32px!important}
  footer > div:first-child > div:first-child{width:auto!important}
  footer [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
  footer > div:last-child{flex-direction:column!important;align-items:flex-start!important;gap:12px}
  footer > div:last-child > div{flex-wrap:wrap;gap:14px!important}

  /* ---- page furniture that only makes sense on desktop */
  .tm-line,.pubcur,.tld::before{display:none!important}
}