/*
 * Home page: the split hero. Text and a typewriter rotator on the left, a Canvas editor
 * frame on the right whose canvas changes with the rotating word, so the claim and the
 * proof move together. The frame is drawn in CSS rather than screenshotted, so it stays
 * crisp at any width and only the demo screenshot inside it is an image.
 */

/*
 * Transparent header. The kit's own mechanism is `#header + .include-header`, but the
 * sticky clone sits between the two here, so the same lift is applied to #content and paid
 * back as hero padding. The gate is a media query at the menu breakpoint, NOT the kit's
 * `.is-expanded-menu` class: that class is added by script, so a class-gated margin is
 * applied at first paint and torn out a moment later, which measured 0.62 CLS on a phone.
 */
@media (min-width: 1200px) {
	.home-page #content { margin-top: calc(-1 * var(--cnvs-header-height)); }
	.home-page .hero-split { padding-top: calc(var(--cnvs-header-height) + clamp(1.5rem, 3vw, 3rem)); }
}

.hero-split {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 6rem);
	background:
		radial-gradient(60rem 40rem at 82% 8%, rgba(26, 115, 232, .09), transparent 62%),
		linear-gradient(180deg, #fbfcfe 0%, #fff 58%);
}
.hero-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 992px) {
	.hero-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3rem; }
}

/* ---- left column ---- */
.hero-split__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	margin-bottom: 1.5rem;
	padding: .3125rem .875rem;
	border: 1px solid var(--site-line);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--site-ink);
	box-shadow: var(--shadow-sm);
}
.hero-split__stars { color: #f5a623; letter-spacing: var(--track-label); font-size: var(--t-sm); }
.hero-split__eyebrow .circle-stack { --cnvs-circle-stack-size: 1.75rem; --cnvs-circle-stack-inset: .55rem; }

.hero-split__title {
	font-size: clamp(2rem, 1.275rem + 3.315vw, 3.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--track-tighter);
	color: var(--site-ink);
	margin: 0 0 1.25rem;
	text-wrap: balance;
}
/* The rotating word has a line of its own, one line tall even while it is erased, so typing
   never rewraps the headline. The word is generated content from data-word: the heading's
   text stays one complete sentence while the word is typed and erased. */
.hero-rotate {
	display: block;
	min-height: 1.2em;
	white-space: nowrap;
	color: var(--site-accent-text);
}
.hero-rotate::before { content: attr(data-word); }
/* The rest of the sentence, set smaller so the headline keeps its three large lines. */
.hero-split__title-tail {
	display: block;
	margin-top: .35em;
	font-size: max(.5em, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--track-tight);
}
.hero-rotate__caret {
	display: inline-block;
	width: .06em;
	margin-left: .04em;
	background: currentColor;
	vertical-align: -.06em;
	height: .84em;
	animation: heroCaret 1.05s steps(1) infinite;
}
@keyframes heroCaret { 0%, 45% { opacity: 1 } 46%, 100% { opacity: 0 } }

.hero-split__lead {
	font-size: var(--t-lg);
	line-height: 1.6;
	color: var(--site-muted);
	max-width: 34rem;
	margin: 0 0 2rem;
}
.hero-split__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.hero-split__actions .button { margin: 0; }
.hero-split__proof {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: var(--t-sm);
	color: var(--site-muted);
}
/* Flex rows keep the icon's font metrics out of the line box, so the row is the same height
   before and after the icon font loads and the editor centred beside it does not move. */
.hero-split__proof li { display: flex; align-items: center; }
.hero-split__proof i { color: var(--site-success); margin-right: .375rem; line-height: 1; }

/* ---- right column: the editor frame ---- */
.hero-editor {
	position: relative;
	border-radius: var(--r-lg);
	background: #fff;
	border: 1px solid var(--site-line);
	box-shadow: 0 32px 64px -32px rgba(15, 33, 66, .32);
	overflow: hidden;
}
.hero-editor__bar {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem .875rem;
	border-bottom: 1px solid var(--site-line);
	background: #fcfdfe;
}
.hero-editor__logo {
	width: 1.5rem; height: 1.5rem;
	border-radius: var(--r-xs);
	background: var(--site-accent);
	color: #fff;
	display: grid; place-items: center;
	font-size: var(--t-xs);
}
.hero-editor__tools { display: flex; gap: .3125rem; }
.hero-editor__tool {
	width: 1.5rem; height: 1.5rem;
	border-radius: var(--r-xs);
	display: grid; place-items: center;
	color: #8a95a5;
	font-size: var(--t-2xs);
	background: transparent;
}
.hero-editor__tool.is-active { background: var(--site-accent-soft); color: var(--site-accent-text); }
.hero-editor__save {
	margin-left: auto;
	padding: .3125rem .75rem;
	border-radius: var(--r-xs);
	background: var(--site-accent);
	color: #fff;
	font-size: var(--t-2xs);
	font-weight: 600;
}
.hero-editor__body { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); }
@media (min-width: 576px) { .hero-editor__body { grid-template-columns: 2.75rem minmax(0, 1fr) 9.5rem; } }

.hero-editor__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: .75rem 0;
	border-right: 1px solid var(--site-line);
	background: #fcfdfe;
	color: #9aa4b2;
	font-size: var(--t-xs);
}
.hero-editor__rail span { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: var(--r-xs); }
.hero-editor__rail span.is-active { background: var(--site-accent); color: #fff; }
/* Canvas AI sits apart from the insert tools, the way the product presents it. */
.hero-editor__rail span.is-ai { margin-top: .375rem; border-top: 1px solid var(--site-line); border-radius: 0; padding-top: .5rem; height: auto; color: var(--site-accent-text); }

/* The canvas ratio matches the shots (1120x1050). Making it taller than the picture makes
   object-fit: cover crop the sides, which cuts the demo's own headline in half. Height comes
   from the column width instead. */
.hero-editor__canvas { position: relative; background: #eef1f6; aspect-ratio: 1120 / 1050; }
.hero-editor__canvas img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	transition: opacity .5s ease;
}
/* The incoming shot is raised above the outgoing one and fades in over it while the
   outgoing stays opaque. Fading both at once lets the canvas show between them, which
   reads as the previous shot lingering. The script drops the outgoing once it is hidden. */
.hero-editor__canvas img.is-shown { opacity: 1; }
.hero-editor__canvas img.is-incoming { z-index: 1; }
/* Canvas stacking, top to bottom: pointers, marker, incoming shot, outgoing shot. */
/* The block outline that tracks the swap, so the frame reads as an editor and not a slideshow. */
.hero-editor__marker {
	position: absolute;
	z-index: 2;
	inset: 1.5rem;
	border: 2px solid var(--site-accent);
	border-radius: 0 var(--r-xs) var(--r-xs) var(--r-xs);
	box-shadow: 0 0 0 4px rgba(26, 115, 232, .12);
	opacity: 0;
	/* The outline is raised once, by the script, and stays for the life of the page. */
	transition: opacity .45s ease-out;
	pointer-events: none;
}
.hero-editor__marker::after {
	content: attr(data-label);
	position: absolute;
	top: -1.3rem; left: -2px;
	padding: .0625rem .375rem;
	border-radius: var(--r-xs) var(--r-xs) 0 0;
	background: var(--site-accent);
	color: #fff;
	font-size: var(--t-2xs);
	font-weight: 600;
	white-space: nowrap;
}
.hero-editor.is-marking .hero-editor__marker { opacity: 1; }

/* Pointers drifting over the canvas, the way a shared design file looks with someone else in it. */
.hero-cursor {
	position: absolute;
	top: 20%; left: 20%;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: .125rem;
	pointer-events: none;
	color: var(--cursor);
	transition: left 1.1s cubic-bezier(.22, .61, .36, 1), top 1.1s cubic-bezier(.22, .61, .36, 1);
}
.hero-cursor svg { flex: none; filter: drop-shadow(0 1px 2px rgba(33, 37, 41, .3)); }
.hero-cursor__tag {
	margin-top: .625rem;
	padding: .0625rem .375rem;
	border-radius: var(--r-xs);
	background: var(--cursor);
	color: #fff;
	font-size: var(--t-2xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.hero-cursor--a { --cursor: var(--site-accent); }
.hero-cursor--b { --cursor: #c2410c; }
/* A ring that fires once when the pointer lands, so the move reads as a click. */
.hero-cursor::before {
	content: "";
	position: absolute;
	top: -.375rem; left: -.375rem;
	width: 1.25rem; height: 1.25rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0;
}
.hero-cursor.is-clicking::before { animation: hero-cursor-ping .7s ease-out 1.05s 1; }
@keyframes hero-cursor-ping {
	0%   { opacity: .8; transform: scale(.4); }
	100% { opacity: 0;  transform: scale(1.5); }
}

.hero-editor__panel {
	display: none;
	padding: .75rem;
	border-left: 1px solid var(--site-line);
	background: #fcfdfe;
	font-size: var(--t-2xs);
	color: var(--site-muted);
}
@media (min-width: 576px) { .hero-editor__panel { display: block; } }
.hero-editor__panel-title { display: block; font-size: var(--t-2xs); font-weight: 700; color: var(--site-ink); margin: 0 0 .5rem; }
.hero-editor__field { margin-bottom: .625rem; }
.hero-editor__field b { display: block; font-weight: 600; color: var(--site-ink); margin-bottom: .1875rem; font-size: var(--t-2xs); }
.hero-editor__input { height: 1.375rem; border: 1px solid var(--site-line); border-radius: var(--r-xs); background: #fff; }
.hero-editor__swatches { display: flex; gap: .25rem; }
.hero-editor__swatches i { width: 1rem; height: 1rem; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.08); }
.hero-editor__slider { height: .25rem; border-radius: var(--r-pill); background: var(--site-line); position: relative; }
.hero-editor__slider::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: var(--r-pill); background: var(--site-accent); }

@media (prefers-reduced-motion: reduce) {
	.hero-rotate__caret { animation: none; opacity: 1; }
	.hero-editor__canvas img { transition: none; }
	.hero-editor__marker { transition: none; }
	.hero-cursor { display: none; }
}

/*
 * The experience showcase: six product screens in one screen height. Six stacked
 * image-and-text rows were 1,727px; as tabs they are about a third of that, and the
 * visitor chooses which one to read instead of scrolling past five they did not want.
 */
.builder-showcase { margin-top: 2.5rem; }
.builder-showcase .showcase-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	justify-content: center;
	margin-bottom: 2rem;
}
.builder-showcase .showcase-tablist button {
	padding: .5rem 1rem;
	border: 1px solid var(--site-line);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--site-muted);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.builder-showcase .showcase-tablist button:hover { color: var(--site-ink); border-color: #c9d3e0; }
.builder-showcase .showcase-tablist button[aria-selected="true"] {
	background: var(--site-ink);
	border-color: var(--site-ink);
	color: #fff;
}
.builder-showcase .showcase-tablist button:focus-visible { outline: 3px solid var(--site-accent-text); outline-offset: 2px; }

.builder-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 992px) { .builder-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; } }
.builder-panel__media {
	border-radius: var(--r-sm);
	overflow: hidden;
	border: 1px solid var(--site-line);
	box-shadow: var(--shadow-sm);
	background: #fff;
}
.builder-panel__media img { display: block; width: 100%; height: auto; }
.builder-panel__copy p { color: var(--site-muted); margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) { .builder-showcase .showcase-tablist button { transition: none; } }

/* Heritage: a sentence that names whose figures these are, rather than a band of numbers
   a reader has to take on trust. */
.heritage-line { font-size: var(--t-lg); line-height: 1.65; color: var(--site-muted); margin-bottom: 2.5rem; }
.heritage-line strong { color: var(--site-ink); }

/*
 * Home rhythm. The page ran to 11,886px across 14 bands; NN/g's eye-tracking puts 74% of
 * viewing time in the first 2,160px, so length past that is mostly unread. These are the
 * layout-level spacing tokens rather than the component 8pt scale.
 */
.home-page .section.py-6 { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.home-page .section + .section { border-top: 0; }
.home-page .section-title { margin-bottom: .75rem; }
.home-page .card-feature { padding: 1.5rem; }

/*
 * Band grammar below the hero. Every band opens with the same device - a centred
 * uppercase label held between two hairlines - and the bands alternate white and
 * --site-band so the rhythm is countable. One flat dark band carries the heritage
 * claim; the closing call to action keeps its own photographic treatment.
 */
.home-page .section:not(.section-band):not(.section-dark):not(.cta-band):not(.stats-band) { background: #fff; }
.home-page .section-dark { background: var(--site-dark); }

.home-page .section-heading.text-center { max-width: none; margin-bottom: 2.75rem; }
.home-page .section-heading.text-center > .section-title,
.home-page .section-heading.text-center > .lead-copy { max-width: 44rem; margin-inline: auto; }

.home-page .eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.25rem;
	font-size: var(--t-2xs);
	letter-spacing: var(--track-label);
	color: var(--site-muted);
}
.home-page .eyebrow::before,
.home-page .eyebrow::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: currentColor;
	opacity: .3;
}
.home-page .section-dark .eyebrow { color: rgba(255, 255, 255, .72); }
.home-page .section-dark .heritage-line { color: rgba(255, 255, 255, .78); }
.home-page .section-dark .heritage-line strong { color: #fff; }
/* The kit resets link underlines with !important; this selector outranks it. */
.home-page .section-heading .eyebrow a[href] { display: inline-block; padding-block: .4em; color: inherit; text-decoration: underline !important; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.home-page .section-dark .section-heading .eyebrow a[href]:hover { color: #fff; }

/* Industry pages under the featured demos. Rows are centred, so thirteen cards end on a
   short row in the middle rather than an orphan at the left edge. */
.industry-block { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.industry-grid {
	--industry-cols: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem 1.25rem;
}
@media (min-width: 576px) { .industry-grid { --industry-cols: 3; } }
@media (min-width: 992px) { .industry-grid { --industry-cols: 4; } }
@media (min-width: 1200px) { .industry-grid { --industry-cols: 5; } }
.industry-grid > .portfolio-item {
	flex: 0 0 calc((100% - (var(--industry-cols) - 1) * 1.25rem) / var(--industry-cols));
	padding: 0 !important;
	text-align: center;
}
.industry-grid .portfolio-image {
	overflow: hidden;
	aspect-ratio: 25 / 18;
	border: 1px solid var(--site-line);
	border-radius: var(--r-sm) !important;
	box-shadow: var(--shadow-sm) !important;
}
.industry-grid .portfolio-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.industry-grid .portfolio-desc { padding-top: .625rem !important; }
.industry-grid .portfolio-desc h3 { margin: 0; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; }
.industry-grid .portfolio-desc h3 a { display: inline-block; padding: .3125rem 0; color: var(--site-ink); text-decoration: none; }
.industry-grid .portfolio-desc h3 a:hover { color: var(--site-accent-text); }
.industry-grid .portfolio-desc span { display: block; font-size: var(--t-xs); line-height: 1.45; color: var(--site-muted); }

/* Three columns, each led by the screen that proves its claim rather than an icon. */
.shot-cols {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	text-align: center;
}
.shot-col { display: flex; flex-direction: column; }
.shot-col h3 { font-size: var(--t-xl); font-weight: 700; margin-bottom: .625rem; }
.shot-col p { color: var(--site-muted); margin-bottom: 1rem; }
.shot-col .link-caps { margin-top: auto; align-self: center; }

.link-caps {
	display: inline-block;
	padding: .3125rem 0;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
}
.link-caps:hover { text-decoration: underline; text-underline-offset: .3em; }

/* The dense grids: a screenshot with its caption under it, five across on a desktop. */
.shot-grid {
	display: grid;
	gap: 1.75rem 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .shot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .shot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.shot-tile { position: relative; margin: 0; }

/* The frame owns the aspect ratio, so the box is reserved before the shot arrives. */
.shot-col__shot,
.shot-tile__shot {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #fff;
	border: 1px solid var(--site-line);
	box-shadow: var(--shadow-sm);
}
.shot-col__shot { border-radius: var(--r-md); margin-bottom: 1.5rem; }
.shot-tile__shot { border-radius: var(--r-sm); }
.shot-grid--demos .shot-tile__shot { aspect-ratio: 25 / 18; }
.shot-col__shot img,
.shot-tile__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* A full admin screenshot is unreadable at tile width, so each tile zooms the corner
   that carries its label: the inserter panel, the settings sidebar, the section list. */
.shot-tile__shot img { transform: scale(1); transform-origin: top center; transition: transform .35s ease; }
.shot-tile.is-left .shot-tile__shot img { object-position: left top; transform: scale(2.4); transform-origin: left top; }
.shot-tile.is-right .shot-tile__shot img { object-position: right top; transform: scale(2.4); transform-origin: right top; }
.shot-tile.is-right-low .shot-tile__shot img { object-position: right 30%; transform: scale(2.4); transform-origin: right 30%; }
.shot-tile:hover .shot-tile__shot img { transform: scale(1.05); }
.shot-tile.is-left:hover .shot-tile__shot img { transform: scale(2.52); }
.shot-tile.is-right:hover .shot-tile__shot img { transform: scale(2.52); }
.shot-tile.is-right-low:hover .shot-tile__shot img { transform: scale(2.52); }

.shot-tile__caption { padding-top: .625rem; text-align: center; }
.shot-tile__caption a {
	display: inline-block;
	padding: .3125rem 0;
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.3;
	color: var(--site-ink);
	text-decoration: none;
}
/* Stretched over the tile so the whole card is the hit area, the label the link name. */
.shot-tile__caption a::after { content: ""; position: absolute; inset: 0; }
.shot-tile:hover .shot-tile__caption a { color: var(--site-accent-text); }
.shot-tile__caption span {
	display: block;
	font-size: var(--t-xs);
	line-height: 1.45;
	color: var(--site-muted);
}

.band-tail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	margin-top: 2.75rem;
	margin-bottom: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.shot-tile__shot img { transition: none; }
	.shot-tile:hover .shot-tile__shot img { transform: none; }
}

/* Main features: the capability grid under the hero. */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 560px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .feat-grid { grid-template-columns: repeat(4, 1fr); } }
.feat-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem 1.5rem; border: 1px solid var(--site-line); border-radius: var(--r-md); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.feat-card:hover, .feat-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-card > i { font-size: var(--t-2xl); line-height: 1; color: var(--site-accent-text); margin-bottom: .875rem; }
.feat-card h3 { font-size: var(--t-lg); font-weight: 700; margin: 0 0 .5rem; }
.feat-card p { font-size: var(--t-sm); color: var(--site-muted); margin: 0 0 1.125rem; }
.feat-card .link-caps { margin-top: auto; }
.feat-card .link-caps::after { content: ""; position: absolute; inset: 0; }

/*
 * Demo ticker: two rows of screenshots drifting in opposite directions, just under the hero.
 * Each track holds its row twice and travels exactly half its width, so the loop is seamless.
 */
.demo-ticker { overflow: hidden; padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(2rem, 4vw, 3.5rem); background: #fff; }
.demo-ticker__row { overflow: hidden; }
.demo-ticker__row + .demo-ticker__row { margin-top: .75rem; }
.demo-ticker__track { display: flex; width: max-content; }
.demo-ticker__track--ltr { animation: demo-ticker-ltr 90s linear infinite; }
.demo-ticker__track--rtl { animation: demo-ticker-rtl 90s linear infinite; }
.demo-ticker__track:hover { animation-play-state: paused; }
@keyframes demo-ticker-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes demo-ticker-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.demo-ticker__item {
	flex: none;
	width: 200px;
	margin-right: .75rem;
	border: 1px solid var(--site-line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.demo-ticker__item img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
	.demo-ticker__track--ltr, .demo-ticker__track--rtl { animation: none; }
}

/* Stats band: the figures a buyer asks for, before anything else on the page. */
.home-page .stats-band { background: var(--site-dark); color: #fff; }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; margin: 0; padding: 0; list-style: none; text-align: center; }
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stat-row { grid-template-columns: repeat(5, 1fr); } }
.stat-row li { display: flex; flex-direction: column; gap: .25rem; }
.stat-row strong { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: var(--track-tight); color: #fff; font-variant-numeric: tabular-nums; }
.stat-row span { font-size: var(--t-sm); color: rgba(255, 255, 255, .72); }

/* A second, smaller card overlapping the editor's bottom right corner. It sits in its own
   stage rather than inside .hero-editor, because that element clips its children. The glass
   treatment needs something behind it, which is why it straddles the editor edge rather than
   sitting clear of it. */
.hero-editor-stage { position: relative; }
.hero-ai {
	position: absolute;
	right: -1.25rem;
	bottom: -1.5rem;
	z-index: 4;
	width: 15.5rem;
	padding: .875rem 1rem 1rem;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	box-shadow: 0 20px 44px -20px rgba(15, 33, 66, .42), inset 0 1px 0 rgba(255, 255, 255, .75);
	animation: hero-ai-float 6s ease-in-out infinite;
}
/* Where the browser cannot blur, fall back to an opaque card rather than unreadable text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-ai { background: #fff; border-color: var(--site-line); }
}
@keyframes hero-ai-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}
.hero-ai__head { display: flex; align-items: center; gap: .375rem; font-size: var(--t-2xs); font-weight: 700; color: var(--site-accent-text); margin-bottom: .5rem; }
.hero-ai__head i { font-size: var(--t-xs); }
/* Two lines tall whatever the word, so retyping it never resizes the card. */
.hero-ai__prompt { margin: 0 0 .75rem; font-size: var(--t-xs); line-height: 1.5; color: var(--site-ink); min-height: 3em; }
.hero-ai__prompt span[data-hero-ai-word] { font-weight: 600; color: var(--site-accent-text); }
.hero-ai__caret { display: inline-block; width: 1px; height: .85em; margin-left: .0625rem; vertical-align: -.1em; background: var(--site-accent); animation: hero-ai-blink 1.1s steps(1) infinite; }
@keyframes hero-ai-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.hero-ai__btn { display: inline-block; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--site-ink); color: #fff; font-size: var(--t-2xs); font-weight: 600; }
/* Below the split it would hang off the screen, and the editor is already full width. */
@media (max-width: 991px) { .hero-ai { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.hero-ai { animation: none; }
	.hero-ai__caret { animation: none; }
}