/* ==========================================================
   HORSEY — responsive hardening layer
   Loaded last so it refines (never replaces) the original design.
   Breakpoints: 1100 / 900 / 820 / 700 / 600 / 380
   ========================================================== */

/* --- Global safety: no sideways scroll, fluid media --- */
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}
.hero .art img,.ws__fig img,.ind__img,.logo img{height:revert-layer}
.hero .art img{height:100%}
.ws__fig img{height:100%}
h1,h2,h3,p,li,a,span{overflow-wrap:break-word}
.w,.container{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
nav{padding-top:0}

/* Touch targets */
@media (pointer:coarse){
  .btn,.mb,.links a,.cta,button,summary{min-height:44px}
  .links a{display:flex;align-items:center}
}

/* --- Fluid type --- */
h2{font-size:clamp(28px,4.6vw,48px);line-height:1.1}
.lead{font-size:clamp(16px,1.6vw,19px)}

/* --- Large laptop / small desktop --- */
@media (max-width:1100px){
  .w{padding:0 24px}
  .links{gap:20px}
  nav .w{height:76px}
  #pricing{margin-top:140px}
}

/* --- Tablet --- */
@media (max-width:900px){
  #pricing{margin-top:100px;margin-bottom:70px!important}
  .hero{padding-bottom:30px}
  .hero .art{height:clamp(240px,48vw,380px)}
  .hero .hero-title{font-size:clamp(36px,8vw,56px)}
  .stats{margin-top:32px}
  .stats div{padding:20px 14px}
  .grid{gap:16px;margin-top:32px}
  footer{padding-top:44px}
  footer .w,footer .fg{flex-wrap:wrap;gap:24px}
}
/* ===== FOOTER RESPONSIVE ===== */
@media (max-width:900px){
  .fg{
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
  }
  .fg > div:first-child{
    grid-column:1 / -1;   /* logo poori width me upar */
  }
}

@media (max-width:600px){
  .fg{
    grid-template-columns:1fr 1fr;
    gap:28px 16px;
  }
  .fg a.logo{font-size:22px}
  .fg a.logo img{width:44px;height:44px}

  /* Social column: poori width, left aligned, 2 columns me */
  .fg .soc{
    grid-column:1 / -1;
    justify-self:stretch;
  }
  .fg .soc a{
    width:auto;
  }
  .bot{justify-content:center;text-align:center}
}

@media (max-width:380px){
  .fg{grid-template-columns:1fr}
}

/* --- Phones & mobile nav --- */
@media (max-width:820px){
  nav .w{height:68px}
  .logo{font-size:20px;gap:10px}
  .logo img{width:44px;height:44px}
  .links{top:68px;max-height:calc(100svh - 68px);overflow-y:auto;box-shadow:0 20px 40px #0008;z-index:60}
  .links a{padding:10px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .links a:last-child{border-bottom:0}
  #pricing .g3{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .faq{margin-top:28px}
  .faq summary{padding-right:8px}
}

@media (max-width:600px){
  .w,.container{padding-left:18px;padding-right:18px}
  h1{letter-spacing:-1px}
  h2{letter-spacing:-.02em}
  /* (hero-copy padding + .art height now handled in the MOBILE HERO block at the bottom) */
  .hero .lead{font-size:16px;max-width:none}
  .tag{font-size:12px;padding:5px 12px;margin-bottom:16px}
  /* Stack hero buttons full width */
  .hero-copy .btn,.hero-copy .cta{justify-content:center}
  .stats b{font-size:26px}
  .stats span{font-size:12px}
  .btn{padding:12px 20px;font-size:15px}
  .card{padding-left:20px;padding-right:20px}
  .price .p{font-size:36px}
  /* Capability + CTA sections */
  .ind__title{font-size:clamp(30px,9vw,44px)}
  .ind__cta .cta,.sorb__cta .cta{--cta-w:100%!important;width:100%}
  .sorb__cta a,.ind__cta a{max-width:100%}
  footer{font-size:13px}
}

@media (max-width:380px){
  .logo{font-size:18px}
  .logo img{width:38px;height:38px}
  .stats{grid-template-columns:1fr 1fr}
  .stats div{padding:16px 8px}
  .btn{padding:11px 16px}
}

/* --- Short landscape phones: don't force tall viewport sections --- */
@media (max-height:520px) and (orientation:landscape){
  .hero .g2{min-height:0}
  #product.ws,.ws{--card:clamp(420px,100svh,640px)}
  .links{max-height:calc(100svh - 68px)}
}

/* --- Very large screens: keep content centred, readable --- */
@media (min-width:1700px){
  .w{max-width:1400px}
  body{font-size:17px}
}

/* --- Respect reduced motion & prevent iOS input zoom --- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
input,select,textarea{font-size:16px}

/* ==========================================================
   MOBILE = NO SCROLL ANIMATIONS  (animations only on PC, >=810px)
   ========================================================== */
@media (max-width:809px){

  /* 1) AI-team orbit -> plain static 2-column card grid */
  .sorb,.sorb[data-sorb-mob]{height:auto!important;padding:80px 0 90px!important}
  .sorb .sorb__pin,.sorb[data-sorb-mob] .sorb__pin{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;display:block!important;overflow:visible!important;transform:none!important}
  .sorb .sorb__track,.sorb[data-sorb-mob] .sorb__track{display:none!important}
  .sorb .sorb__center,.sorb[data-sorb-mob] .sorb__center{position:static!important;width:100%!important;max-width:560px;margin:0 auto!important;padding:0 18px!important;align-items:center!important;text-align:center!important;gap:18px}
  .sorb .sorb__title,.sorb[data-sorb-mob] .sorb__title{max-width:100%!important;font-size:clamp(30px,8.5vw,42px)!important}
  .sorb .sorb__cta,.sorb[data-sorb-mob] .sorb__cta{width:min(100%,320px)!important}
  .sorb .sorb__fallback,.sorb[data-sorb-mob] .sorb__fallback{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;margin:36px auto 0!important;padding:0 18px!important;list-style:none;max-width:560px}
  .sorb .sorb__fallback .sfb{min-width:0}

  /* 2) Stacked "receipts" cards -> normal cards one under another */
  #product .ws__list,.ws__list{display:flex!important;flex-direction:column;gap:14px;padding:0 14px}
  #product .ws__item,.ws__item{position:relative!important;top:auto!important;height:auto!important;z-index:auto!important;
    border-radius:18px;overflow:hidden;background:var(--bg,#17151a)}
  #product .ws__hold,.ws__hold{display:none!important}
  #product .ws__card,.ws__card{height:auto!important;border-top:0}
  #product .ws__grid,.ws__grid{height:auto!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    row-gap:12px!important;column-gap:10px!important;padding:22px 16px 24px!important}
  #product .ws__title,#product .ws__title5,#product .ws__num,.ws__title,.ws__title5,.ws__num{
    transform:none!important;translate:none!important;scale:none!important;position:static!important;margin:0!important}
  #product .ws__title,#product .ws__title5{font-size:clamp(22px,6.4vw,28px)!important}
  #product .ws__right,.ws__right{opacity:1!important;grid-column:1/-1!important;max-width:100%!important;gap:16px!important}
  #product .ws__fig,.ws__fig{aspect-ratio:32/21!important;max-height:none!important;min-height:0!important;flex:none!important}
  #product .ws__fig img,.ws__fig img{translate:none!important;transform:none!important;will-change:auto!important}

  /* 3) Remove all other motion on phones */
  .rv,[data-reveal],[data-split] *{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .hero::before{animation:none!important}
  #dg{display:none!important}
  .card::before{display:none}
  html{scroll-behavior:auto}
}
@media (max-width:809px){
  .sorb .employee--static .employee__salary span{font-size:11px!important;line-height:1.3}
}

/* Footer store buttons: wrap instead of overflowing on phones */
.store-btns,.fg .store-btns{flex-wrap:wrap}
.store-btn,.fg a.store-btn{box-sizing:border-box;min-width:0;max-width:100%;}
@media (max-width:600px){
  .fg .store-btns{flex-direction:column;align-items:stretch}
  .fg a.store-btn{width:100%;flex:none;justify-content:flex-start}
}

/* ==========================================================
   MOBILE HERO  (phones <= 700px)
   Image: full width, natural size (same as the original mobile view).
   Title: sits on the empty LEFT side of the image, beside the horse.
   Tag, paragraph, buttons, note, store buttons, stats: unchanged,
   in their original place below the image.
   Keep this block LAST so it overrides the rules above.
   ========================================================== */
@media (max-width:700px){

  .hero{position:relative}

  /* Image: original full-width size, in normal flow at the top */
  .hero .art{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    width:100%;
    height:auto;
    margin:0;
    display:block;
    overflow:hidden;
    z-index:1;
  }
  .hero .art img{
    display:block;
    width:100%;
    height:auto;
    object-fit:initial;
    object-position:initial;
  }

  /* Text column: normal flow, tag/paragraph/buttons stay where they were */
  .hero-copy{
    display:block;
    padding:18px 0 6px;
  }

  /* Title: lifted out of the flow and placed over the left of the image,
     vertically centred on the image (image height ~ 58vw) */
  .hero-copy .hero-title{
    position:absolute;
    left:18px;
    top: -220px;
    width:46%;
    max-width:46%;
    margin:0;
    padding:0;
    font-size:clamp(26px,7.4vw,36px);
    line-height:1.08;
    letter-spacing:-.03em;
    z-index:3;
  }

  .hero-copy .tag{align-self:auto}
  .hero-copy .lead{max-width:100%}
}

@media (max-width:380px){
  .hero-copy .hero-title{font-size:24px;width:48%;max-width:48%}
}
/* Desktop only: features section table ke neeche se hi start ho */
@media (min-width: 810px) {
  #how {
    position: relative;
    z-index: 2;          /* table upar rahe, overlap ho to bhi dikhe */
    padding-bottom: 40px; /* table ke neeche ka extra gap kam */
  }

  #features.sorb {
    position: relative;
    z-index: 1;
    margin-top: -40vh;   /* <-- yahi gap control karta hai */
  }
}