/**
 * Mavereon component styles.
 *
 * Tokens come from theme.json (--wp--preset--*). This file only composes them
 * into components. Aliases below exist purely for readability; changing a
 * colour still means changing theme.json, never this file.
 *
 * Contents
 *   1.  Token aliases
 *   2.  Base and accessibility
 *   3.  Layout rhythm
 *   4.  Buttons
 *   5.  Header and navigation
 *   6.  Hero
 *   7.  Trust bar
 *   8.  Cards, grids, steps
 *   9.  Alternating feature strips
 *   10. Dark sections
 *   11. Comparison table
 *   12. FAQ
 *   13. Forms
 *   14. Contact, breadcrumbs
 *   15. Footer
 *   16. Sticky mobile CTA
 *   17. Consent banner
 *   18. Placeholders and editor notes
 *   19. Motion and print
 */

/* -------------------------------------------------------------------------
 * 1. Token aliases
 * ---------------------------------------------------------------------- */

:root {
	--mvr-base: var(--wp--preset--color--base);
	--mvr-surface: var(--wp--preset--color--surface);
	--mvr-surface-alt: var(--wp--preset--color--surface-alt);
	--mvr-line: var(--wp--preset--color--line);
	--mvr-ink: var(--wp--preset--color--ink);
	--mvr-ink-soft: var(--wp--preset--color--ink-soft);
	--mvr-ink-muted: var(--wp--preset--color--ink-muted);
	--mvr-primary: var(--wp--preset--color--primary);
	--mvr-primary-strong: var(--wp--preset--color--primary-strong);
	--mvr-primary-soft: var(--wp--preset--color--primary-soft);
	--mvr-navy: var(--wp--preset--color--navy);
	--mvr-navy-deep: var(--wp--preset--color--navy-deep);
	--mvr-navy-soft: var(--wp--preset--color--navy-soft);
	--mvr-accent: var(--wp--preset--color--accent);
	--mvr-on-navy: var(--wp--preset--color--on-navy);
	--mvr-on-navy-muted: var(--wp--preset--color--on-navy-muted);

	/*
	 * Deep-field dark surface. One light source in the upper right over a very
	 * dark navy, with a dot grid fading in across the lower half. Every dark
	 * band on the site is painted from these, so they stay in step.
	 */
	--mvr-field-glow: rgba(46, 105, 198, 1);
	--mvr-field-fill: rgba(13, 54, 128, 0.88);
	--mvr-field-dot: rgba(142, 182, 240, 0.22);
	--mvr-field-dot-pitch: 18px;
	--mvr-field-glow-x: 72%;
	--mvr-field-glow-y: 6%;
	--mvr-field-fill-x: 16%;
	--mvr-field-strength: 1;

	--mvr-radius-sm: 6px;
	--mvr-radius-md: 10px;
	--mvr-radius-lg: 16px;
	--mvr-radius-pill: 999px;

	--mvr-shadow-sm: 0 1px 2px rgba(10, 21, 36, 0.06), 0 1px 3px rgba(10, 21, 36, 0.05);
	--mvr-shadow-md: 0 2px 4px rgba(10, 21, 36, 0.04), 0 8px 24px rgba(10, 21, 36, 0.08);
	--mvr-shadow-lg: 0 12px 40px rgba(10, 21, 36, 0.12);

	--mvr-t-fast: 140ms cubic-bezier(0.2, 0.6, 0.3, 1);
	--mvr-t-base: 220ms cubic-bezier(0.2, 0.6, 0.3, 1);

	--mvr-header-h: 72px;
}

/* -------------------------------------------------------------------------
 * 2. Base and accessibility
 * ---------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--mvr-header-h) + 16px);
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* One visible, high-contrast focus treatment everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mvr-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.mvr-header:not(.is-scrolled) :where(a, button):focus-visible,
.mvr-section--dark :where(a, button):focus-visible,
.mvr-footer :where(a, button):focus-visible,
.mvr-consent :where(a, button):focus-visible {
	outline-color: var(--mvr-accent);
}

::selection {
	background: var(--mvr-primary);
	color: #fff;
}

/*
 * WordPress injects its own skip link for block themes and positions it with
 * inline styles. Only the appearance on focus is restyled here; the
 * positioning is left to core so the two do not fight.
 */
.wp-block-template-part .skip-link:focus,
.skip-link:focus {
	background-color: var(--mvr-base);
	color: var(--mvr-ink);
	border-radius: var(--mvr-radius-sm);
	box-shadow: var(--mvr-shadow-lg);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	outline: 3px solid var(--mvr-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * 3. Layout rhythm
 * ---------------------------------------------------------------------- */

.mvr-section {
	padding-block: var(--wp--preset--spacing--80);
}

.mvr-section--tight {
	padding-block: var(--wp--preset--spacing--70);
}

.mvr-section--flush-top {
	padding-block-start: 0;
}

.mvr-section--surface {
	background-color: var(--mvr-surface);
}

/*
 * The product name, set in the wordmark itself.
 *
 * The mark has letterforms no font here can reproduce — the "A" is a bare
 * triangle with no crossbar — so the real SVG is painted behind the word
 * rather than approximated with type. The word itself stays in the DOM and is
 * simply pushed out of view: screen readers read it, crawlers index it, and
 * copying the paragraph still copies "vizAI".
 *
 * Sized in em, so it tracks whatever type surrounds it — a heading, a nav item
 * or body copy — instead of being pinned to one size. The box keeps the logo's
 * own 1145 x 311 viewBox ratio, so background-size: contain never letterboxes.
 *
 * The height is set from the ink rather than from the box. The artwork does not
 * fill its viewBox: the glyphs occupy 279 of its 311 units, inset by 16 top and
 * bottom. Sizing the box to the cap height therefore drew the mark about a tenth
 * short of the type beside it -- at 15px nav links, caps of 11px next to a
 * wordmark standing 9.7px, which is why it read as small rather than as part of
 * the sentence.
 *
 * So the box is the cap height grossed up by that inset: 0.733em of measured cap
 * height / (279/311) = 0.82em, and 0.82 x (1145/311) = 3.02em wide. The painted
 * mark now stands 11.03px against an 11px cap at nav size, and holds that
 * relationship at every size because all of it is in em.
 *
 * vertical-align carries the same correction. The ink sits 5.1% of the box above
 * its bottom edge, so the box is dropped 0.042em to put the wordmark's baseline
 * on the text baseline instead of floating it.
 */
.mvr-vizai {
	display: inline-block;
	width: 3.02em;
	height: 0.82em;
	vertical-align: -0.042em;
	background-image: url("../img/vizai-logo.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	/* The word is present and copyable; only its glyphs are out of frame. */
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
}

/*
 * On any dark ground, the colourway the on-navy file carries: white "viz" and
 * a blue lifted for contrast. Filled buttons are included — a navy wordmark on
 * a blue fill is unreadable.
 */
:is(
	.mvr-section--dark,
	.mvr-hero--dark,
	.mvr-cta-band,
	.mvr-footer,
	.mvr-btn--primary,
	.mvr-header__cta
) .mvr-vizai,
.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-vizai {
	background-image: url("../img/vizai-logo-onnavy.svg");
}

/*
 * The dropdown panel is navy at every width — a tinted surface on desktop, the
 * dark drawer on mobile — while the header bar around it is dark on some pages
 * and white on others. So the panel names its own colourway rather than
 * inheriting the bar's, which otherwise put a navy wordmark on a navy panel
 * wherever the header was white.
 */
.mvr-nav__panel .mvr-vizai {
	background-image: url("../img/vizai-logo-onnavy.svg");
}

/*
 * Only where the hero actually carries the lockup.
 *
 * A hero showing the wordmark at display size should not repeat it, smaller,
 * two lines below -- but this was written as `.mvr-hero h1`, which suppressed
 * the mark in every hero heading whether a lockup was there or not. The
 * book-a-demo hero has no lockup, so its heading rendered "vizAI" as plain
 * type while the breadcrumb directly above it showed the real mark.
 *
 * :has() scopes it to the heroes that do carry one. Where :has() is missing the
 * rule simply does not match, and the product hero shows the mark twice -- a
 * cosmetic repeat rather than a wrong wordmark.
 */
.mvr-hero:has( .mvr-productmark ) h1 .mvr-vizai {
	display: inline;
	width: auto;
	height: auto;
	background: none;
	overflow: visible;
	text-indent: 0;
}

/* Section intro: eyebrow, heading, one supporting line. */
.mvr-section-head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--60);
}

.mvr-eyebrow,
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mvr-primary);
	margin-block-end: 0.75rem;
}

.mvr-section--dark .mvr-eyebrow,
.mvr-section--dark .is-style-eyebrow {
	color: var(--mvr-accent);
}

/*
 * Product lockup: the vizAI logo used as the eyebrow of a hero.
 *
 * The logo is the product name, so it carries alt="vizAI" and any adjacent
 * text is the descriptor only — the name is never announced twice.
 */
.mvr-productmark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block: 0 1.25rem;
}

.mvr-productmark__logo {
	display: block;
	width: auto;
	height: 30px;
}

.mvr-productmark--lg .mvr-productmark__logo {
	height: clamp(38px, 5vw, 52px);
}

/*
 * The descriptor sits under the mark, not beside it. Alongside, it competed
 * with the logo for the same optical line and pushed the wordmark off the left
 * edge the rest of the hero aligns to.
 */
.mvr-productmark__tag {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mvr-on-navy-muted);
}

.mvr-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--mvr-ink-soft);
}

.mvr-section--dark .mvr-lead {
	color: var(--mvr-on-navy-muted);
}

/* -------------------------------------------------------------------------
 * 4. Buttons
 * ---------------------------------------------------------------------- */

.mvr-btn,
.wp-block-button__link {
	/*
	 * Buttons are drawn as both <a> and <button> here, and the browser does not
	 * size those alike: it gives <button> border-box and leaves an anchor on
	 * content-box. Any height or width set on a button therefore meant one thing
	 * on a form and another on a link -- a 48px minimum on the sticky bar's link
	 * came out 78px tall once its own padding was added on top. Stating the box
	 * makes the two agree.
	 */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.875rem 1.5rem;
	border-radius: 8px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mvr-t-fast), border-color var(--mvr-t-fast), color var(--mvr-t-fast), transform var(--mvr-t-fast);
}

.mvr-btn--primary,
.wp-block-button:not(.is-style-secondary):not(.is-style-ghost-light) .wp-block-button__link {
	background-color: var(--mvr-primary);
	color: #fff;
	border-color: var(--mvr-primary);
	box-shadow: 0 1px 2px rgba(6, 18, 32, 0.16), 0 6px 18px rgba(4, 91, 196, 0.22);
}

.mvr-btn--primary:hover,
.wp-block-button:not(.is-style-secondary):not(.is-style-ghost-light) .wp-block-button__link:hover {
	background-color: var(--mvr-primary-strong);
	border-color: var(--mvr-primary-strong);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(6, 18, 32, 0.18), 0 10px 26px rgba(4, 91, 196, 0.3);
}

.mvr-btn--lg {
	padding: 1rem 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* Secondary: outlined, for the "See vizAI" style action. */
.is-style-secondary .wp-block-button__link,
.mvr-btn--secondary {
	background-color: transparent;
	color: var(--mvr-ink);
	border-color: var(--mvr-line);
}

.is-style-secondary .wp-block-button__link:hover,
.mvr-btn--secondary:hover {
	background-color: var(--mvr-surface);
	border-color: var(--mvr-ink-muted);
	color: var(--mvr-ink);
}

/* Ghost: for navy backgrounds. */
.is-style-ghost-light .wp-block-button__link,
.mvr-btn--ghost-light {
	background-color: transparent;
	color: var(--mvr-on-navy);
	border-color: rgba(231, 237, 246, 0.35);
}

.is-style-ghost-light .wp-block-button__link:hover,
.mvr-btn--ghost-light:hover {
	background-color: rgba(231, 237, 246, 0.1);
	border-color: var(--mvr-on-navy);
	color: #fff;
}

.wp-block-buttons {
	gap: 0.75rem;
}

/* Text link with a trailing arrow. */
.mvr-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
}

.mvr-link-arrow::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--mvr-t-fast);
}

.mvr-link-arrow:hover::after {
	transform: translateX(3px);
}

[dir="rtl"] .mvr-link-arrow::after {
	transform: scaleX(-1);
}

[dir="rtl"] .mvr-link-arrow:hover::after {
	transform: scaleX(-1) translateX(3px);
}

/* -------------------------------------------------------------------------
 * 5. Header and navigation
 * ---------------------------------------------------------------------- */

.mvr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--mvr-base);
	border-block-end: 1px solid var(--mvr-line);
	transition: background-color var(--mvr-t-base), border-color var(--mvr-t-base), box-shadow var(--mvr-t-base);
}

/*
 * Two groups, not three items: the wordmark and the navigation travel together
 * on the leading edge (.mvr-header__lead) and the actions hold the trailing
 * edge alone.
 *
 * This bar used to space three children apart. With only four nav items that
 * spread 872px of content across a 1200px container and split the leftover
 * 328px into two equal voids -- one of them sitting directly between the
 * wordmark and the first link, which is the gap that made the header read as an
 * unfinished template rather than a considered one. Pairing the mark with the
 * nav closes that gap and leaves a single deliberate space before the call to
 * action, which is what the eye expects.
 *
 * The grouping is done in parts/header.html rather than here on purpose. The
 * flex layout, its nowrap and its justification are emitted by WordPress from
 * the block's own layout attributes, at a specificity this file cannot override
 * without !important; expressing the intent in the markup keeps one source of
 * truth instead of two that disagree.
 */
.mvr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 3rem);
	min-height: var(--mvr-header-h);
}

/*
 * Below 1024px the nav leaves the flow to become a fixed overlay, so this group
 * carries the wordmark by itself; min-width keeps it from forcing an overflow
 * in the narrow band just above that breakpoint.
 *
 * The gap sets how far the first link sits from the wordmark, and it is worth
 * more than a single number: too tight and the mark looks like the first menu
 * item, too loose and the void this change set out to remove creeps back. It is
 * written here rather than as the block's own blockGap because WordPress
 * discards a clamp() in that attribute and silently substitutes the theme
 * default. Two classes to clear `:root :where(.is-layout-flex)`, which sets the
 * default gap at one-class specificity.
 */
.mvr-header__inner .mvr-header__lead {
	min-width: 0;
	gap: clamp(1.75rem, 2.6vw, 3rem);
}

/* Transparent over a dark hero, solid once scrolled. */
.mvr-has-transparent-header .mvr-header {
	position: fixed;
	inset-inline: 0;
	background-color: transparent;
	border-block-end-color: transparent;
	color: var(--mvr-on-navy);
}

.mvr-has-transparent-header .mvr-header.is-scrolled {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-block-end-color: var(--mvr-line);
	color: var(--mvr-ink);
	box-shadow: var(--mvr-shadow-sm);
}

.mvr-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.mvr-brand img {
	display: block;
	width: auto;
	height: 16px;
}

/*
 * The header mark carries a little more weight than the nav beside it. At 16px
 * the wordmark's cap height matched the 15px links almost exactly, so the brand
 * read as a fifth menu item instead of leading the bar; 18px separates them
 * without letting a 12.5:1 wordmark take over.
 *
 * Fluid rather than fixed because the mark grows 25px wider at 18px, and just
 * above the 1024px breakpoint -- where the desktop nav is still in the bar --
 * that is enough to leave the nav and the actions almost touching. This holds
 * 16px through the narrow desktop range and reaches 18px around 1440px, where
 * there is room to spare. The footer keeps 16px: it has a whole row to itself.
 */
.mvr-header .mvr-brand img {
	height: clamp(1rem, 1.25vw, 1.125rem);
}

/*
 * Two logo files, one shown at a time: the light mark only over a dark hero.
 *
 * The selector carries `img` deliberately. `.mvr-brand img` above sets
 * `display: block` and scores (0,1,1); a bare `.mvr-brand__light` scores
 * (0,1,0) and loses to it, which left the white mark visible on every light
 * header instead of hidden. Matching the element keeps this rule ahead of it,
 * while the transparent-header rules below, at (0,3,0), still win over both.
 */
.mvr-brand img.mvr-brand__light {
	display: none;
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-brand__light {
	display: block;
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-brand__dark {
	display: none;
}

.mvr-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 550;
}

.mvr-header .wp-block-navigation .wp-block-navigation-item__content {
	color: inherit;
	text-decoration: none;
	padding-block: 0.5rem;
}

.mvr-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--mvr-primary);
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .wp-block-navigation-item__content:hover {
	color: var(--mvr-accent);
}

/* Submenus: a calm panel, not a mega-menu. */
.mvr-header .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: 0.5rem;
	background-color: var(--mvr-base);
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-md);
	box-shadow: var(--mvr-shadow-md);
	color: var(--mvr-ink);
}

.mvr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: var(--mvr-radius-sm);
}

.mvr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--mvr-primary-soft);
	color: var(--mvr-primary-strong);
}

.mvr-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

@media (max-width: 781px) {
	.mvr-header__actions .mvr-header__cta {
		display: none;
	}
}

.mvr-header__container {
	width: 100%;
}

/* Mobile overlay menu. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mvr-navy);
	color: var(--mvr-on-navy);
	padding-top: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--mvr-on-navy);
	font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--mvr-on-navy-muted);
}

/* Push page content below the fixed header on transparent-header pages only. */
.mvr-has-transparent-header .wp-site-blocks > main {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * 6. Hero
 * ---------------------------------------------------------------------- */

.mvr-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--mvr-header-h) + clamp(3rem, 7vw, 6rem)) clamp(3.5rem, 8vw, 6.5rem);
}

.mvr-hero--dark {
	color: var(--mvr-on-navy);
	--mvr-field-strength: 1;
}

.mvr-hero > * {
	position: relative;
	z-index: 1;
}

.mvr-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.mvr-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.mvr-hero h1 {
	margin-block: 0 1.25rem;
	max-width: 18ch;
}

.mvr-hero--dark h1 {
	color: #fff;
}

.mvr-hero__sub {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	max-width: 46ch;
	color: var(--mvr-on-navy-muted);
	margin-block-end: 2rem;
}

.mvr-hero:not(.mvr-hero--dark) .mvr-hero__sub {
	color: var(--mvr-ink-soft);
}

.mvr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1.5rem;
}

/*
 * The gap below the buttons exists to separate them from the reassurance line.
 * Where a hero has no line under them, that margin is dead space that pushes
 * the text column off centre against the visual beside it.
 */
.mvr-hero__actions:last-child {
	margin-block-end: 0;
}

.mvr-hero__reassure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-on-navy-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mvr-hero__visual {
	position: relative;
}

/*
 * The mockups are drawn on a transparent canvas so the section's own field
 * shows through them. A radius and a drop shadow would then frame nothing —
 * they would outline the empty corners of the SVG box rather than an edge the
 * eye can see — so the image is left unframed.
 */
.mvr-hero__visual img {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 7. Trust bar
 * ---------------------------------------------------------------------- */

.mvr-trust {
	padding-block: 2.25rem;
	background-color: var(--mvr-navy-deep);
	color: var(--mvr-on-navy-muted);
	border-block-start: 1px solid rgba(231, 237, 246, 0.08);
}

.mvr-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2.5rem;
	text-align: center;
}

/*
 * 700 is the heaviest Public Sans face this theme ships, and it was already
 * applied. What made the line read light was the muted grey at this size, so
 * the colour goes to full white. Family, size and tracking are unchanged.
 */
.mvr-trust__label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

.mvr-trust__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mvr-trust__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-on-navy);
	background-color: rgba(231, 237, 246, 0.06);
	border: 1px solid rgba(231, 237, 246, 0.14);
	border-radius: var(--mvr-radius-pill);
}

.mvr-trust__badge svg {
	color: var(--mvr-accent);
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 8. Cards, grids, steps
 * ---------------------------------------------------------------------- */

.mvr-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));

	/*
	 * Every card in a row is the height of the tallest, so the row reads as one
	 * band rather than a ragged edge. Sizing each card to its own content was
	 * tried first, to close the gap under short cards, but three different
	 * heights side by side looked broken rather than honest. The trailing space
	 * under a short card is the cost of a straight edge, and it is the cheaper
	 * of the two.
	 */
	align-items: stretch;
}

.mvr-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Six or nine cards: three to a row, so the last row is never short. */
.mvr-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

@media (min-width: 62rem) {
	.mvr-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mvr-card,
.is-style-card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.75rem;
	background-color: var(--mvr-base);
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-lg);
	transition: border-color var(--mvr-t-base), box-shadow var(--mvr-t-base), transform var(--mvr-t-base);
}

.mvr-card--link:hover,
a.mvr-card:hover {
	border-color: rgba(4, 91, 196, 0.38);
	box-shadow: var(--mvr-shadow-md);
	transform: translateY(-2px);
}

.mvr-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block-end: 0.5rem;
	border-radius: var(--mvr-radius-md);
	background-color: var(--mvr-primary-soft);
	color: var(--mvr-primary-strong);
}

.mvr-card h3,
.mvr-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.mvr-card p {
	margin: 0;
	color: var(--mvr-ink-soft);
}

.mvr-card a {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

/*
 * Integration status pill. Two states only, and the honest one is visually
 * distinct rather than tucked away: a reader scanning the grid should be able
 * to see which connectors have never met real hardware.
 */
.mvr-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: flex-start;
	margin: 0 0 0.25rem;
	padding: 0.2rem 0.625rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: var(--mvr-radius-pill);
}

.mvr-status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: currentColor;
}

.mvr-status--live {
	color: #0b5537;
	background-color: #e6f4ee;
	border: 1px solid #b9dfcd;
}

.mvr-status--commissioning {
	color: #7a4a00;
	background-color: #fff3d6;
	border: 1px solid #e0b45e;
}

/* Card on navy. */
.is-style-card-dark,
.mvr-card--dark {
	background-color: rgba(231, 237, 246, 0.04);
	border-color: rgba(231, 237, 246, 0.14);
	color: var(--mvr-on-navy);
}

.mvr-card--dark h3 {
	color: #fff;
}

.mvr-card--dark p {
	color: var(--mvr-on-navy-muted);
}

.mvr-card--dark .mvr-card__icon {
	background-color: rgba(56, 217, 198, 0.12);
	color: var(--mvr-accent);
}

/* Problem / outcome pairs. */

@media (min-width: 768px) {
	
}

/* Numbered steps. */
.mvr-steps {
	display: grid;
	gap: 1.25rem;
	counter-reset: mvr-step;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.mvr-step {
	position: relative;
	padding-block-start: 3.25rem;
}

.mvr-step::before {
	counter-increment: mvr-step;
	content: counter(mvr-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--mvr-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}

/* Connector line between steps on wide screens. */
@media (min-width: 900px) {
	.mvr-step:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block-start: 1.25rem;
		inset-inline-start: 3rem;
		inline-size: calc(100% - 1.75rem);
		block-size: 1px;
		background-color: var(--mvr-line);
	}
}

.mvr-step h3 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.5rem;
}

.mvr-step p {
	margin: 0;
	color: var(--mvr-ink-soft);
}

.mvr-section--dark .mvr-step p {
	color: var(--mvr-on-navy-muted);
}

.mvr-section--dark .mvr-step h3 {
	color: #fff;
}

/* Checklists. */
.is-style-checklist,
.mvr-checklist {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: 0.625rem;
}

.is-style-checklist li,
.mvr-checklist li {
	position: relative;
	padding-inline-start: 1.9rem;
}

.is-style-checklist li::before,
.mvr-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.3em;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--mvr-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Privacy policy sections.
 *
 * The rhythm between them is set here rather than by section padding, because
 * these sit inside the legal template's own constrained section and must keep
 * its left edge exactly -- the heading, the date and every paragraph share one
 * alignment, in both directions.
 */
.mvr-legal .mvr-policy + .mvr-policy {
	margin-block-start: 2.75rem;
}

.mvr-legal .mvr-policy h2 {
	margin-block-end: 0.85rem;
}

/*
 * The two callouts, which are the only blocks that step out of the measure:
 * a tinted card, inset from its own edge, so the eye reads them as an aside
 * rather than as another section.
 */
.mvr-legal .mvr-policy--callout {
	background-color: var(--mvr-surface);
	border-radius: var(--mvr-radius-sm);
	padding: 1.5rem;
}

@media (min-width: 600px) {
	.mvr-legal .mvr-policy--callout {
		padding: 1.75rem 2rem;
	}
}

/*
 * Plain bullets, for prose that lists rather than sells.
 *
 * The checklist above marks things being offered, and a blue tick beside
 * "identity-document information" in the privacy policy would read as a feature
 * rather than as a disclosure. This is an ordinary list: a disc in the brand
 * blue, indented with a logical property so it mirrors in Arabic on its own.
 * The measure and justification come from .mvr-prose li, which already covers
 * both directions.
 */
.mvr-prose__list {
	list-style: disc;
	padding-inline-start: 1.35rem;
	margin-block: 0.85rem 0;
	display: grid;
	gap: 0.55rem;
}

.mvr-prose__list li::marker {
	color: var(--mvr-primary);
}

.mvr-section--dark .is-style-checklist li::before,
.mvr-section--dark .mvr-checklist li::before {
	background-color: var(--mvr-accent);
}

/* -------------------------------------------------------------------------
 * 9. Alternating feature strips
 * ---------------------------------------------------------------------- */

.mvr-strip {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

/*
 * A strip's own padding exists to separate stacked strips from one another and
 * from the section head above them. A strip that is alone in its section has
 * nothing to separate itself from, so that padding lands on top of the
 * section's own and opens a gap roughly twice the size intended.
 */
.mvr-section > .mvr-strip:only-child {
	padding-block: 0;
}

@media (min-width: 900px) {
	.mvr-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Media on the trailing side for every second strip. */
	.mvr-strip--reverse .mvr-strip__media {
		order: -1;
	}
}

.mvr-strip__body h3 {
	margin-block: 0 0.75rem;
}

.mvr-strip__body p:not(.mvr-eyebrow) {
	color: var(--mvr-ink-soft);
}

.mvr-strip__media img {
	display: block;
	width: 100%;
	border-radius: var(--mvr-radius-lg);
	border: 1px solid var(--mvr-line);
	box-shadow: var(--mvr-shadow-md);
}

.mvr-section--dark .mvr-strip__body p:not(.mvr-eyebrow) {
	color: var(--mvr-on-navy-muted);
}

/*
 * On a dark band the mockup is drawn on a transparent canvas so the field
 * shows through it. A border and shadow would then frame nothing, outlining
 * the empty corners of the SVG box rather than an edge the eye can see. The
 * framed treatment above still applies on light sections, where a transparent
 * screen would show white through its own gaps.
 */
.mvr-section--dark .mvr-strip__media img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 9b. The dark field
 *
 * Painted with gradients rather than an image: no extra request, no fixed
 * resolution to go soft on a retina display, and it reflows to any viewport.
 *
 * Two layers sit behind the content at z-index -1. `isolation: isolate` on the
 * surface keeps that negative index local, so a layer can never slide behind
 * the section above it. Both layers are inert to the pointer and both are
 * decorative, so they are dropped for print and for forced-colours users.
 *
 * Intensity is one variable per surface. The hero carries it at full strength;
 * mid-page bands and the footer step down so they support the hero instead of
 * competing with it.
 * ---------------------------------------------------------------------- */

.mvr-hero--dark,
.mvr-section--dark,
.mvr-cta-band,
.mvr-footer {
	position: relative;
	isolation: isolate;
	background-color: var(--mvr-navy-deep);
}

/* Layer 1: the light source, and a downward fall-off into near-black. */
.mvr-hero--dark::before,
.mvr-section--dark::before,
.mvr-cta-band::before,
.mvr-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--mvr-field-strength);
	background:
		radial-gradient(
			104rem 62rem at var(--mvr-field-glow-x) var(--mvr-field-glow-y),
			var(--mvr-field-glow),
			transparent 66%
		),
		radial-gradient(80rem 54rem at var(--mvr-field-fill-x) 34%, var(--mvr-field-fill), transparent 72%),
		linear-gradient(to bottom, rgba(6, 18, 32, 0) 46%, rgba(4, 10, 22, 0.96) 100%);
}

/* Layer 2: the dot grid, masked so it only reads in the lower half. */
.mvr-hero--dark::after,
.mvr-section--dark::after,
.mvr-cta-band::after,
.mvr-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(var(--mvr-field-dot) 1px, transparent 1.6px);
	background-size: var(--mvr-field-dot-pitch) var(--mvr-field-dot-pitch);
	-webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 95%);
	mask-image: linear-gradient(to bottom, transparent 40%, #000 95%);
}

/*
 * Where mask-image is unsupported the dots would cover the whole surface at
 * full strength, which is heavier than intended. Hide them rather than ship
 * the wrong texture; the gradient field alone still reads correctly.
 */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
	.mvr-hero--dark::after,
	.mvr-section--dark::after,
	.mvr-cta-band::after,
	.mvr-footer::after {
		display: none;
	}
}

@media (forced-colors: active) {
	.mvr-hero--dark::before,
	.mvr-section--dark::before,
	.mvr-cta-band::before,
	.mvr-footer::before,
	.mvr-hero--dark::after,
	.mvr-section--dark::after,
	.mvr-cta-band::after,
	.mvr-footer::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 10. Dark sections
 * ---------------------------------------------------------------------- */

.mvr-section--dark {
	color: var(--mvr-on-navy);
	--mvr-field-strength: 0.5;
}

.mvr-section--dark :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.mvr-section--dark p {
	color: var(--mvr-on-navy-muted);
}

.mvr-section--dark a:not(.wp-block-button__link):not(.mvr-btn) {
	color: var(--mvr-accent);
}

/* Final CTA band. */
.mvr-cta-band {
	color: var(--mvr-on-navy);
	--mvr-field-strength: 0.75;
	--mvr-field-glow-x: 50%;
	--mvr-field-glow-y: -8%;
	text-align: center;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.mvr-cta-band h2 {
	color: #fff;
	max-width: 20ch;
	margin-inline: auto;
}

.mvr-cta-band p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--mvr-on-navy-muted);
}

.mvr-cta-band .mvr-hero__actions,
.mvr-cta-band .wp-block-buttons {
	justify-content: center;
	margin-block-start: 1.75rem;
}

/* -------------------------------------------------------------------------
 * 11. Comparison table
 * ---------------------------------------------------------------------- */

.mvr-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-lg);
}

.is-style-comparison table,
.mvr-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 44rem;
	background-color: var(--mvr-base);
}

.is-style-comparison th,
.is-style-comparison td,
.mvr-table th,
.mvr-table td {
	padding: 1rem 1.25rem;
	text-align: start;
	border-block-end: 1px solid var(--mvr-line);
	vertical-align: top;
}

.is-style-comparison thead th,
.mvr-table thead th {
	background-color: var(--mvr-surface);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--mvr-ink);
	font-weight: 700;
	position: sticky;
	top: 0;
}

.is-style-comparison tbody tr:last-child td,
.mvr-table tbody tr:last-child td {
	border-block-end: 0;
}

.is-style-comparison td:first-child,
.mvr-table td:first-child {
	font-weight: 600;
	color: var(--mvr-ink);
}

.mvr-yes {
	color: var(--wp--preset--color--success);
	font-weight: 600;
}

.mvr-no {
	color: var(--mvr-ink-muted);
}

/* A qualified "yes" in the vizAI column: true, but with a stated boundary. */
.mvr-caveat {
	color: var(--wp--preset--color--warning);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 12. FAQ
 * ---------------------------------------------------------------------- */

.wp-block-details.is-style-faq{
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-md);
	padding: 0;
	margin-block-end: 0.75rem;
	background-color: var(--mvr-base);
	overflow: hidden;
}

.wp-block-details.is-style-faq summary{
	list-style: none;
	cursor: pointer;
	padding: 1.125rem 3rem 1.125rem 1.25rem;
	font-weight: 600;
	position: relative;
	color: var(--mvr-ink);
}

.wp-block-details.is-style-faq summary::-webkit-details-marker{
	display: none;
}

.wp-block-details.is-style-faq summary::after{
	content: "";
	position: absolute;
	inset-inline-end: 1.25rem;
	inset-block-start: 1.35rem;
	width: 1rem;
	height: 1rem;
	background-color: var(--mvr-ink-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--mvr-t-fast);
}

.wp-block-details.is-style-faq[open] summary::after{
	transform: rotate(180deg);
}

.wp-block-details.is-style-faq > *:not(summary){
	padding-inline: 1.25rem;
	color: var(--mvr-ink-soft);
}

.wp-block-details.is-style-faq > *:last-child{
	padding-block-end: 1.25rem;
}

/* -------------------------------------------------------------------------
 * 13. Forms
 * ---------------------------------------------------------------------- */

.mvr-form-wrap {
	background-color: var(--mvr-base);
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--mvr-shadow-md);
}

.mvr-form__reach {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-ink-soft);
}

.mvr-form__reach a {
	color: var(--mvr-primary);
	font-weight: 600;
}

.mvr-form__grid {
	display: grid;
	gap: 1.125rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.mvr-form-wrap--compact .mvr-form__grid {
	grid-template-columns: minmax(0, 1fr);
}

.mvr-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.mvr-field--full {
	grid-column: 1 / -1;
}

.mvr-field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--mvr-ink);
}

.mvr-req {
	color: var(--wp--preset--color--danger);
}

.mvr-optional {
	font-weight: 400;
	color: var(--mvr-ink-muted);
}

/*
 * box-sizing is spelled out because this theme has no global reset and the
 * browser does not treat these controls alike: select and button are border-box
 * in the UA stylesheet, input and textarea are content-box. With width: 100% and
 * 14px of padding each side that made every text field 30px wider than the
 * select and the button below it -- enough to push the fields 5px outside the
 * form card on a 390px screen, and on the desktop grid to hang the textarea
 * 30px past the column its own select ended at.
 */
.mvr-field input[type="text"],
.mvr-field input[type="email"],
.mvr-field input[type="tel"],
.mvr-field select,
.mvr-field textarea {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--mvr-ink);
	padding: 0.75rem 0.875rem;
	background-color: var(--mvr-base);
	border: 1px solid var(--mvr-line);
	border-radius: 8px;
	transition: border-color var(--mvr-t-fast), box-shadow var(--mvr-t-fast);
}

.mvr-field textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.mvr-field :is(input, select, textarea):hover {
	border-color: var(--mvr-ink-muted);
}

.mvr-field :is(input, select, textarea):focus {
	border-color: var(--mvr-primary);
	box-shadow: 0 0 0 3px rgba(4, 91, 196, 0.18);
	outline: none;
}

.mvr-field :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--mvr-primary);
	outline-offset: 1px;
}

.mvr-field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
}

.mvr-field__error:empty {
	display: none;
}

.mvr-field__error {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--danger);
	font-weight: 500;
}

/*
 * The file input keeps the browser's own button: a custom one has to be
 * rebuilt for keyboard and screen reader use, and the native control already
 * announces the chosen filename. Only the box around it is brought into line
 * with the other fields.
 */
.mvr-field input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.65rem 0.875rem;
	border: 1px solid var(--mvr-line);
	border-radius: 8px;
	background-color: var(--mvr-base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-ink);
	transition: border-color var(--mvr-t-fast), box-shadow var(--mvr-t-fast);
}

.mvr-field input[type="file"]:focus-visible {
	outline: 2px solid var(--mvr-primary);
	outline-offset: 2px;
}

.mvr-field input[type="file"]::file-selector-button {
	margin-inline-end: 0.75rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-sm);
	background: var(--mvr-surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--mvr-ink);
	cursor: pointer;
}

/* What the field will accept, said before the applicant picks the wrong thing. */
.mvr-field__hint {
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-ink-soft);
}

.mvr-field--consent {
	margin-block-start: 1.125rem;
}

.mvr-field--consent label {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-ink-soft);
	line-height: 1.5;
}

.mvr-field--consent input {
	margin-block-start: 0.15rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	accent-color: var(--mvr-primary);
}

.mvr-form__submit {
	margin-block: 1.5rem 0.75rem;
}

.mvr-form__submit .mvr-btn {
	width: 100%;
}

@media (min-width: 600px) {
	.mvr-form__submit .mvr-btn {
		width: auto;
	}
}

/* Honeypot: removed from the visual and accessibility trees, not display:none,
   so that a browser autofill routine does not silently populate it. */
/*
 * The spam honeypot is hidden the same way as .screen-reader-text rather than
 * with a negative offset. `left: -9999px` costs nothing in LTR, where overflow
 * past the left edge is not scrollable, but in RTL the inline axis is reversed
 * and that offset became real scrollable width: the Arabic form pages reported
 * a document scrollWidth of 11238px against a 1239px viewport, giving readers a
 * ten-thousand-pixel sideways scroll into empty space. Clipping in place hides
 * the field just as completely and adds no overflow in either direction.
 */
.mvr-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mvr-form__status:empty {
	display: none;
}

.mvr-form__status {
	margin-block-end: 1rem;
	padding: 0.875rem 1rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
}

.mvr-form__status--error {
	background-color: #fdeceb;
	color: #8c1d18;
	border: 1px solid #f3c9c6;
}

.mvr-form__banner {
	padding: 1rem 1.25rem;
	border-radius: var(--mvr-radius-md);
	margin-block-end: 1.25rem;
	font-weight: 500;
}

.mvr-form__banner--success {
	background-color: #e6f4ee;
	color: #0b5537;
	border: 1px solid #b9dfcd;
}

.mvr-form__banner--error {
	background-color: #fdeceb;
	color: #8c1d18;
	border: 1px solid #f3c9c6;
}

.mvr-form__banner:focus {
	outline: 3px solid var(--mvr-primary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 14. Contact list, breadcrumbs
 * ---------------------------------------------------------------------- */

.mvr-contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.25rem;
}

/*
 * Where the list follows other content — the demo column puts it under a
 * checklist — it needs separating from it. It keeps margin: 0 when it opens a
 * column, so the footer and contact page are unaffected.
 */
.mvr-contact:not(:first-child) {
	margin-block-start: 2rem;
}

.mvr-contact__item {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
}

.mvr-contact__item svg {
	color: var(--mvr-primary);
	flex: 0 0 auto;
	margin-block-start: 0.15rem;
}

.mvr-contact__label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--mvr-ink-muted);
	margin-block-end: 0.15rem;
}

.mvr-contact address {
	font-style: normal;
}

.mvr-contact--dark .mvr-contact__item svg {
	color: var(--mvr-accent);
}

.mvr-contact--dark .mvr-contact__label {
	color: var(--mvr-on-navy-muted);
}

.mvr-contact--dark a {
	color: var(--mvr-on-navy);
}

/*
 * The contact page lays the same list out across the measure instead of down
 * the leading edge.
 *
 * .mvr-contact is a single column because that is what the footer and the demo
 * sidebar need -- a narrow rail beside other content. Under a centred section
 * head with the full width to itself it read as an unfinished page: three short
 * lines stacked at the left with the right half of the screen empty. Scoped to
 * this section so the two places that want the rail keep it.
 *
 * auto-fit rather than a fixed three, so two long addresses or a future phone
 * line rewrap on their own instead of being held to a count that stops being
 * right the moment the content changes.
 */
.mvr-section--contact .mvr-contact {
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	max-width: 56rem;
	margin-inline: auto;
}

.mvr-section--contact .wp-block-buttons {
	justify-content: center;
	margin-block-start: 3rem;
}

.mvr-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-ink-muted);
}

.mvr-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.4rem;
	color: var(--mvr-line);
}

.mvr-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.mvr-breadcrumbs a:hover {
	color: var(--mvr-primary);
	text-decoration: underline;
}

.mvr-breadcrumbs--dark ol {
	color: var(--mvr-on-navy-muted);
}

.mvr-breadcrumbs--dark a:hover {
	color: var(--mvr-accent);
}

/* -------------------------------------------------------------------------
 * 15. Footer
 * ---------------------------------------------------------------------- */

.mvr-footer {
	color: var(--mvr-on-navy-muted);
	--mvr-field-strength: 0.3;
	--mvr-field-glow-x: 50%;
	--mvr-field-glow-y: 110%;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.mvr-footer :where(h2, h3, h4) {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block: 0 1rem;
}

/*
 * A brand name is not a style choice. Uppercasing the generic column labels is
 * fine, but it rendered the product as "VIZAI", which is not how it is written
 * anywhere else on the site or in the product itself.
 */
.mvr-footer :where(h2, h3, h4).is-brand,
.mvr-footer .is-brand a,
.mvr-eyebrow.is-brand {
	text-transform: none;
	letter-spacing: 0.01em;
}

/*
 * A brand eyebrow carries a sentence rather than a one- or two-word label, so
 * it is set well above the label size. 22px sits between the x-large and
 * xx-large presets, so it is written as a clamp of its own rather than snapped
 * to a token that would be wrong: it eases down on a narrow screen the way the
 * headings do, instead of holding 22px against a 390px viewport.
 */
.mvr-eyebrow.is-brand {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
}

.mvr-footer a {
	color: var(--mvr-on-navy-muted);
	text-decoration: none;
}

.mvr-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.mvr-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * The footer mark is sized here, not by `.mvr-brand img`, because this rule is
 * more specific and wins. It was left at 30px while the header was reduced,
 * so the footer logo was rendering nearly twice the size of the header one --
 * and at the current 12.5:1 artwork that is 376px wide, which does not fit
 * across a 390px phone.
 */
.mvr-footer__brand img {
	height: 16px;
	width: auto;
	margin-block-end: 1rem;
}

.mvr-footer__bottom {
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgba(231, 237, 246, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
}

.mvr-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 16. Sticky mobile CTA
 * ---------------------------------------------------------------------- */

.mvr-mobile-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 95;
	display: none;
	gap: 0.625rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	background-color: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-block-start: 1px solid var(--mvr-line);
	box-shadow: 0 -4px 20px rgba(10, 21, 36, 0.08);
	transition: transform var(--mvr-t-base);
}

/*
 * Without JavaScript the bar is simply always in place. Only once scripting is
 * confirmed does it start hidden, to be revealed on scroll past the hero CTAs,
 * so it never covers the buttons it duplicates.
 */
.mvr-js .mvr-mobile-cta {
	transform: translateY(110%);
}

.mvr-mobile-cta .mvr-btn {
	flex: 1 1 0;
	padding-inline: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	min-height: 48px;
}

/*
 * The secondary button needs a surface of its own here.
 *
 * Everywhere else it sits on a page, where transparent-with-a-hairline reads
 * correctly as the quieter of two buttons. This bar is near-white, so the same
 * treatment left it with nothing but a faint outline on a nearly identical
 * ground -- next to a solid blue primary it read as an empty box rather than as
 * a button. A tinted surface and a firmer border give it weight without letting
 * it compete with the action it supports.
 */
.mvr-mobile-cta .mvr-btn--secondary {
	background-color: var(--mvr-surface);
	border-color: var(--mvr-ink-muted);
	color: var(--mvr-ink);
}

@media (max-width: 781px) {
	.mvr-mobile-cta {
		display: flex;
	}

	.mvr-js .mvr-mobile-cta.is-visible {
		transform: translateY(0);
	}

	/* Keep the last section clear of the fixed bar. */
	.mvr-footer {
		padding-block-end: 6rem;
	}
}

/* -------------------------------------------------------------------------
 * 17. Consent banner
 * ---------------------------------------------------------------------- */

.mvr-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 200;
	background-color: var(--mvr-navy);
	color: var(--mvr-on-navy);
	border-block-start: 1px solid rgba(231, 237, 246, 0.16);
	box-shadow: 0 -8px 30px rgba(3, 9, 20, 0.35);
}

.mvr-consent[hidden] {
	display: none;
}

.mvr-consent__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.mvr-consent__title {
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.25rem;
}

.mvr-consent__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-on-navy-muted);
	max-width: 62ch;
}

.mvr-consent__text a {
	color: var(--mvr-accent);
}

.mvr-consent__actions {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.mvr-consent__actions {
		width: 100%;
	}

	.mvr-consent__actions .mvr-btn {
		flex: 1 1 0;
	}

	/* Do not stack the consent banner on top of the CTA bar. */
	.mvr-consent:not([hidden]) ~ .mvr-mobile-cta {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 18. Placeholders and editor notes
 * ---------------------------------------------------------------------- */

/*
 * Every image shipped with this theme is a placeholder. The caption is the
 * label required by the build brief; it disappears site-wide once the
 * "Label placeholder images" setting is switched off, and per-image as soon as
 * the caption is deleted in the editor.
 */
.mvr-placeholder figcaption,
figure.mvr-placeholder figcaption {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.625rem;
	padding: 0.25rem 0.625rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #7a4a00;
	background-color: #fff3d6;
	border: 1px dashed #e0b45e;
	border-radius: var(--mvr-radius-pill);
}

.mvr-hide-placeholder-labels .mvr-placeholder figcaption {
	display: none;
}

.mvr-editor-note {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--mvr-line);
	border-radius: var(--mvr-radius-md);
	background-color: var(--mvr-surface);
	color: var(--mvr-ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * 18b. Remaining components
 * ---------------------------------------------------------------------- */

/* Card used as a whole-area link. */
a.mvr-card,
a.mvr-card:hover {
	text-decoration: none;
	color: inherit;
}

a.mvr-card h3 {
	color: var(--mvr-ink);
}

a.mvr-card .mvr-link-arrow {
	color: var(--mvr-primary);
	margin-block-start: auto;
	padding-block-start: 0.75rem;
}

/* Customer quote. */

/* Pull-out note panel. */

/* Long-form legal pages. */
.mvr-legal .mvr-section > .wp-block-group > * + * {
	margin-block-start: 1.25rem;
}

/*
 * Rendered by mavereon/legal-updated now, so the flex comes from here rather
 * than from a block layout attribute. Without it the label and the date stacked
 * on two lines.
 */
.mvr-legal__updated {
	display: flex;
	flex-wrap: wrap;
	color: var(--mvr-ink-muted);
	gap: 0.4rem;
	margin-block-end: 2rem;
}

.mvr-legal__updated p,
.mvr-legal__updated .wp-block-post-date {
	margin: 0;
	color: var(--mvr-ink-muted);
}

/*
 * The stacking rule a few lines above puts 1.25rem on every sibling inside a
 * legal section, and this row is one of them: the date sat 20px below its own
 * label instead of beside it. Same specificity, stated after, so it wins.
 */
.mvr-legal .mvr-section .mvr-legal__updated > * + * {
	margin-block-start: 0;
}

/* Style guide specimens. */
.mvr-swatches {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	margin-block: 2rem 3rem;
}

.mvr-swatch {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
}

.mvr-swatch__chip {
	display: block;
	height: 4rem;
	border-radius: var(--mvr-radius-md);
	border: 1px solid var(--mvr-line);
}

.mvr-swatch__name {
	font-weight: 600;
}

.mvr-swatch code {
	color: var(--mvr-ink-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.mvr-type-scale {
	display: grid;
	gap: 1rem;
	margin-block: 2rem 1rem;
}

.mvr-type-scale p {
	margin: 0;
}

.mvr-type-scale code {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--mvr-ink-muted);
	margin-inline-start: 0.5rem;
}

/* -------------------------------------------------------------------------
 * 19. Motion and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.mvr-card--link:hover,
	a.mvr-card:hover {
		transform: none;
	}
}

@media print {
	.mvr-header,
	.mvr-mobile-cta,
	.mvr-consent,
	.mvr-cta-band {
		display: none !important;
	}

	.mvr-hero--dark,
	.mvr-section--dark,
	.mvr-footer {
		background: none !important;
		color: #000 !important;
	}

	/* The field is decoration; it must not print as a wall of ink. */
	.mvr-hero--dark::before,
	.mvr-section--dark::before,
	.mvr-footer::before,
	.mvr-hero--dark::after,
	.mvr-section--dark::after,
	.mvr-footer::after {
		display: none !important;
	}
}

/*
 * The vizAI wordmark in brand colours, above a light section's intro.
 *
 * Height rather than width, so the mark keeps a constant optical weight against
 * the eyebrow beneath it whatever the viewport. The width/height attributes on
 * the tag still reserve the correct box before the SVG arrives, so nothing
 * shifts on load.
 */
.mvr-section-head__mark {
	display: block;
	width: auto;
	height: clamp(1.6rem, 3vw, 2.25rem);
	margin-inline: auto;
	margin-block-end: 1rem;
}

/* Left-aligned intros keep the mark on the text edge, not floating centre. */

/* -------------------------------------------------------------------------
 * 18. Typographic discipline
 *
 * Three rules that decide how every block of text on the site breaks. They are
 * set once, globally, so a paragraph reads the same whether it sits in a hero,
 * a card or a legal page — rather than each component making its own choice.
 * ---------------------------------------------------------------------- */

/*
 * Body copy: ask the browser to look ahead over the whole paragraph instead of
 * greedily filling each line. This is what removes the single short word
 * stranded on a last line, and it evens out the ragged edge at the same time.
 *
 * Unsupported browsers fall back to normal greedy wrapping, so nothing here is
 * load-bearing — the text is merely better set where the browser can manage it.
 */
:where(p, li, dd, dt, figcaption, blockquote, summary, .mvr-lead) {
	text-wrap: pretty;
}

/*
 * Headings: even the lines out rather than leaving a long first line and one
 * orphaned word beneath. Browsers cap this at a handful of lines and skip it
 * beyond, which is exactly the right trade — it matters most on the two- and
 * three-line headings this site actually uses.
 */
:where(h1, h2, h3, h4, h5, h6),
.mvr-eyebrow,
.mvr-card h3,
.mvr-strip__body h3 {
	text-wrap: balance;
}

/*
 * Measure. Anything past roughly 75 characters costs the reader the start of
 * the next line, so every prose block is capped. The centred section intro was
 * the one place running unbounded: it inherited a 46rem parent, which is close
 * to 90 characters at the large size a lead is set in.
 */
.mvr-lead {
	max-width: 62ch;
	margin-inline: auto;
}

.mvr-strip__body p,
.mvr-prose p,
.mvr-prose li {
	max-width: 68ch;
}

/*
 * Arabic sets wider than Latin at the same character count and does not
 * hyphenate the way Latin does, so it is given a little more room rather than
 * being forced into a Latin measure.
 */
[dir="rtl"] .mvr-lead {
	max-width: 68ch;
}

[dir="rtl"] .mvr-strip__body p,
[dir="rtl"] .mvr-prose p,
[dir="rtl"] .mvr-prose li {
	max-width: 74ch;
}

/*
 * Justified prose.
 *
 * Ragged-right leaves lines ending at very different points, which reads as
 * untidy in a block of six lines. Justifying flushes both edges.
 *
 * hyphens: auto is not optional here. Justification works by stretching the
 * spaces between words, so without the option to break a long word the browser
 * has to open large gaps to reach the right margin — the "rivers" that give
 * justified text on the web a bad name. With hyphenation the stretch stays
 * small. It relies on the lang attribute, which this theme sets on <html> for
 * both trees, so English and Arabic each hyphenate by their own rules.
 *
 * Applied only to blocks with a wide enough measure to justify cleanly. Card
 * text and checklists run two or three words to a line, where justification
 * would pull those few words apart across the full width.
 */
.mvr-hero__sub,
.mvr-lead,
.mvr-strip__body p,
.mvr-prose p,
.mvr-prose li,
.mvr-section--dark p,
.mvr-section p,
.entry-content p{
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

/*
 * Cards and steps: justified, with hyphenation doing the work.
 *
 * These columns run to about thirty characters. Justification stretches the
 * spaces between words, so a line left holding two words opens one enormous
 * gap — "and          muster-point" was the failure. The fix is not to stop
 * justifying but to give the browser more places to break.
 *
 * hyphenate-limit-chars is tuned down from its default: any word of five
 * letters or more may hyphenate, with at least two letters kept on each side of
 * the break. At this measure that turns most long words into two shorter
 * fragments, which is exactly what removes the stretch.
 */
.mvr-card p,
.mvr-card li,
.mvr-step p,
/*
 * Below the point where a card becomes a full-width single column there is no
 * longer a narrow measure to fight, but nor is there any benefit — a phone
 * reads better ragged.
 */
@media (max-width: 600px) {
	.mvr-card p,
	.mvr-card li,
	.mvr-step p {
		text-align: start;
	}
}

/*
 * Exceptions, and the reason for each.
 *
 * Justification works by stretching word gaps. A line needs several gaps to
 * absorb that stretch without opening holes, so anything that runs a few words
 * to a line is left alone. These are not oversights; forcing them would make
 * the page look worse, not more disciplined.
 */
.mvr-eyebrow,
.mvr-trust__label,
.mvr-trust__badge,
.mvr-cta-band p,
.mvr-section-head .mvr-eyebrow,
figcaption,
.mvr-placeholder figcaption,
th,
td,
label,
.mvr-field__error,
.mvr-lang-chip,
.mvr-footer a,
.mvr-legal p,
.mvr-btn,
.wp-block-button__link{
	text-align: inherit;
	hyphens: manual;
}

/* Centred intros stay centred: a flush block under a centred heading reads as
   two different layouts stacked, not one. */
.mvr-section-head .mvr-lead {
	text-align: center;
	hyphens: auto;
}

/*
 * The last line of a justified paragraph is never stretched, so it stays
 * ragged by definition. text-wrap: pretty, set above, keeps it from being a
 * single stranded word.
 */

@media (max-width: 600px) {
	/*
	 * On a narrow screen the measure drops to roughly thirty characters, where
	 * justification has too few word gaps to absorb the stretch and starts
	 * opening holes. Ragged-right is the better setting at that width.
	 *
	 * Hyphenation has to come off with it. It was turned on to serve
	 * justification -- breaking a long word so the browser need not open rivers
	 * of space to reach the right margin -- and once the text is ragged there is
	 * no margin to reach and nothing left for it to solve. All it did was break
	 * words for no reason: the vizAI hero read "verifies vis-" then "itors" on a
	 * line that had room to spare. Ragged text sets better unhyphenated.
	 */
	.mvr-hero__sub,
.mvr-lead,
.mvr-strip__body p,
.mvr-prose p,
.mvr-prose li,
.mvr-card p,
.mvr-step p,
.mvr-section--dark p,
.mvr-section p,
.entry-content p{
		text-align: start;
		hyphens: manual;
	}

	.mvr-section-head .mvr-lead {
		text-align: center;
		hyphens: manual;
	}
}

/* -------------------------------------------------------------------------
 * 19. Small screens
 *
 * The header row carries a brand mark, a language switch, a call to action and
 * an injected menu button. At 390px there is not room for all four, and the
 * overflow pushed the whole page wider than the viewport. Rather than let
 * `overflow-x: clip` hide that, the row is given less to carry.
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	/*
	 * Below this width the mark is sized by width rather than height. It is
	 * authored at roughly 12.5:1, so 220px renders about 17px tall -- shorter
	 * than the previous mark at the same width, because the new artwork is
	 * twice as elongated. Matching the old height instead would need 300px,
	 * which is most of a 390px screen before the globe and menu are placed.
	 */
	.mvr-brand img {
		width: 147px;
		height: auto;
	}

	/* The language switch keeps its globe but drops the word beside it. */
	.mvr-langswitch span {
		display: none;
	}

	.mvr-langswitch {
		padding-inline: 0.6rem;
	}

	.mvr-header__actions {
		gap: 0.4rem;
	}
}

@media (max-width: 420px) {
	.mvr-brand img {
		width: 117px;
	}
}

/*
 * A last line of defence, not a fix.
 *
 * Nothing should overflow after the rules above, but a single long word or an
 * unbreakable string in editor content could still push the page wide. This
 * keeps that from turning into a horizontally scrolling site while leaving
 * deliberately scrollable regions, such as wide tables, alone.
 */
@media (max-width: 781px) {
	.mvr-hero__visual,
	.mvr-strip__media {
		max-width: 100%;
	}

	.mvr-hero__visual img,
	.mvr-strip__media img {
		width: 100%;
		height: auto;
	}
}

/*
 * The demo section is a single form now that the column beside it is gone.
 * Left unconstrained it would run the full content width, which is far wider
 * than a form should ever be.
 */
.mvr-section--demo .mvr-form,
.mvr-section--demo form {
	max-width: 46rem;
	margin-inline: auto;
}