/* Top-up page. Calm and optional: packs are equal rows on one sheet, like a gear spec table,
   each translated into trip length. Yellow stays on the buy buttons only. */

.topup .wrap { max-width: 880px; }
.tu-head { margin-bottom: var(--s-6); }
.tu-head .lede { margin-bottom: var(--s-3); }
.tu-head > :last-child { margin-bottom: 0; }

.tu-h2 { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.005em; line-height: 1.25; margin: 0 0 var(--s-2); }

/* who the answers go to */
.tu-who { max-width: 460px; margin-bottom: var(--s-2); }
.tu-switch { margin-bottom: var(--s-6); }
.tu-key { max-width: 340px; margin-bottom: var(--s-6); }
.tu-key .hint { max-width: 46ch; }
.tu-form .notice { margin-bottom: var(--s-6); }

/* packs: one sheet, rows share hairlines, all the same weight */
.tu-pace { margin-bottom: var(--s-4); }
.tu-packs {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: var(--b-1); border-radius: var(--r-2);
}
.tu-pack {
  display: grid; align-items: center; gap: var(--s-2) var(--s-5);
  grid-template-columns: 10.5rem 1fr 7.5rem 11.5rem;
  grid-template-areas: "size trips price buy";
  margin: 0; max-width: none; padding: var(--s-5);
}
.tu-pack + .tu-pack { border-top: var(--b-1); }

.tu-size { grid-area: size; margin: 0; font-size: var(--t-base); font-weight: 650; line-height: 1.1; color: var(--muted); }
.tu-n {
  display: block; color: var(--ink); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-bottom: 2px;
}

.tu-trips { grid-area: trips; margin: 0; font-size: var(--t-sm); line-height: 1.4; }
.tu-trips div { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.tu-trips dd { flex: 1 1 7.5em; }
.tu-trips div + div { margin-top: 4px; }
.tu-trips dt { flex: none; width: 5.5em; color: var(--muted); }
.tu-trips dd { margin: 0; color: var(--ink); font-weight: 600; }

.tu-price { grid-area: price; margin: 0; line-height: 1.25; }
.tu-amount { display: block; font-size: var(--t-lg); font-weight: 750; font-variant-numeric: tabular-nums; }
.tu-each { display: block; color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.tu-buy { grid-area: buy; width: 100%; }

/* Wide screens: columns size to their content (not fixed rem), shared by all rows via subgrid,
   so large text settings can't push the Buy buttons out of the card. */
@media (min-width: 861px) {
  .tu-packs { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; }
  .tu-pack { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

.tu-secure { margin: var(--s-4) 0 0; }

/* practical questions */
.tu-faq { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--b-1); }
.tu-faq .tu-h2 { margin-bottom: var(--s-5); }
.tu-qa h3 { font-size: var(--t-base); font-weight: 700; margin: 0 0 var(--s-1); }
.tu-qa p { color: var(--muted); margin: 0; }
.tu-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); }
.tu-faq .tu-h2 { grid-column: 1 / -1; margin-bottom: 0; }

/* done page */
.tu-done .wrap { max-width: 680px; }
.tu-done .lede { margin-bottom: var(--s-4); }
.tu-check { margin: var(--s-6) 0; max-width: 380px; }
.tu-check .lcd { margin-bottom: var(--s-3); }
.tu-check figcaption { max-width: 40ch; }
.tu-next { margin-top: var(--s-6); }

/* tablets: price joins the size column, button keeps its own */
@media (max-width: 860px) {
  .tu-pack { grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "size trips buy" "price trips buy"; }
  .tu-price { align-self: start; }
  .tu-each { white-space: nowrap; }
}

/* phones: each row stacks, button full width */
@media (max-width: 600px) {
  .tu-pack {
    grid-template-columns: 1fr auto; grid-template-areas: "size price" "trips trips" "buy buy";
    padding: var(--s-4); row-gap: var(--s-3);
  }
  .tu-price { text-align: right; align-self: end; }
  .tu-faq { grid-template-columns: 1fr; gap: var(--s-5); }
  .tu-who { max-width: none; }
}