/* SIGN IN FOR THE BEST EXPERIENCE (COO hands 2026-10-15, Steven's shot of
   Amazon's phone home page): templates/feed/_signin_block.html, the
   visitor's block between "Need ideas?" and Grag's List.

   The frame is the home card's (.start-ideas-card in ready-targets.css:
   the feed card's radius, border and shadow), white. Inside: the heading
   in the heading font, bold, about 26px at phone width; one full-width
   pill in the bullseye yellow (--highlight-yellow, #f2e841) with black
   text; a purple text link under it (--tb-brand-purple). The yellow lives
   on the button only (no tag pill), so the card does not repeat Need
   ideas' yellow tag or Grag's List's purple head. Tokens only. */

.start-ideas-card.signin-block {
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--color-white);
  color: var(--color-black);
}
.signin-block__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: calc(var(--text-2xl) + 2px); /* 26px */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black);
}
.signin-block__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--size-12);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--highlight-yellow);
  color: var(--color-black);
  font-family: var(--font-body, inherit);
  font-size: var(--text-lg);
  font-weight: var(--font-medium, 500);
  text-decoration: none;
  box-sizing: border-box;
}
.signin-block__btn:hover { filter: brightness(0.96); }
.signin-block__btn:active { filter: brightness(0.92); }
.signin-block__btn:focus-visible { outline: 3px solid var(--tb-brand-purple); outline-offset: 2px; }
.signin-block__join {
  justify-self: start;
  color: var(--tb-brand-purple);
  font-size: var(--text-lg);
  text-decoration: none;
}
.signin-block__join:hover { color: var(--tb-brand-purple-hover); text-decoration: underline; }
.signin-block__join:focus-visible { outline: 2px solid var(--tb-brand-purple); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }

@media (min-width: 768px) {
  .signin-block__title { font-size: var(--text-3xl); }
}

/* With the visitor deck (LAYOUT_CARDS on) the landing snaps card by card:
   the block is a stop of its own, like Grag's List (grags-list.css). */
html:has([data-visitor-deck]) .start-homepage-proof--signin {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}