/*
 * Variant B of the waitlist page (b.html): the value proposition set straight
 * onto the footage, no card, in the spirit of the 2013 Robinhood landing page.
 * Loaded after styles.css and only by b.html; everything here is additive.
 * The confirmation view reuses the white card from styles.css unchanged.
 */

.page-b { --brand-light: #4fa8ec; }

/* White type sits on the frame rather than a card. The first layer creates a
   soft local band behind the hero while the second protects the nav and footer;
   together they preserve the bright Malibu sky away from the content. */
.bg--b .bg__scrim {
  background:
    radial-gradient(ellipse 52% 48% at 50% 49%, rgba(6, 12, 28, 0.18) 0%, rgba(6, 12, 28, 0.1) 48%, transparent 100%),
    linear-gradient(180deg, rgba(6, 12, 28, 0.34) 0%, rgba(6, 12, 28, 0.12) 48%, rgba(6, 12, 28, 0.3) 100%);
}

.stage--b {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 56px) 20px 48px;
}

.hero {
  width: min(100%, 880px);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(4, 10, 26, 0.72), 0 3px 22px rgba(4, 10, 26, 0.62);
}

/* Social proof, above the headline: laurel, avatar stack, "trusted by" and a
   rotating phrase. One drop-shadow pair on the wrapper keeps everything
   legible on the footage (same treatment as the sibling project). */
.eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  color: #fff;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(3, 16, 48, 0.8)) drop-shadow(0 3px 14px rgba(3, 16, 48, 0.65));
}
.eyebrow__laurel { width: 21.6px; height: 54px; flex: 0 0 auto; }
.eyebrow__laurel--r { transform: scaleX(-1); }

.eyebrow__avatars { display: flex; align-items: center; flex: 0 0 auto; }
.eyebrow__avatars img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  background: #dce6f2;
  margin-left: -10px;
  position: relative;
  display: block;
}
.eyebrow__avatars img:first-child { margin-left: 0; }
.eyebrow__avatars img:nth-child(1) { z-index: 4; }
.eyebrow__avatars img:nth-child(2) { z-index: 3; }
.eyebrow__avatars img:nth-child(3) { z-index: 2; }
.eyebrow__avatars img:nth-child(4) { z-index: 1; }

.eyebrow__text {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  font-size: 20px; font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.eyebrow__count { font-variant-numeric: tabular-nums; }
.eyebrow__ticker {
  display: inline-grid; justify-items: start;
  overflow: hidden;
  line-height: 1.3;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eyebrow__ticker > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}
.eyebrow__ticker > span.is-active  { opacity: 1; transform: translateY(0); }
.eyebrow__ticker > span.is-leaving { transform: translateY(-110%); }

/* Two lines, one sentence each, as in the reference: brand + benefit, then
   the pain it removes. */
.hero__title {
  margin-top: 30px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.026em;
  font-weight: 500;
  text-wrap: balance;
}
.hero__brand { color: var(--brand-light); font-weight: 600; }

.hero__sub {
  margin-top: 10px;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.014em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
}

/* One row: country + number, then the button. Stacks under 560px. */
.signup--row { margin: 36px auto 0; width: min(100%, 560px); }
.signup__row { display: flex; gap: 10px; }
.signup__row .phone {
  flex: 1 1 auto; min-width: 0;
  height: 52px;
  border-color: rgba(255, 255, 255, 0.5);
}
.signup__row .phone:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.signup__row .submit {
  width: auto; flex: 0 0 auto;
  margin-top: 0;
  padding: 0 24px;
  font-size: 15px;
  white-space: nowrap;
}
.signup__row .submit:focus-visible { outline-color: #fff; }

/* `:not([hidden])`: a bare display rule would override the hidden attribute
   and show the note to everyone, not only to referred visitors. */
.invited--b:not([hidden]) {
  display: inline-block;
  margin: 22px auto 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

.consent--b {
  width: min(100%, 560px);
  margin: 14px auto 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 5px rgba(4, 10, 26, 0.9);
}
.consent--b input { accent-color: var(--cta); }

.page-b .formnote { text-align: center; }
.page-b .formnote[data-state='error'] { color: #ffb8ad; }
.page-b .formnote[data-state='ok']    { color: #a8ebbd; }

/* The reference's "Watch the video". Points at About until the demo exists. */
.hero__video {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 34px;
  font-size: 15.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(4, 10, 26, 0.85);
}
.hero__video:hover { color: #fff; }
.hero__video:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.hero__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: transform .18s ease, background .18s ease;
}
.hero__play svg { width: 14px; height: 14px; }
.hero__video:hover .hero__play { background: rgba(255, 255, 255, 0.12); transform: translateX(2px); }

/* Confirmation: the white card from variant A, centred on the footage. */
.card--b { margin: 40px auto 0; }

@media (max-width: 560px) {
  .stage--b { padding-top: 26px; }
  .eyebrow { gap: 8px; }
  .eyebrow__laurel { width: 16.8px; height: 42px; }
  .eyebrow__avatars img { width: 22px; height: 22px; margin-left: -7px; }
  .eyebrow__text { font-size: 15px; }
  .hero__title { margin-top: 24px; font-size: 29px; }
  .hero__sub { font-size: 18px; }
  .signup--row { margin-top: 30px; }
  .signup__row { flex-direction: column; gap: 10px; }
  .signup__row .phone { height: 50px; }
  .signup__row .submit { width: 100%; padding: 14px 16px; }
  .hero__video { margin-top: 26px; }
}

/* Consent highlight on the dark hero. */
.consent--b.is-required {
  border-color: rgba(255, 140, 125, 0.7);
  background: rgba(255, 120, 105, 0.16);
  color: #ffd9d3;
}
.consent--b.is-required input { outline-color: #ff9d92; }