/* ==========================================================================
   Storage Bank — responsive layer
   Breakpoints: 1399 · 1199 · 991 · 767 · 575 · 400
   ========================================================================== */

/* ------------------------------- ≤ 1399px -------------------------------- */
@media (max-width:1399.98px){
  .sb-scene-left{width:210px;left:-30px}
  .sb-scene-right{width:220px;right:-34px}
  .sb-fan-card{width:158px;height:180px;margin-inline:-22px}
}

/* ------------------------------- ≤ 1199px -------------------------------- */
@media (max-width:1199.98px){
  :root{--sb-pad:86px}

  /* header collapses to a panel */
  .sb-nav{padding:9px 10px 9px 16px}
  .sb-burger{display:block}
  .sb-menu{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:#fff;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);
    box-shadow:var(--sb-shadow-md);padding:12px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:all .28s var(--sb-ease);
    max-height:calc(100vh - 130px);overflow-y:auto;
  }
  .sb-menu.is-open{opacity:1;visibility:visible;transform:none}
  .sb-menu-link{width:100%;justify-content:space-between;padding:13px 16px;font-size:15px;border-radius:12px}
  .sb-menu-link.is-current{background:var(--sb-blue-50)}
  .sb-drop{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;
    border:0;box-shadow:none;padding:0 0 6px 12px;display:none;
  }
  .sb-has-drop.is-open .sb-drop{display:block;transform:none}
  .sb-nav-actions .sb-link-btn,.sb-lang{display:none}

  .sb-fan-card{width:140px;height:166px;margin-inline:-20px;padding:15px 13px}
  .sb-fan-label{font-size:14px}
  .sb-fan-arc{top:50px;height:54px}

  .sb-why-card{padding:48px 36px 34px}
  .sb-why-server{width:96px;margin-left:8px}
  .sb-why-grid{padding-left:0;gap:30px 26px}
  .sb-scene-left,.sb-scene-right{opacity:.75}
}

/* -------------------------------- ≤ 991px -------------------------------- */
@media (max-width:991.98px){
  :root{--sb-pad:72px}

  .sb-hero{padding-top:126px}
  .sb-hero-title{font-size:clamp(32px,6.2vw,46px)}

  /* fan becomes a swipeable rail */
  .sb-fan{margin-top:44px;width:100vw;margin-left:calc(50% - 50vw);overflow:visible}
  .sb-fan-track{
    justify-content:flex-start;gap:12px;
    padding:6px 20px 22px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .sb-fan-track::-webkit-scrollbar{display:none}
  .sb-fan-card{
    transform:none;margin-inline:0;scroll-snap-align:center;
    width:146px;height:170px;
  }
  .sb-fan-card:hover{transform:translateY(-6px)}

  .sb-rating{gap:9px}
  .sb-rating-meta{width:100%;text-align:center}

  .sb-estimator{max-width:560px;padding:32px 26px 28px}
  .sb-scene-left,.sb-scene-right{display:none}
  .sb-estimator-wrap::before{inset:28% 0 0}

  /* features / how-it-works stack */
  .sb-features-copy{padding-right:0;text-align:center}
  .sb-features-copy .sb-lead{margin-left:auto;margin-right:auto;max-width:560px}
  .sb-feat-list{margin-top:28px;text-align:left}
  .sb-feat-item{background:#fff;border-color:var(--sb-line)}
  .sb-feat-text span{max-height:none;opacity:1;margin-top:5px}

  .sb-stage{min-height:0;margin-top:40px}
  .sb-stage-glow{inset:6% 0}
  .sb-panel{position:relative;inset:auto;display:none;opacity:1;visibility:visible;transform:none}
  .sb-panel.is-active{display:block}

  .sb-how-card{padding:44px 10px 10px}
  .sb-how-head{margin-bottom:32px}
  .sb-steps{padding:18px 18px 26px}
  .sb-step-text span{max-height:none;opacity:1;margin-top:6px}
  .sb-how-stage{border-left:0;border-top:1px solid var(--sb-line-soft);padding:28px 22px;min-height:0}
  .sb-hpanel{position:relative;inset:auto;display:none;opacity:1;visibility:visible;transform:none}
  .sb-hpanel.is-active{display:block}

  /* why us */
  .sb-why-card{padding:42px 28px 30px}
  .sb-why-server{display:none}
  .sb-why-hero{justify-content:flex-start;margin-top:38px;padding-right:0}
  .sb-why-hero>div{text-align:left}
  .sb-why-grid{margin-top:40px;padding-left:0;border-left:0}
  .sb-why-grid::before,.sb-why-grid::after{display:none}
  .sb-scene-illo{margin:28px auto 0}

  .sb-faq-side{position:static;text-align:center}
  .sb-faq-side .sb-body{margin-inline:auto;max-width:520px}
  .sb-faq-help{align-items:center;text-align:center;max-width:420px;margin-inline:auto;margin-bottom:38px}

  .sb-close{padding-top:78px}
  .sb-footer{margin-top:66px}
  .sb-foot-contact{grid-template-columns:1fr 1fr;gap:8px 16px}
  .sb-foot-contact .sb-contact:last-child{grid-column:1/-1}
  .sb-foot-top{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:26px}
  .sb-foot-tagline{text-align:left;max-width:560px}
}

/* -------------------------------- ≤ 767px -------------------------------- */
@media (max-width:767.98px){
  :root{--sb-pad:60px}

  .sb-header{inset:10px 0 auto}
  .sb-brand-name{font-size:17.5px}

  .sb-hero{padding-top:112px}
  .sb-hero-title{font-size:clamp(29px,7.4vw,40px);letter-spacing:-.025em}
  .sb-hero-cta{margin-top:34px}
  .sb-rating{margin-top:30px;font-size:13px}
  .sb-rating-word{font-size:17px}
  .sb-stars i{width:19px;height:19px}
  .sb-rating-lead,.sb-rating-brand{display:none}

  .sb-estimator{padding:28px 20px 24px;border-radius:var(--sb-r-md)}
  .sb-estimator-title{font-size:20px}
  .sb-estimator-field{
    flex-direction:column;align-items:stretch;gap:12px;
    border-radius:var(--sb-r-md);padding:14px;
  }
  .sb-estimator-btn{width:100%}
  .sb-estimator-readout span{white-space:normal}

  .sb-logos{padding:44px 0 60px}
  .sb-logos-row{gap:14px 26px}
  .sb-logo-mark{font-size:15.5px}
  .sb-logo-mark svg{width:18px;height:18px}

  /* mockups simplify */
  .sb-win-side{display:none}
  .sb-win-body{padding:16px}
  .sb-folder-grid{grid-template-columns:1fr 1fr}
  .sb-folder-grid .sb-folder:last-child{display:none}
  .sb-usage{flex-direction:column;gap:20px;align-items:flex-start}
  .sb-donut{margin-inline:auto}
  .sb-usage-legend{width:100%}
  .sb-res-hit{display:none}
  .sb-upload-meta{min-width:0;flex:1}
  .sb-bar{display:none}
  .sb-dash{grid-template-columns:1fr}
  .sb-signup{max-width:none}

  .sb-why-card{padding:32px 20px 26px;border-radius:var(--sb-r-lg)}
  .sb-why-grid{grid-template-columns:1fr;gap:26px}
  .sb-why-hero .sb-count,.sb-why-hero .sb-count-suffix{font-size:40px}

  .sb-price-card{padding:28px 24px 26px}
  .sb-price-desc{min-height:0}
  .sb-price-num{font-size:40px}
  .sb-price-badge{top:18px;right:20px}

  .sb-acc-btn{padding:18px 18px;font-size:15.5px;gap:14px}
  .sb-acc-panel p{padding:0 18px 20px;font-size:14.5px}

  .sb-close-title{font-size:clamp(28px,7.6vw,38px)}
  .sb-cursor-tag{right:-24px;bottom:-24px;font-size:11px}
  .sb-close-sub{font-size:15px}
  .sb-signup-form{flex-direction:column;gap:10px;border-radius:var(--sb-r-md);padding:12px}
  .sb-signup-form input{width:100%;text-align:center;padding:8px 0}
  .sb-signup-form .sb-btn{width:100%}

  .sb-foot-top{align-items:center;text-align:center;gap:14px;padding-bottom:22px}
  .sb-foot-tagline{text-align:center;font-size:13.5px}
  .sb-brand-foot .sb-brand-name{font-size:21px}
  .sb-brand-foot .sb-brand-mark{width:36px;height:36px}
  .sb-foot-contact{
    grid-template-columns:1fr;gap:4px;
    padding-bottom:24px;margin-bottom:20px;
  }
  .sb-foot-contact .sb-contact:last-child{grid-column:auto}
  .sb-contact{padding:12px 4px;gap:12px;text-align:left}
  .sb-contact-ico{width:38px;height:38px;border-radius:11px}
  .sb-contact-ico svg{width:19px;height:19px}
  .sb-contact-text strong{font-size:15.5px}

  .sb-foot-nav{flex-direction:column;gap:14px;text-align:center}
  .sb-foot-links,.sb-foot-social{justify-content:center;gap:8px 20px}
  .sb-foot-base{justify-content:center;text-align:center;font-size:11px;gap:8px 16px}
  .sb-wordmark{font-size:clamp(52px,16.6vw,110px);opacity:.7}

  .sb-top{right:16px;bottom:16px;width:40px;height:40px}
}

/* -------------------------------- ≤ 575px -------------------------------- */
@media (max-width:575.98px){
  .sb-nav{padding:8px 8px 8px 14px}
  .sb-brand-mark{width:29px;height:29px;border-radius:9px}
  .sb-nav-actions .sb-btn-sm{padding:9px 15px;font-size:13px}

  .sb-eyebrow{font-size:11px;padding:5px 12px}
  .sb-h2{font-size:clamp(25px,7vw,32px)}
  .sb-lead{font-size:15.5px}

  .sb-fan-track{padding-inline:16px}
  .sb-fan-card{width:134px;height:158px}
  .sb-fan-label{font-size:13.5px}

  .sb-chips{gap:7px}
  .sb-chip{font-size:12.5px;padding:7px 12px}

  .sb-folder-grid{grid-template-columns:1fr}
  .sb-folder-grid .sb-folder:nth-child(2){display:none}
  .sb-file-rows em{display:none}
  .sb-filters span:nth-child(n+4){display:none}
  .sb-toggle-rows li{font-size:12.5px}

  .sb-toggle{width:100%;justify-content:center}
  .sb-toggle button{flex:1;justify-content:center;padding:9px 12px;font-size:13px}
  .sb-toggle button em{display:none}
}

/* -------------------------------- ≤ 400px -------------------------------- */
@media (max-width:400px){
  .sb-hero-title{font-size:27px}
  .sb-btn-lg{padding:14px 26px;font-size:15px}
  .sb-estimator-title{font-size:18.5px}
  .sb-price-card{padding:24px 20px 24px}
  .sb-wordmark{letter-spacing:-.05em}
}