/*
 * Punk Puffin brand assets.
 *
 * Application colours and typography intentionally come from the original
 * studio stylesheets. Nunito is reserved for the two-word mobile brand label.
 */

@font-face{
  font-family:"Punk Puffin Nunito";
  src:url("/brand/nunito-bold.ttf") format("truetype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

.auth-logo{
  width:min(291px,73%);
  max-height:58vh;
  height:auto;
  margin:0 auto 28px;
  object-fit:contain;
}

.loading-logo,
.activity-overlay-content img{
  width:min(260px,70vw);
  height:auto;
}

.wordmark img{
  width:174px;
  height:auto;
  max-height:none;
}

.wordmark-home{width:174px}

.mobile-brand img{
  width:34px;
  height:34px;
  object-fit:contain;
}

.mobile-brand span{
  font-family:"Punk Puffin Nunito","Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  font-weight:700;
}

/* Product imagery is contained, so uncovered card space must remain neutral. */
.product-card .product-art,
.product-card .product-art.oat,
.product-card .product-art.sage,
.product-card .product-art.ink{
  background:#fff;
}

@media(max-width:820px){
  .auth-mobile-logo{
    display:block;
    width:min(240px,68vw);
    height:auto;
    margin:0 auto 28px;
  }

  .signup-mobile-logo{width:min(230px,70vw)}
}

/* Merchant email previews retain the merchant's own typography and colours. */
.email-window,
.email-window *{font-family:inherit}

/* Login retains the original photographic, cool-neutral presentation. */
.auth-shell{background:#f4f2ed!important}

.auth-brand{
  background-color:#1c2731!important;
  background-image:linear-gradient(90deg,rgba(12,24,32,.66),rgba(12,24,32,.35)),url("/hero-bg.png")!important;
  background-position:center!important;
  background-size:cover!important;
}

.auth-brand::after{
  background:linear-gradient(180deg,rgba(18,31,40,.18),rgba(18,31,40,.52));
}

.auth-logo{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.auth-form .primary{
  border-color:#2f7657;
  background:#2f7657;
  color:#fff;
  box-shadow:0 7px 18px rgba(47,118,87,.24);
}

.auth-form .primary:hover{
  border-color:#245f46;
  background:#245f46;
  box-shadow:0 9px 22px rgba(47,118,87,.3);
}

@media(max-width:820px){
  .auth-shell{
    background-color:#1c2731!important;
    background-image:linear-gradient(rgba(12,24,32,.46),rgba(12,24,32,.58)),url("/hero-bg.png")!important;
    background-position:center!important;
    background-size:cover!important;
    background-attachment:scroll!important;
  }

  .auth-panel{
    color:#fff;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .auth-panel h1,
  .auth-panel>.lede,
  .auth-panel .auth-help{
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.72);
  }

  .auth-panel .auth-form label span,
  .auth-panel .auth-link{
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.8);
  }

  .auth-panel .auth-form input{
    color:var(--studio-ink);
    background:rgba(255,255,255,.96);
  }
}