/* Base Crew signup block.  Keep this file separate from sb-style.css. */
.sb-signup-form { position: relative; max-width: 28rem; }
.sb-signup-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sb-signup-field { margin: 0 0 var(--sb-s3); }
.sb-signup-field label {
  display: block;
  margin: 0 0 var(--sb-s1);
  font: 600 .95rem/1.3 var(--sb-font-body);
  color: var(--sb-navy);
}
.sb-signup-field input[type="email"] {
  display: block;
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  padding: .7rem .85rem;
  border: 1px solid var(--sb-navy);
  background: var(--sb-white);
  color: var(--sb-graphite);
  font: 400 1.0625rem/1.4 var(--sb-font-body);
  border-radius: 0;
}
.sb-signup-field input[type="email"]:focus {
  outline: 2px solid var(--sb-navy);
  outline-offset: 2px;
}
.sb-signup-actions { margin: 0 0 var(--sb-s3); }
.sb-signup-actions .sb-btn { border: 0; cursor: pointer; }
.sb-signup-sub {
  display: block;
  margin: var(--sb-s2) 0 0;
  font: 400 .9rem/1.4 var(--sb-font-body);
  color: var(--sb-muted);
}
.sb-signup-consent {
  margin: 0;
  font: 400 .9rem/1.5 var(--sb-font-body);
  color: var(--sb-muted);
}
.sb-signup-msg { margin: var(--sb-s3) 0 0; font: 400 .95rem/1.5 var(--sb-font-body); }
.sb-signup-msg--err { color: #8a1f11; }
.sb-signup-preview {
  display: block;
  max-width: 22rem;
  width: 100%;
  height: auto;
  margin: 0 0 var(--sb-s4);
  border: 1px solid var(--sb-line);
  background: var(--sb-white);
}
.sb-signup-since { font: 600 1rem/1.4 var(--sb-font-body); color: var(--sb-navy); }

/* Compact signup strip: under the homepage hero, and after the first section on guides. */
.sb-signup-strip {
  background: var(--sb-cool);
  border-bottom: 1px solid var(--sb-line);
  padding: 18px 0 16px;
}
.sb-signup-strip-head {
  margin: 0 0 var(--sb-s3);
  font: 700 1.25rem/1.2 var(--sb-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sb-navy);
}
.sb-signup-form--strip { max-width: none; }
.sb-signup-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sb-s3);
}
.sb-signup-strip .sb-signup-field {
  flex: 1 1 16rem;
  margin: 0;
  min-width: 0;
}
.sb-signup-strip .sb-signup-field input[type="email"] {
  max-width: none;
}
.sb-signup-strip .sb-signup-actions {
  flex: 0 0 auto;
  margin: 0;
}
.sb-signup-strip .sb-signup-sub { margin: var(--sb-s2) 0 0; }
.sb-signup-strip .sb-signup-consent { margin: var(--sb-s2) 0 0; }
@media (max-width: 639px) {
  .sb-signup-strip-row { display: block; }
  .sb-signup-strip .sb-signup-field { margin: 0 0 var(--sb-s3); }
  .sb-signup-strip .sb-signup-actions,
  .sb-signup-strip .sb-signup-actions .sb-btn {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Compact signup form inside the homepage hero.  Primary above-the-fold action. */
.sb-signup-form--hero {
  max-width: 46rem;
  margin: 0 0 .9rem;
}
.sb-hero .sb-signup-hero-head {
  margin: 0 0 var(--sb-s3);
  font: 700 1.15rem/1.2 var(--sb-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sb-bone);
}
.sb-hero .sb-signup-field label { color: var(--sb-bone); }
.sb-hero .sb-signup-field input[type="email"] {
  border-color: var(--sb-bone);
  background: var(--sb-white);
  color: var(--sb-graphite);
  max-width: none;
}
.sb-hero .sb-signup-field input[type="email"]:focus {
  outline-color: var(--sb-bone);
}
.sb-hero .sb-signup-sub,
.sb-hero .sb-signup-consent { color: #C9D4E3; }
.sb-hero .sb-signup-consent a { color: var(--sb-bone); }
.sb-hero .sb-signup-msg { color: var(--sb-bone); }
.sb-hero .sb-signup-msg--err { color: #F6C7BC; }
.sb-signup-form--hero .sb-signup-sub { margin: var(--sb-s2) 0 0; }
.sb-signup-form--hero .sb-signup-consent { margin: var(--sb-s2) 0 0; }
.sb-signup-form--hero .sb-signup-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sb-s3);
}
.sb-signup-form--hero .sb-signup-field {
  flex: 1 1 16rem;
  margin: 0;
  min-width: 0;
}
.sb-signup-form--hero .sb-signup-actions { flex: 0 0 auto; margin: 0; }
.sb-hero-more {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
  margin: 0;
}
.sb-hero-more a {
  color: var(--sb-bone);
  font: 700 .95rem/1.2 var(--sb-font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 639px) {
  .sb-home .sb-hero > .sb-wrap { padding-top: 2.2rem; padding-bottom: 1.35rem; }
  .sb-hero .sb-lede { margin-bottom: 1.05rem; }
  .sb-signup-form--hero .sb-signup-strip-row { display: block; }
  .sb-signup-form--hero .sb-signup-field { margin: 0 0 var(--sb-s3); }
  .sb-signup-form--hero .sb-signup-actions,
  .sb-signup-form--hero .sb-signup-actions .sb-btn {
    width: 100%;
    box-sizing: border-box;
  }
}