/* Sovereign product-page display layer — customer-facing, centered, mobile-safe */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-product-slug] {
  background:
    radial-gradient(circle at 50% 0%, rgba(216,175,98,.18), transparent 34rem),
    linear-gradient(180deg, #fffaf0 0%, #f7f8f3 42%, #eef5f1 100%);
}

body[data-product-slug] main {
  overflow: hidden;
  width: 100%;
}

body[data-product-slug] .container,
body[data-product-slug] .hero .container,
body[data-product-slug] main > .section > .container,
body[data-product-slug] footer .container {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body[data-product-slug] .hero {
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(2.75rem, 5vw, 5rem) !important;
  text-align: center;
}

body[data-product-slug] .hero h1 {
  max-width: 980px;
  margin: 1rem auto .85rem !important;
  font-size: clamp(3rem, 8vw, 7.4rem) !important;
  line-height: .9 !important;
  letter-spacing: -.075em !important;
  text-align: center !important;
}

body[data-product-slug] .hero p,
body[data-product-slug] .hero p[data-product-description] {
  max-width: 920px !important;
  margin: 0 auto 1.6rem !important;
  font-size: clamp(1.05rem, 2vw, 1.65rem) !important;
  line-height: 1.55 !important;
  color: #33454d !important;
  text-align: center !important;
}

body[data-product-slug] .price-line {
  text-align: center !important;
  margin: 1rem auto 0 !important;
}

body[data-product-slug] .ribbon {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .85rem !important;
  margin: 1.35rem auto 0 !important;
  width: 100% !important;
}

body[data-product-slug] .btn,
body[data-product-slug] .ribbon .btn,
body[data-product-slug] .float-path {
  min-height: 3.15rem !important;
  padding: .9rem 1.25rem !important;
  border-radius: 999px !important;
  font-size: .95rem !important;
  font-weight: 950 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

body[data-product-slug] .section {
  padding: clamp(2.5rem, 6vw, 6.5rem) 0 !important;
}

body[data-product-slug] .dark-panel,
body[data-product-slug] .command-card {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: clamp(2rem, 5vw, 4.5rem) !important;
  border-radius: 2rem !important;
  background:
    radial-gradient(circle at top left, rgba(216,175,98,.22), transparent 28rem),
    linear-gradient(135deg, #07141a 0%, #0b2d38 58%, #061017 100%) !important;
  border: 1px solid rgba(216,175,98,.28) !important;
  box-shadow: 0 2.2rem 5rem rgba(7,20,26,.22) !important;
  color: #fff !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

body[data-product-slug] .dark-panel > .kicker,
body[data-product-slug] .command-card > .kicker,
body[data-product-slug] .section > .container > .kicker {
  display: inline-flex !important;
  width: auto !important;
  margin-bottom: .8rem !important;
  padding: .42rem .72rem !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.13) !important;
  color: #f7e8c8 !important;
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body[data-product-slug] .dark-panel h2,
body[data-product-slug] .command-card h2,
body[data-product-slug] .section > .container > h2 {
  max-width: 940px !important;
  margin: .35rem 0 1.1rem !important;
  font-size: clamp(2rem, 5vw, 4.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-align: left !important;
}

body[data-product-slug] .section > .container > h2 {
  color: #102331 !important;
}

body[data-product-slug] .dark-panel > p,
body[data-product-slug] .command-card > p,
body[data-product-slug] .related-routes-intro {
  max-width: 980px !important;
  margin: 0 0 2rem !important;
  color: #dcebe8 !important;
  font-size: clamp(1.04rem, 1.6vw, 1.38rem) !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

body[data-product-slug] .related-routes-intro {
  color: #40545d !important;
  margin: 0 auto 1.4rem !important;
  text-align: center !important;
}

body[data-product-slug] .grid,
body[data-product-slug] .grid.g3,
body[data-product-slug] .grid.g4,
body[data-product-slug] .sovereign-summary-grid {
  display: grid !important;
  gap: 1.2rem !important;
  justify-content: center !important;
}

body[data-product-slug] .grid.g3,
body[data-product-slug] .sovereign-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-product-slug] .grid.g4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-product-slug] .card,
body[data-product-slug] a.card {
  padding: clamp(1.25rem, 2.5vw, 2.1rem) !important;
  border-radius: 1.45rem !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,36,48,.09) !important;
  box-shadow: 0 1.25rem 3rem rgba(16,35,49,.08) !important;
  text-align: left !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

body[data-product-slug] .dark-panel .card,
body[data-product-slug] .command-card .card {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

body[data-product-slug] .card h3 {
  margin: 0 0 .72rem !important;
  color: #102331 !important;
  font-size: clamp(1.14rem, 1.7vw, 1.55rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
}

body[data-product-slug] .dark-panel .card h3,
body[data-product-slug] .command-card .card h3 {
  color: #f7e8c8 !important;
}

body[data-product-slug] .card p,
body[data-product-slug] a.card p {
  max-width: none !important;
  margin: 0 0 .95rem !important;
  color: #4f6068 !important;
  font-size: clamp(.96rem, 1.18vw, 1.13rem) !important;
  line-height: 1.68 !important;
  text-align: left !important;
}

body[data-product-slug] .dark-panel .card p,
body[data-product-slug] .command-card .card p {
  color: #dcebe8 !important;
}

body[data-product-slug] .related-routes-section .container > .kicker,
body[data-product-slug] .related-routes-section h2 {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-product-slug] .related-routes-grid {
  align-items: stretch !important;
}

body[data-product-slug] .related-route-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 100% !important;
}

body[data-product-slug] .related-price {
  margin-top: auto !important;
  margin-bottom: 1rem !important;
}

body[data-product-slug] .related-route-button {
  width: 100% !important;
  margin-top: .4rem !important;
}

body[data-product-slug] footer.footer,
body[data-product-slug] .footer {
  width: 100% !important;
  overflow: hidden !important;
}

body[data-product-slug] .footer-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}

body[data-product-slug] .footer-grid > * {
  min-width: 0 !important;
}

body[data-product-slug] main > .section:nth-of-type(2) .dark-panel {
  text-align: center !important;
  max-width: 920px !important;
}

body[data-product-slug] main > .section:nth-of-type(2) .dark-panel h2,
body[data-product-slug] main > .section:nth-of-type(2) .dark-panel p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-product-slug] .flowline {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: .9rem !important;
}

body[data-product-slug] .flow-step {
  min-height: 8rem !important;
  padding: 1.15rem !important;
  border-radius: 1.2rem !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  text-align: left !important;
}

body[data-product-slug] .flow-step b {
  display: block !important;
  margin-bottom: .4rem !important;
  color: #f7e8c8 !important;
  font-size: 1rem !important;
}

body[data-product-slug] .flow-step span {
  color: #dcebe8 !important;
  line-height: 1.45 !important;
}

body[data-product-slug] .source-page,
body[data-product-slug] .source-hero-panel,
body[data-product-slug] .source-stack,
body[data-product-slug] .source-block,
body[data-product-slug] .source-framework-grid {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-product-slug] .container,
  body[data-product-slug] .hero .container,
  body[data-product-slug] main > .section > .container,
  body[data-product-slug] footer .container {
    width: min(100%, calc(100vw - 28px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-product-slug] .grid.g3,
  body[data-product-slug] .grid.g4,
  body[data-product-slug] .sovereign-summary-grid,
  body[data-product-slug] .flowline,
  body[data-product-slug] .footer-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-product-slug] .dark-panel,
  body[data-product-slug] .command-card {
    border-radius: 1.45rem !important;
    padding: 1.55rem !important;
    text-align: center !important;
  }

  body[data-product-slug] .dark-panel h2,
  body[data-product-slug] .command-card h2,
  body[data-product-slug] .dark-panel p,
  body[data-product-slug] .command-card p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-product-slug] .card,
  body[data-product-slug] a.card {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-product-slug] .card h3,
  body[data-product-slug] .card p,
  body[data-product-slug] a.card p {
    text-align: center !important;
  }

  body[data-product-slug] .ribbon .btn,
  body[data-product-slug] .btn {
    width: 100% !important;
    max-width: 340px !important;
  }

  body[data-product-slug] .footer-grid > div {
    text-align: center !important;
  }

  body[data-product-slug] .footer-grid a {
    justify-content: center !important;
    text-align: center !important;
  }
}