/* The invite page is the homepage (styles.css, home.css and the sections
   tools/sync-invite.py copies in) with a longer title, a second button
   beside "Get the app" that holds the friend's invite code, and a caption
   under the pair. Only those differences live here. */

/* The pair: the homepage capsule and the code button, twins in size. On
   phones they shrink together to stay side by side; only the narrowest
   screens stack them. */

.cta-row {
  display: flex;
  width: 100%;
  margin-top: 12px;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

/* Twins: each takes half the row minus half the gap, capped at the homepage
   capsule's 198px, so their outer widths match whatever the padding. */
.cta-row .cta-shell,
.code-button {
  flex: 0 0 auto;
  width: min(198px, calc(50% - 6px));
}

.cta-row .cta-shell {
  margin-top: 0;
}

.cta-row .cta {
  width: 100%;
}

.code-button {
  display: inline-flex;
  height: 56px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(34, 34, 34, 0.2);
  border-radius: 1000px;
  font-family: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.code-button:hover {
  border-color: rgba(34, 34, 34, 0.45);
}

.code-button:active {
  background: #f4f4f5;
}

.code-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.code-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ink-muted);
}

.code-text {
  letter-spacing: 0.02em;
}

/* After a copy the button says so for a moment, then shows the code again. */
.code-icon-check,
.code-copied {
  display: none;
}

.code-button.copied .code-icon-copy,
.code-button.copied .code-text {
  display: none;
}

.code-button.copied .code-icon-check,
.code-button.copied .code-copied {
  display: inline;
}

.code-button.copied .code-icon-check {
  display: block;
}

/* Narrow enough that "to claim your free month." always starts the second
   line; the phrase never breaks inside. */
.hero .caption {
  max-width: 300px;
  margin: -10px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.caption .nowrap {
  white-space: nowrap;
}

/* Phones: "A parent invited" runs three characters longer than the
   homepage's lines, so the title steps down to stay on two, with room to
   spare at the edges. The wall's top band reaches further toward the middle
   than its bottom band, so the hero sits 12px below center: the same room
   above the title as below the caption. */
@media (max-width: 1023px) {
  .hero {
    top: calc(50% + 12px);
  }

  h1 {
    font-size: clamp(36px, 11.2vw, 56px);
  }

  .hero .caption {
    margin-top: -6px;
  }
}

/* Below 360px the pair no longer fits beside each other; they stack at
   full size. */
@media (max-width: 359px) {
  .cta-row {
    flex-wrap: wrap;
  }

  .cta-row .cta-shell,
  .code-button {
    width: 198px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .code-button {
    transition: none;
  }
}