/* PingStar visual refresh — shared, presentation-only rules. */
:root {
  --refresh-ink: #142537;
  --refresh-navy: #0d1929;
  --refresh-navy-2: #152b3e;
  --refresh-muted: #617386;
  --refresh-paper: #f4f7f8;
  --refresh-line: #dce5e8;
  --refresh-gold: #e8bc6e;
  --refresh-teal: #80ddd1;
  --refresh-shadow: 0 18px 50px rgba(15, 39, 57, .09);
}

html { scroll-padding-top: 94px; }
body { letter-spacing: -.006em; }
.container { width: min(1240px, calc(100% - 48px)) !important; }

/* A quieter, more consistent site frame. */
.site-header {
  background: rgba(10, 21, 35, .96) !important;
  border-bottom: 1px solid rgba(232, 188, 110, .28) !important;
  box-shadow: 0 12px 36px rgba(6, 17, 28, .15) !important;
}
.header-inner { min-height: 76px; gap: 20px; }
.brand strong { letter-spacing: -.025em; }
.brand small { color: #c1ad89; letter-spacing: .12em; }
.nav { gap: 4px; padding: 5px; border: 1px solid rgba(161, 183, 200, .17); border-radius: 999px; background: rgba(255, 255, 255, .045); }
.nav a { padding: 9px 15px; border-radius: 999px; color: #d9e2e8; transition: background .2s, color .2s; }
.nav a:hover { color: white; background: rgba(255, 255, 255, .1); }
.nav a[aria-current="page"] { color: #102437; background: linear-gradient(120deg, #81dfd3, #e4ca91); box-shadow: 0 6px 20px rgba(79, 205, 188, .2); }
.button { border-radius: 13px; min-height: 48px; transition: transform .2s, box-shadow .2s, background .2s; }
.button-primary { color: #192635 !important; border-color: #e8c17c !important; background: linear-gradient(120deg, #f7da9d, #e8b766) !important; box-shadow: 0 12px 28px rgba(148, 101, 30, .17) !important; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(148, 101, 30, .24) !important; }
.button-outline { border-color: rgba(213, 225, 231, .53) !important; background: rgba(255, 255, 255, .07) !important; color: #f9faf8 !important; }
.button-outline:hover { background: rgba(255, 255, 255, .14) !important; }
.section-kicker { color: #a06d2b !important; letter-spacing: .02em; }
.section-heading h1, .section-heading h2 { letter-spacing: -.04em; line-height: 1.35; }

/* Landing page: a clear focal point with the existing brand artwork. */
.home-hero {
  background-image: linear-gradient(90deg, rgba(8, 18, 31, .66), rgba(9, 20, 33, .83) 53%, rgba(8, 18, 31, .9)), url('/assets/network-hero.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(232, 188, 110, .23);
}
.home-hero-inner { min-height: 610px; gap: 44px; }
.home-hero-copy h1 { font-size: clamp(43px, 5.15vw, 75px) !important; line-height: 1.19 !important; letter-spacing: -.055em; text-wrap: balance; }
.home-hero-copy h1 em { color: #f5d18c !important; font-style: normal; }
.home-hero-copy > p { color: #d6e0e7 !important; max-width: 650px; font-size: 17px; line-height: 2; }
.home-hero .eyebrow { background: rgba(232, 188, 110, .1); border: 1px solid rgba(232, 188, 110, .38); color: #f6dca5; }
.home-hero .hero-actions { gap: 12px; }
.home-hero .hero-actions .button { min-height: 54px; padding-inline: 22px; }
.home-hero-visual { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }
.trust-rail { border-bottom: 1px solid var(--refresh-line) !important; box-shadow: 0 12px 30px rgba(15, 39, 57, .05) !important; }
.home-advantage, .home-game-section, .home-plan-section { background-color: var(--refresh-paper) !important; }
.home-signal { background-color: #ecf2f3 !important; border-radius: 30px; margin-block: 48px; padding: 42px !important; border: 1px solid #dbe7e7; box-shadow: var(--refresh-shadow); }
.home-use-section { background: linear-gradient(135deg, #0e2030, #172f40) !important; }
.home-magazine-section { background: #eaf1f2 !important; }
.featured-game, .featured-plan, .featured-article {
  border-radius: 20px !important;
  box-shadow: 0 15px 38px rgba(17, 42, 57, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.featured-game:hover, .featured-plan:hover, .featured-article:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(17, 42, 57, .14) !important; }

/* Store header and purchase information. */
.page-intro.store-intro {
  min-height: 345px !important;
  background: radial-gradient(circle at 19% 42%, rgba(225, 179, 95, .2), transparent 27%), radial-gradient(circle at 78% 18%, rgba(82, 184, 179, .14), transparent 35%), linear-gradient(115deg, #0e1b2b, #172d40) !important;
  border-bottom: 1px solid rgba(232, 188, 110, .3);
}
.store-intro .page-intro-inner { gap: 48px; }
.store-intro h1 { font-size: clamp(39px, 4.25vw, 62px) !important; line-height: 1.27 !important; letter-spacing: -.05em; text-wrap: balance; }
.store-intro p { max-width: 700px; color: #d5e0e7 !important; }
.store-intro .section-kicker { color: #f1cd8a !important; }
.store-intro-visual { border: 1px solid rgba(232, 188, 110, .32) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: 0 24px 45px rgba(0, 0, 0, .2) !important; backdrop-filter: blur(10px); }
.store-intro-visual img { filter: drop-shadow(0 12px 30px rgba(240, 172, 75, .22)); }
.purchase-confidence { background: #fff !important; border-bottom: 1px solid var(--refresh-line) !important; box-shadow: 0 8px 25px rgba(17, 42, 57, .045) !important; }
.purchase-confidence .container { gap: 0; }
.purchase-confidence .container > div { padding-block: 19px !important; }

/* Put the products before the long technical explanation. */
#plans { display: flex; flex-direction: column; padding-block: 70px 88px !important; }
#plans > .section-heading { order: 0; }
#plans > .filters { order: 1; }
#plans > #catalogMessage { order: 2; }
#plans > #plansGrid { order: 3; }
#plans > .plan-clarity { order: 4; margin-top: 70px; }
#plans > .plan-help-note { order: 5; }
#plans .section-heading { margin-bottom: 25px; }
#plans .section-heading h2 { color: var(--refresh-ink); font-size: clamp(32px, 3.5vw, 49px); }
#plans .section-heading p { color: var(--refresh-muted); }
#familyFilters { gap: 9px; margin-bottom: 27px; }
#familyFilters label, #familyFilters button { border-radius: 11px !important; border-color: #d7e1e4 !important; background: #fff !important; box-shadow: 0 5px 14px rgba(17, 42, 57, .04); }
#familyFilters label:has(input:checked), #familyFilters button[aria-pressed="true"] { color: #fff !important; border-color: #142d3d !important; background: #142d3d !important; }
.plans-grid { gap: 20px !important; align-items: stretch; }
.plan-card {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid #dce5e8 !important;
  border-radius: 21px !important;
  padding: 28px !important;
  box-shadow: 0 12px 34px rgba(16, 40, 56, .075) !important;
  color: var(--refresh-ink) !important;
}
.plan-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--refresh-gold), var(--refresh-teal)); }
.plan-card:hover { transform: translateY(-4px); border-color: #a9d5d1 !important; box-shadow: 0 24px 50px rgba(15, 48, 62, .14) !important; }
.plan-card .category { align-self: flex-start; background: #e9f7f4 !important; color: #22655f !important; font-weight: 800; border-radius: 999px !important; }
.plan-card h3 { color: #152a3b !important; font-size: 21px !important; margin-top: 17px !important; }
.plan-card > p { color: #5f7381 !important; font-size: 13px; line-height: 1.9; }
.plan-features { border-color: #e7edef !important; gap: 5px !important; }
.plan-features li { color: #43596a !important; font-size: 12px; line-height: 1.8; }
.plan-stats { margin-top: auto; margin-bottom: 16px !important; }
.plan-stats span { background: #f1f5f6 !important; color: #355064 !important; border: 1px solid #e1eaec !important; border-radius: 9px !important; }
.plan-bottom { border-top: 1px solid #e5ebed !important; padding-top: 20px !important; }
.plan-price strong { color: #13283b !important; font-size: 29px !important; line-height: 1.1; }
.plan-price small { color: #6d7e89 !important; }
.plan-clarity { gap: 16px !important; }
.plan-clarity article { border-radius: 17px !important; background: #172c3d !important; border: 1px solid rgba(232, 188, 110, .23) !important; box-shadow: 0 14px 30px rgba(14, 36, 54, .12) !important; }
.plan-clarity article strong { color: #f6d79d !important; }
.plan-clarity article p { color: #d7e1e6 !important; }
.plan-help-note { color: #657786 !important; }

/* Account, FAQ, and checkout use the same card language. */
.account-section { background: #eaf1f3 !important; border-color: #dbe5e9 !important; }
.account-section .section-heading h2, .help-section .section-heading h2, .purchase-faq h2 { color: var(--refresh-ink) !important; }
.account-guest, .account-summary, .account-card, .purchase-faq details, .help-section article {
  border-radius: 18px !important;
  border-color: #dce6e9 !important;
  box-shadow: 0 12px 32px rgba(15, 39, 57, .07) !important;
}
.account-card { background: #fff !important; }
.service-status { background: #e6f6ee !important; color: #186947 !important; }
.purchase-faq { background: #f5f8f8 !important; }
.checkout-page { max-width: 1040px !important; padding-block: 65px 100px !important; }
.checkout-page .section-heading h1 { color: var(--refresh-ink); font-size: clamp(31px, 3vw, 44px); }
.checkout-page-card { border: 1px solid #dbe6e8 !important; border-radius: 22px !important; box-shadow: var(--refresh-shadow) !important; }
.checkout-page .checkout-plan { border: 1px solid #dce7e9 !important; border-radius: 13px !important; background: #f3f7f7 !important; }
.checkout-page .method { border-radius: 13px !important; border: 1px solid #dae5e7 !important; background: #f9fbfb !important; transition: border-color .2s, background .2s, box-shadow .2s; }
.checkout-page .method:has(input:checked) { border-color: #4caf9f !important; background: #eaf8f4 !important; box-shadow: 0 0 0 3px rgba(77, 175, 159, .13); }
.checkout-page .method input { accent-color: #278c7b !important; }
.checkout-page .field input { border-radius: 11px !important; border-color: #d3e0e4 !important; }
.footer { background: #0b1b2b !important; border-top: 1px solid rgba(232, 188, 110, .28) !important; }

@media (max-width: 960px) {
  .container { width: min(100% - 36px, 1240px) !important; }
  .nav { gap: 0; }
  .nav a { padding-inline: 11px; }
  .home-hero-inner { min-height: 560px; }
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 77px; }
  .container { width: calc(100% - 30px) !important; }
  .header-inner { min-height: 68px; }
  .mobile-menu summary { border-radius: 11px !important; border-color: rgba(232, 188, 110, .55) !important; }
  .home-hero { background-image: linear-gradient(180deg, rgba(9, 20, 33, .84), rgba(9, 20, 33, .86)), url('/assets/network-hero-mobile.webp') !important; }
  .home-hero-inner { min-height: 0; padding-block: 78px 58px !important; gap: 20px; }
  .home-hero-copy h1 { font-size: clamp(37px, 9.8vw, 50px) !important; }
  .home-hero-copy > p { font-size: 14px; line-height: 1.95; }
  .home-hero .hero-actions .button { width: 100%; }
  .home-hero-visual { transform: scale(.9); transform-origin: center; margin-block: -22px; }
  .home-signal { margin-block: 26px; padding: 26px 18px !important; border-radius: 20px; }
  .page-intro.store-intro { min-height: 0 !important; padding-block: 53px 60px; }
  .store-intro h1 { font-size: clamp(34px, 9vw, 45px) !important; }
  .store-intro p { font-size: 13px; }
  .store-intro-visual { display: none !important; }
  .store-intro .intro-actions { flex-wrap: wrap; }
  .store-intro .intro-actions .button { flex: 1 1 160px; }
  .purchase-confidence { display: none !important; }
  #plans { padding-block: 47px 60px !important; }
  #plans .section-heading { gap: 10px; margin-bottom: 18px; }
  #plans .section-heading h2 { font-size: 31px; }
  #familyFilters { display: flex; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 9px; margin-bottom: 12px; scroll-snap-type: x proximity; }
  #familyFilters > * { white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start; }
  .plans-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .plan-card { padding: 22px !important; }
  .plan-card h3 { font-size: 19px !important; }
  .plan-features { margin-bottom: 13px !important; }
  .plan-stats span { font-size: 11px !important; }
  .plan-price strong { font-size: 27px !important; }
  #plans > .plan-clarity { margin-top: 46px; }
  .plan-clarity { grid-template-columns: 1fr !important; }
  .plan-clarity article { padding: 19px !important; }
  .checkout-page { padding-block: 38px 75px !important; }
  .checkout-page-card { padding: 21px !important; }
  .checkout-page .section-heading h1 { font-size: 29px; }
}
@media (max-width: 420px) {
  .plan-bottom { align-items: stretch !important; }
  .plan-bottom .button { min-width: 0; padding-inline: 15px; }
  .home-hero-copy h1 { font-size: 37px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .featured-game, .featured-plan, .featured-article, .plan-card { transition: none !important; }
  .button:hover, .featured-game:hover, .featured-plan:hover, .featured-article:hover, .plan-card:hover { transform: none !important; }
}