/* Homepage preview tokens. Other page designs retain their existing palette. */
:root {
  color-scheme: light;
  --odx-bg: #f7f8fa;
  --odx-surface: #ffffff;
  --odx-surface-raised: #ffffff;
  --odx-soft: #eef1f5;
  --odx-ink: #18212f;
  --odx-muted: #536174;
  --odx-subtle: #606d7f;
  --odx-border: #d8dee7;
  --odx-accent: #b84120;
  --odx-on-accent: #ffffff;
  --odx-success: #176a4d;
  --odx-shadow: 0 16px 50px rgba(24, 33, 47, .08), 0 2px 6px rgba(24, 33, 47, .035);
  --odx-accent-hover: #9d3518;
  --odx-accent-soft: #fff0e9;
  --odx-control-border: #7d8999;
  --odx-focus: #155bc1;
  --odx-header: rgba(255, 255, 255, .94);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --odx-bg: #11161e;
  --odx-surface: #171e29;
  --odx-surface-raised: #1e2835;
  --odx-soft: #202a38;
  --odx-ink: #f4f7fb;
  --odx-muted: #bac4d2;
  --odx-subtle: #a1adbd;
  --odx-border: #394553;
  --odx-accent: #ff9773;
  --odx-on-accent: #24140e;
  --odx-success: #6cd6a7;
  --odx-shadow: 0 18px 60px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .14);
  --odx-accent-hover: #ffad90;
  --odx-accent-soft: #38261f;
  --odx-control-border: #748197;
  --odx-focus: #8dbbff;
  --odx-header: rgba(17, 22, 30, .95);
}

:is(.homepage-preview,.site-branded) {
  --bg: var(--odx-bg);
  --bg-card: var(--odx-surface);
  --border: var(--odx-border);
  --accent: var(--odx-accent);
  --accent-lt: var(--odx-accent-hover);
  --accent-dim: var(--odx-accent-soft);
  --text: var(--odx-ink);
  --text-2: var(--odx-ink);
  --muted: var(--odx-muted);
  --muted-lt: var(--odx-subtle);
  --shadow-sm: var(--odx-shadow);
  --shadow-md: var(--odx-shadow);
  --shadow-lg: var(--odx-shadow);
  background: var(--odx-bg);
  color: var(--odx-ink);
}

:is(.homepage-preview,.site-branded) [hidden] { display: none !important; }
[data-theme-updating] :is(.homepage-preview,.site-branded) *,
[data-theme-updating] :is(.homepage-preview,.site-branded) *::before,
[data-theme-updating] :is(.homepage-preview,.site-branded) *::after { transition: none !important; }
:is(.homepage-preview,.site-branded) .wave-bg { display: none; }
:is(.homepage-preview,.site-branded) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--odx-focus);
  outline-offset: 4px;
}
:is(.homepage-preview,.site-branded) :where(section, [id]) { scroll-margin-top: 96px; }
:is(.homepage-preview,.site-branded) #main-content:focus { outline: none; }
:is(.homepage-preview,.site-branded) .skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1100;
  padding: 12px 18px;
  border-radius: 6px;
  color: var(--odx-ink);
  background: var(--odx-surface);
  box-shadow: var(--odx-shadow);
  font-size: .95rem;
  font-weight: 650;
  transform: translateY(-160%);
}
:is(.homepage-preview,.site-branded) .skip-link:focus { transform: none; }

:is(.homepage-preview,.site-branded) .site-header {
  background: var(--odx-header);
  border-color: var(--odx-border);
}
:is(.homepage-preview,.site-branded) .site-header.header-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, .06); }
:is(.homepage-preview,.site-branded) .site-header > .wrap { max-width: 1360px; }
:is(.homepage-preview,.site-branded) .nav-inner { gap: 12px; }
:is(.homepage-preview,.site-branded) .nav-brand img { width: 158px; height: auto; }
:is(.homepage-preview,.site-branded) .brand-logo--dark { display: none; }
[data-theme="dark"] :is(.homepage-preview,.site-branded) .brand-logo--light { display: none; }
[data-theme="dark"] :is(.homepage-preview,.site-branded) .brand-logo--dark { display: block; }
:is(.homepage-preview,.site-branded) .nav-menu { justify-content: center; }
:is(.homepage-preview,.site-branded) .nav-link { padding: 9px 9px; font-size: .8rem; font-weight: 550; }
:is(.homepage-preview,.site-branded) .nav-link:hover,
:is(.homepage-preview,.site-branded) .nav-link:focus-visible { background: var(--odx-soft); }
:is(.homepage-preview,.site-branded) .nav-dropdown {
  background: var(--odx-surface-raised);
  border-color: var(--odx-border);
  padding: 10px;
  border-radius: 12px;
}
:is(.homepage-preview,.site-branded) .nav-dropdown a { min-height: 40px; }
:is(.homepage-preview,.site-branded) .nav-dropdown a:hover,
:is(.homepage-preview,.site-branded) .nav-dropdown a:focus-visible { background: var(--odx-soft); color: var(--odx-ink); }
:is(.homepage-preview,.site-branded) .nav-trial { padding: 11px 17px; white-space: nowrap; }
:is(.homepage-preview,.site-branded) .nav-trial,
:is(.homepage-preview,.site-branded) .btn-yellow {
  background: var(--odx-accent);
  color: var(--odx-on-accent);
  border-color: var(--odx-accent);
  box-shadow: none;
}
:is(.homepage-preview,.site-branded) .nav-trial:hover,
:is(.homepage-preview,.site-branded) .btn-yellow:hover {
  background: var(--odx-accent-hover);
  border-color: var(--odx-accent-hover);
  color: var(--odx-on-accent);
  box-shadow: none;
}
:is(.homepage-preview,.site-branded) .btn-ghost,
:is(.homepage-preview,.site-branded) .btn-outline { border-color: var(--odx-control-border); color: var(--odx-ink); }
:is(.homepage-preview,.site-branded) .btn-ghost:hover,
:is(.homepage-preview,.site-branded) .btn-outline:hover { background: var(--odx-soft); border-color: var(--odx-ink); color: var(--odx-ink); }
:is(.homepage-preview,.site-branded) .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--odx-control-border);
  border-radius: 50%;
  color: var(--odx-ink);
  background: transparent;
}
:is(.homepage-preview,.site-branded) .theme-toggle:hover { background: var(--odx-soft); }
:is(.homepage-preview,.site-branded) .theme-icon--sun { display: none; }
[data-theme="dark"] :is(.homepage-preview,.site-branded) .theme-icon--sun { display: block; }
[data-theme="dark"] :is(.homepage-preview,.site-branded) .theme-icon--moon { display: none; }
:is(.homepage-preview,.site-branded) .mobile-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; padding: 8px; }
:is(.homepage-preview,.site-branded) .mobile-nav {
  background: var(--odx-surface);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--odx-border);
}
:is(.homepage-preview,.site-branded) .mobile-nav .btn-yellow { color: var(--odx-on-accent); }

/* Common homepage sections follow the selected theme, including legacy content
   while the more detailed product illustrations are rolled into this preview. */
:is(.homepage-preview,.site-branded) .feature-strips,
:is(.homepage-preview,.site-branded) .faq-wrap,
:is(.homepage-preview,.site-branded) .industry-cloud { background: var(--odx-bg); }
:is(.homepage-preview,.site-branded) .capability-depth { background: var(--odx-soft); }
:is(.homepage-preview,.site-branded) .capability-wall { background: var(--odx-border); border-color: var(--odx-border); }
:is(.homepage-preview,.site-branded) .capability-tile,
:is(.homepage-preview,.site-branded) .integration-item { background: var(--odx-surface); }
:is(.homepage-preview,.site-branded) .capability-tile:hover,
:is(.homepage-preview,.site-branded) .integration-item:hover { background: var(--odx-surface-raised); }
:is(.homepage-preview,.site-branded) .integration-section { background: var(--odx-bg); }
:is(.homepage-preview,.site-branded) .integration-grid { background: var(--odx-border); border-color: var(--odx-border); box-shadow: none; }
:is(.homepage-preview,.site-branded) .integration-item > span { color: var(--odx-success); background: var(--odx-soft); }
:is(.homepage-preview,.site-branded) .fstrip__visual { background-color: var(--odx-surface); border-color: var(--odx-border); }
:is(.homepage-preview,.site-branded) .challenge-point { background: var(--odx-surface); }
:is(.homepage-preview,.site-branded) .faq-question { width: 100%; text-align: left; line-height: 1.5; gap: 20px; }
:is(.homepage-preview,.site-branded) .faq-question i { flex-shrink: 0; }
:is(.homepage-preview,.site-branded) .faq-answer { max-height: none; transition: none; }
:is(.homepage-preview,.site-branded) .architecture-band,
:is(.homepage-preview,.site-branded) .integration-foot,
:is(.homepage-preview,.site-branded) .site-footer {
  --odx-focus: #8dbbff;
  background: #101720;
  color: #bdc6d3;
}
:is(.homepage-preview,.site-branded) .architecture-band .section-title,
:is(.homepage-preview,.site-branded) .truth-card h3 { color: #f4f7fb; }
:is(.homepage-preview,.site-branded) .architecture-band .section-sub,
:is(.homepage-preview,.site-branded) .truth-card p,
:is(.homepage-preview,.site-branded) .integration-foot p { color: #bdc6d3; }
:is(.homepage-preview,.site-branded) .site-footer { padding-bottom: 32px; }
:is(.homepage-preview,.site-branded) .footer-heading { color: #f4f7fb; }
:is(.homepage-preview,.site-branded) .footer-link,
:is(.homepage-preview,.site-branded) .footer-bottom__copy { color: #bdc6d3; }
:is(.homepage-preview,.site-branded) .footer-link:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
:is(.homepage-preview,.site-branded) .footer-brand__img { max-width: 174px; height: auto; align-self: flex-start; }
:is(.homepage-preview,.site-branded) .footer-brand .btn { align-self: flex-start; }
:is(.homepage-preview,.site-branded) .footer-bottom { border-color: #394553; }

/* Keep the extra order prompt in normal flow so it never covers content. */
:is(.homepage-preview,.site-branded) .sticky-cta {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 20px max(24px, calc((100vw - 1200px) / 2));
  border-radius: 0;
  border-top: 1px solid var(--odx-border);
  background: var(--odx-surface);
  color: var(--odx-ink);
  box-shadow: none;
  gap: 20px;
}
:is(.homepage-preview,.site-branded) .sticky-cta > div:first-child { display: block; }
:is(.homepage-preview,.site-branded) .sticky-cta-text { display: block; max-width: none; }
:is(.homepage-preview,.site-branded) .sticky-cta-sub { display: block; color: var(--odx-muted); font-size: .8rem; }
:is(.homepage-preview,.site-branded) .sticky-cta-close {
  width: 44px;
  height: 44px;
  color: var(--odx-muted);
  background: var(--odx-soft);
}
:is(.homepage-preview,.site-branded) .sticky-cta-close:hover { color: var(--odx-ink); background: var(--odx-soft); }

@media (max-width: 1199px) {
  :is(.homepage-preview,.site-branded) .nav-menu,
  :is(.homepage-preview,.site-branded) .nav-actions { display: none; }
  :is(.homepage-preview,.site-branded) .nav-brand { margin-right: auto; }
  :is(.homepage-preview,.site-branded) .mobile-toggle { display: flex; }
}
@media (min-width: 1200px) {
  :is(.homepage-preview,.site-branded) .mobile-nav { display: none; }
}
@media (max-width: 600px) {
  :is(.homepage-preview,.site-branded) .nav-inner { gap: 8px; }
  :is(.homepage-preview,.site-branded) .nav-brand img { width: 148px; }
  :is(.homepage-preview,.site-branded) .site-header > .wrap { padding-inline: 18px; }
  :is(.homepage-preview,.site-branded) .sticky-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  :is(.homepage-preview,.site-branded) .sticky-cta-actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :is(.homepage-preview,.site-branded) *,
  :is(.homepage-preview,.site-branded) *::before,
  :is(.homepage-preview,.site-branded) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  :is(.homepage-preview,.site-branded) .theme-toggle,
  :is(.homepage-preview,.site-branded) .btn,
  :is(.homepage-preview,.site-branded) .nav-trial { border: 1px solid ButtonText; }
  :is(.homepage-preview,.site-branded) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
}