/* Hill Plots – mobile & tablet layout fixes (loaded after the site CSS) */
html,body{overflow-x:hidden}
@media (max-width: 768px){
  /* spacing */
  #root section.py-24,#root section[class*="py-20"]{padding-top:52px!important;padding-bottom:52px!important}
  #root .mb-16{margin-bottom:28px!important}
  #root [class*="md:mb-20"]{margin-bottom:28px!important}
  #root .mb-8{margin-bottom:18px!important}
  #root [class*="max-w-[1300px]"],#root [class*="max-w-[1400px]"]{padding-left:16px!important;padding-right:16px!important}
  #root h2{font-size:30px!important;line-height:1.2!important}
  /* header */
  #root header{padding-top:4px!important;padding-bottom:4px!important}
  #root header [class*="h-[60px]"]{height:48px!important;width:140px!important}
  /* hero */
  #root main>div.h-screen:first-child,#root [class*="relative h-screen w-full"]{height:auto!important;min-height:100svh;padding:88px 0 64px}
  #root [class*="relative h-screen w-full"] [class*="pointer-events-none"]{display:none!important}
  #root [class*="relative h-screen w-full"] h1{font-size:34px!important;margin-bottom:14px!important}
  #root [class*="relative h-screen w-full"] span[class*="tracking-[6px]"]{letter-spacing:3px!important;margin-bottom:10px!important;font-size:11px!important}
  #root [class*="relative h-screen w-full"] p{font-size:15px!important;line-height:1.55!important;margin-bottom:22px!important}
  #root [class*="relative h-screen w-full"] [class*="flex-col sm:flex-row"]{gap:12px!important;width:100%}
  #root [class*="relative h-screen w-full"] [class*="flex-col sm:flex-row"]>*{width:100%!important;max-width:320px;padding:15px 18px!important;box-sizing:border-box}
  /* about image */
  #root #about img[class*="min-h-[400px]"]{min-height:220px!important;max-height:300px;object-fit:cover}
  /* listing cards */
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"]{gap:18px!important}
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"] .p-7{padding:16px 18px!important}
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"] h3{height:auto!important;margin-bottom:8px!important}
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"] .flex-grow{flex-grow:0!important}
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"] [class*="text-[13px]"]{margin-bottom:12px!important;font-size:14px!important}
  #root [class*="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"] .italic{font-style:normal!important;opacity:.7}
  /* videos */
  #root [class*="md:grid-cols-3 gap-6"]{gap:14px!important}
  /* testimonials */
  #root [class*="p-8 md:p-12"]{padding:22px!important}
  #root [class*="text-lg md:text-xl"]{font-size:16px!important;margin-bottom:18px!important}
  /* floating buttons: smaller, out of the way, hidden under the open menu */
  #root [class*="fixed bottom-10 right-10"]{bottom:14px!important;right:14px!important;transform:scale(.85);transform-origin:bottom right;z-index:990!important}
  #hp-surya-btn{transform:scale(.62);transform-origin:bottom left;left:6px!important;bottom:6px!important;z-index:991!important}
  #hp-surya-tip{display:none!important}
  body{padding-bottom:12px}
  /* watermark overlays: lighter on small screens */
  .hp-wm-bg{display:none!important}
  .hp-wm{background-size:170px auto!important;opacity:.55}
  /* calculator & Surya widgets */
  #hp-calc .hp-card{padding:16px!important;border-radius:16px!important}
  #hp-calc .hp-calc-head h2{font-size:26px!important}
  #hp-calc .hp-mode button{padding:10px 8px!important;font-size:14px!important}
  #hp-calc .hp-f{gap:10px!important}
  #hp-calc .hp-total b{font-size:28px!important}
  .hp-locp td{font-size:13px}
  #hp-faq-surya{margin:18px 0!important}
}
@media (max-width: 380px){
  #root [class*="relative h-screen w-full"] h1{font-size:29px!important}
  #root h2{font-size:26px!important}
}
/* Surya chat: suggestion chips in one swipeable row so the conversation gets the space */
#hp-surya #hp-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;padding:8px 10px!important;flex:0 0 auto!important;max-height:none!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#hp-surya #hp-chips::-webkit-scrollbar{display:none}
#hp-surya .hp-chip{flex:0 0 auto!important;white-space:nowrap!important}
#hp-surya #hp-log{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
#hp-surya table{width:100%;border-collapse:collapse}#hp-surya td{padding:4px 3px;vertical-align:top}#hp-surya td.ic{width:26px}#hp-surya td:last-child{text-align:right;white-space:nowrap}
@media (max-width:768px){
  #hp-surya{top:10px!important;bottom:10px!important;left:8px!important;right:8px!important;width:auto!important;height:auto!important;max-height:none!important}
  #hp-surya .hp-m{font-size:14px!important}
  #hp-surya td{font-size:13px}
}

/* Surya: no suggestion buttons – more room for the conversation */
#hp-surya #hp-chips{display:none!important}

/* ---- v4: Surya floats middle-right, WhatsApp clear of phone browser bars, forms one column on phones ---- */
#hp-surya-btn{left:auto!important;right:8px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;transform-origin:right center!important}
#hp-surya-tip{left:auto!important;right:110px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)}
#hp-surya{left:auto!important;right:116px!important;bottom:auto!important;top:max(16px,calc(50% - 310px))!important}
.hp-f>div{min-width:0}
.hp-f input[type=date],.hp-f input[type=time]{-webkit-appearance:none;appearance:none;min-height:48px;display:block;width:100%}
@media (max-width:768px){
  #hp-surya-btn{transform:translateY(-50%) scale(.66)!important;right:2px!important}
  #root [class*="fixed bottom-10 right-10"]{bottom:86px!important;right:12px!important;transform:scale(.8)!important;transform-origin:bottom right}
  .hp-vf .hp-f,.hp-lf .hp-f{grid-template-columns:1fr!important;gap:12px!important}
  .hp-modal{max-height:calc(100svh - 24px)!important}
  .hp-modal-back{align-items:flex-start!important;padding-top:12px!important}
  body:has(#hp-flash) .hp-modal-back{padding-top:62px!important}
}
/* ---- v5: page always opens at phone width (no zoomed-out view on iPhone) ---- */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body,#root{overflow-x:clip}}
#root{max-width:100%}
#root .fixed.inset-0[class*="z-[999]"]{transform:none!important;clip-path:inset(0 0 0 0);transition:clip-path .45s ease-in-out!important}
#root .fixed.inset-0[class*="z-[999]"].translate-x-full{clip-path:inset(0 0 0 100%);pointer-events:none;visibility:hidden;transition:clip-path .45s ease-in-out,visibility 0s .45s!important}
img,video,iframe{max-width:100%}
/* ---- v5: Surya chat on phones = about 80% of the screen, website visible behind ---- */
@media (max-width:768px){
  #hp-surya{left:auto!important;right:8px!important;top:auto!important;bottom:12px!important;width:86vw!important;height:78svh!important;max-height:78vh!important;border-radius:20px!important;box-shadow:0 20px 60px rgba(0,0,0,.35)!important}
  body:has(#hp-surya.open) #hp-surya-btn{display:none!important}
}