/* Lotto Orbit — Global hero/top-spacing consistency pass, 20 Oct 2026.
   Purpose: fix cramped top-edge alignment under the sticky header across
   About, FAQ, Guide, Contact and Responsible Play, while keeping each
   page's existing content and interactions intact. */

html[data-theme] body.vp-site-info {
  --orbit-global-content-width: 1280px;
  --orbit-global-gutter: clamp(16px, 2.4vw, 34px);
  --orbit-global-gap: clamp(18px, 2.2vw, 30px);
  --orbit-global-radius: clamp(20px, 2vw, 26px);
}

html[data-theme] body.vp-site-info main#mainContent {
  padding-top: clamp(24px, 2.6vw, 40px) !important;
}

html[data-theme] body.vp-site-info main#mainContent > :first-child {
  margin-top: 0 !important;
}

html[data-theme] body:is(.about-page,.faq-page,.guide-page,.contact-page).vp-site-info main#mainContent > :is(.about-hero,.faq-hero,.atlas-info-hero,.contact-hero) {
  width: min(var(--orbit-global-content-width), calc(100% - 2 * var(--orbit-global-gutter))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--orbit-global-gap) !important;
  padding: clamp(28px, 3vw, 46px) !important;
  border-radius: var(--orbit-global-radius) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

html[data-theme] body.about-page.vp-site-info main#mainContent > .about-hero {
  gap: clamp(20px, 3vw, 48px) !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
}

html[data-theme] body.about-page.vp-site-info .about-hero h1 {
  font-size: clamp(38px, 3.5vw, 58px) !important;
  line-height: 1.08 !important;
  max-width: 12.5ch !important;
}

html[data-theme] body.about-page.vp-site-info .about-hero p,
html[data-theme] body.about-page.vp-site-info .about-hero .about-lead {
  max-width: 58ch !important;
}

html[data-theme] body.about-page.vp-site-info main#mainContent > .about-stat-band,
html[data-theme] body.faq-page.vp-site-info main#mainContent > .faq-metrics,
html[data-theme] body.guide-page.vp-site-info main#mainContent > .atlas-info-metrics {
  width: min(var(--orbit-global-content-width), calc(100% - 2 * var(--orbit-global-gutter))) !important;
  max-width: none !important;
  margin: 0 auto clamp(26px, 3vw, 40px) !important;
  box-sizing: border-box !important;
}

html[data-theme] body.faq-page.vp-site-info main#mainContent > .faq-hero,
html[data-theme] body.guide-page.vp-site-info main#mainContent > .atlas-info-hero,
html[data-theme] body.contact-page.vp-site-info main#mainContent > .atlas-info-hero.contact-hero {
  align-items: center !important;
  gap: clamp(22px, 3vw, 48px) !important;
}

html[data-theme] body.faq-page.vp-site-info .faq-hero h1,
html[data-theme] body.guide-page.vp-site-info .atlas-info-hero h1,
html[data-theme] body.contact-page.vp-site-info .contact-hero h1 {
  font-size: clamp(38px, 3.9vw, 60px) !important;
  line-height: 1.08 !important;
}

html[data-theme] body.contact-page.vp-site-info main#mainContent > .atlas-contact-grid,
html[data-theme] body.contact-page.vp-site-info main#mainContent > .atlas-info-cta,
html[data-theme] body.guide-page.vp-site-info main#mainContent > :is(.atlas-section,.atlas-feature-pair,.atlas-info-cta),
html[data-theme] body.faq-page.vp-site-info main#mainContent > :is(.faq-browser,.faq-formats,.faq-last),
html[data-theme] body.about-page.vp-site-info main#mainContent > :is(.about-section,.about-split,.about-cta,.atlas-editorial) {
  width: min(var(--orbit-global-content-width), calc(100% - 2 * var(--orbit-global-gutter))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > .orbit-rp-page-heading,
html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > .orbit-rp-content-grid,
html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > .orbit-rp-help,
html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > .orbit-rp-back-links {
  width: min(var(--orbit-global-content-width), calc(100% - 2 * var(--orbit-global-gutter))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > .orbit-rp-page-heading {
  margin-top: 0 !important;
  margin-bottom: var(--orbit-global-gap) !important;
}

@media (max-width: 900px) {
  html[data-theme] body.about-page.vp-site-info .about-hero h1,
  html[data-theme] body.faq-page.vp-site-info .faq-hero h1,
  html[data-theme] body.guide-page.vp-site-info .atlas-info-hero h1,
  html[data-theme] body.contact-page.vp-site-info .contact-hero h1 {
    font-size: clamp(36px, 7.7vw, 50px) !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  html[data-theme] body.vp-site-info main#mainContent {
    padding-top: 16px !important;
  }

  html[data-theme] body:is(.about-page,.faq-page,.guide-page,.contact-page).vp-site-info main#mainContent > :is(.about-hero,.faq-hero,.atlas-info-hero,.contact-hero) {
    width: calc(100% - 24px) !important;
    padding: 22px 18px !important;
    margin-bottom: 14px !important;
    border-radius: 20px !important;
    gap: 14px !important;
  }

  html[data-theme] body.about-page.vp-site-info main#mainContent > .about-stat-band,
  html[data-theme] body.faq-page.vp-site-info main#mainContent > .faq-metrics,
  html[data-theme] body.guide-page.vp-site-info main#mainContent > .atlas-info-metrics,
  html[data-theme] body.contact-page.vp-site-info main#mainContent > .atlas-contact-grid,
  html[data-theme] body.contact-page.vp-site-info main#mainContent > .atlas-info-cta,
  html[data-theme] body.guide-page.vp-site-info main#mainContent > :is(.atlas-section,.atlas-feature-pair,.atlas-info-cta),
  html[data-theme] body.faq-page.vp-site-info main#mainContent > :is(.faq-browser,.faq-formats,.faq-last),
  html[data-theme] body.about-page.vp-site-info main#mainContent > :is(.about-section,.about-split,.about-cta,.atlas-editorial),
  html[data-theme] body.vp-site-info:not(.about-page):not(.faq-page):not(.guide-page):not(.contact-page) main#mainContent > :is(.orbit-rp-page-heading,.orbit-rp-content-grid,.orbit-rp-help,.orbit-rp-back-links) {
    width: calc(100% - 24px) !important;
  }
}

/* About hero: align its top edge and visual density with the FAQ hero.
   This deliberately supersedes an older About-only margin and narrow h1. */
html[data-theme] body.about-page.vp-site-info main#mainContent > section.container.about-hero {
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 2vw, 28px) !important;
  padding: clamp(28px, 2.5vw, 38px) !important;
  gap: clamp(20px, 2.8vw, 42px) !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero .about-eyebrow-tag {
  display: none !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero h1 {
  font-size: clamp(38px, 3.2vw, 48px) !important;
  line-height: 1.12 !important;
  max-width: none !important;
  margin: clamp(15px, 1.5vw, 21px) 0 17px !important;
  letter-spacing: -.048em !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero .about-lead {
  font-size: clamp(13px, .98vw, 14px) !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero p:not(.about-lead) {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero .hero-buttons {
  margin-top: 16px !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero .about-hero-caption {
  margin-top: 12px !important;
}
html[data-theme] body.about-page.vp-site-info .about-hero .about-orbit {
  width: min(100%, 340px) !important;
  max-width: 100% !important;
}
@media(max-width: 960px) {
  html[data-theme] body.about-page.vp-site-info main#mainContent > section.container.about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) !important;
    padding: 26px !important;
  }
}
@media(max-width: 760px) {
  html[data-theme] body.about-page.vp-site-info main#mainContent > section.container.about-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 22px 18px !important;
    margin-bottom: 14px !important;
  }
  html[data-theme] body.about-page.vp-site-info .about-hero h1 {
    font-size: clamp(34px, 8.4vw, 43px) !important;
    margin: 15px 0 14px !important;
  }
  html[data-theme] body.about-page.vp-site-info .about-hero .about-orbit {
    width: min(260px, 85%) !important;
  }
}