/* Layout + breakpoints for the Whitebird site kit.
   Everything visual comes from the design-system tokens in ../../styles.css. */
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;font-family:var(--wb-font);color:var(--wb-text);background:var(--wb-blue);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input,button{font-family:inherit}
a{color:var(--wb-blue);text-decoration:none}
a:hover{color:var(--wb-blue-dark)}
#root{min-height:100%}

.wb-page{min-height:var(--window-inner-height,100vh);display:flex;flex-direction:column;padding-top:var(--tg-safe-top,0px);background:var(--wb-blue)}
.wb-container{width:100%;max-width:var(--wb-maxw);margin:0 auto;padding:0 var(--wb-gutter)}

/* HERO — flat brand blue with the line-art icon field */
.wb-hero{position:relative;background:var(--wb-blue);color:var(--wb-white);overflow:hidden}
.wb-hero__bg{position:absolute;inset:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat}
.wb-hero__inner{position:relative;display:flex;align-items:center;gap:40px;min-height:min(560px,calc(var(--window-inner-height,100vh) - var(--wb-header-h) - 52px));padding:32px 0 40px}
.wb-hero__col{flex:1 1 420px;min-width:0}
.wb-hero__media{flex:1 1 420px;display:flex;justify-content:center;align-items:center;min-width:0}
.wb-hero__media img{width:100%;max-width:520px;height:auto;display:block}
.wb-hero h2{margin:0 0 22px;font-weight:var(--wb-weight-bold);font-size:clamp(34px,4.2vw,52px);line-height:1.15;letter-spacing:var(--wb-tracking-hero)}
.wb-hero p{margin:0 0 24px;font-weight:var(--wb-weight-light);font-size:clamp(17px,1.5vw,20px);line-height:1.5;opacity:.96}

/* AUTH — one centred card on the pale page */
.wb-auth{flex:1;display:flex;justify-content:center;align-items:flex-start;background:var(--wb-surface);padding:50px var(--wb-gutter) 80px}
.wb-auth__card{width:100%;max-width:var(--wb-auth-maxw)}
.wb-auth h1{margin:0 0 46px;font-size:24px;font-weight:var(--wb-weight-bold);color:var(--wb-ink);line-height:1.25}
.wb-auth__field{margin-bottom:41px}
.wb-auth__forgot{text-align:right;margin:-29px 0 42px;font-size:var(--wb-size-small);color:var(--wb-soft)}
.wb-auth__forgot a{color:var(--wb-soft)}
.wb-auth__forgot a:hover{color:var(--wb-blue)}
.wb-auth__note{margin:14px 0 0;min-height:16px;text-align:center;font-size:var(--wb-size-xs)}

/* 2FA */
.wb-2fa h1{margin:0 0 26px;font-size:var(--wb-size-card-title);font-weight:var(--wb-weight-bold);color:var(--wb-ink)}
.wb-2fa p{margin:0 0 32px;max-width:455px;font-size:var(--wb-size-nav);line-height:24px;color:var(--wb-muted);text-wrap:pretty}

/* Marketing sections */
.wb-section{padding:var(--wb-section-y) 0}
.wb-section--muted{background:var(--wb-surface-2)}
.wb-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

@media (max-width:1200px){
  .wb-hero__inner{gap:28px}
}
@media (max-width:1024px){
  .wb-hero__inner{flex-direction:column-reverse;text-align:center;min-height:auto;padding:20px 0 28px;gap:16px}
  .wb-hero__col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
  .wb-hero__media img{max-width:280px}
  .wb-hero p{margin-bottom:20px}
  .wb-hero h2{font-size:clamp(28px,4vw,40px)}
  .wb-grid-4{grid-template-columns:repeat(2,1fr)}
  .wb-grid-3{grid-template-columns:1fr}
}
@media (max-width:920px){
  .wb-container{padding:0 var(--wb-gutter-sm)}
  .wb-auth{padding:24px var(--wb-gutter-sm) 56px}
}
@media (max-width:620px){
  .wb-hero h2{margin-bottom:16px}
  .wb-grid-4{grid-template-columns:1fr}
  .wb-auth h1{margin-bottom:32px;font-size:22px}
  .wb-auth__field{margin-bottom:32px}
  .wb-auth__forgot{margin:-22px 0 30px}
  .wb-2fa p{margin-bottom:26px;font-size:var(--wb-size-small);line-height:22px}
}
/* the 6 OTP cells must fit a 320px viewport */
@media (max-width:560px){
  .wb-2fa__otp{--wb-otp-w:44px;--wb-otp-h:60px;--wb-otp-gap:6px}
}
@media (max-width:400px){
  .wb-2fa__otp{--wb-otp-w:38px;--wb-otp-h:54px;--wb-otp-gap:4px}
}