/* buy-pass.css — Buy the Pass page (see rwb-buy-pass.html). Also used by the
   About the Pass page. global.css supplies nav/banner/buttons/footer. */

/* PAGE HERO */
.page-hero { background: var(--navy); position: relative; overflow: hidden; padding: 68px 72px 60px; text-align: center; border-bottom: 3px solid var(--crimson); }
.page-hero-bg { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(178,34,52,0.04) 29px,rgba(178,34,52,0.04) 30px), repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(178,34,52,0.04) 29px,rgba(178,34,52,0.04) 30px); }
.hero-mtn { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 200px; opacity: 0.13; pointer-events: none; }
.page-hero .hero-stars { position: relative; z-index: 1; font-size: 14px; letter-spacing: 6px; color: var(--crimson); margin-bottom: 18px; opacity: 0.8; }
.page-hero .hero-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,100,120,0.8); margin-bottom: 14px; position: relative; z-index: 1; }
.page-hero .hero-title { font-family: var(--font-display); font-size: clamp(38px,5vw,64px); font-weight: 700; color: var(--white); line-height: 1.1; margin-bottom: 18px; position: relative; z-index: 1; }
.page-hero .hero-title em { font-style: italic; color: #E06070; }
.page-hero .hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.65); max-width: 580px; margin: 0 auto 32px; line-height: 1.75; position: relative; z-index: 1; }
.official-notice { display: inline-flex; align-items: center; gap: 10px; background: rgba(30,92,50,0.15); border: 1px solid rgba(30,92,50,0.4); padding: 10px 20px; font-size: 13px; color: rgba(255,255,255,0.75); position: relative; z-index: 1; }
.official-notice strong { color: #81C784; }

.flag-div { height: 5px; background: repeating-linear-gradient(90deg,var(--crimson) 0,var(--crimson) 40px,var(--white) 40px,var(--white) 46px,var(--navy-light) 46px,var(--navy-light) 86px,var(--white) 86px,var(--white) 92px); opacity: 0.45; }

/* CONTENT */
.page-content { max-width: 1180px; margin: 0 auto; padding: 68px 44px; }
.section-label::before { content: '★'; font-size: 8px; }
.buy-pass .section-heading, .page-content .section-heading { font-family: var(--font-display); font-size: clamp(30px,3.5vw,42px); font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.15; }
.section-sub { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.7; max-width: 620px; margin-bottom: 44px; }

/* §9 Official Source box (green) */
.official-source-box { display: flex; align-items: center; gap: 12px; background: rgba(30,92,50,0.08); border-left: 4px solid var(--green-dark); padding: 16px 20px; margin-bottom: 44px; font-size: 14px; color: var(--text-dark); line-height: 1.5; }
.official-source-box strong { color: var(--green-dark); }

/* PAID PASS CARDS */
.pass-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-bottom: 72px; }
.pass-card { background: var(--white); display: flex; flex-direction: column; position: relative; transition: box-shadow 0.25s,transform 0.25s; }
.pass-card:hover { box-shadow: 0 14px 40px rgba(13,27,42,0.1); transform: translateY(-4px); }
.pass-card.featured { border: 2px solid var(--crimson); }
.pass-card-top-stripe { height: 5px; background: var(--navy); }
.pass-card.featured .pass-card-top-stripe { background: repeating-linear-gradient(90deg,var(--crimson) 0,var(--crimson) 30px,var(--navy) 30px,var(--navy) 60px); }
.featured-ribbon { position: absolute; top: 5px; right: 0; background: var(--crimson); color: var(--white); font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; padding: 4px 14px; }
.pass-card-header { background: var(--navy); padding: 26px 26px 22px; position: relative; overflow: hidden; }
.pass-card-header::before { content: ''; position: absolute; top: -24px; right: -24px; width: 110px; height: 110px; background: radial-gradient(circle,rgba(178,34,52,0.12),transparent 70%); }
.pass-card-icon { font-size: 26px; margin-bottom: 10px; }
.pass-card-name { font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.pass-card-tag { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 300; }
.pass-card-price-block { position: absolute; top: 22px; right: 22px; text-align: right; }
.pass-card-price { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--white); line-height: 1; }
.pass-card.featured .pass-card-price { color: #E06070; }
.pass-card-price-note { font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }
.pass-card-body { padding: 22px 26px; flex: 1; display: flex; flex-direction: column; }
.pass-card-elig { background: rgba(13,27,42,0.04); border: 1px solid rgba(13,27,42,0.08); padding: 11px 13px; margin-bottom: 14px; }
.pass-card-elig-label { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.pass-card-elig-text { font-size: 13px; color: var(--navy); }
.pass-card-features { list-style: none; margin-bottom: 18px; flex: 1; }
.pass-card-feature { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-mid); padding: 6px 0; border-bottom: 1px solid rgba(13,27,42,0.05); font-weight: 300; line-height: 1.4; }
.pass-card-feature:last-child { border-bottom: none; }
.feat-star { color: var(--crimson); flex-shrink: 0; margin-top: 1px; font-size: 10px; }
.pass-card-cta { display: block; text-align: center; background: var(--navy); color: var(--white); font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px; text-decoration: none; transition: background 0.2s; }
.pass-card-cta:hover { background: var(--navy-light); }
.pass-card.featured .pass-card-cta { background: var(--crimson); }
.pass-card.featured .pass-card-cta:hover { background: var(--crimson-light); }
.pass-card-ext { text-align: center; margin-top: 8px; font-size: 11px; color: var(--text-muted); }

/* FREE PASSES */
.free-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 68px; }
.free-card { background: var(--navy); position: relative; overflow: hidden; padding: 26px 26px 22px; transition: transform 0.2s; }
.free-card:hover { transform: translateY(-3px); }
.free-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--crimson); }
.free-card::after { content: '★★★'; position: absolute; bottom: 16px; right: 18px; font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,0.06); }
.free-card-icon { font-size: 26px; margin-bottom: 12px; }
.free-badge { display: inline-block; background: rgba(30,92,50,0.2); border: 1px solid rgba(30,92,50,0.5); padding: 3px 10px; margin-bottom: 9px; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: #81C784; }
.free-name { font-family: var(--font-ui); font-size: 17px; font-weight: 700; letter-spacing: 0.05em; color: var(--white); margin-bottom: 8px; }
.free-desc { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 300; line-height: 1.65; }
.free-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: rgba(255,100,120,0.9); text-decoration: none; border-bottom: 1px solid rgba(178,34,52,0.3); padding-bottom: 1px; }

/* COMPARISON TABLE */
.comp-section { margin-bottom: 68px; }
.comp-table-wrap { overflow-x: auto; }
.comp-table { width: 100%; min-width: 720px; border-collapse: collapse; box-shadow: 0 4px 24px rgba(13,27,42,0.08); }
.comp-table th { background: var(--navy); padding: 15px 18px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); text-align: left; border-bottom: 2px solid rgba(178,34,52,0.3); }
.comp-table th:first-child { color: rgba(255,100,120,0.9); }
.comp-table th.feat { color: rgba(255,255,255,0.9); }
.comp-table td { padding: 13px 18px; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid rgba(13,27,42,0.07); background: var(--white); vertical-align: middle; }
.comp-table tr:nth-child(even) td { background: rgba(13,27,42,0.02); }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table td:first-child { font-weight: 500; color: var(--navy); }
.comp-table td.feat { background: rgba(178,34,52,0.04); border-left: 2px solid rgba(178,34,52,0.2); border-right: 2px solid rgba(178,34,52,0.2); }
.check-y { color: var(--green-dark); font-size: 15px; }
.check-n { color: rgba(13,27,42,0.2); font-size: 13px; }

/* DISCLAIMER */
.disc-block { background: var(--navy); padding: 34px 38px; border-left: 4px solid var(--crimson); margin-bottom: 68px; position: relative; overflow: hidden; }
.disc-block::before { content: ''; position: absolute; top: -36px; right: -36px; width: 180px; height: 180px; background: radial-gradient(circle,rgba(178,34,52,0.07),transparent 70%); }
.disc-block .disc-title { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.disc-block .disc-title::before { content: '⚠'; }
.disc-body { font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 300; line-height: 1.8; }
.disc-body p { margin-bottom: 10px; }
.disc-body p:last-child { margin-bottom: 0; }
.disc-body strong { color: rgba(255,255,255,0.82); font-weight: 500; }
.disc-body a { color: rgba(255,100,120,0.9); }

/* FAQ */
.faq-section { margin-bottom: 68px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.faq-item { background: var(--white); border-top: 3px solid var(--crimson); padding: 22px 24px; transition: box-shadow 0.2s; }
.faq-item:hover { box-shadow: 0 6px 20px rgba(13,27,42,0.08); }
.faq-q { font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; color: var(--navy); margin-bottom: 9px; display: flex; align-items: flex-start; gap: 8px; }
.faq-q-star { color: var(--crimson); flex-shrink: 0; font-size: 11px; margin-top: 3px; }
.faq-a { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.7; }
.faq-a a { color: var(--crimson); }

/* CTA BANNER */
.cta-banner { background: var(--navy); padding: 50px 56px; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; overflow: hidden; margin-bottom: 44px; flex-wrap: wrap; }
.cta-banner::before { content: '★★★★★'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 120px; letter-spacing: 20px; color: rgba(255,255,255,0.015); pointer-events: none; white-space: nowrap; }
.cta-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg,var(--crimson) 0,var(--crimson) 50px,var(--navy-light) 50px,var(--navy-light) 100px); }
.cta-banner-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--white); margin-bottom: 8px; position: relative; z-index: 1; }
.cta-banner-sub { font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 300; position: relative; z-index: 1; }
.cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--crimson); color: var(--white); font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; padding: 18px 36px; text-decoration: none; transition: background 0.2s; white-space: nowrap; box-shadow: 0 8px 24px rgba(178,34,52,0.3); position: relative; z-index: 1; }
.cta-btn:hover { background: var(--crimson-light); }
.cta-ext-note { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 8px; text-align: center; position: relative; z-index: 1; }

/* About-the-pass accordion (shares this stylesheet) */
.accordion { max-width: 820px; margin: 0 0 40px; }
.acc-item { background: var(--white); border: 1px solid rgba(13,27,42,0.08); border-left: 3px solid var(--crimson); margin-bottom: 10px; }
.acc-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc-q .acc-ico { color: var(--crimson); transition: transform 0.2s; flex-shrink: 0; }
.acc-item.open .acc-q .acc-ico { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.acc-a-inner { padding: 0 22px 20px; font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.7; }
.acc-item.open .acc-a { max-height: 500px; }

/* two-column info blocks (about-the-pass) */
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 60px; }
.info-block { background: var(--white); border-top: 3px solid var(--crimson); padding: 26px 28px; }
.info-block.no-block { border-top-color: var(--text-muted); }
.info-block h3 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); margin-bottom: 14px; }
.info-block ul { list-style: none; }
.info-block li { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid rgba(13,27,42,0.05); font-size: 14px; color: var(--text-mid); font-weight: 300; }
.info-block li:last-child { border-bottom: none; }
.info-block .li-ico { flex-shrink: 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .pass-grid, .free-grid, .faq-grid, .info-cols { grid-template-columns: 1fr; }
  .page-content { padding: 48px 24px; }
  .page-hero { padding: 48px 28px 44px; }
  .cta-banner { padding: 36px 28px; }
}