/* Components — the visual building blocks: brand, badge, headline, form,
   success state, and the device showcase. */

/* Brand */
.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.brand__mark {
  width: 28px; height: 28px; border-radius: 7px;
  object-fit: cover; display: block;
}
.brand__word { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }

/* Badge */
.badge {
  display: inline-block; margin: 0 0 1rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem;
}

/* Copy */
.headline {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 800;
}
.subhead {
  color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.15rem);
  max-width: 34ch; margin: 0 0 2rem;
}

/* Form */
.signup__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.signup input {
  flex: 1 1 180px; min-width: 0;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; font-size: 1rem;
}
.signup input::placeholder { color: #6b6b76; }
.signup input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.signup button {
  flex: 0 0 auto;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem;
  border: 0; border-radius: var(--radius); padding: 0.85rem 1.4rem; cursor: pointer;
  transition: transform 0.05s ease, background 0.2s ease;
}
.signup button:hover { background: var(--accent-hover); }
.signup button:active { transform: translateY(1px); }
.signup button[disabled] { opacity: 0.6; cursor: progress; }

.signup__message { min-height: 1.25rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
.signup__message.is-error { color: #fca5a5; }

/* Success state */
.success h2 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.success p { color: var(--muted); max-width: 40ch; }

/* Device showcase. The hero images are pre-framed device mockups (transparent
   PNGs), so we use drop-shadow (follows the device silhouette) rather than a
   rectangular box-shadow, and add no fake frame of our own. */
.hero__visual {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 440px;
}
/* Small portrait accent — sits at the top-left corner, clear of the hero score. */
.score-tile {
  position: absolute; top: -2%; left: -1%; transform: rotate(7deg);
  width: clamp(74px, 9.5vw, 100px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.3));
  z-index: 3; display: block;
}

.device { filter: drop-shadow(0 16px 32px rgba(0,0,0,0.3)); }
/* Hero is a landscape (rotated) scoreboard mockup — wide and short. */
.device--phone {
  width: clamp(290px, 42vw, 430px);
}
/* Watch sits at the bottom-right corner, clear of the hero score. */
.device--watch {
  position: absolute; right: -2%; bottom: -2%;
  width: clamp(74px, 9.5vw, 104px);
  z-index: 3;
}

/* Component-level responsive tweaks (page grid changes live in layout.css). */
@media (max-width: 820px) {
  .brand, .signup__row { justify-content: center; }
  .subhead { margin-left: auto; margin-right: auto; }
  .hero__visual { min-height: 340px; }
}