/* Thumbs product page. Two things the shared shell has no vocabulary for:
   the hero bridge graphic (phone deck -> catalog rows) and the launch-list
   form in the final CTA. Everything else is product.css.

   The bridge is deliberately schematic rather than a screenshot: it has to
   show the ROUND TRIP, which no single screenshot of either end can. */

.th-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: 90rem; margin: 0 auto; width: 100%;
}

/* ── The bridge ─────────────────────────────────────────────── */
.th-bridge {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(0.6rem, 1.5vw, 1.4rem);
}

.th-phone {
  border: 1px solid var(--line); border-radius: 1.4rem;
  /* Wider side padding than the deck needs: the top card is rotated, and its
     lower corner swings out past a flush edge. */
  background: var(--carbon-2); padding: 0.9rem 1.5rem 0.7rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45);
}
.th-deck { position: relative; height: 13rem; width: 8.6rem; }
.th-card {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: linear-gradient(150deg, var(--carbon-3), #241d15 70%, #2d2318);
}
/* Stand-in frames borrowed from the Face Tagger set - the deck has to read as
   photographs, and shipping three more assets to say so would be waste. */
.th-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(13 11 8 / 0.15) 40%, rgb(13 11 8 / 0.85));
}
.th-card > span { z-index: 1; }
.th-card-3 { transform: translateY(0.55rem) scale(0.92); opacity: 0.4; }
.th-card-2 { transform: translateY(0.28rem) scale(0.96); opacity: 0.7; }
.th-card-1 {
  transform: rotate(6deg) translateX(0.5rem);
  border-color: rgb(111 194 178 / 0.55);
  box-shadow: 0 0 0 1px rgb(111 194 178 / 0.25), 0 0.6rem 1.6rem rgb(111 194 178 / 0.12);
}
.th-fnum {
  position: absolute; left: 0.55rem; bottom: 0.5rem;
  font-size: 0.6rem; color: var(--dim); letter-spacing: 0.06em;
}
.th-verdict {
  position: absolute; top: 0.6rem; left: 0.55rem;
  font-size: 0.6rem; letter-spacing: 0.12em;
  padding: 0.15rem 0.4rem; border-radius: 0.2rem;
}
.th-keep { color: var(--teal); border: 1px solid rgb(111 194 178 / 0.5); }
.th-card-1 .th-stars { position: absolute; right: 0.55rem; bottom: 0.45rem; font-size: 0.62rem; color: var(--amber); }

.th-phone-foot {
  margin-top: 0.7rem; font-size: 0.58rem; color: var(--dim);
  letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.35rem;
}
.th-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--teal); }

.th-flow { display: grid; justify-items: center; gap: 0.4rem; }
.th-flow-line {
  width: 100%; min-width: 2.5rem; height: 1px;
  background: linear-gradient(90deg, rgb(111 194 178 / 0.6), var(--amber));
  position: relative;
}
.th-flow-line::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--amber);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.th-flow-label { font-size: 0.55rem; color: var(--dim); letter-spacing: 0.1em; white-space: nowrap; }

.th-catalog {
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--carbon-2); padding: 0.75rem 0.85rem; min-width: 12rem;
}
.th-cat-head {
  font-size: 0.55rem; color: var(--dim); letter-spacing: 0.1em;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 0.35rem;
}
.th-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.35rem; border-radius: 0.25rem;
}
.th-row .th-fnum { position: static; flex: 1; }
.th-row.is-hit { background: rgb(232 163 61 / 0.1); box-shadow: inset 0 0 0 1px rgb(232 163 61 / 0.25); }
.th-flag { font-size: 0.7rem; line-height: 1; }
.th-pick { color: var(--teal); }
.th-rej { color: var(--dim); }
.th-row .th-stars { font-size: 0.6rem; color: var(--amber); }

/* ── Launch list form, inside .final-cta ────────────────────── */
.th-notify-form { max-width: 30rem; margin: 2rem auto 0; text-align: left; }
.th-notify-form .btn { justify-self: stretch; text-align: center; }
/* Two classes, to outrank `.contact-form label` - consent copy has to be
   readable prose, not the mono all-caps that suits a field label. */
.th-notify-form .th-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem;
  align-items: start; color: var(--dim);
  font-family: var(--f-body); font-size: 0.85rem; line-height: 1.5;
  text-transform: none; letter-spacing: 0;
}
.th-consent input { width: 1rem; height: 1rem; margin-top: 0.2rem; accent-color: var(--amber); }
.th-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.th-notify-error { color: var(--safelight); font-size: 0.85rem; }
.th-fineprint { color: var(--dim); font-size: 0.78rem; line-height: 1.5; }
.th-fineprint a, .th-notify-form a { color: var(--amber); }
.th-notify-done {
  max-width: 30rem; margin: 2rem auto 0;
  border: 1px solid rgb(111 194 178 / 0.4); border-radius: 0.5rem;
  padding: 1.1rem 1.3rem; color: var(--highlight); background: rgb(111 194 178 / 0.07);
}

@media (max-width: 1080px) {
  .th-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 620px) {
  /* Stack the round trip vertically - side by side it shrinks past legible. */
  .th-bridge { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .th-flow { width: 100%; }
  .th-flow-line { width: 1px; height: 2.2rem; min-width: 0; background: linear-gradient(180deg, rgb(111 194 178 / 0.6), var(--amber)); }
  .th-flow-line::after {
    right: auto; left: -3px; top: auto; bottom: -1px;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 6px solid var(--amber); border-bottom: 0;
  }
  .th-catalog { width: 100%; max-width: 20rem; }
}