/**
 * trivia1.com pricing (/upgrade) — the solid pricing-tier cards that sit below
 * the shared home-style hero slider. Layers on top of trivia-home.css (which
 * provides the .t1x- hero / join-band / button / band classes this page
 * reuses). Solid brand surfaces only — ZERO gradients. t1xp- scoped so it can
 * never collide with the home (.t1x-) or app (.trivia1-) rules.
 *
 * Palette tokens: bg #0f0f23 / #1a1a35 / #12122a / #2d2d50 ·
 * indigo #6366f1 / #a5b4fc / #c4b5fd · gold #fcd34d · text #f1f1f1.
 */

/* ================= PRICING TIERS ================= */
.t1xp { background: #0f0f23; padding: 3.5rem 1.15rem; }
.t1xp-inner { max-width: 1160px; margin: 0 auto; }

.t1xp-eyebrow { text-align: center; margin: 0; color: #a5b4fc; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.t1xp-h { text-align: center; margin: .4rem auto 0; max-width: 24ch; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); color: #f1f1f1; line-height: 1.12; }
.t1xp-sub { text-align: center; margin: .9rem auto 0; max-width: 52ch; color: rgba(241,241,241,.75); font-size: 1rem; line-height: 1.55; }

.t1xp-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2.4rem auto 0; max-width: 760px; }

.t1xp-card { position: relative; display: flex; flex-direction: column; background: #1a1a35; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 1.7rem 1.5rem; transition: transform .18s, border-color .18s; }
.t1xp-card:hover { transform: translateY(-2px); border-color: rgba(129,140,248,.5); }
.t1xp-card--featured { background: #12122a; border-color: rgba(99,102,241,.55); box-shadow: 0 18px 44px -24px rgba(0,0,0,.6); }

.t1xp-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 14px; border-radius: 999px; background: #6366f1; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.t1xp-badge--current { background: #fcd34d; color: #1a1a35; }

.t1xp-tier { margin: 0; color: #a5b4fc; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.t1xp-card--featured .t1xp-tier { color: #c4b5fd; }
.t1xp-price { display: flex; align-items: baseline; gap: .4rem; margin: .5rem 0 0; }
.t1xp-amt { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; color: #f1f1f1; }
.t1xp-per { color: rgba(241,241,241,.6); font-size: .95rem; font-weight: 600; }
.t1xp-tagline { margin: .8rem 0 0; color: rgba(241,241,241,.78); font-size: .95rem; line-height: 1.5; }

.t1xp-bullets { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; flex: 1 1 auto; }
.t1xp-bullets li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(241,241,241,.85); font-size: .95rem; line-height: 1.45; }
.t1xp-bullets li i { flex: none; margin-top: .22rem; font-size: .8rem; color: #a5b4fc; }
.t1xp-card--featured .t1xp-bullets li i { color: #fcd34d; }

/* CTA reuses the shared .t1x-btn / .t1x-btn-white / .t1x-btn-outline classes;
   these only stretch it full-width and pin it to the bottom of the card. */
.t1xp-cta { width: 100%; justify-content: center; margin-top: 1.5rem; }
.t1xp-note { margin: .7rem 0 0; text-align: center; color: rgba(241,241,241,.5); font-size: .8rem; }

.t1xp-foot { margin: 2.2rem auto 0; max-width: 62ch; text-align: center; color: rgba(241,241,241,.6); font-size: .85rem; line-height: 1.55; }

@media (min-width: 760px) {
    .t1xp-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .t1xp-card:hover { transform: none; }
}

/* ============ "WHICH ONE ARE YOU?" — four use-case cards (solid, no gradients) ============ */
.t1xv { background: #0f0f23; padding: 3.5rem 1.15rem; border-top: 1px solid rgba(255,255,255,.07); }
.t1xv-inner { max-width: 1160px; margin: 0 auto; }
.t1xv-eyebrow { text-align: center; margin: 0; color: #a5b4fc; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.t1xv-h { text-align: center; margin: .4rem auto 0; max-width: 26ch; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); color: #f1f1f1; line-height: 1.12; }
.t1xv-sub { text-align: center; margin: .9rem auto 0; max-width: 62ch; color: rgba(241,241,241,.75); font-size: 1rem; line-height: 1.55; }
.t1xv-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2.4rem auto 0; max-width: 1000px; }
.t1xv-card { display: flex; flex-direction: column; background: #1a1a35; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 1.6rem 1.5rem; transition: transform .18s, border-color .18s; }
.t1xv-card:hover { transform: translateY(-2px); border-color: rgba(129,140,248,.5); }
.t1xv-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(99,102,241,.16); color: #c4b5fd; font-size: 1.2rem; margin-bottom: .9rem; }
.t1xv-tier { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.2rem; color: #f1f1f1; }
.t1xv-body { margin: .55rem 0 0; color: rgba(241,241,241,.8); font-size: .95rem; line-height: 1.55; }
.t1xv-price { margin: .8rem 0 0; color: #f1f1f1; font-size: .92rem; line-height: 1.55; }
.t1xv-note { margin: .7rem 0 0; color: rgba(241,241,241,.5); font-size: .82rem; line-height: 1.5; }
.t1xv-cta { align-self: flex-start; margin-top: 1.2rem; }
@media (min-width: 760px) {
    .t1xv-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .t1xv-card:hover { transform: none; }
}