:root {
  color-scheme: light;
  --site-ink: #102033;
  --site-muted: #5e7185;
  --site-blue: #001f3f;
  --site-line: #d9e4ed;
  --site-soft: #eef5fa;
  --site-panel: #ffffff;
  --site-orange: #ff8200;
  --site-orange-soft: #fff3e4;
  --site-shadow: 0 10px 28px rgba(16, 32, 51, .08);
  --site-radius: 8px;
  --site-max: 1180px;
}

body.public-site {
  min-width: 0 !important;
  overflow-x: hidden !important;
  background: var(--site-soft) !important;
  color: var(--site-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
}

body.public-site *,
body.public-site *::before,
body.public-site *::after {
  box-sizing: border-box;
}

body.public-site :where(h1, h2, h3, h4, p, ul, ol) {
  margin-top: 0;
}

body.public-site :where(h1, h2, h3, h4, strong, b, label, summary) {
  color: var(--site-ink) !important;
  letter-spacing: 0 !important;
}

body.public-site :where(p, li, small, span, em) {
  color: var(--site-muted) !important;
}

body.public-site h1 {
  font-size: clamp(32px, 5vw, 54px) !important;
  line-height: 1.03 !important;
}

body.public-site h2 {
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.12 !important;
}

body.public-site h3 {
  font-size: 18px !important;
  line-height: 1.18 !important;
}

body.public-site img {
  max-width: 100%;
}

body.public-site a {
  color: inherit;
}

body.public-site .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: 72px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--site-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 4px 18px rgba(16, 32, 51, .05) !important;
}

.public-header-inner,
body.public-site > .topbar:not([data-public-header]) {
  width: min(100%, var(--site-max));
  min-height: 72px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.public-site .brand,
body.public-site .public-brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

body.public-site .brand img,
body.public-site .public-brand-logo,
body.public-site .topbar img {
  width: auto !important;
  max-width: 178px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

body.public-site .public-brand-logo-dark-mode {
  display: none !important;
}

body.public-site .public-brand-logo-light-mode {
  display: block !important;
}

body.public-site .site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 0 !important;
  color: var(--site-ink) !important;
}

body.public-site .site-nav > a,
body.public-site .site-nav > details > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--site-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

body.public-site .site-nav > a:hover,
body.public-site .site-nav > a[aria-current="page"],
body.public-site .site-nav > details[open] > summary,
body.public-site .site-nav > details > summary:hover {
  border-color: #ffd2a0 !important;
  background: var(--site-orange-soft) !important;
  color: var(--site-ink) !important;
}

body.public-site .site-nav-cta,
body.public-site .button.primary,
body.public-site button.primary {
  border-color: var(--site-orange) !important;
  background: var(--site-orange) !important;
  color: #071827 !important;
  box-shadow: none !important;
}

body.public-site .site-nav-login,
body.public-site .button.secondary,
body.public-site .button.ghost {
  border-color: var(--site-line) !important;
  background: #fff !important;
  color: var(--site-ink) !important;
  box-shadow: none !important;
}

body.public-site .button,
body.public-site button,
body.public-site input,
body.public-site select,
body.public-site textarea {
  font: inherit !important;
}

body.public-site .button,
body.public-site button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

body.public-site input,
body.public-site select,
body.public-site textarea {
  min-height: 36px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--site-ink) !important;
}

body.public-site .language-select {
  width: 70px !important;
  padding: 0 8px !important;
  font-weight: 750 !important;
}

body.public-site .nav-dropdown,
body.public-site .public-settings-menu {
  position: relative !important;
}

body.public-site .nav-dropdown-panel,
body.public-site .public-settings-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  gap: 6px !important;
  width: min(340px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
  box-shadow: var(--site-shadow) !important;
}

body.public-site .nav-dropdown-panel a {
  display: grid !important;
  gap: 3px !important;
  padding: 9px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
}

body.public-site .nav-dropdown-panel a:hover {
  background: var(--site-soft) !important;
}

body.public-site .site-menu-toggle {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--site-line) !important;
  background: #fff !important;
}

body.public-site .site-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  border-radius: 999px;
  background: var(--site-ink);
}

body.public-site main {
  width: 100%;
}

body.public-site .site-section,
body.public-site .platform-band,
body.public-site .branch-band,
body.public-site .site-cta,
body.public-site .band,
body.public-site .package-detail-content {
  width: min(100% - 32px, var(--site-max)) !important;
  margin: 0 auto !important;
}

body.public-site .site-section,
body.public-site .band,
body.public-site .package-detail-content {
  padding: 42px 0 !important;
}

body.public-site .site-section-heading,
body.public-site .package-section-head,
body.public-site .package-composer-head {
  max-width: 760px !important;
  margin-bottom: 18px !important;
}

body.public-site .site-kicker,
body.public-site .eyebrow {
  color: #b55a00 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

body.public-site.public-home .site-hero {
  position: relative !important;
  min-height: clamp(520px, 72vh, 760px) !important;
  display: grid !important;
  align-items: end !important;
  overflow: hidden !important;
  background: #dfe9f0 !important;
}

body.public-site.public-home .site-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}

body.public-site.public-home .site-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.91) 37%, rgba(255,255,255,.55) 67%, rgba(255,255,255,.18) 100%),
    linear-gradient(180deg, rgba(238,245,250,.08), rgba(238,245,250,.76)) !important;
}

body.public-site.public-home .site-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 32px, var(--site-max)) !important;
  margin: 0 auto !important;
  padding: 96px 0 52px !important;
  max-width: none !important;
  text-shadow: none !important;
}

body.public-site.public-home .site-hero-content > * {
  max-width: 610px !important;
}

body.public-site.public-home .site-hero :where(h1, .site-hero-tagline) {
  color: var(--site-ink) !important;
}

body.public-site.public-home .site-hero .site-hero-copy,
body.public-site.public-home .site-hero .site-hero-points li {
  color: #43586c !important;
}

body.public-site.public-home .site-hero .site-kicker {
  color: #b55a00 !important;
}

body.public-site .site-hero-actions,
body.public-site .hero-actions,
body.public-site .site-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

body.public-site .site-hero-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  list-style: none !important;
}

body.public-site .site-hero-points li {
  padding: 6px 9px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
}

body.public-site.public-home .site-hero-points li {
  padding: 0 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

body.public-site .audience-route-grid,
body.public-site .capability-list,
body.public-site .pricing-plan-grid,
body.public-site .package-choice-row,
body.public-site .package-composer-layout,
body.public-site .package-price-overview {
  display: grid !important;
  gap: 12px !important;
}

body.public-site .audience-route-grid,
body.public-site .capability-list,
body.public-site .pricing-plan-grid,
body.public-site .package-price-overview {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

body.public-site .audience-route,
body.public-site .capability-list article,
body.public-site .pricing-card,
body.public-site .package-card,
body.public-site .package-composer,
body.public-site .package-composer-summary,
body.public-site .package-detail-hero,
body.public-site .content-card,
body.public-site .module-card,
body.public-site .package-price-overview article {
  min-width: 0 !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
  color: var(--site-ink) !important;
  box-shadow: none !important;
}

body.public-site .audience-route,
body.public-site .capability-list article,
body.public-site .pricing-card,
body.public-site .package-card,
body.public-site .content-card,
body.public-site .module-card,
body.public-site .package-price-overview article {
  padding: 16px !important;
}

body.public-site .capability-list article,
body.public-site .pricing-card,
body.public-site .package-card,
body.public-site .content-card,
body.public-site .module-card,
body.public-site .package-price-overview article {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.public-site .capability-list article > *,
body.public-site .pricing-card > *,
body.public-site .package-card > *,
body.public-site .content-card > *,
body.public-site .module-card > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.public-site .audience-route {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

body.public-site .audience-route-icon {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--site-orange-soft) !important;
  color: var(--site-orange) !important;
}

body.public-site .audience-route-icon svg,
body.public-site .button svg {
  width: 18px !important;
  height: 18px !important;
}

body.public-site .platform-band,
body.public-site .branch-band,
body.public-site .site-cta {
  margin-top: 22px !important;
  padding: 26px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
  color: var(--site-ink) !important;
}

body.public-site .platform-band-inner,
body.public-site .branch-band-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.public-site .process-steps {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.public-site .process-steps article,
body.public-site .process-steps li {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 11px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
  color: var(--site-ink) !important;
}

body.public-site .process-steps article h3 {
  margin: 0 0 3px !important;
  color: #172033 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
}

body.public-site .process-steps article p,
body.public-site .process-steps li p {
  margin: 0 !important;
  color: #475467 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

body.public-site .process-steps .process-step-icon,
body.public-site .process-steps li > span {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: var(--site-orange) !important;
  color: #071827 !important;
  font-weight: 800 !important;
}

body.public-site .process-steps .process-step-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2.2 !important;
}

body.public-site .package-detail-hero {
  width: min(100% - 32px, var(--site-max)) !important;
  margin: 24px auto 0 !important;
  padding: 28px !important;
}

body.public-site .package-composer {
  padding: 18px !important;
}

body.public-site .package-composer-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
  align-items: start !important;
}

body.public-site .package-billing-choice,
body.public-site .package-choice-row {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

body.public-site .package-billing-choice {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body.public-site .package-choice-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

body.public-site .package-billing-choice label,
body.public-site .package-choice-row label,
body.public-site .package-module-options label,
body.public-site .package-location-options label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: start !important;
  padding: 10px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
}

body.public-site .package-choice-row input:checked + span,
body.public-site .package-billing-choice input:checked + span {
  color: var(--site-ink) !important;
}

body.public-site .package-composer-controls details {
  margin-bottom: 9px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: #fff !important;
}

body.public-site .package-composer-controls summary {
  min-height: 42px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
}

body.public-site .package-composer-field,
body.public-site .package-module-options,
body.public-site .package-location-options {
  display: grid !important;
  gap: 8px !important;
  padding: 0 12px 12px !important;
}

body.public-site .package-composer-summary {
  position: sticky !important;
  top: 92px !important;
  padding: 16px !important;
}

body.public-site .package-composer-total strong {
  color: var(--site-ink) !important;
  font-size: 28px !important;
}

body.public-site footer,
body.public-site [data-public-footer] {
  width: min(100% - 32px, var(--site-max)) !important;
  margin: 28px auto !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--site-line) !important;
  color: var(--site-muted) !important;
}

@media (max-width: 980px) {
  .public-header-inner,
  body.public-site > .topbar:not([data-public-header]) {
    min-height: 64px;
    padding: 8px 12px;
  }

  body.public-site .brand img,
  body.public-site .public-brand-logo,
  body.public-site .topbar img {
    max-width: 150px !important;
    max-height: 42px !important;
  }

  body.public-site .site-menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
  }

  body.public-site .site-nav {
    position: absolute !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    display: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid var(--site-line) !important;
    border-radius: var(--site-radius) !important;
    background: #fff !important;
    box-shadow: var(--site-shadow) !important;
  }

  body.public-site .topbar.nav-open .site-nav,
  body.public-site .topbar.menu-open .site-nav,
  body.public-site .topbar[data-menu-open="true"] .site-nav {
    display: flex !important;
  }

  body.public-site .site-nav > a,
  body.public-site .site-nav > details > summary {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  body.public-site .nav-dropdown-panel,
  body.public-site .public-settings-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-shadow: none !important;
  }

  body.public-site.public-home .site-hero {
    min-height: auto !important;
  }

  body.public-site.public-home .site-hero-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;
  }

  body.public-site.public-home .site-hero-content {
    padding: 92px 0 34px !important;
  }

  body.public-site .platform-band-inner,
  body.public-site .branch-band-inner,
  body.public-site .package-composer-layout {
    grid-template-columns: 1fr !important;
  }

  body.public-site .package-composer-summary {
    position: static !important;
  }
}

@media (max-width: 560px) {
  body.public-site {
    font-size: 13px !important;
  }

  body.public-site .site-section,
  body.public-site .band,
  body.public-site .package-detail-content {
    width: min(100% - 20px, var(--site-max)) !important;
    padding: 28px 0 !important;
  }

  body.public-site .platform-band,
  body.public-site .branch-band,
  body.public-site .site-cta,
  body.public-site .package-detail-hero,
  body.public-site .package-composer {
    width: min(100% - 20px, var(--site-max)) !important;
    padding: 16px !important;
  }

  body.public-site .site-hero-actions,
  body.public-site .hero-actions,
  body.public-site .site-cta-actions,
  body.public-site .package-billing-choice {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.public-site .button {
    width: 100% !important;
  }
}

@media (max-width: 980px) {
  html body.public-site header.topbar:not(.nav-open):not(.menu-open):not([data-menu-open="true"]) .site-nav {
    display: none !important;
  }

  html body.public-site header.topbar.nav-open .site-nav,
  html body.public-site header.topbar.menu-open .site-nav,
  html body.public-site header.topbar[data-menu-open="true"] .site-nav {
    display: flex !important;
  }
}

/* Live public readability guard: prevents older dark-section styles from leaking into light cards. */
html body.public-site {
  --site-ink: #102033;
  --site-muted: #526276;
  --site-soft: #f7fafc;
  --site-line: #d8e2ee;
  color: var(--site-ink) !important;
}

html body.public-site :where(.audience-route, .card, .feature-card, .service-card, .module-card, .pricing-card, .package-card, .package-composer-card, .workflow-list li, .flow-steps li, .site-card, .branch-card, .route-card, .stat-card, .info-card) {
  background: #fff !important;
  color: var(--site-ink) !important;
  border-color: var(--site-line) !important;
}

html body.public-site :where(.audience-route, .card, .feature-card, .service-card, .module-card, .pricing-card, .package-card, .package-composer-card, .workflow-list li, .flow-steps li, .site-card, .branch-card, .route-card, .stat-card, .info-card) :where(h1, h2, h3, h4, strong, b, span, label, summary) {
  color: var(--site-ink) !important;
}

html body.public-site :where(.audience-route, .card, .feature-card, .service-card, .module-card, .pricing-card, .package-card, .package-composer-card, .workflow-list li, .flow-steps li, .site-card, .branch-card, .route-card, .stat-card, .info-card) :where(p, small, em, li) {
  color: var(--site-muted) !important;
}

html body.public-site :where(.workflow-list li, .flow-steps li) > span:first-child,
html body.public-site :where(.step-number, .number-badge) {
  background: #ff8200 !important;
  color: #071a2f !important;
}

html body.public-site.public-home .site-hero-bullets li,
html body.public-site.public-home .site-hero :where(.pill, .tag, .chip) {
  background: rgba(255, 255, 255, .92) !important;
  color: #102033 !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
}

html body.public-site :where(.platform-band, .branch-band, .site-cta, .package-detail-hero) :where(.button.secondary, .button.ghost) {
  background: #fff !important;
  color: #102033 !important;
  border-color: rgba(255, 255, 255, .72) !important;
}

html body.public-site :where(.platform-band, .branch-band, .site-cta, .package-detail-hero) :where(.text-link, a:not(.button)) {
  color: #ff9d36 !important;
}

@media (max-width: 980px) {
  html body.public-site.public-home .site-hero :where(.site-kicker, h1, .site-hero-tagline, .site-hero-copy) {
    color: #102033 !important;
    text-shadow: none !important;
  }

  html body.public-site.public-home .site-hero-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92)) !important;
  }
}
