/**
 * Navigation V2 — skeleton CSS only.
 *
 * Functional placement for local header integration.
 * Not final Figma styling (no brand colors, typography, icons, or mobile chrome).
 */

.optiview-nav {
	/* Preview / standalone: own containing block. In the live header, .menu takes over (below). */
	position: relative;
	flex: 1 1 auto;
	min-width: 0;

	/* Design tokens — Figma "globalnav/sublinks/desktop/solution" (dark desktop). */
	/* Mega surface */
	--optiview-nav-bg-start: #14141a;
	--optiview-nav-bg-end: #28033a;
	--optiview-nav-divider: #2c2c31;
	--optiview-nav-root-divider: #2c2c31;

	/* Top-level header navigation (depth-0 tabs) */
	--optiview-nav-top-text: #fff;
	--optiview-nav-top-accent: #b924ff;

	/* Mega-menu content (depth-1 / depth-2 inside the panel) */
	--optiview-nav-mega-text: #fff;
	--optiview-nav-mega-muted: #b9b9ba;
	--optiview-nav-mega-accent: #aa33ff;

	/*
	 * Internal mobile drawer header (logo / Back+title / close).
	 * Independent of data-theme="light"|"dark" mega-panel colors.
	 */
	--optiview-nav-mobile-header-bg: #14141a;
	--optiview-nav-mobile-header-text: #fff;
	--optiview-nav-mobile-header-accent: #b924ff;
	--optiview-nav-mobile-header-divider: #2c2c31;

	--optiview-nav-font-demi: "avenir-next-demi", sans-serif;
	--optiview-nav-panel-min-height: 0;
}

/*
 * Light visual mega-panel tokens (no *-light-theme aliases).
 * Site page data-theme is inverted vs this visual: data-theme="dark" means
 * the light mega treatment. No attribute and data-theme="light" keep the
 * dark base above. Mobile-header tokens are not overridden.
 */
.menu[data-theme="dark"] .optiview-nav {
	--optiview-nav-bg-start: #ffffff;
	--optiview-nav-bg-end: #ffffff;
	--optiview-nav-divider: #DBDBE9;
	--optiview-nav-root-divider: #B2B4FF;
	/* Top-level header navigation (depth-0 tabs) — white on dark/transparent header */
	--optiview-nav-top-text: #fff;
	--optiview-nav-top-accent: #b924ff;
	/* Mega-menu content (depth-1 / depth-2) — blue on white panel */
	--optiview-nav-mega-text: #3236CB;
	--optiview-nav-mega-muted: #6A6A6D;
	--optiview-nav-mega-accent: #661F99;
}

.optiview-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.optiview-nav__list--depth-0 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem; /* 12px column-gap — Figma top-bar tab row */
}

/*
 * Top-level tabs (Solutions / Industries / Resources / Developers): Figma "tab/dark".
 * Label-only / trigger-only items render as <button class="optiview-nav__toggle">.
 * Explicitly reset theme `button` longhands that are not otherwise set here so
 * those toggles match the linked <a class="optiview-nav__link"> source of truth.
 */
.optiview-nav__item--depth-0 > .optiview-nav__link,
.optiview-nav__item--depth-0 > .optiview-nav__toggle {
	border-radius: 0.25rem; /* 4px */
	background: transparent;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	font-family: var(--optiview-nav-font-demi);
	font-size: 1rem; /* 16px */
	font-weight: inherit; /* not 800 — Avenir face lives in font-family */
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--optiview-nav-top-text);
	padding: 33px 0.625rem;
	white-space: normal;
	width: auto;
	-webkit-font-smoothing: inherit;
}

/* Active = the top-level panel this tab controls is currently open. */
.optiview-nav__item--depth-0:has(> .optiview-nav__toggle[aria-expanded="true"]) > .optiview-nav__link,
.optiview-nav__item--depth-0 > .optiview-nav__toggle[aria-expanded="true"] {
	color: var(--optiview-nav-top-accent);
}

.optiview-nav__item {
	margin: 0;
	padding: 0;
}

/* Keep top-level items static so mega panels use an ancestor containing block. */
.optiview-nav__item--depth-0 {
	position: static;
	display: flex;
	align-items: center;
}

.optiview-nav__item--depth-1,
.optiview-nav__item--depth-2 {
	position: relative;
}

/*
 * Title/control row: link + nested toggle (or trigger-only / label) share one
 * intrinsic-width heading. The <li> keeps full column width.
 */
.optiview-nav__item-heading {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: 100%;
	column-gap: 0.35rem;
}

/*
 * Depth-1 primary row: icon (optional) | title + description stack.
 * Nested panel stays a sibling outside this wrapper.
 */
.optiview-nav__item-primary {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: 0.625rem; /* 10px */
	align-items: start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1.25rem; /* 12px 20px */
}

.optiview-nav__top-row .optiview-nav__item-primary {
	align-items: center;	
}

/*
 * Desktop: JS sets --optiview-nav-primary-row-height on .optiview-nav__columns
 * to the tallest natural sibling primary. Nested panels stay outside this box.
 * Top-row primaries are outside .optiview-nav__columns and are not equalized.
 */
.optiview-nav__columns .optiview-nav__item--depth-1 > .optiview-nav__item-primary {
	min-height: var(--optiview-nav-primary-row-height, 0px);
}

.optiview-nav__item-primary:not(:has(> .optiview-nav__icon)) {
	grid-template-columns: minmax(0, 1fr);
}

.optiview-nav__item--depth-1:first-child > .optiview-nav__item-primary {
	padding-top: 1.5rem; /* 24px — first row in a column */
}

.optiview-nav__item--depth-1:has(.optiview-nav__description) > .optiview-nav__item-primary {
	padding-bottom: 0; /* description supplies bottom pad */
}

.optiview-nav__item-primary > .optiview-nav__icon {
	width: 2rem; /* 32px */
	height: 2rem;
	margin-top: 5px; /* optical align with title line */
}

.optiview-nav__top-row .optiview-nav__item-primary > .optiview-nav__icon {
	margin-top: 0;
}

.optiview-nav__item-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 5px;
	min-width: 0;
	max-width: 100%;
}

.optiview-nav__item-content > .optiview-nav__description {
	align-self: stretch;
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__description,
.optiview-nav__item--depth-2 > .optiview-nav__description {
	display: block;
}

.optiview-nav__link,
.optiview-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
}

/*
 * Defeat GeneratePress / theme `button` + `button:hover` backgrounds
 * (`button:hover` is (0,1,1) and beats a lone `.optiview-nav__toggle`).
 * Keep toggles chromeless in every interactive state; do not remove focus outlines.
 */
.optiview-nav__toggle:hover,
.optiview-nav__toggle:focus,
.optiview-nav__toggle:focus-visible,
.optiview-nav__toggle:active,
.optiview-nav__toggle[aria-expanded="true"] {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
}

.optiview-nav__toggle-text {
	/* Keep accessible name; hide visually (not display:none). */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Depth-0 (top-level) chevron: item.php now always renders one for branch
 * triggers (linked-parent-with-children and trigger-only), so the mobile
 * drawer has a branch-entry affordance. Desktop top-level tabs never showed
 * one, so it stays hidden outside the mobile media query to keep desktop
 * pixel-identical; @media (max-width: 1024px) below re-enables it.
 */
.optiview-nav__item--depth-0 > .optiview-nav__toggle > .optiview-nav__chevron,
.optiview-nav__item--depth-0 > .optiview-nav__link + .optiview-nav__toggle > .optiview-nav__chevron {
	display: none;
}

/*
 * Linked depth-0 parent: the sibling disclosure <button> stays in the DOM
 * (hover is bound to the <li>; keyboard still uses the button; mobile shows
 * the chevron). On desktop the chevron is display:none and the accessible
 * name is visually hidden, but the shared top-level padding (10px + 10px)
 * still made that empty button 20px wide. Label-only / trigger-only items
 * have no sibling toggle, so their <li> was 20px narrower and label-to-label
 * gaps looked uneven. Collapse only the sibling toggle; do not shrink the
 * visible title control.
 */
@media (min-width: 1025px) {
	.optiview-nav__item--depth-0 > .optiview-nav__link + .optiview-nav__toggle {
		width: 0;
		min-width: 0;
		padding: 0;
		overflow: hidden;
	}
}

/*
 * Mobile-only drawer chrome (header, Back, logo, close). Hidden by default so
 * desktop (>=1025px) stays pixel-identical to the pre-mobile Pass 1 state.
 * @media (max-width: 1024px) re-enables these.
 */
.optiview-nav__mobile-header,
.optiview-nav__mobile-logo,
.optiview-nav__mobile-back,
.optiview-nav__mobile-branch-title,
.optiview-nav__mobile-close,
.optiview-nav__mobile-header-spacer {
	display: none;
}

/*
 * Figma chevron (native RIGHT). Orientation via transform only.
 * Nested disclosures use aria-expanded; leaf links stay at 0deg.
 */
.optiview-nav__chevron {
	display: block;
	flex: 0 0 auto;
	width: 8px;
	height: auto;
	color: currentColor;
	transform: rotate(0deg);
	transform-origin: center;
	transition:
		transform 160ms ease,
		color 160ms ease;
}

.optiview-nav__item--depth-2 .optiview-nav__chevron {
	width: 10px;
}

.optiview-nav__toggle[data-optiview-nav-level="nested"] .optiview-nav__chevron {
	transform: rotate(90deg); /* DOWN */
}

.optiview-nav__toggle[data-optiview-nav-level="nested"][aria-expanded="true"] .optiview-nav__chevron {
	transform: rotate(-90deg); /* UP */
	color: var(--optiview-nav-mega-accent);
}

.optiview-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.optiview-nav__description {
	display: block;
	font-family: var(--optiview-nav-font-demi);
	font-size: 0.875rem; /* 14px */
	line-height: 1.3;
	letter-spacing: 0.03em; /* ~0.42px at 14px */
	color: var(--optiview-nav-mega-muted);
	margin-top: 3px;
}

.optiview-nav__panel[hidden] {
	display: none !important;
}

/* Nested panels stay instant; depth-0 mega uses the animated [hidden] rules below. */
.optiview-nav__item--depth-1 > .optiview-nav__panel[hidden],
.optiview-nav__item--depth-2 > .optiview-nav__panel[hidden] {
	display: none !important;
}

.optiview-nav__item--depth-0 > .optiview-nav__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: auto;
	min-height: var(--optiview-nav-panel-min-height);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: linear-gradient(to bottom, var(--optiview-nav-bg-start), var(--optiview-nav-bg-end));
	color: var(--optiview-nav-mega-text);
	box-shadow: 0 1rem 2rem rgba(20, 20, 26, 0.45);
	border-radius: 0 0 0.5rem 0.5rem;
	border-top: 1px solid var(--optiview-nav-divider);
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--optiview-nav-transition-duration) var(--optiview-nav-transition-easing),
		transform var(--optiview-nav-transition-duration) var(--optiview-nav-transition-easing),
		display var(--optiview-nav-transition-duration) var(--optiview-nav-transition-easing);
	transition-behavior: allow-discrete;
}

/*
 * Depth-0 mega close state: animate opacity/transform with display.
 * No !important on display so discrete transitions can run (nested keep !important above).
 */
.optiview-nav__item--depth-0 > .optiview-nav__panel[hidden] {
	opacity: 0;
	transform: translateY(-0.5rem);
	display: none;
}

@starting-style {
	.optiview-nav__item--depth-0 > .optiview-nav__panel:not([hidden]) {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

@media screen and (min-width: 1480px) {
	.optiview-nav__item--depth-0 > .optiview-nav__panel {
	width: calc(100% + 40px);
	margin: 0 -20px;
	}
  }

/*
 * Nested panels: in-flow under the parent row only.
 * Do not inherit mega-panel absolute / full-.menu stretch.
 */
.optiview-nav__item--depth-1 > .optiview-nav__panel,
.optiview-nav__item--depth-2 > .optiview-nav__panel {
	position: static;
	inset: auto;
	left: auto;
	right: auto;
	top: auto;
	z-index: auto;
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin-top: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
	color: inherit;
}

/*
 * Live header: mega panels span the full .menu content width
 * (logo → primary triggers → auxiliary), not only .optiview-nav.
 */
.header .inside-header > .menu {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding-right: 20px;
	padding-left: 20px;
}

.header .inside-header > .menu > .optiview-nav {
	position: static;
}

.optiview-nav__top-row {
	display: flex;
	align-items: center;	
	justify-content: center;
	width: 100%;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--optiview-nav-divider);
	padding-bottom: 5px;
}

/*
 * V2 mega open/close motion tokens (inherited by depth-0 panel opacity/transform).
 * Header background uses a shorter background-color-only transition so it keeps
 * up with the mega surface; panel timing stays on the tokens below.
 * Overrides theme `.header { transition: all 0.35s linear }`.
 * Hover close delay (~160ms) is interaction-only and unchanged in JS.
 */
header.header {
	--optiview-nav-transition-duration: 200ms;
	--optiview-nav-transition-easing: ease;
	transition: background-color 200ms ease !important;
}

/*
 * Entire site header goes solid dark while any V2 top-level mega panel is open.
 * Independent of mega-panel theme (light/dark). Matches scrolled header color.
 */
header.header.is-mega-menu-open {
	background-color: #14141a;
}

.optiview-nav__columns {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	/* Per-panel primary-row equalization (set by navigation.js on desktop). */
	--optiview-nav-primary-row-height: 0px;
}

/*
 * Depth-1 items stay in normal flow so the nested-panel divider ::before can
 * use .optiview-nav__columns as its containing block (full columns width).
 */
.optiview-nav__columns .optiview-nav__item--depth-1 {
	position: static;
}

/*
 * One continuous horizontal divider across the columns region — only while a
 * nested disclosure is expanded. Drawn at the top of the open nested panel
 * (directly under the primary row). Top-level mega open alone does not show it.
 * Full Width Top Row sits outside .optiview-nav__columns and is unaffected.
 */
.optiview-nav__columns
	.optiview-nav__item--depth-1:has(
		> .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle[data-optiview-nav-level="nested"][aria-expanded="true"]
	)
	> .optiview-nav__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Omit top/bottom so the line keeps its static Y (top of the open nested panel). */
	height: 0;
	border-top: 1px solid var(--optiview-nav-divider);
	pointer-events: none;
	z-index: 1;
}

.optiview-nav__column {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 10rem;
	padding-bottom: 30px;
}

.optiview-nav__column + .optiview-nav__column {
	border-left: 1px solid var(--optiview-nav-divider);
}

.optiview-nav__list--depth-1,
.optiview-nav__list--depth-2 {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Depth-1 icon-row cells fill the column's stretched height so trailing dividers read correctly. */
.optiview-nav__column > .optiview-nav__list--depth-1 {
	flex: 1 1 auto;
}

/* Nested submenu under a depth-1 trigger: indented under the parent title (not the icon), own flow, no dividers. */
.optiview-nav__list--depth-2 {
	padding-top: 1.25rem; /* 20px */
	padding-left: 3.75rem; /* 60px — Figma: aligns under parent title text */
}

/*
 * Depth-1 title controls live in .optiview-nav__item-content (icon is a
 * sibling under .optiview-nav__item-primary). Grid is title ± chevron only.
 */
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link,
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child {
	display: grid;
	grid-template-columns: minmax(0, max-content);
	column-gap: 0.625rem; /* 10px */
	align-items: start;
	width: max-content;
	max-width: 100%;
	padding: 0;
	border-bottom: 0;
	font-family: var(--optiview-nav-font-demi);
	text-align: left;
	color: var(--optiview-nav-mega-text);
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link:has(> .optiview-nav__chevron),
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child:has(> .optiview-nav__chevron) {
	grid-template-columns: minmax(0, max-content) auto;
}

.optiview-nav__top-row .optiview-nav__item-heading > .optiview-nav__link {
	display: flex;
	align-items: center;
}

.optiview-nav__columns > .optiview-nav__column:first-child .optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link,
.optiview-nav__columns > .optiview-nav__column:first-child .optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child {
	/* padding-left reserved — outer inset lives on .optiview-nav__item-primary */
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__text,
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__text {
	grid-column: 1;
	grid-row: 1;
	min-width: 0; /* allow shrink below intrinsic width inside minmax(0, max-content) track */
	font-size: 1rem; /* 16px */
	line-height: 1.38;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: inherit;
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__chevron,
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__chevron {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	width: 8px;
	/*
	 * Center on .optiview-nav__text (1rem × line-height 1.38). Rotated chevron
	 * layout height ≈ width (8px); -3px compensates for transform AABB.
	 */
	margin-top: calc((1.38 * 1rem - 8px) / 2 - 3px);
}

/*
 * Linked parent (link + sibling toggle): use the same 10px title→caret gap
 * as the label full-row grid, so both geometries match.
 */
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading:has(> .optiview-nav__link + .optiview-nav__toggle) {
	column-gap: 0.625rem; /* 10px */
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child[aria-expanded="true"],
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child[aria-expanded="true"] > .optiview-nav__text {
	color: var(--optiview-nav-mega-accent);
}

/* Sibling disclosure control beside a linked parent title (e.g. Monetization). */
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child) {
	align-self: center;
	padding: 0;
	color: var(--optiview-nav-mega-text);
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child)[aria-expanded="true"] {
	color: var(--optiview-nav-mega-accent);
}

/*
 * Linked parent title (sibling of the nested toggle) follows the toggle's
 * aria-expanded state — description stays in .optiview-nav__item-content.
 */
.optiview-nav__item--depth-1
	> .optiview-nav__item-primary
	> .optiview-nav__item-content
	> .optiview-nav__item-heading:has(
		> .optiview-nav__toggle[data-optiview-nav-level="nested"][aria-expanded="true"]
	)
	> .optiview-nav__link
	> .optiview-nav__text {
	color: var(--optiview-nav-mega-accent);
}

.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child) > .optiview-nav__chevron {
	width: 8px;
	margin-left: 8px;
}

/*
 * Description sits directly under the title in .optiview-nav__item-content
 * (icon is a separate primary column — no horizontal icon offset needed).
 */
.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__description {
	margin-top: 3px;
	padding: 0 0 0.75rem;
	box-sizing: border-box;
}

/*
 * Depth-2 nested leaf rows (e.g. under a depth-1 trigger's panel): no icon,
 * no description — a single text + trailing chevron row, uppercase per Figma.
 */
.optiview-nav__item--depth-2 > .optiview-nav__link,
.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__link {
	display: inline-flex; /* intrinsic width — title + chevron read as one compact unit */
	width: auto;
	justify-self: start; /* when a sibling toggle makes the <li> a grid row, don't stretch to fill it */
	align-items: center;
	gap: 1.5rem; /* 24px */
	padding: 0.625rem 1.25rem 0.625rem 0;
	font-family: var(--optiview-nav-font-demi);
	color: var(--optiview-nav-mega-text);
}

.optiview-nav__item--depth-2 > .optiview-nav__link > .optiview-nav__text,
.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__text {
	font-size: 1rem; /* 16px */
	line-height: 1.5;
	text-transform: uppercase;
	color: inherit;
}

.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child) {
	align-self: center;
	padding: 0;
	color: var(--optiview-nav-mega-text);
}

.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child)[aria-expanded="true"] {
	color: var(--optiview-nav-mega-accent);
}

.optiview-nav__icon {
	display: inline-block;
	max-width: 32px;
	height: auto;
	vertical-align: middle;
}

/*-- Chevron styles --*/

/* Depth-1 leaf links */
.optiview-nav__item--depth-1:not(.optiview-nav__item--has-children)
    .optiview-nav__chevron {
    margin-left: 6px;
}

.optiview-nav__top-row .optiview-nav__item--depth-1:not(.optiview-nav__item--has-children) .optiview-nav__chevron {
	margin-top: 9px;
}

/* Depth-1 submenu toggles */
.optiview-nav__item--depth-1.optiview-nav__item--has-children
    .optiview-nav__toggle .optiview-nav__chevron {
	margin-left: 8px;
}

/* Depth-2 leaf links */
.optiview-nav__item--depth-2 .optiview-nav__chevron {
    /* width / margin-left / translateY */
}

/*-- Developers menu column width overrides --*/
.nav-layout--developers
.optiview-nav__column[data-optiview-nav-column="1"] {
    flex: 0 0 22%;
}

.nav-layout--developers
.optiview-nav__column[data-optiview-nav-column="2"] {
    flex: 0 0 28%;
}

.nav-layout--developers
.optiview-nav__column[data-optiview-nav-column="3"] {
    flex: 0 0 26%;
}

.nav-layout--developers
.optiview-nav__column[data-optiview-nav-column="4"] {
    flex: 0 0 24%;
}

/*
 * Hover accent (fine pointer only). Matches navigation.js HOVER_MQ.
 * Chevrons follow via fill="currentColor" / color: currentColor.
 * Expanded aria-expanded rules already use --optiview-nav-mega-accent — same token.
 */
@media (hover: hover) and (pointer: fine) {
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link:hover,
	.optiview-nav__top-row .optiview-nav__link:hover,
	.optiview-nav__item--depth-2 > .optiview-nav__link:hover,
	.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__link:hover {
		color: var(--optiview-nav-mega-accent);
	}

	/* Label / full-row nested disclosure (title + chevron in one control). */
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child:hover,
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child:hover > .optiview-nav__text {
		color: var(--optiview-nav-mega-accent);
	}

	/*
	 * Linked parent + sibling nested toggle: one visual hover group.
	 * Hover anywhere on the heading (title, caret, or gap) accents both.
	 */
	.optiview-nav__item--depth-1
		> .optiview-nav__item-primary
		> .optiview-nav__item-content
		> .optiview-nav__item-heading:has(
			> .optiview-nav__link + .optiview-nav__toggle[data-optiview-nav-level="nested"]
		):hover
		> .optiview-nav__link,
	.optiview-nav__item--depth-1
		> .optiview-nav__item-primary
		> .optiview-nav__item-content
		> .optiview-nav__item-heading:has(
			> .optiview-nav__link + .optiview-nav__toggle[data-optiview-nav-level="nested"]
		):hover
		> .optiview-nav__toggle[data-optiview-nav-level="nested"] {
		color: var(--optiview-nav-mega-accent);
	}

	/* Depth-2 sibling caret only (depth-1 linked-parent caret uses the heading group above). */
	.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__toggle:not(:first-child):hover {
		color: var(--optiview-nav-mega-accent);
	}
}

/*
 * -----------------------------------------------------------------------
 * Mobile drawer (max-width: 1024px) — Navigation V2 only.
 * -----------------------------------------------------------------------
 * Matches the existing site-wide hamburger/off-canvas breakpoint by design
 * (style.css / lib/menu.js also use max-width: 1024px), but this rule set
 * only reacts to the shared `#masthead.is-open` state class and to
 * `.optiview-nav`'s own presence — the shared toggle script and its CSS
 * are never edited. Selectors scoped via `.menu:has(> .optiview-nav)`
 * cannot match when V1 (legacy) is rendering, since `.optiview-nav` only
 * exists in the V2 DOM.
 *
 * State model: there is no separate "root vs branch" flag. A branch screen
 * is simply "a depth-0 .optiview-nav__toggle has aria-expanded=true" — the
 * same state desktop already uses to open its mega panel. navigation.js
 * only adds a data-optiview-mobile-branch attribute plus the branch title
 * text (derived from that same state) for this CSS to key off.
 * -----------------------------------------------------------------------
 */
@media (max-width: 1024px) {
	/* Depth-0 chevron: hidden above desktop (see rule near .optiview-nav__chevron); re-enabled here. */
	.optiview-nav__item--depth-0 > .optiview-nav__toggle > .optiview-nav__chevron,
	.optiview-nav__item--depth-0 > .optiview-nav__link + .optiview-nav__toggle > .optiview-nav__chevron {
		display: block;
		width: 10px;
		transform: translateX(-10px);
	}

	/* --- Drawer shell -----------------------------------------------------
	 * While V2 is open, the drawer owns its internal header (logo/Back + X).
	 * Shared .menu__logo__toggle (fixed 75px bar) is hidden only for this
	 * V2 + is-open + <=1024px case; the hamburger remains the open trigger.
	 * .menu is the single vertical scroll surface: main nav + auxiliary.
	 */
	#masthead.is-open:has(.optiview-nav) {
		overflow: hidden;
	}

	#masthead.is-open:has(.optiview-nav) .inside-header {
		height: 100%;
		max-width: none;
		padding: 0;
	}

	#masthead.is-open:has(.optiview-nav) .menu__logo__toggle {
		display: none;
	}

	.optiview-nav {
		display: none;
		flex-direction: column;
		align-self: stretch;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 0;
		overflow: visible;
	}

	#masthead.is-open .optiview-nav {
		display: flex;
		flex: 1 0 auto;
	}

	#masthead.is-open .menu:has(> .optiview-nav) {
		/* Tokens live on .optiview-nav; copy them here so .menu and .menu__auxiliary
		 * (siblings, not descendants of .optiview-nav) can use the same values. */
		--optiview-nav-bg-start: #14141a;
		--optiview-nav-bg-end: #28033a;
		--optiview-nav-divider: #2c2c31;
		--optiview-nav-top-text: #fff;
		--optiview-nav-top-accent: #b924ff;
		--optiview-nav-mega-text: #fff;
		--optiview-nav-mega-muted: #b9b9ba;
		--optiview-nav-mega-accent: #aa33ff;
		--optiview-nav-font-demi: "avenir-next-demi", sans-serif;
		top: 0;
		height: 100dvh;
		min-height: 100dvh;
		width: 100%;
		max-width: none;
		align-items: stretch;
		align-self: stretch;
		flex-wrap: nowrap;
		gap: 0;
		padding-right: 0;
		padding-left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: linear-gradient(to bottom, var(--optiview-nav-bg-start), var(--optiview-nav-bg-end));
		color: var(--optiview-nav-mega-text);
	}

	/*
	 * Light visual drawer surface + auxiliary (siblings of .optiview-nav, so they
	 * cannot inherit the light tokens declared on .optiview-nav). Dark copy above
	 * stays the default. Page data-theme="dark" = this light visual.
	 * Do not copy mobile-header tokens here.
	 */
	#masthead.is-open .menu[data-theme="dark"]:has(> .optiview-nav) {
		--optiview-nav-bg-start: #ffffff;
		--optiview-nav-bg-end: #ffffff;
		--optiview-nav-divider: #DBDBE9;
		--optiview-nav-mega-text: #3236CB;
		--optiview-nav-mega-muted: #6A6A6D;
		--optiview-nav-mega-accent: #661F99;
	}

	#masthead.is-open .menu:has(> .optiview-nav) > .menu__auxiliary {
		display: flex !important; /* beats shared #masthead.is-open .menu__auxiliary{display:block!important} */
		flex: 0 0 auto;
		flex-direction: column-reverse;
		gap: 24px;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		margin: auto 0 0;
		padding: 16px 24px 32px;
		list-style: none;
		background: transparent;
	}

	#masthead.is-open .menu:has(> .optiview-nav) > .menu__auxiliary > li {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
		border-bottom: 0; /* cancel shared .menu__item mobile row divider */
	}

	#masthead.is-open .menu:has(> .optiview-nav) > .menu__auxiliary > li > a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		height: 50px;
		border-radius: 26px;
		font-family: var(--optiview-nav-font-demi);
		font-size: 0.9375rem; /* 15px */
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		text-decoration: none;
		color: #fff;
	}

	/*
	 * Contact Us = filled gradient; Login = outlined.
	 * Target walker button/link classes on the top-level item only, not
	 * :first-child/:last-child (auxiliary order can differ / Login may lead).
	 */
	#masthead.is-open .menu:has(> .optiview-nav) > .menu__auxiliary > li > a.menu__item__button {
		background: linear-gradient(135.12deg, #3e44fe 10.66%, #bb5cff 114.64%);
		box-shadow: 0 4px 8px rgba(97, 97, 97, 0.18);
		border: 0;
	}

	#masthead.is-open .menu:has(> .optiview-nav) > .menu__auxiliary > li > a.menu__item__link {
		border: 1px solid var(--optiview-nav-mega-text);
		color: var(--optiview-nav-mega-text);
		background: transparent;
	}

	/* --- Internal mobile header: logo / Back+title + close -----------------
	 * Always visible while the V2 drawer is open (parent .optiview-nav is
	 * display:none until then). Sticky so it stays put while .menu scrolls.
	 */
	.optiview-nav__mobile-header {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		flex: 0 0 auto;
		position: sticky;
		top: 0;
		z-index: 5;
		box-sizing: border-box;
		min-height: 75px;
		padding: 12px 24px;
		background: var(--optiview-nav-mobile-header-bg);
		border-bottom: 1px solid var(--optiview-nav-mobile-header-divider);
		color: var(--optiview-nav-mobile-header-text);
	}

	.optiview-nav__mobile-logo {
		display: block;
		grid-column: 1;
		justify-self: start;
		max-width: 200px;
		width: 100%;
	}

	.optiview-nav__mobile-logo .site-logo,
	.optiview-nav__mobile-logo .site-logo a,
	.optiview-nav__mobile-logo .site-logo a img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0;
	}

	.optiview-nav__mobile-back {
		display: none;
		grid-column: 1;
		justify-self: start;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 2px;
		border: 0;
		background: transparent;
		color: var(--optiview-nav-mobile-header-text);
		font-family: var(--optiview-nav-font-demi);
		font-size: 1rem;
		line-height: 1.5;
		text-transform: none;
		cursor: pointer;
	}

	.optiview-nav__mobile-back .optiview-nav__chevron {
		display: block;
		width: 8px;
		transform: rotate(180deg); /* native RIGHT chevron -> LEFT for Back */
	}

	.optiview-nav__mobile-branch-title {
		display: none;
		grid-column: 2;
		justify-self: center;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		color: var(--optiview-nav-mobile-header-accent);
		font-family: var(--optiview-nav-font-demi);
		font-size: 1rem;
		line-height: 1.5;
	}

	.optiview-nav__mobile-close {
		display: inline-flex;
		grid-column: 3;
		justify-self: end;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--optiview-nav-mobile-header-text);
		width: 40px;
		height: 40px;
		cursor: pointer;
	}

	.optiview-nav__mobile-close-icon {
		display: block;
		width: 25px;
		height: 25px;
		fill: currentColor;
	}

	.optiview-nav__mobile-back:hover,
	.optiview-nav__mobile-back:focus,
	.optiview-nav__mobile-back:focus-visible,
	.optiview-nav__mobile-back:active,
	.optiview-nav__mobile-close:hover,
	.optiview-nav__mobile-close:focus,
	.optiview-nav__mobile-close:focus-visible,
	.optiview-nav__mobile-close:active {
		background: transparent;
		background-color: transparent;
		box-shadow: none;
		color: var(--optiview-nav-mobile-header-text);
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__mobile-logo {
		display: none;
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__mobile-back {
		display: inline-flex;
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__mobile-branch-title {
		display: block;
	}

	/* --- Root screen: stacked full-width rows, dashed dividers ------------- */
	.optiview-nav__list--depth-0 {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 0;
		overflow: visible;
		padding: 0 24px;
		box-sizing: border-box;
		background: transparent;
	}

	.optiview-nav__item--depth-0 {
		display: block;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.optiview-nav__item--depth-0 > .optiview-nav__link,
	.optiview-nav__item--depth-0 > .optiview-nav__toggle {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 16px 0;
		border-bottom: 1px dashed var(--optiview-nav-root-divider);
		border-radius: 0;
		color: var(--optiview-nav-mega-text);
	}

	/* Linked depth-0 parent + sibling toggle: one full-width dashed row. */
	.optiview-nav__item--depth-0:has(> .optiview-nav__link + .optiview-nav__toggle) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		border-bottom: 1px dashed var(--optiview-nav-root-divider);
		color: var(--optiview-nav-mega-text);
	}

	.optiview-nav__item--depth-0:has(> .optiview-nav__link + .optiview-nav__toggle) > .optiview-nav__link,
	.optiview-nav__item--depth-0:has(> .optiview-nav__link + .optiview-nav__toggle) > .optiview-nav__toggle {
		width: auto;
		padding: 0;
		border-bottom: 0;
	}

	.optiview-nav__item--depth-0:has(> .optiview-nav__link + .optiview-nav__toggle) > .optiview-nav__toggle {
		margin-left: auto;
	}

	/*
	 * Branch screen only: the open depth-0 <li> wraps the in-flow panel, so
	 * its dashed row border would sit under the stacked level-1 items. Leave
	 * root-screen dashed dividers intact, including the last root item.
	 */
	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0,
	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0 > .optiview-nav__link,
	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0 > .optiview-nav__toggle {
		border-bottom: 0;
	}

	/* No dropdown to indicate on mobile, so the desktop "active tab" accent doesn't apply. */
	.optiview-nav__item--depth-0:has(> .optiview-nav__toggle[aria-expanded="true"]) > .optiview-nav__link,
	.optiview-nav__item--depth-0 > .optiview-nav__toggle[aria-expanded="true"] {
		color: var(--optiview-nav-mega-text);
	}

	/* --- Branch screen: open depth-0 panel stays in normal flow -------------
	 * In-flow so branch items + auxiliary share .menu's single scroll.
	 * Closed root rows are taken out of layout (not overlay-hidden).
	 */
	.optiview-nav__item--depth-0 > .optiview-nav__panel {
		position: static;
		inset: auto;
		z-index: auto;
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 24px 0;
		box-shadow: none;
		border-top: 0;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0 {
		display: none;
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0:has(> .optiview-nav__toggle[aria-expanded="true"]) {
		display: block;
		width: 100%;
	}

	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0:has(> .optiview-nav__toggle[aria-expanded="true"]) > .optiview-nav__toggle,
	.optiview-nav[data-optiview-mobile-branch="true"] .optiview-nav__list--depth-0 > .optiview-nav__item--depth-0:has(> .optiview-nav__toggle[aria-expanded="true"]) > .optiview-nav__link {
		display: none;
	}

	/* --- Mega columns: un-column into a single stacked full-width list ------ */
	.optiview-nav__columns,
	.optiview-nav__column,
	.optiview-nav__top-row,
	.optiview-nav__item--depth-1,
	.optiview-nav__item--depth-2,
	.optiview-nav__item-primary,
	.optiview-nav__item-content {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}

	.optiview-nav__columns {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		--optiview-nav-primary-row-height: auto;
	}

	.optiview-nav__column {
		flex: 0 0 auto;
		min-width: 0;
		padding-bottom: 0;
	}

	.nav-layout--developers .optiview-nav__column[data-optiview-nav-column="1"],
	.nav-layout--developers .optiview-nav__column[data-optiview-nav-column="2"],
	.nav-layout--developers .optiview-nav__column[data-optiview-nav-column="3"],
	.nav-layout--developers .optiview-nav__column[data-optiview-nav-column="4"] {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.optiview-nav__item-heading {
		display: flex;
		width: 100%;
		max-width: 100%;
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link,
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child {
		width: auto;
		max-width: 100%;
		grid-template-columns: max-content auto;
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__text,
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__text {
		min-width: auto;
	}

	.optiview-nav__column + .optiview-nav__column {
		border-left: 0;
	}

	.optiview-nav__columns .optiview-nav__list--depth-1 > .optiview-nav__item--depth-1 > .optiview-nav__item-primary {
		height: auto;
		min-height: 0;
		padding-top: 30px;
		padding-bottom: 10px;
	}

	/*
	 * No Full Width Top Row: drop the extra 30px above the first stacked
	 * column item so it sits closer to the mobile branch header.
	 */
	.optiview-nav__item--depth-0
		> .optiview-nav__panel:not(:has(> .optiview-nav__top-row))
		> .optiview-nav__columns
		> .optiview-nav__column:first-child
		> .optiview-nav__list--depth-1
		> .optiview-nav__item--depth-1:first-child
		> .optiview-nav__item-primary {
		padding-top: 0;
	}

	/* No divider between an expanded nested parent (e.g. Monetization) and its children on mobile. */
	.optiview-nav__columns
		.optiview-nav__item--depth-1:has(
			> .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle[data-optiview-nav-level="nested"][aria-expanded="true"]
		)
		> .optiview-nav__panel::before {
		display: none;
	}

	/*
	 * Full-width top row: match other mobile depth-1 rows.
	 * Desktop centers this block (justify-content: center) and optically
	 * zeros the icon offset; neutralize both so it left-aligns at full width
	 * with the same icon/title model as sibling level-1 items.
	 */
	.optiview-nav__top-row {
		justify-content: flex-start;
		align-items: stretch;
		text-align: left;
		border-bottom: 1px solid var(--optiview-nav-divider);
		padding-bottom: 0;
	}

	.optiview-nav__top-row > .optiview-nav__list {
		width: 100%;
		max-width: none;
	}

	.optiview-nav__top-row .optiview-nav__item-primary {
		align-items: start;
	}

	.optiview-nav__top-row .optiview-nav__item-primary > .optiview-nav__icon {
		margin-top: 0; /* same title-line optical offset as other depth-1 icons */
	}

	.optiview-nav__top-row .optiview-nav__item-heading > .optiview-nav__link {
		display: grid;
		grid-template-columns: max-content auto;
		align-items: start;
		width: auto;
		max-width: 100%;
		text-align: left;
	}

	.optiview-nav__top-row .optiview-nav__item--depth-1:not(.optiview-nav__item--has-children) .optiview-nav__chevron {
		margin-top: 0;
	}

	/* --- Branch depth-1 cells: solid divider on the primary row, including last ---
	 * On the primary, not the <li>, so an expanded nested panel sits below the line.
	 * Scoped to .optiview-nav__columns so .optiview-nav__top-row is excluded.
	 */
	.optiview-nav__columns .optiview-nav__list--depth-1 > .optiview-nav__item--depth-1 > .optiview-nav__item-primary {
		border-bottom: 1px solid var(--optiview-nav-divider);
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary {
		padding: 12px 0;
	}

	.optiview-nav__item--depth-1:first-child > .optiview-nav__item-primary {
		padding-top: 0;
	}

	.optiview-nav__item--depth-1:has(.optiview-nav__list--depth-2) > .optiview-nav__item-primary {
		padding-bottom: 0.75rem;
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__text,
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__text {
		font-family: var(--optiview-nav-font-demi);
		font-size: 1.125em; /* 18px, Figma H6 ALT — source of truth for mobile titles */
		line-height: 1.38;
		letter-spacing: -0.1px;
		text-transform: uppercase;
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__chevron,
	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__chevron {
		width: 9px;
		margin-top: 4px; /* re-centers against the larger 20px mobile title (desktop's calc() assumes 16px) */
	}

	.optiview-nav__item--depth-1:not(.optiview-nav__item--has-children) .optiview-nav__chevron {
		margin-left: 6px;
		margin-top: 0;
	}

	.optiview-nav__item--depth-1 > .optiview-nav__item-primary > .optiview-nav__item-content > .optiview-nav__description {
		padding-bottom: 0;
	}

	/* --- Nested (depth-2) disclosures stay inline; just re-indent for mobile */
	.optiview-nav__list--depth-2 {
		padding-top: 0.25rem;
		padding-left: 2.5rem; /* 40px, under the parent title per Figma */
	}

	.optiview-nav__item--depth-2 > .optiview-nav__link > .optiview-nav__text,
	.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__link > .optiview-nav__text,
	.optiview-nav__item--depth-2 > .optiview-nav__item-heading > .optiview-nav__toggle:first-child > .optiview-nav__text {
		font-family: var(--optiview-nav-font-demi);
		font-size: 1.125rem; /* 18px, match depth-1 mobile title size */
		line-height: 1.38;
		letter-spacing: -0.1px;
		text-transform: uppercase;
	}
}

/*
 * Desktop freeze: Full Width Top Row keeps its original bottom divider.
 * The mobile .optiview-nav__top-row { border-bottom: 0 } override must not win
 * at >=1025px. Values match the original shared rule above.
 */
@media (min-width: 1025px) {
	.optiview-nav__top-row {
		border-bottom: 1px solid var(--optiview-nav-divider);
	}
}