/* The pricing and IGR pages. */

.pricing-band { padding-bottom: 112px; }

.pricing-plans { margin-top: -72px; padding-bottom: 80px; position: relative; z-index: 2; }

.pricing-switch { display: flex; width: fit-content; margin: 0 auto 28px; padding: 5px; border-radius: 999px; background: var(--navy-deep); }
.pricing-switch button {
  min-height: var(--tap); padding: 10px 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--on-navy-body); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.pricing-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); }

.pricing-cards { display: flex; flex-wrap: wrap; gap: 24px; max-width: 1000px; margin-inline: auto; }
.pricing-card { display: flex; flex-direction: column; gap: 10px; padding: 36px; box-shadow: var(--shadow-raised); overflow: hidden; }
.pricing-card-main { flex: 3 1 420px; }
.pricing-card-igr { flex: 2 1 300px; box-shadow: var(--shadow-raised), inset 0 0 0 2px var(--violet); }
.pricing-card .hoops, .pricing-card .pride-stripe { height: 9px; margin: -36px -36px 22px; }
.pricing-card .btn { margin-top: auto; }
.pricing-card-main .btn { margin-top: 18px; }

.pricing-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--action); }
.pricing-card-igr .pricing-label, .igr-aside .pricing-label { color: var(--violet); }
.pricing-amount { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 64px); line-height: 1; }
.pricing-amount span { font-size: 20px; font-weight: 600; }
.pricing-note { margin-top: 8px; color: var(--text-muted); }
.pricing-card-igr .pricing-note { margin-bottom: 22px; }
.pricing-small { font-size: 14px; color: var(--text-muted); text-align: center; }

.pricing-heading { margin-bottom: 32px; font-size: clamp(28px, 3.4vw, 34px); }
.pricing-included svg { color: var(--pitch); }
.pricing-included { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; }

.pricing-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 48px; }
.pricing-faq h3 { margin-bottom: 8px; font-size: 18px; }
.pricing-faq p { color: var(--text-body); }
.pricing-faq a { color: var(--violet-ink); }

.pricing-footnotes { padding-bottom: 56px; font-size: 14px; color: var(--text-muted); }

.igr-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; }
.igr-body { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.igr-body h2:first-child { margin-top: 0; }
.igr-aside > .pride-stripe { height: 9px; margin: -32px -32px 8px; }
.igr-aside { flex: 1 1 280px; display: grid; gap: 16px; padding: 32px; overflow: hidden; box-shadow: var(--shadow-raised), inset 0 0 0 2px var(--violet); }
.igr-aside .pricing-amount { margin-top: 0; }