:root {
  --heading: var(--brand-navy-dark);
  --interactive-ink: var(--brand-navy);
  --accent-ink: var(--brand-coral-dark);
  --on-accent: var(--brand-navy-dark);
  --on-strong: var(--inverse);
  --surface-elevated: var(--surface);
  --theme-browser: #fafaf7;
  --theme-panel-shadow: 0 30px 90px rgba(17, 20, 45, 0.2);
  --theme-transition: 180ms;
  --brand-coral-ink: var(--accent-ink);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c1024;
  --paper-deep: #13172f;
  --surface: #191d39;
  --surface-elevated: #202544;
  --ink: #f6f5f8;
  --ink-soft: #c8cada;
  --muted: #9a9daf;
  --muted-readable: #afb1c1;
  --faint: #777b91;
  --line: rgba(231, 233, 255, 0.12);
  --line-strong: rgba(231, 233, 255, 0.22);
  --brand-coral-soft: #35233a;
  --brand-coral-ink: var(--brand-coral);
  --success-soft: #183833;
  --heading: #f6f5f8;
  --interactive-ink: #e4e6f1;
  --accent-ink: var(--brand-coral);
  --theme-browser: #0c1024;
  --shadow-control: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-product: 0 42px 100px rgba(0, 0, 0, 0.38), 0 10px 30px rgba(0, 0, 0, 0.22);
  --shadow-feature: 0 34px 86px rgba(0, 0, 0, 0.3);
  --theme-panel-shadow: -28px 0 90px rgba(0, 0, 0, 0.36);
}

html {
  background: var(--paper);
}

html.theme-supported .theme-toggle {
  visibility: visible;
}

html.site-menu-open {
  overscroll-behavior: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-transition);
  animation-timing-function: ease-out;
}

:root[data-theme="dark"] ::selection {
  background: var(--brand-coral);
  color: var(--brand-navy-dark);
}

.site-header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
}

.brand {
  position: relative;
  width: 136px;
  height: 30px;
}

.brand .brand-logo {
  position: absolute;
  inset: 0 auto auto 0;
  width: auto;
  height: 30px;
  opacity: 1;
  transition: opacity var(--theme-transition) ease;
}

.brand .brand-logo--dark {
  opacity: 0;
}

:root[data-theme="dark"] .brand .brand-logo--light {
  opacity: 0;
}

:root[data-theme="dark"] .brand .brand-logo--dark {
  opacity: 1;
}

.theme-toggle,
.site-menu-trigger,
.site-mobile-menu__close {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.theme-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  visibility: hidden;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.theme-toggle:hover,
.site-menu-trigger:hover,
.site-mobile-menu__close:hover {
  border-color: var(--brand-coral);
  color: var(--accent-ink);
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle__visual {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-deep);
  overflow: hidden;
}

.theme-toggle__visual svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle__sun {
  opacity: 0;
  transform: rotate(-35deg) scale(0.65);
}

.theme-toggle__moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .theme-toggle__sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(35deg) scale(0.65);
}

.theme-toggle__label {
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.theme-toggle--icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}

.theme-toggle--icon .theme-toggle__visual {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  background: transparent;
}

.theme-toggle--icon .theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.site-menu-trigger,
.site-mobile-menu__close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.site-menu-trigger svg,
.site-mobile-menu__close svg {
  width: 19px;
  height: 19px;
}

.site-mobile-menu {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.site-mobile-menu:not([open]) {
  display: none;
}

.site-mobile-menu[open] {
  display: block;
}

.site-mobile-menu::backdrop {
  background: color-mix(in srgb, var(--brand-navy-dark) 74%, transparent);
  backdrop-filter: blur(9px);
  animation: siteMenuBackdropIn 220ms ease-out both;
}

.site-mobile-menu__panel {
  display: flex;
  width: min(470px, 100%);
  height: 100%;
  margin-left: auto;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-coral) 13%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--theme-panel-shadow);
  animation: siteMenuPanelIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-mobile-menu__header {
  display: flex;
  min-height: 76px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
}

.site-mobile-menu__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-mobile-menu__content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 28px max(28px, env(safe-area-inset-bottom));
}

.site-mobile-menu__eyebrow {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-mobile-menu__intro h2 {
  max-width: 380px;
  margin: 14px 0 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.site-mobile-menu__intro h2:focus {
  outline: none;
}

.site-mobile-menu nav {
  margin-top: 36px;
}

.site-mobile-menu ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: mobile-navigation;
}

.site-mobile-menu li {
  border-bottom: 1px solid var(--line);
  counter-increment: mobile-navigation;
}

.site-mobile-menu nav a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: center;
  padding: 17px 0;
  color: var(--ink);
  transition: color 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-mobile-menu nav a::before {
  align-self: start;
  padding-top: 2px;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  content: counter(mobile-navigation, decimal-leading-zero);
}

.site-mobile-menu nav a::after {
  color: var(--faint);
  font-size: 1rem;
  content: "↗";
  transition: color 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-mobile-menu nav a:hover {
  color: var(--accent-ink);
  transform: translateX(3px);
}

.site-mobile-menu nav a:hover::after {
  color: var(--accent-ink);
  transform: translate(2px, -2px);
}

.site-mobile-menu nav strong,
.site-mobile-menu nav small {
  display: block;
}

.site-mobile-menu nav strong {
  font-size: 0.96rem;
  font-weight: 650;
}

.site-mobile-menu nav small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.site-mobile-menu__actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 34px;
}

.site-mobile-menu__actions .button {
  width: 100%;
  min-height: 52px;
}

.site-mobile-menu__login {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--interactive-ink);
  font-size: 0.84rem;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease;
}

.site-mobile-menu__login:hover {
  border-color: var(--brand-coral);
  background: var(--paper-deep);
}

@keyframes siteMenuBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes siteMenuPanelIn {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to { opacity: 1; transform: none; }
}

:root[data-theme="dark"] :is(
  .hero h1,
  .feature-copy h2,
  .catalog-head h2,
  .story-main h3,
  .article-body > p:first-child,
  .article-body h2,
  .article-body h3,
  .related-head h2,
  .related-card h3,
  .author-card h2,
  .profile-grid h1,
  .legal-hero h1,
  .legal-section h2
) {
  color: var(--heading);
}

:root[data-theme="dark"] :is(
  .section-index,
  .hero h1 .accent,
  .conversation-avatar,
  .row-tag,
  .row-time.is-live-new,
  .context-head span,
  .system-number,
  .heat-copy-kicker,
  .heat-ui-head span,
  .proof-point span,
  .recorded-copy span,
  .recorded-card-top,
  .callback-panel > span,
  .callback-time.now,
  .form-error,
  .faq-plus,
  .eyebrow,
  .article-kicker,
  .section-label,
  .text-link,
  .story-no,
  .toc-list a::before,
  .toc-list a:hover,
  .article-body a:not(.button),
  .article-body li::marker,
  .visual-event span,
  .callout-label,
  .step-list li::before,
  .check-list li::before,
  .related-card span,
  .related-card i,
  .author-card a,
  .legal-section li::marker
) {
  color: var(--accent-ink);
}

:root[data-theme="dark"] :is(
  .nav-links a:hover,
  .nav-links a[aria-current="page"],
  .nav-login:hover,
  .button-secondary,
  .hero-product-link,
  .chat-live .typing.agent,
  .heat-logo,
  .recorded-logo,
  .callback-time,
  .footer-column a:hover,
  .footer-column a[aria-current="page"],
  .story-arrow,
  .article-sidebar summary,
  .callout p,
  .article-table th,
  .signal-grid strong,
  .toc-title,
  .legal-section a:hover
) {
  color: var(--interactive-ink);
}

:root[data-theme="dark"] :is(.catalog-head, .article-sidebar details, .toc) {
  border-color: var(--line-strong);
}

:root[data-theme="dark"] :is(.text-link, .article-body a:not(.button)) {
  border-color: var(--accent-ink);
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 46%, transparent);
}

:root[data-theme="dark"] .field :is(input, select, textarea):focus {
  border-color: var(--brand-coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-coral) 22%, transparent);
}

:root[data-theme="dark"] .button-primary {
  background: var(--brand-coral);
  color: var(--brand-navy-dark);
}

:root[data-theme="dark"] .button-primary:hover {
  background: var(--brand-coral-dark);
  color: var(--inverse);
}

:root[data-theme="dark"] .early-section {
  --heading: var(--brand-navy-dark);
  --interactive-ink: var(--brand-navy);
  --accent-ink: var(--brand-navy);
}

:root[data-theme="dark"] .early-section .button-primary {
  background: var(--brand-navy);
  color: var(--inverse);
}

:root[data-theme="dark"] :is(.product-shell, .heatmap-shell, .recording-shell, .contact-product, .ticket-shell, .analytics-shell) {
  color-scheme: light;
  --paper: #fafaf7;
  --paper-deep: #f1f0eb;
  --surface: #ffffff;
  --ink: #17192e;
  --ink-soft: #3f425b;
  --muted: #6f7181;
  --faint: #a7a8b2;
  --line: rgba(29, 35, 72, 0.13);
  --line-strong: rgba(29, 35, 72, 0.23);
  --brand-coral-soft: #fce8e3;
  --heading: var(--brand-navy-dark);
  --interactive-ink: var(--brand-navy);
  --accent-ink: var(--brand-coral-dark);
  --shadow-control: 0 6px 18px rgba(17, 20, 45, 0.09);
}

:root[data-theme="dark"] .footer-brand img:not(.brand-logo) {
  filter: none;
}

@media (max-width: 1100px) {
  .nav-links,
  .nav-actions {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex;
  }
}

@media (max-width: 520px) {
  .site-mobile-menu__panel {
    width: 100%;
    border-left: 0;
  }

  .site-mobile-menu__header {
    min-height: 68px;
    padding-inline: 16px;
  }

  .site-mobile-menu__header .brand {
    width: 124px;
    height: 27px;
  }

  .site-mobile-menu__header .brand .brand-logo {
    height: 27px;
  }

  .site-mobile-menu__content {
    padding: 27px 20px max(22px, env(safe-area-inset-bottom));
  }

  .site-mobile-menu nav {
    margin-top: 28px;
  }

  .site-mobile-menu nav a {
    padding: 14px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .brand-logo,
  .theme-toggle,
  .theme-toggle__visual svg,
  .site-mobile-menu::backdrop,
  .site-mobile-menu__panel,
  .site-mobile-menu nav a,
  .site-mobile-menu nav a::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #ffffff;
    --paper-deep: #f1f0eb;
    --surface: #ffffff;
    --ink: #17192e;
    --ink-soft: #3f425b;
    --muted: #6f7181;
    --muted-readable: #6b6d7c;
    --faint: #a7a8b2;
    --line: rgba(29, 35, 72, 0.13);
    --line-strong: rgba(29, 35, 72, 0.23);
    --heading: var(--brand-navy-dark);
    --interactive-ink: var(--brand-navy);
    --accent-ink: var(--brand-coral-dark);
  }

  .theme-toggle,
  .mobile-header-actions,
  .site-mobile-menu {
    display: none !important;
  }
}