/* Landing V4 (design/landing-v4): the shared public system. Loaded after v3.css on every public
   route. Palette, header, footer, closing call to action, buttons and section reveals. */
:root {
  /* One page colour for every route (Xinyu, October 6, 2026): a clean, slightly lifted cool black,
     with no grey gradient behind the first screen. */
  --color-paper: #0a0d14;
  --color-surface: #10141d;
  --color-surface-raised: #171c27;
  --color-ink: #f4f4f5;
  --color-body: #b9bcc4;
  --color-muted: #a7abb4;
  --color-rule: #1e2330;
  --color-rule-strong: #2e3443;
  --color-accent: #4aa3ff;
  --color-accent-tint: rgba(74, 163, 255, 0.09);
  --action-ink: #0a0d14;
  --lp-eyebrow: #7fabff;
  --lp-nav-text: #d9dce1;
  --lp-second: #c6cad1;
  --lp-sub: #d2d5db;
  --lp-faint: #989ea9;
  --lp-ghost-line: rgba(255, 255, 255, 0.42);
  --lp-nav: rgba(10, 13, 20, 0.82);
  --lp-glass-rule: rgba(170, 195, 240, 0.13);
  --lp-glass-hi: rgba(150, 170, 210, 0.13);
  --lp-flag: #ffd29a;
  --lp-page: #151922;
  --lp-blue: #3d7dff;
}
html {
  scroll-padding-top: 94px;
}
body,
body.page-inner,
body.page-landing {
  background: var(--color-paper);
}
body main :is(h1, h2, h3) em,
body:is(.page-home, .page-inner) main :is(h1, h2, h3) em {
  color: var(--lp-second);
}
body.page-inner main :is(.lead, .story-heading > p, .section-heading > p) {
  color: var(--lp-sub);
}

/* ---- header ---- */
body .floating-header,
body .floating-header.scrolled {
  line-height: normal;
  inset: 0 0 auto;
  background: var(--lp-nav);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--color-rule);
}
body .floating-bar,
body .floating-header.scrolled .floating-bar {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  width: min(1280px, calc(100% - 160px));
  min-height: 69px;
  height: 69px;
  background: transparent;
}
body .floating-header .brand,
body .floating-header.scrolled .brand {
  gap: 10px;
  min-height: 44px;
  color: var(--color-ink);
}
body .floating-header .brand .brand-logo {
  flex-shrink: 0;
}
body .floating-header .brand > span:last-child,
body .floating-header.scrolled .brand > span:last-child {
  display: inline-flex;
  align-items: center;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
}
body .floating-header .brand-sub {
  margin-left: 10px;
  padding-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--color-muted);
}
body .glass-nav {
  justify-self: center;
  gap: 36px;
  color: var(--lp-nav-text);
}
body .nav-trigger {
  gap: 9px;
  min-height: 44px;
  padding: 12px 0;
  border-radius: 0;
  background: transparent;
  color: var(--lp-nav-text);
  font-size: 15px;
  font-weight: 400;
}
body .nav-trigger .chevron {
  width: 11px;
  height: 11px;
}
body .nav-trigger:hover,
body .nav-trigger[aria-expanded='true'] {
  background: transparent;
  color: var(--color-ink);
}
body .header-actions {
  justify-self: end;
}
body .floating-demo,
body .floating-header.scrolled .floating-demo {
  gap: 14px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;
}
body .floating-demo svg {
  width: 15px;
  height: 15px;
}
/* The appearance switch (client/theme-mode.js). It appears only once that script has run, so a
   page without JavaScript has no dead control; its icon shows the appearance it switches to. */
body .theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur-feedback) var(--ease-out);
}
:root[data-theme-switch] body .theme-toggle {
  display: inline-flex;
}
body .theme-toggle:hover {
  border-color: var(--color-ink);
}
body .theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.theme-toggle .theme-icon-moon,
:root[data-theme='light'] .theme-toggle .theme-icon-sun {
  display: none;
}
:root[data-theme='light'] .theme-toggle .theme-icon-moon {
  display: block;
}
/* The switch changes every colour in one step; running transitions would split it. */
:root[data-theme-switching] :is(*, *::before, *::after) {
  transition: none !important;
}
/* A picture drawn for one appearance (a light still beside its dark one): only the current one is
   shown, so a lazy image hidden this way is never fetched. */
:root:not([data-theme='light']) .theme-only-light,
:root[data-theme='light'] .theme-only-dark {
  display: none !important;
}
body.page-inner {
  padding-top: 102px;
}
@media (max-width: 1200px) {
  body .floating-bar,
  body .floating-header.scrolled .floating-bar {
    grid-template-columns: auto 1fr auto;
    width: calc(100% - 64px);
  }
  body .glass-nav {
    gap: 24px;
  }
  body .nav-trigger {
    font-size: 14px;
  }
  body .floating-demo,
  body .floating-header.scrolled .floating-demo {
    font-size: 14px;
  }
}
@media (max-width: 1000px) {
  body .floating-header .brand > span:last-child {
    font-size: 21px;
  }
  body .floating-header .brand .brand-logo {
    width: 23px;
    height: 23px;
  }
  /* From here down the navigation is the menu panel: it spans the header between its
     left and right insets instead of centring like the inline desktop navigation. */
  body .glass-nav {
    justify-self: stretch;
    gap: 0;
  }
  body .nav-trigger {
    padding: 14px 16px;
    font-size: 15px;
  }
  body .floating-demo,
  body .floating-header.scrolled .floating-demo {
    gap: 10px;
    padding: 0 14px;
    font-size: 13px;
  }
  /* Beside the menu button the switch takes the button's fill. */
  body .theme-toggle {
    background: var(--color-surface);
  }
}
@media (max-width: 800px) {
  body .floating-header,
  body .floating-header.scrolled {
    top: 0;
  }
  body .floating-bar,
  body .floating-header.scrolled .floating-bar {
    display: flex;
    width: calc(100% - 40px);
    height: 64px;
    min-height: 64px;
    padding: 0;
  }
  body .floating-demo,
  body .floating-header.scrolled .floating-demo {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }
  body.page-inner {
    padding-top: 96px;
  }
}

/* ---- shared controls ---- */
/* Icons keep their drawn size; styles.css sizes every bare svg at 24px. */
svg.lp-i8 {
  width: 8px;
  height: 8px;
}
svg.lp-i10 {
  width: 10px;
  height: 10px;
}
svg.lp-i11 {
  width: 11px;
  height: 11px;
}
svg.lp-i12 {
  width: 12px;
  height: 12px;
}
svg.lp-i13 {
  width: 13px;
  height: 13px;
}
svg.lp-i14 {
  width: 14px;
  height: 14px;
}
svg.lp-i15 {
  width: 15px;
  height: 15px;
}
svg.lp-i16 {
  width: 16px;
  height: 16px;
}
svg.lp-i17 {
  width: 17px;
  height: 17px;
}
svg.lp-i18 {
  width: 18px;
  height: 18px;
}
svg.lp-i20 {
  width: 20px;
  height: 20px;
}
svg.lp-i26 {
  width: 26px;
  height: 26px;
}
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: normal;
  color: var(--lp-eyebrow);
}
body main a.lp-button,
a.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 55px;
  padding: 0 24px 0 26px;
  box-sizing: border-box;
  border: 0;
  border-radius: 3px;
  background: var(--action-fill);
  color: var(--action-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    opacity 0.2s,
    border-color 0.4s;
}
body main a.lp-button:hover,
a.lp-button:hover {
  opacity: 0.86;
  color: var(--action-ink);
}
body main a.lp-button.lp-button-ghost {
  border: 1px solid var(--lp-ghost-line);
  background: transparent;
  color: var(--color-ink);
}
body main a.lp-button.lp-button-ghost:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
/* A 44 px target that keeps the line's own height in the layout. */
body main a.lp-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-block: -12.5px;
  padding: 0;
  border: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-size 0.3s,
    color 0.2s;
}
body main a.lp-link:hover {
  background-size: 100% 1px;
  color: var(--color-accent);
}

/* Sections rise into place as they enter: by scroll position where CSS can, and once on entry
   (client/reveal.js) where it cannot. Content stays visible without either. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp-rv {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
  .lp-rv.lp-in {
    animation: lp-enter 0.45s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }
}
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lp-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- closing call to action ---- */
body main .cta-section {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  margin: 168px 0 0;
  padding: 160px 84px 168px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: none;
  text-align: center;
  overflow: hidden;
}
body main .cta-section::before,
body main .cta-section::after {
  display: none;
}
.cta-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 900px;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(40, 90, 220, 0.1), rgba(5, 7, 12, 0));
  pointer-events: none;
}
body main .cta-section > .cta-inner {
  width: auto;
  max-width: none;
  margin: 0;
}
.cta-inner {
  line-height: normal;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main .cta-section h2 {
  margin: 0;
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
body main .cta-section h2 em {
  font-style: normal;
  color: var(--lp-second);
}
body main .cta-section p {
  margin: 32px 0 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-sub);
}
body main .cta-section .lp-button {
  gap: 26px;
  margin-top: 44px;
}

/* ---- footer ---- */
body .site-footer {
  line-height: normal;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
}
body .site-footer .footer-main {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  width: min(1280px, calc(100% - 160px));
  margin: 0 auto;
  padding: 0;
  gap: 0;
}
body .site-footer::after {
  content: '';
  order: 1;
  display: block;
  height: 1px;
  background: var(--color-rule);
}
body .site-footer .footer-main {
  order: 0;
}
body .site-footer .footer-bottom {
  order: 2;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 56px 32px 56px 0;
}
.footer-home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  text-decoration: none;
}
.footer-home span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
body .site-footer .footer-brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}
.footer-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.8;
  letter-spacing: 0.14em;
  color: var(--lp-faint);
}
body .site-footer .footer-links {
  display: grid;
  /* Six groups read as two rows of three, so no group is left alone on a row and each label
     keeps its line (six menu groups since October 4, 2026). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}
/* Each link keeps a 44 px target, so the list runs on a 44 px rhythm. */
body .site-footer [data-footer-group] {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 56px 24px;
  border-left: 1px solid var(--color-rule);
  font-size: 13px;
}
body .site-footer [data-footer-group]:nth-child(3n) {
  padding-right: 0;
}
body .site-footer [data-footer-group]:nth-child(n + 4) {
  border-top: 1px solid var(--color-rule);
}
body .site-footer [data-footer-group] > span {
  margin: 0 0 1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
body .site-footer [data-footer-group] a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: normal;
  text-decoration: none;
}
body .site-footer a:hover {
  color: var(--color-ink);
}
body .site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1280px, calc(100% - 160px));
  height: 72px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 12px;
  color: var(--lp-faint);
}
body .site-footer .footer-legal {
  display: flex;
  gap: 20px;
}
body .site-footer .footer-legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  color: var(--color-muted);
  font-size: 12px;
  text-decoration: none;
}

@media (max-width: 1100px) {
  body main .cta-section {
    margin-top: 120px;
    padding: 120px 40px 128px;
  }
  body main .cta-section h2 {
    font-size: 52px;
  }
  body .site-footer .footer-main {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 80px);
  }
  .footer-brand {
    padding: 48px 0 32px;
  }
  body .site-footer [data-footer-group] {
    padding: 0 16px 40px;
  }
  body .site-footer [data-footer-group]:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  body .site-footer [data-footer-group]:nth-child(n + 4) {
    padding-top: 32px;
  }
  body .site-footer .footer-bottom {
    width: calc(100% - 80px);
  }
}
@media (max-width: 760px) {
  body main .cta-section {
    margin-top: 96px;
    padding: 96px 24px 104px;
  }
  body main .cta-section h2 {
    font-size: 38px;
    line-height: 1.05;
  }
  body main .cta-section p {
    margin-top: 24px;
    font-size: 16.5px;
  }
  body main .cta-section .lp-button {
    margin-top: 36px;
  }
  body .site-footer .footer-main,
  body .site-footer .footer-bottom {
    width: calc(100% - 48px);
  }
  body .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }
  body .site-footer [data-footer-group],
  body .site-footer [data-footer-group]:first-child,
  body .site-footer [data-footer-group]:nth-child(3n + 1),
  body .site-footer [data-footer-group]:nth-child(n + 4) {
    padding: 0 0 32px;
    border-left: 0;
    border-top: 0;
  }
  /* Six groups pair up evenly; the older rule that let a fifth, last group run full width would
     leave one group alone on its row. */
  body .site-footer .footer-links > [data-footer-group]:last-child {
    grid-column: auto;
  }
  body .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    height: auto;
    padding: 28px 0 36px;
  }
  body .site-footer .footer-legal {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
}

/* ---- inner pages: the homepage's type, controls and surfaces ---- */
:root {
  --radius-control: 3px;
}
body.page-inner main :is(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.04em;
}
body.page-inner main h1 {
  font-size: clamp(40px, 4.45vw, 64px);
  line-height: 1;
}
body.page-inner main h2 {
  line-height: 1.04;
}
body.page-inner main :is(.story-heading, .section-heading) h2 {
  font-size: clamp(34px, 3.9vw, 56px);
}
body.page-inner main h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.page-inner main .page-hero .lp-eyebrow {
  margin-bottom: 22px;
}
body.page-inner main .page-hero h1 {
  margin-top: 0;
}
body.page-inner main .page-hero .lead {
  font-size: 19.5px;
  line-height: 1.5;
}
body main .text-link {
  gap: 12px;
  padding: 0;
  border: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 500;
  transition:
    background-size 0.3s,
    color 0.2s;
}
body main .text-link svg {
  width: 16px;
  height: 16px;
}
body main .text-link:hover {
  background-size: 100% 1px;
  color: var(--color-accent);
}
body.page-inner main .button {
  gap: 26px;
  min-height: 55px;
  padding: 0 24px 0 26px;
  border: 0;
  border-radius: 3px;
  font-size: 17px;
  font-weight: 500;
}
body.page-inner main .button-secondary {
  border: 1px solid var(--lp-ghost-line);
}
body.page-inner main .button svg {
  width: 17px;
  height: 17px;
}
/* Product views share the homepage's glass panel. */
body .pm-window {
  border: 1px solid rgba(160, 188, 240, 0.18);
  border-radius: 16px;
  background: linear-gradient(
    165deg,
    rgba(22, 27, 38, 0.94) 0%,
    rgba(15, 19, 27, 0.95) 55%,
    rgba(12, 15, 22, 0.96) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body .pm-prompt {
  border-color: var(--lp-glass-rule);
  border-radius: 10px;
  background: var(--lp-glass-hi);
}
@media (max-width: 760px) {
  body.page-inner main .page-hero .lead {
    font-size: 17.5px;
  }
  body.page-inner main .button {
    min-height: 52px;
  }
}

/* ---- where you are ---- */
/* Wayfinding: the header marks the group the route belongs to, the open menu marks the entry, and
   every page below the homepage carries a breadcrumb back up. */
body .nav-trigger {
  position: relative;
}
body .nav-trigger[data-nav-here] {
  color: var(--color-ink);
}
body .nav-trigger[data-nav-here]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 18px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
}
body .mega-link[aria-current],
body .mega-link[data-nav-within] {
  background: var(--color-accent-tint);
  box-shadow: inset 2px 0 0 var(--color-accent);
  transform: none;
}
body .mega-link[aria-current] strong,
body .mega-link[data-nav-within] strong {
  color: var(--color-ink);
}
body .mega-link[aria-current] .mega-icon,
body .mega-link[data-nav-within] .mega-icon {
  border-color: rgba(74, 163, 255, 0.5);
  color: var(--color-accent);
}
body .mega-feature[aria-current] {
  border-color: rgba(74, 163, 255, 0.5);
  background: var(--color-accent-tint);
}
@media (min-width: 361px) {
  body .mega-link strong {
    font-size: 13.5px;
    color: var(--color-ink);
  }
  body .mega-link small {
    font-size: 11.5px;
    color: var(--color-muted);
  }
}
.breadcrumb {
  padding-top: 0;
}
/* The trail sits in the space the page already had, rather than adding a band of its own. */
.breadcrumb + .container {
  padding-top: 20px;
}
body main .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 11px;
  margin-block: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.breadcrumb li + li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--lp-faint);
  border-right: 1px solid var(--lp-faint);
  transform: rotate(45deg);
}
.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--dur-feedback) var(--ease-out);
}
.breadcrumb a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb [aria-current='page'] {
  color: var(--color-body);
}
@media (max-width: 767px) {
  .breadcrumb + .container {
    padding-top: 16px;
  }
  body main .breadcrumb ol {
    font-size: 12.5px;
  }
}

/* The menu scenes fill their slot the way the Product render does, instead of sitting as an icon. */
body .mega-feature-art {
  min-height: 0;
  display: block;
  margin: 18px -6px 4px;
}
body .mega-feature-art .mega-scene {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  transition: transform 0.6s var(--ease-out);
}
body .mega-feature:hover .mega-scene {
  transform: scale(1.03);
}

/* ---- Product menu: one system ---- */
/* The overview runs across the top as the first entry; the three layers sit in columns below it,
   each led by its own page; the bottom bar holds pricing, security and the demo action. */
body .mega-panel.mega-product {
  display: block;
  width: min(900px, calc(100vw - 96px));
  padding: 14px;
}
body .mp-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 24px;
  align-items: center;
  gap: var(--space-md);
  min-height: 104px;
  padding: 14px 18px 14px 22px;
  border: 1px solid rgba(74, 163, 255, 0.35);
  background: linear-gradient(110deg, rgba(74, 163, 255, 0.14), rgba(74, 163, 255, 0.03) 70%);
  color: var(--color-ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-feedback) var(--ease-out);
}
body .mp-feature:hover,
body .mp-feature[aria-current] {
  border-color: var(--color-accent);
}
body .mp-feature-copy strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body .mp-feature-copy small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--color-body);
}
body .mp-feature-render {
  width: 88px;
  height: 104px;
  object-fit: cover;
  object-position: center 30%;
}
body .mp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding: 18px 8px 14px;
}
body .mp-label {
  display: block;
  margin: 0 0 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-eyebrow);
}
body .mp-link {
  display: block;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--color-body);
  text-decoration: none;
  transition:
    background var(--dur-feedback) var(--ease-out),
    color var(--dur-feedback) var(--ease-out);
}
body .mp-link.is-page {
  font-weight: 600;
  color: var(--color-ink);
}
body .mp-link:hover,
body .mp-link[aria-current],
body .mp-link[data-nav-within] {
  background: var(--color-surface-raised);
  color: var(--color-ink);
}
body .mp-link[aria-current],
body .mp-link[data-nav-within] {
  box-shadow: inset 2px 0 0 var(--color-accent);
}
body .mp-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--space-lg);
  padding: 12px 10px 4px;
  border-top: 1px solid var(--color-rule);
}
body .mp-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The site's minimum touch target. */
  min-height: 44px;
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
}
body .mp-bottom svg {
  width: 15px;
}
body .mp-bottom .mp-demo {
  margin-left: auto;
  padding: 0 14px;
  background: var(--color-ink);
  color: var(--color-paper);
}
@media (max-width: 1000px) {
  body .mega-panel.mega-product {
    width: 100%;
    padding: 4px 0 12px;
  }
  body .mp-feature {
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 0;
    padding: 12px 14px;
  }
  body .mp-feature-render {
    display: none;
  }
  body .mp-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0 6px;
  }
  body .mp-bottom .mp-demo {
    display: none;
  }
}

/* A two-line heading is two phrases: each line wraps on its own, balanced, so no word is left
   alone at the end (Chrome balances only within a block, never across a <br>). Authored breaks
   sit between complete phrases; words that must stay together carry a no-break space. */
main :is(h1, h2) > br + :is(em, span) {
  display: block;
}
html body.page-landing main :is(h1, h2) {
  text-wrap: balance;
}

/* ---- The other menus, in the Product layout ---- */
body .mega-group .mp-feature {
  grid-template-columns: minmax(0, 1fr) 176px 24px;
}
body .mp-feature-art {
  display: grid;
  width: 176px;
  height: 100px;
  place-items: center;
  overflow: hidden;
}
body .mp-feature-art :is(svg, .mega-scene) {
  width: 100%;
  height: 100%;
}
body .mp-pages {
  gap: 6px;
}
body .mp-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .mp-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body .mp-page {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px;
  color: var(--color-body);
  text-decoration: none;
  transition: background var(--dur-feedback) var(--ease-out);
}
body .mp-page strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
body .mp-page small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
}
body .mp-page .mega-icon {
  width: 30px;
  height: 30px;
  margin: 0;
}
body .mp-page:hover,
body .mp-page[aria-current],
body .mp-page[data-nav-within] {
  background: var(--color-surface-raised);
}
body .mp-page[aria-current],
body .mp-page[data-nav-within] {
  box-shadow: inset 2px 0 0 var(--color-accent);
}
body .mp-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-faint);
}
@media (max-width: 1000px) {
  body .mega-group .mp-feature {
    grid-template-columns: minmax(0, 1fr) 24px;
  }
  body .mp-feature-art {
    display: none;
  }
  body :is(.mp-cols-2, .mp-cols-4) {
    grid-template-columns: minmax(0, 1fr);
  }
  body .mega-group .mp-bottom {
    display: none;
  }
}

/* Resources reads by stage, four labelled columns like Product's (Xinyu, October 4, 2026). */
body .mp-stages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  body .mp-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Evidence tag (templates/evidence.mjs) ---- */
/* One small tag on the item itself says how to read it: a customer result, example data, a public
   source or an estimate. It never becomes a section of its own. */
.ev-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted);
  white-space: nowrap;
}
.ev-customer {
  border-color: rgba(74, 163, 255, 0.45);
  color: var(--color-accent);
}
.ev-estimate {
  border-style: dashed;
}
a.ev-tag:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* Six menu groups since October 4, 2026 (Packet SEC). The navigation stays centred on the page
   between two equal side columns, and tightens step by step so the header never runs past its
   bar: smaller gaps and type from 1360 px, then the brand's MATRIX label and a left-aligned row
   from 1200 px, until the menu button takes over at 1000 px. */
@media (min-width: 1001px) {
  body .floating-bar,
  body .floating-header.scrolled .floating-bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  body .floating-header .header-actions {
    justify-self: end;
  }
}
@media (min-width: 1001px) and (max-width: 1360px) {
  body .glass-nav {
    gap: 20px;
  }
  body .nav-trigger {
    gap: 6px;
    font-size: 14px;
  }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  body .floating-bar,
  body .floating-header.scrolled .floating-bar {
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
  }
  body .floating-header .brand-sub {
    display: none;
  }
  body .glass-nav {
    gap: 16px;
  }
}

/* Menu labels are links to their overview pages (Xinyu, October 5, 2026); they keep the look of
   the former buttons. Company has no menu, so its label has no chevron. */
body a.nav-trigger {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
body a.nav-trigger[aria-current='page'] {
  color: var(--color-ink);
}