/* Bynzo v9.7 · auth responsive polish
   Fixes owner login/register proportions on small phones, tablets and laptop/short-height
   browsers while leaving wide desktop composition unchanged. */

.auth-owner-login,
.auth-owner-register{
  max-width:100%;
  overflow-x:clip;
}
.auth-owner-login .auth-v2-shell,
.auth-owner-register .auth-v2-shell{
  width:100%;
  max-width:100%;
}

/* Laptop / compact desktop: give the form more room and keep controls readable.
   Wide desktop (>1500px) intentionally keeps the approved v9.4/v9.5 composition. */
@media (min-width:901px) and (max-width:1500px){
  .auth-owner-login .auth-v2-shell,
  .auth-owner-register .auth-v2-shell{
    grid-template-columns:minmax(450px,42%) minmax(0,58%);
  }
  .auth-owner-login .auth-v2-brand,
  .auth-owner-register .auth-v2-brand{
    padding-left:clamp(30px,3.2vw,48px);
    padding-right:clamp(24px,2.7vw,42px);
  }
  .auth-owner-login .auth-v2-panel,
  .auth-owner-register .auth-v2-panel{
    padding-left:clamp(28px,4vw,60px);
    padding-right:clamp(28px,4vw,60px);
  }
  .auth-owner-login .auth-login-card{width:min(570px,100%)}
  .auth-owner-register .auth-register-card{width:min(660px,100%)}
}

@media (min-width:901px) and (max-width:1220px){
  .auth-owner-login .auth-v2-shell,
  .auth-owner-register .auth-v2-shell{
    grid-template-columns:minmax(400px,40%) minmax(0,60%);
  }
  .auth-owner-login .auth-brand-copy,
  .auth-owner-register .auth-brand-copy{max-width:500px}
  .auth-owner-login .auth-brand-copy h1{font-size:clamp(44px,4.8vw,58px)}
  .auth-owner-register .auth-brand-copy h1{font-size:clamp(42px,4.6vw,56px)}
}

/* Common laptop heights: do not miniaturise the form. Let the panel scroll when the
   browser chrome leaves less vertical space. */
@media (min-width:901px) and (max-height:860px){
  .auth-owner-login .auth-v2-panel,
  .auth-owner-register .auth-v2-panel{
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  .auth-owner-login .auth-login-card{
    width:min(570px,100%);
    padding:28px 34px 25px;
  }
  .auth-owner-login .auth-form-brand{min-height:40px;margin-bottom:5px}
  .auth-owner-login .auth-form-brand img{width:30px;height:30px}
  .auth-owner-login .auth-form-brand:after{font-size:21px}
  .auth-owner-login .auth-form-head{margin-bottom:15px}
  .auth-owner-login .auth-form-head h2{font-size:32px}
  .auth-owner-login .auth-form-head p{font-size:12px}
  .auth-owner-login .auth-login-card label{font-size:11px;margin-bottom:11px;gap:6px}
  .auth-owner-login .auth-v2-card input{height:46px;font-size:13px}
  .auth-owner-login .auth-submit{min-height:48px;font-size:14px}

  .auth-owner-register .auth-register-card{
    width:min(650px,100%);
    padding:20px 28px 18px;
  }
  .auth-owner-register .auth-form-brand{min-height:34px;margin-bottom:3px}
  .auth-owner-register .auth-form-brand img{width:27px;height:27px}
  .auth-owner-register .auth-form-brand:after{font-size:20px}
  .auth-owner-register .auth-form-head{margin-bottom:9px}
  .auth-owner-register .auth-form-head h2{font-size:28px}
  .auth-owner-register .auth-form-head p{font-size:10px;margin-top:3px}
  .auth-owner-register .register-grid{gap:6px 10px}
  .auth-owner-register .auth-register-card label{font-size:9px;gap:3px}
  .auth-owner-register .auth-register-card input,
  .auth-owner-register .auth-register-card select{height:41px;font-size:11.5px;padding-left:39px}
  .auth-owner-register .field-icon{left:12px;width:16px;height:16px}
  .auth-owner-register .field-icon svg,
  .auth-owner-register .password-toggle svg{width:16px;height:16px}
  .auth-owner-register .auth-submit{min-height:44px;margin-top:7px;font-size:12.5px}
}

@media (min-width:901px) and (max-height:700px){
  .auth-owner-login .auth-brand-copy,
  .auth-owner-register .auth-brand-copy{margin-top:20px}
  .auth-owner-login .auth-motion-stage,
  .auth-owner-register .register-motion-stage{opacity:.45}

  .auth-owner-login .auth-login-card{padding:18px 30px 17px}
  .auth-owner-login .auth-form-head{margin-bottom:9px}
  .auth-owner-login .auth-login-card label{margin-bottom:8px}
  .auth-owner-login .auth-v2-card input{height:42px}
  .auth-owner-login .auth-submit{min-height:44px;margin-top:7px}

  .auth-owner-register .auth-register-card{padding:12px 24px 11px}
  .auth-owner-register .auth-form-head{margin-bottom:5px}
  .auth-owner-register .register-grid{gap:4px 8px}
  .auth-owner-register .auth-register-card label{font-size:8.5px;gap:2px}
  .auth-owner-register .auth-register-card input,
  .auth-owner-register .auth-register-card select{height:37px;font-size:10.5px}
  .auth-owner-register .auth-submit{min-height:39px;margin-top:4px}
}

/* Tablet: shorten the story block so the form is visible sooner. */
@media (min-width:641px) and (max-width:900px){
  .auth-owner-login .auth-v2-brand{
    min-height:470px;
    padding:24px 28px 46px;
  }
  .auth-owner-register .auth-v2-brand{
    min-height:500px;
    padding:24px 28px 48px;
  }
  .auth-owner-login .auth-brand-copy,
  .auth-owner-register .auth-brand-copy{margin-top:38px}
  .auth-owner-login .auth-brand-copy h1{font-size:clamp(44px,7.2vw,62px);margin:17px 0 13px}
  .auth-owner-register .auth-brand-copy h1{font-size:clamp(42px,7vw,60px);margin:17px 0 13px}
  .auth-owner-login .auth-brand-copy>p,
  .auth-owner-register .auth-brand-copy>p{font-size:15px;line-height:1.5}
  .auth-owner-login .auth-benefits,
  .auth-owner-register .auth-benefits{margin-top:20px}
  .auth-owner-login .auth-v2-panel,
  .auth-owner-register .auth-v2-panel{
    margin-top:-24px;
    padding-top:48px;
  }
}

/* Phone: compact hero + immediate form entry. This is the key fix for the screenshots
   where the story consumed most of the first viewport. */
@media (max-width:640px){
  .auth-owner-login .auth-v2-shell,
  .auth-owner-register .auth-v2-shell{
    min-height:100dvh;
    overflow:visible;
  }
  .auth-owner-login .auth-v2-brand,
  .auth-owner-register .auth-v2-brand{
    min-height:0;
    height:auto;
    padding:20px 18px 32px;
    overflow:hidden;
  }
  .auth-owner-login .auth-logo,
  .auth-owner-register .auth-logo{gap:10px}
  .auth-owner-login .auth-logo-mark,
  .auth-owner-register .auth-logo-mark{width:34px;height:34px;border-radius:9px}
  .auth-owner-login .auth-logo-name,
  .auth-owner-register .auth-logo-name{font-size:23px}

  .auth-owner-login .auth-brand-copy,
  .auth-owner-register .auth-brand-copy{
    margin-top:30px;
    max-width:100%;
  }
  .auth-owner-login .auth-kicker,
  .auth-owner-register .auth-kicker{
    font-size:8.5px;
    letter-spacing:.12em;
  }
  .auth-owner-login .auth-kicker:before,
  .auth-owner-register .auth-kicker:before{width:17px}

  .auth-owner-login .auth-brand-copy h1{
    font-size:clamp(36px,10.4vw,44px);
    line-height:.96;
    letter-spacing:-.052em;
    margin:14px 0 12px;
  }
  .auth-owner-register .auth-brand-copy h1{
    font-size:clamp(35px,10vw,42px);
    line-height:.95;
    letter-spacing:-.052em;
    margin:14px 0 12px;
  }
  .auth-owner-login .auth-brand-copy>p,
  .auth-owner-register .auth-brand-copy>p{
    max-width:100%;
    font-size:13px;
    line-height:1.43;
  }
  .auth-owner-login .auth-brand-copy>p strong{margin-bottom:2px}

  .auth-owner-login .auth-benefits,
  .auth-owner-register .auth-benefits{
    margin-top:17px;
    gap:6px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .auth-owner-login .auth-benefits article,
  .auth-owner-register .auth-benefits article{
    gap:6px;
    align-content:start;
  }
  .auth-owner-login .benefit-icon,
  .auth-owner-register .benefit-icon{
    width:38px;
    height:38px;
    border-radius:11px;
  }
  .auth-owner-login .benefit-icon svg,
  .auth-owner-register .benefit-icon svg{width:19px;height:19px}
  .auth-owner-login .auth-benefits strong,
  .auth-owner-register .auth-benefits strong{
    font-size:9px;
    line-height:1.2;
  }

  .auth-owner-login .auth-login-planet,
  .auth-owner-register .register-planet{
    width:190px;
    right:-92px;
    top:48px;
    opacity:.2;
  }
  .auth-owner-login .auth-motion-stage,
  .auth-owner-register .register-motion-stage,
  .auth-owner-register .register-growth-note,
  .auth-owner-register .register-brand-trust{display:none}

  .auth-owner-login .auth-v2-panel,
  .auth-owner-register .auth-v2-panel{
    min-height:0;
    margin-top:-12px;
    border-radius:26px 26px 0 0;
    padding:28px 10px max(28px,env(safe-area-inset-bottom));
    overflow:hidden;
  }
  /* Decorative micro-copy is useful on tablet, but costs too much vertical space on phones. */
  .auth-owner-login .auth-panel-note-top,
  .auth-owner-login .auth-panel-note-bottom,
  .auth-owner-register .register-panel-note{display:none}

  .auth-owner-login .auth-login-card,
  .auth-owner-register .auth-register-card{
    width:100%;
    border-radius:22px;
  }
  .auth-owner-login .auth-login-card{padding:22px 16px 21px}
  .auth-owner-register .auth-register-card{padding:22px 15px 21px}

  .auth-owner-login .auth-form-brand,
  .auth-owner-register .auth-form-brand{min-height:36px;margin-bottom:4px;gap:8px}
  .auth-owner-login .auth-form-brand img,
  .auth-owner-register .auth-form-brand img{width:28px;height:28px}
  .auth-owner-login .auth-form-brand:after,
  .auth-owner-register .auth-form-brand:after{font-size:20px}

  .auth-owner-login .auth-form-head,
  .auth-owner-register .auth-form-head{margin-bottom:15px}
  .auth-owner-login .auth-form-head .auth-form-kicker{margin-bottom:8px}
  .auth-owner-login .auth-form-head h2,
  .auth-owner-register .auth-form-head h2{font-size:28px;line-height:1.05}
  .auth-owner-login .auth-form-head p,
  .auth-owner-register .auth-form-head p{font-size:11px;margin-top:4px}

  .auth-owner-login .auth-login-card label,
  .auth-owner-register .auth-register-card label{font-size:10.5px;gap:5px}
  .auth-owner-login .auth-login-card label{margin-bottom:12px}
  .auth-owner-register .register-grid{gap:9px}
  .auth-owner-login .auth-v2-card input,
  .auth-owner-register .auth-register-card input,
  .auth-owner-register .auth-register-card select{
    height:48px;
    font-size:16px;
    border-radius:11px;
  }
  .auth-owner-login .auth-v2-card input{padding-left:43px}
  .auth-owner-register .auth-register-card input,
  .auth-owner-register .auth-register-card select{padding-left:42px}
  .auth-owner-login .field-icon,
  .auth-owner-register .field-icon{left:13px;width:18px;height:18px}
  .auth-owner-login .field-icon svg,
  .auth-owner-login .password-toggle svg,
  .auth-owner-register .field-icon svg,
  .auth-owner-register .password-toggle svg{width:18px;height:18px}
  .auth-owner-login .auth-submit,
  .auth-owner-register .auth-submit{min-height:49px;font-size:13.5px}
}

/* Narrow Android / iPhone widths. */
@media (max-width:420px){
  .auth-owner-login .auth-v2-brand,
  .auth-owner-register .auth-v2-brand{padding-left:16px;padding-right:16px;padding-bottom:29px}
  .auth-owner-login .auth-brand-copy,
  .auth-owner-register .auth-brand-copy{margin-top:27px}
  .auth-owner-login .auth-brand-copy h1{font-size:37px}
  .auth-owner-register .auth-brand-copy h1{font-size:35px}
  .auth-owner-login .auth-brand-copy>p,
  .auth-owner-register .auth-brand-copy>p{font-size:12.5px}
  .auth-owner-login .auth-benefits,
  .auth-owner-register .auth-benefits{margin-top:15px}
  .auth-owner-login .benefit-icon,
  .auth-owner-register .benefit-icon{width:36px;height:36px}
  .auth-owner-login .auth-benefits strong,
  .auth-owner-register .auth-benefits strong{font-size:8.5px}
  .auth-owner-login .auth-v2-panel,
  .auth-owner-register .auth-v2-panel{padding-left:8px;padding-right:8px;padding-top:24px}
  .auth-owner-login .auth-login-card,
  .auth-owner-register .auth-register-card{padding-left:13px;padding-right:13px}
}

@media (max-width:360px){
  .auth-owner-login .auth-logo-mark,
  .auth-owner-register .auth-logo-mark{width:31px;height:31px}
  .auth-owner-login .auth-logo-name,
  .auth-owner-register .auth-logo-name{font-size:21px}
  .auth-owner-login .auth-brand-copy h1{font-size:34px}
  .auth-owner-register .auth-brand-copy h1{font-size:32px}
  .auth-owner-login .auth-kicker,
  .auth-owner-register .auth-kicker{font-size:7.8px}
  .auth-owner-login .auth-benefits strong,
  .auth-owner-register .auth-benefits strong{font-size:8px}
}