/* ==========================================================================
   Tenvilo — clean modern SaaS design system
   Light, airy, blue accent, soft rounded cards, subtle shadows.
   ========================================================================== */

:root {
	color-scheme: light;

	/* Outer page canvas */
	--canvas: #FCFCFC;

	/* Brand / accent */
	--accent: #0290FF;
	--accent-strong: #0277d6;
	--accent-press: #0264b4;
	--accent-soft: #e9f4ff;
	--accent-soft-2: #f2f8ff;
	--accent-ink: #0b5b99;

	/* Neutrals */
	--bg: #FCFCFC;
	--bg-soft: #F7F8FB;
	--surface: #FFFFFF;
	--surface-2: #F4F5F7;
	--ink: #030712;
	--ink-soft: #4a5263;
	--muted: #697282;
	--muted-2: #98a0ae;
	--white: #ffffff;
	--inverse: #ffffff;

	/* Lines */
	--line: #E6E8EC;
	--line-soft: #E6E8EC;
	--line-faint: #EDEEF1;

	/* Legacy token aliases (kept so legal-v2.css / profile.css stay intact) */
	--paper: #ffffff;
	--paper-strong: #F4F5F7;
	--paper-soft: #ffffff;
	--sand: #e9f4ff;
	--sand-soft: #f2f8ff;
	--sage: #d7ecff;
	--mauve: #eef2f7;
	--butter: #0290FF;
	--accent-warm: #0290FF;
	--accent-cool: #5fb6ff;

	/* Shadows — near-invisible, borders do the separating */
	--shadow-xs: 0 1px 1px rgba(3, 7, 18, 0.03);
	--shadow-sm: 0 1px 2px rgba(3, 7, 18, 0.04);
	--shadow-md: 0 2px 6px rgba(3, 7, 18, 0.05);
	--shadow-lg: 0 8px 24px rgba(3, 7, 18, 0.07);
	--shadow-float: 0 8px 24px rgba(3, 7, 18, 0.08);
	--panel-shadow: var(--shadow-sm);
	--panel-shadow-hover: var(--shadow-md);

	/* Radii — tighter, more mature */
	--radius-xl: 20px;
	--radius-lg: 16px;
	--radius-md: 12px;
	--radius-sm: 9px;
	--radius-pill: 999px;

	/* Layout */
	--container-max: 1200px;
	--container-inline: 24px;
	--section-space-y: 110px;
	/* Single vertical rhythm for landing sections (desktop ~94px, mobile 64px) */
	--section-pad: clamp(64px, 6.5vw, 94px);

	/* Type scale */
	--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--font-display: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-size-hero-title: clamp(2.9rem, 6.4vw, 5.6rem);
	--font-size-section-title: clamp(2rem, 3.8vw, 3.25rem);

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--duration-fast: 150ms;
	--duration-normal: 220ms;
	--duration-slow: 360ms;

	--interactive-target-min: 44px;
	--topbar-height: 72px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Layout shell ---------- */
.page-shell {
	width: 100%;
	/* clip horizontal only — vertical clip was cutting navbar CTA glow into a hard line */
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------- Outer white shell (header + hero) ---------- */
.shell {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
	/* Stage 5.5: transparent so the page reads as one continuous #FCFCFC canvas */
	background: transparent;
}

main {
	display: block;
}

.section {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--section-pad) var(--container-inline);
}

.section-head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.section-head h2 {
	font-size: var(--font-size-section-title);
}

.section-head p {
	color: var(--ink-soft);
	font-size: 1.125rem;
	max-width: 56ch;
}

.eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent);
}

.eyebrow--pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	border: 1px solid rgba(45, 106, 255, 0.14);
}

/* ---------- Buttons ---------- */
.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--radius-md);
	font-size: 0.98rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease);
}

.button:active {
	transform: translateY(1px);
}

.button--primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 18px rgba(45, 106, 255, 0.28);
}

.button--primary:hover {
	background: var(--accent-strong);
	box-shadow: 0 12px 24px rgba(45, 106, 255, 0.34);
	transform: translateY(-1px);
}

.button--ghost {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-xs);
	font-weight: 500;
}

.button--ghost:hover {
	border-color: #cdd3df;
	background: var(--surface-2);
	transform: translateY(-1px);
}

.button--light {
	background: #fff;
	color: var(--accent-strong);
	box-shadow: 0 10px 24px rgba(11, 16, 32, 0.18);
	font-weight: 500;
}

.button--light:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(11, 16, 32, 0.24);
}

.button--ghost-light {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.32);
	font-weight: 500;
}

.button--ghost-light:hover {
	background: rgba(255, 255, 255, 0.2);
}

.button.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

/* ---------- Topbar ---------- */
.site-topbar {
	position: relative;
	z-index: 20;
	width: 100%;
	/* Stage 5.5: header sits on the shared canvas, no separate white band */
	background: transparent;
}

/* Navbar inner content constrained to match hero frame in this prototype */
.site-topbar .topbar {
	max-width: min(100% - 32px, 1568px) !important;
	margin: 0 auto !important;
}

.site-topbar.is-scrolled {
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-xs);
	background: rgba(252, 252, 252, 0.86);
}

.topbar {
	max-width: 1480px;
	margin: 0 auto;
	min-height: 78px;
	padding: 16px clamp(20px, 2.4vw, 40px);
	display: flex;
	align-items: center;
	gap: 24px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.brand img {
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.brand__copy {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.brand__copy strong {
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.brand__copy span {
	font-size: 0.74rem;
	color: var(--muted);
}

.topnav {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.topnav a {
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--ink-soft);
	transition: color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease);
}

.topnav a:hover {
	color: var(--ink);
	background: transparent;
}

.topbar__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.topbar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--radius-md);
	font-size: 0.94rem;
	font-weight: 500;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 18px rgba(45, 106, 255, 0.26);
	transition: transform var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease);
}

.topbar__cta:hover {
	background: var(--accent-strong);
	transform: none;
}

.topbar__auth-button {
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--radius-md);
	font-weight: 500;
	font-size: 0.94rem;
	color: var(--ink);
	border: 1px solid var(--line);
	background: var(--surface);
	transition: border-color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease);
}

.topbar__auth-button:hover {
	background: transparent;
	border-color: currentColor;
}

.topbar__auth-button.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Account menu */
.topbar__account-wrap {
	position: relative;
}

.topbar__account-wrap[hidden] {
	display: none;
}

.topbar__account {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	color: var(--ink-soft);
	border: 1px solid var(--line);
	background: var(--surface);
	background-size: cover;
	background-position: center;
	transition: border-color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease);
}

.topbar__account:hover {
	border-color: #cdd3df;
}

.topbar__account.has-photo .topbar__account-icon {
	display: none;
}

.topbar__account-icon svg {
	width: 22px;
	height: 22px;
}

.topbar__account-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 210px;
	padding: 8px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease),
		visibility var(--duration-fast) var(--ease);
}

.topbar__account-wrap.is-open .topbar__account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.topbar__account-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink-soft);
	transition: background-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease);
}

.topbar__account-menu-item:hover {
	background: var(--bg-soft);
	color: var(--ink);
}

.topbar__account-menu-item--danger:hover {
	background: #fdecec;
	color: #c0362c;
}

.topbar__account-menu-icon svg {
	width: 18px;
	height: 18px;
}

/* Legal/profile topbar profile pill (kept for shared pages) */
.topbar__profile {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface);
	font-weight: 600;
	font-size: 0.9rem;
}

.topbar__profile-label {
	color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 52px var(--container-inline) 28px;
	border-top: 1px solid var(--line);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 2.4fr;
	gap: clamp(32px, 4vw, 56px);
	padding-bottom: 32px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 340px;
}

.brand--footer img {
	width: 40px;
	height: 40px;
}

.footer-brand p {
	color: var(--ink-soft);
	font-size: 0.9rem;
	line-height: 1.55;
}

.footer-brand .button {
	align-self: flex-start;
	margin-top: 4px;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.footer-columns h3 {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 12px;
	font-weight: 700;
}

.footer-columns a {
	display: block;
	padding: 4px 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
	transition: color var(--duration-fast) var(--ease);
}

.footer-columns a:hover {
	color: var(--accent);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.site-footer__utility {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__bottom p {
	color: var(--muted);
	font-size: 0.82rem;
}

.footer-socials {
	display: flex;
	align-items: center;
	gap: 16px;
}

.footer-socials a {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: rgba(9, 9, 11, 0.68);
	transition:
		color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease);
}

.footer-socials a:hover {
	color: var(--ink);
	background: rgba(9, 9, 11, 0.055);
}

.footer-socials svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ---------- Reveal animation ---------- */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--duration-slow) var(--ease),
		transform var(--duration-slow) var(--ease);
	transition-delay: var(--delay, 0ms);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	position: relative;
	margin: 12px 16px 16px;
	border: 1px solid var(--line);
	border-radius: clamp(24px, 2.4vw, 34px);
	min-height: 560px;
	padding: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 56px) clamp(32px, 3vw, 44px);
	text-align: center;
	overflow: hidden;
	/* Stage 5.5: clean white card surface (no gray fade) on the #FCFCFC canvas */
	background: var(--surface);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1.5px);
	background-size: 10px 10px;
	-webkit-mask-image: radial-gradient(118% 98% at 50% 40%, transparent 0%, rgba(0,0,0,0.4) 30%, #000 66%, #000 90%, transparent 100%);
	mask-image: radial-gradient(118% 98% at 50% 40%, transparent 0%, rgba(0,0,0,0.4) 30%, #000 66%, #000 90%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

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

/* small floating logo tile */
.hero-tile {
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.05),
		0 12px 28px rgba(15, 23, 42, 0.10);
	margin-bottom: clamp(8px, 0.8vw, 8px);
}
.hero-tile img { width: 34px; height: 34px; border-radius: 9px; }

.hero-intro {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.hero h1 {
	max-width: 17ch;
	margin-inline: auto;
	font-size: clamp(2.2rem, 3.7vw, 3.5rem);
	font-weight: 580;
	line-height: 0.96;
	letter-spacing: -0.045em;
	color: #0f172a;
	text-wrap: balance;
}

.hero-accent {
	position: relative;
	color: var(--accent);
	white-space: nowrap;
}

.hero-lede {
	max-width: 50ch;
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.55;
	color: var(--ink-soft);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 4px;
}

.hero-actions .button {
	min-height: 54px;
	padding: 0 32px;
	font-size: 1.02rem;
	border-radius: 15px;
}

.hero-actions .button--primary {
	box-shadow:
		0 2px 6px rgba(45, 106, 255, 0.22),
		0 14px 30px rgba(45, 106, 255, 0.30);
}

.hero-actions .button--primary:hover {
	box-shadow:
		0 2px 6px rgba(45, 106, 255, 0.24),
		0 18px 38px rgba(45, 106, 255, 0.36);
}

.hero-actions .button--ghost {
	background: #fff;
	border-color: var(--line);
	font-weight: 500;
}

.hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 0.86rem;
}
.hero-trust strong { color: var(--ink); }

/* scene: central popup + corner widgets */
.hero-scene {
	position: relative;
	margin: clamp(8px, 0.9vw, 12px) auto 0;
	max-width: 1160px;
	min-height: 380px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* layered floating widgets */
.hw {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-radius: 24px;
	background: var(--surface);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.07),
		0 24px 54px rgba(15, 23, 42, 0.16),
		0 60px 130px rgba(15, 23, 42, 0.12);
	text-align: left;
	transform: var(--rot, none);
	animation: floaty 7s var(--ease) infinite;
}

.hw__icon {
	width: 48px;
	height: 48px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: var(--accent-soft);
	color: var(--accent);
}
.hw__icon svg { width: 22px; height: 22px; }
.hw__icon--green { background: #e7f7ee; color: #1f9d55; }
.hw__icon--amber { background: #fff3df; color: #d9890d; }
.hw__icon--plain { background: #fff; border: 1px solid var(--line); padding: 5px; }
.hw__text strong { display: block; font-size: 0.98rem; line-height: 1.25; color: var(--ink); margin-bottom: 2px; }
.hw__text span { font-size: 0.78rem; color: var(--muted); }

.hw--today  { top: -8px; left: clamp(0px, 1.5vw, 24px); --rot: rotate(-3.5deg); animation-delay: 0s; }
.hw--cal    { top: 40px; right: clamp(0px, 1.5vw, 20px); --rot: rotate(3deg); animation-delay: 1.4s; }
.hw--next   { bottom: 24px; left: clamp(0px, 2.5vw, 48px); --rot: rotate(2.5deg); animation-delay: 2.2s; }
.hw--streak { bottom: 78px; right: clamp(0px, 2.5vw, 32px); --rot: rotate(-3deg); animation-delay: 0.7s; }

/* central extension popup */
.ext-popup {
	position: relative;
	z-index: 3;
	width: 360px;
	max-width: 88vw;
	border-radius: 34px;
	background: linear-gradient(180deg, #ffffff, #fbfcff);
	border: 1px solid var(--line);
	box-shadow:
		0 2px 6px rgba(15, 23, 42, 0.07),
		0 36px 80px rgba(15, 23, 42, 0.18),
		0 84px 170px rgba(15, 23, 42, 0.12);
	padding: 24px 24px 24px;
	text-align: left;
}

.ext-popup__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ext-popup__brand { display: flex; align-items: center; gap: 10px; }
.ext-popup__logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); overflow: hidden; }
.ext-popup__logo img { width: 26px; height: 26px; }
.ext-popup__brand strong { display: block; font-size: 0.96rem; line-height: 1.1; }
.ext-popup__brand > span > span { font-size: 0.7rem; color: var(--muted); }
.ext-popup__badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-pill); }
.ext-popup__timer { border-radius: 18px; background: var(--ink); color: #fff; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ext-popup__timer small { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.ext-popup__timer strong { font-size: 1.7rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ext-popup__play { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.ext-popup__play svg { width: 18px; height: 18px; fill: #fff; }
.ext-popup__field { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; background: var(--surface-2); }
.ext-popup__field small { display: block; font-size: 0.66rem; color: var(--muted); margin-bottom: 3px; }
.ext-popup__field span { font-size: 0.92rem; font-weight: 600; }
.ext-popup__progress { height: 7px; border-radius: var(--radius-pill); background: var(--bg-soft); overflow: hidden; margin: 4px 0 6px; }
.ext-popup__progress i { display: block; height: 100%; width: 68%; border-radius: var(--radius-pill); background: var(--accent); }
.ext-popup__meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-bottom: 14px; }
.ext-popup__cta { width: 100%; min-height: 44px; border-radius: 13px; background: var(--accent); color: #fff; font-size: 0.92rem; font-weight: 600; cursor: default; }

@keyframes floaty {
	0%, 100% { transform: var(--rot, none) translateY(0); }
	50% { transform: var(--rot, none) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.hw { animation: none; }
}

/* ==========================================================================
   HOW IT WORKS — 3 steps
   ========================================================================== */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.step-card {
	position: relative;
	padding: 32px 24px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease),
		border-color var(--duration-normal) var(--ease);
}

.step-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: #d9e0ec;
}

.step-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 16px;
}

.step-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: var(--ink);
	color: #fff;
	margin-bottom: 16px;
}

.step-card__icon svg {
	width: 26px;
	height: 26px;
}

.step-card h3 {
	font-size: 1.3rem;
	margin-bottom: 8px;
}

.step-card p {
	color: var(--ink-soft);
	font-size: 0.98rem;
}

/* ==========================================================================
   DASHBOARD PREVIEW
   ========================================================================== */
.preview-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.6fr;
	gap: 36px;
	align-items: center;
}

.preview-copy h3 {
	font-size: 1.8rem;
	margin-bottom: 16px;
}

.preview-copy p {
	color: var(--ink-soft);
	font-size: 1.05rem;
	margin-bottom: 24px;
}

.progress-kpis {
	display: grid;
	gap: 12px;
}

.progress-kpi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-xs);
}

.progress-kpi span {
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.progress-kpi strong {
	font-size: 1.4rem;
	font-weight: 700;
}

.preview-stage {
	position: relative;
	border-radius: clamp(20px, 2.4vw, 34px);
	padding: clamp(16px, 2.6vw, 40px);
	background: radial-gradient(125% 130% at 12% 0%, #5b8bff 0%, #2d6aff 46%, #1f53e0 100%);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.preview-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.preview-stage .progress-dashboard-frame {
	position: relative;
	z-index: 1;
	box-shadow: 0 30px 64px rgba(13, 32, 96, 0.34);
}

.progress-dashboard-frame {
	border-radius: var(--radius-xl);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.progress-dashboard-frame__toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
}

.progress-dashboard-frame__label {
	font-size: 0.82rem;
	color: var(--muted);
	font-weight: 500;
}

.progress-dashboard-frame__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--bg);
}

.progress-dashboard-frame__embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 1440px;
	height: 980px;
	border: 0;
	transform: scale(var(--dashboard-preview-scale, 1));
	transform-origin: top left;
}

.progress-dashboard-frame__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 16px;
	border-top: 1px solid var(--line);
	background: var(--surface-2);
	font-size: 0.84rem;
	color: var(--muted);
}

.progress-dashboard-frame__footer a {
	color: var(--accent);
	font-weight: 600;
	white-space: nowrap;
}

/* floating mini-widgets over the blue dashboard stage */
.preview-float {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow:
		0 1px 2px rgba(13, 32, 96, 0.10),
		0 18px 42px rgba(13, 32, 96, 0.22);
}
.preview-float__icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: var(--accent-soft);
	color: var(--accent);
}
.preview-float__icon svg { width: 19px; height: 19px; }
.preview-float__icon--green { background: #e7f7ee; color: #1f9d55; }
.preview-float__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.preview-float__text strong { font-size: 0.92rem; color: var(--ink); }
.preview-float__text span { font-size: 0.74rem; color: var(--muted); }
.preview-float--a { top: clamp(26px, 6%, 56px); left: clamp(6px, 1.4%, 22px); transform: rotate(-3deg); }
.preview-float--b { bottom: clamp(26px, 6%, 56px); right: clamp(6px, 1.4%, 22px); transform: rotate(3deg); }

/* ==========================================================================
   FEATURES grid
   ========================================================================== */
/* ==========================================================================
   FEATURES — bento panel (ChronoTask-style)
   ========================================================================== */
.section--features {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--section-space-y) var(--container-inline);
}

.features-panel {
	border-radius: clamp(24px, 3vw, 40px);
	background: linear-gradient(180deg, #f4f6fb 0%, #eef2f9 100%);
	border: 1px solid var(--line);
	padding: clamp(32px, 4.5vw, 72px) clamp(20px, 3vw, 56px) clamp(36px, 4vw, 64px);
}

.features-panel .section-head {
	margin-bottom: clamp(32px, 4vw, 52px);
}

.bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 1.6vw, 24px);
}

.bento-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: clamp(24px, 2vw, 32px);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease);
}

.bento-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.bento-card--reverse {
	flex-direction: column-reverse;
}

.bento-card__copy h4 {
	font-size: 1.22rem;
	margin-bottom: 8px;
}

.bento-card__copy p {
	color: var(--ink-soft);
	font-size: 0.98rem;
	max-width: 42ch;
}

.bento-card__mini {
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, #f7f9fd, #eef3fb);
	border: 1px solid var(--line);
	padding: 16px;
	min-height: 168px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* mini extension popup */
.mini-popup {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
	padding: 16px;
	display: grid;
	gap: 8px;
}
.mini-popup__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.86rem;
}
.mini-popup__head strong { font-weight: 700; }
.mini-popup__dot {
	width: 16px; height: 16px; border-radius: 5px;
	background: linear-gradient(135deg, var(--accent), #6b8cff);
}
.mini-popup__badge {
	margin-left: auto;
	font-size: 0.7rem; font-weight: 600;
	padding: 3px 8px; border-radius: 1000px;
	background: var(--accent-soft); color: var(--accent-ink);
}
.mini-popup__timer {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px; border-radius: 12px;
	background: var(--accent-soft-2); border: 1px solid var(--line);
}
.mini-popup__timer small { display: block; font-size: 0.66rem; color: var(--muted); }
.mini-popup__timer strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.mini-popup__play {
	width: 34px; height: 34px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--accent); color: #fff;
}
.mini-popup__play svg { width: 16px; height: 16px; fill: currentColor; }
.mini-popup__row { display: flex; flex-direction: column; gap: 1px; font-size: 0.82rem; }
.mini-popup__row small { font-size: 0.66rem; color: var(--muted); }
.mini-popup__bar { height: 7px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.mini-popup__bar i { display: block; height: 100%; width: 68%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #6b8cff); }

/* mini week chart */
.mini-week { display: grid; gap: 12px; width: 100%; }
.mini-week__head { display: flex; align-items: baseline; justify-content: space-between; }
.mini-week__head strong { font-size: 0.95rem; }
.mini-week__head span { font-size: 0.74rem; color: var(--muted); }
.mini-week__bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.mini-week__bars span {
	flex: 1; height: var(--h); min-height: 8px;
	border-radius: 6px 6px 3px 3px;
	background: #d7e2fb;
}
.mini-week__bars span.is-on { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.mini-week__days { display: flex; gap: 8px; }
.mini-week__days i { flex: 1; text-align: center; font-style: normal; font-size: 0.62rem; color: var(--muted-2); }

/* mini stats */
.mini-stats { display: grid; gap: 12px; width: 100%; color: var(--accent); }
.mini-stats__kpis { display: flex; gap: 24px; }
.mini-stats__kpis small { display: block; font-size: 0.66rem; color: var(--muted); }
.mini-stats__kpis strong { font-size: 1.4rem; color: var(--ink); letter-spacing: -0.02em; }
.mini-stats__spark { width: 100%; height: 44px; }
.mini-stats__chips { display: flex; gap: 8px; }
.mini-stats__chips span {
	font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
	background: var(--accent-soft); color: var(--accent-ink);
}

/* mini presets */
.mini-presets { display: grid; gap: 10px; width: 100%; }
.mini-presets__tabs { display: flex; gap: 6px; }
.mini-presets__tabs span {
	font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
}
.mini-presets__tabs span.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mini-presets__site {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px; border-radius: 8px;
	background: var(--surface); border: 1px solid var(--line);
}
.mini-presets__site small { flex: 1; font-size: 0.8rem; color: var(--ink-soft); }
.mini-presets__site--off small { color: var(--muted-2); text-decoration: line-through; }
.mini-presets__fav {
	width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
	font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
}
.mini-presets__toggle {
	width: 34px; height: 19px; border-radius: 999px; background: #d7dce6; position: relative; flex-shrink: 0;
}
.mini-presets__toggle::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
	border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: left var(--duration-fast) var(--ease);
}
.mini-presets__toggle.is-on { background: var(--accent); }
.mini-presets__toggle.is-on::after { left: 17px; }

.features-foot {
	text-align: center;
	margin-top: clamp(24px, 3vw, 36px);
	color: var(--muted);
	font-size: 0.95rem;
}

/* ==========================================================================
   USE CASES (scenarios)
   ========================================================================== */
.usecase-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.usecase-card {
	display: flex;
	gap: 16px;
	padding: 28px 24px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease);
}

.usecase-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.usecase-card__emoji {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
}

.usecase-card__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid rgba(45, 106, 255, 0.14);
}
.usecase-card__icon svg { width: 25px; height: 25px; }

.usecase-card h4 {
	font-size: 1.18rem;
	margin-bottom: 8px;
}

.usecase-card p {
	color: var(--ink-soft);
	font-size: 0.97rem;
}

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */
.integrations-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	max-width: 980px;
	margin: 0 auto;
}

.integration-tile {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease);
}

.integration-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.integration-tile svg,
.integration-tile img {
	width: 54%;
	height: 54%;
	object-fit: contain;
}

.integration-tile span {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ink);
}

.integrations-note {
	text-align: center;
	margin-top: 24px;
	color: var(--muted);
	font-size: 0.92rem;
}

/* ==========================================================================
   PRIVACY block
   ========================================================================== */
.privacy {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-inline) var(--section-space-y);
}

.privacy__inner {
	position: relative;
	border-radius: var(--radius-xl);
	background:
		radial-gradient(120% 130% at 100% 0%, #eef4ff 0%, rgba(238, 244, 255, 0) 60%),
		linear-gradient(180deg, #f6f9ff, #eef3ff);
	border: 1px solid rgba(45, 106, 255, 0.16);
	box-shadow: var(--shadow-md);
	padding: clamp(32px, 4.5vw, 60px);
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
	overflow: hidden;
}

.privacy__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(45, 106, 255, 0.1) 1px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
	mask-image: linear-gradient(180deg, #000, transparent 72%);
	opacity: 0.55;
	pointer-events: none;
}

.privacy__head {
	position: relative;
	z-index: 1;
}

.privacy__lock {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--accent), var(--accent-strong));
	color: #fff;
	box-shadow: 0 14px 28px rgba(45, 106, 255, 0.32);
	margin-bottom: 24px;
}

.privacy__lock svg {
	width: 28px;
	height: 28px;
}

.privacy h2 {
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.privacy__lead {
	color: var(--ink-soft);
	font-size: 1.05rem;
	max-width: 42ch;
	margin-bottom: 24px;
}

.privacy__policy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--accent-strong);
}

.privacy__policy svg {
	width: 16px;
	height: 16px;
}

.privacy__policy:hover {
	color: var(--accent-press);
}

.privacy__groups {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 24px;
}

.privacy__group-title {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}

.privacy__list {
	display: grid;
	gap: 8px;
}

.privacy__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 16px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: var(--shadow-xs);
}

.privacy__badge {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	margin-top: 1px;
}

.privacy__badge svg {
	width: 15px;
	height: 15px;
}

.privacy__badge--yes {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.privacy__badge--no {
	background: #fdecea;
	color: #c0362c;
}

.privacy__item strong {
	display: block;
	font-size: 0.96rem;
}

.privacy__item strong + span {
	display: block;
	margin-top: 2px;
	font-size: 0.86rem;
	color: var(--ink-soft);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-shell {
	max-width: 1060px;
	margin: 0 auto;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: center;
}

.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease),
		border-color var(--duration-normal) var(--ease);
}

.pricing-card[data-plan-card] {
	cursor: pointer;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* Featured (blue) card — follows the JS .is-featured toggle */
.pricing-card.is-featured {
	background: radial-gradient(130% 150% at 0% 0%, #3a76ff 0%, #1f53e0 60%, #1a48c8 100%);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 26px 50px rgba(31, 83, 224, 0.34);
	transform: translateY(-10px);
	z-index: 2;
}

.pricing-card.is-featured:hover {
	transform: translateY(-14px);
}

.pricing-card__flag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--accent-strong);
	font-size: 0.74rem;
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(16, 24, 40, 0.18);
	white-space: nowrap;
}

.pricing-card__label {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
}

.pricing-card.is-featured .pricing-card__label {
	color: rgba(255, 255, 255, 0.85);
}

.pricing-card h3 {
	font-size: 1.32rem;
	margin-bottom: 8px;
	letter-spacing: -0.01em;
}

.pricing-card__description {
	color: var(--ink-soft);
	font-size: 0.94rem;
	min-height: 42px;
	margin-bottom: 16px;
}

.pricing-card.is-featured .pricing-card__description {
	color: rgba(255, 255, 255, 0.82);
}

.pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.pricing-card__price strong {
	font-size: 2.7rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.pricing-card__price span {
	color: var(--muted);
	font-size: 0.95rem;
}

.pricing-card.is-featured .pricing-card__price span {
	color: rgba(255, 255, 255, 0.78);
}

.pricing-card__price--discount {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.pricing-card__price-main {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.pricing-card__price-old {
	color: var(--muted-2);
	text-decoration: line-through;
	font-size: 1.05rem;
	font-weight: 600;
}

.pricing-card.is-featured .pricing-card__price-old {
	color: rgba(255, 255, 255, 0.6);
}

.pricing-card__billing {
	color: var(--muted);
	font-size: 0.86rem;
	margin-bottom: 24px;
}

.pricing-card.is-featured .pricing-card__billing {
	color: rgba(255, 255, 255, 0.72);
}

.pricing-card__features {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
	flex: 1;
}

.pricing-card__features li {
	position: relative;
	padding-left: 32px;
	color: var(--ink-soft);
	font-size: 0.94rem;
}

.pricing-card__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--accent-soft)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}

.pricing-card.is-featured .pricing-card__features li {
	color: rgba(255, 255, 255, 0.92);
}

.pricing-card.is-featured .pricing-card__features li::before {
	background: rgba(255, 255, 255, 0.22)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}

.pricing-card .button,
.pricing-card [data-checkout-button] {
	width: 100%;
	cursor: pointer;
}

/* On the blue featured card force a white CTA regardless of JS primary/ghost toggle */
.pricing-card.is-featured .button,
.pricing-card.is-featured .button--primary,
.pricing-card.is-featured .button--ghost {
	background: #fff;
	color: #111312;
	border-color: rgba(255, 255, 255, 0.86);
	box-shadow: none;
	font-weight: 500;
}

.pricing-card.is-featured .button:hover {
	background: #fff;
	transform: none;
	box-shadow: none;
}

.pricing-card__price-value.is-updating {
	opacity: 0.4;
}

.pricing-promo {
	margin-top: 32px;
	max-width: 540px;
	margin-inline: auto;
	padding: 20px 24px;
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-xs);
	text-align: center;
}

.pricing-promo__label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 8px;
}

.pricing-promo__controls {
	display: flex;
	gap: 8px;
}

.pricing-promo__input {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 0.95rem;
	color: var(--ink);
	transition: border-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease);
}

.pricing-promo__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.pricing-promo__button {
	flex-shrink: 0;
	min-height: 46px;
}

.pricing-promo__hint {
	margin-top: 8px;
	font-size: 0.84rem;
	color: var(--muted);
}

.pricing-promo__hint.is-success {
	color: #1f9d55;
}

.pricing-promo__hint.is-error {
	color: #c0362c;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
	position: relative;
	max-width: var(--container-max);
	/* No own bottom margin: the next section's --section-pad provides the gap,
	   keeping one consistent rhythm instead of stacked margin + padding. */
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px);
	border-radius: var(--radius-xl);
	background: radial-gradient(120% 140% at 0% 0%, #3a76ff 0%, #1f53e0 55%, #1741b8 100%);
	color: #fff;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(36px, 4vw, 56px);
	align-items: center;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(23, 65, 184, 0.32);
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000, transparent 72%);
	mask-image: radial-gradient(120% 120% at 100% 0%, #000, transparent 72%);
	opacity: 0.5;
	pointer-events: none;
}

.cta-band__copy {
	position: relative;
	z-index: 1;
}

.cta-band__copy .eyebrow {
	color: rgba(255, 255, 255, 0.82);
}

.cta-band h2 {
	color: #fff;
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	margin: 16px 0 16px;
	letter-spacing: -0.02em;
}

.cta-band__copy > p {
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.06rem;
	max-width: 46ch;
}

.cta-checklist {
	display: grid;
	gap: 12px;
	margin: 24px 0 28px;
	list-style: none;
	padding: 0;
}

.cta-checklist li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-left: 0;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

/* Same outline checks as pricing plan-check (circle + tick) */
.cta-checklist li::before {
	content: none !important;
	display: none !important;
}

.cta-checklist .cta-check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.cta-checklist .cta-check circle {
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 1.35;
}

.cta-checklist .cta-check path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cta-band__visual {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.cta-dashboard {
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
	border: 1px solid rgba(255, 255, 255, 0.26);
	box-shadow: 0 26px 50px rgba(10, 25, 80, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(10px);
}

.cta-dashboard__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cta-dashboard__dots {
	display: flex;
	gap: 8px;
}

.cta-dashboard__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}

.cta-dashboard__dots i:first-child {
	background: rgba(255, 255, 255, 0.85);
}

.cta-dashboard__tag {
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.cta-dashboard__metric {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.cta-dashboard__metric small {
	display: block;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 4px;
}

.cta-dashboard__metric strong {
	font-size: 1.7rem;
	letter-spacing: -0.02em;
	line-height: 1;
}

.cta-dashboard__delta {
	font-size: 0.74rem;
	font-weight: 700;
	color: #eafff0;
	padding: 4px 8px;
	border-radius: var(--radius-pill);
	background: rgba(126, 217, 87, 0.26);
	border: 1px solid rgba(126, 217, 87, 0.5);
}

.cta-dashboard__panel {
	padding: 16px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.cta-dashboard__graph {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 96px;
}

.cta-dashboard__graph span {
	flex: 1;
	height: var(--bar);
	border-radius: 6px 6px 3px 3px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55));
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.cta-dashboard__graph span.is-peak {
	background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.8));
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cta-dashboard__days {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.cta-dashboard__days span {
	flex: 1;
	text-align: center;
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
	max-width: 780px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.faq-list details {
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition:
		border-color 220ms var(--ease),
		box-shadow 220ms var(--ease),
		background-color 220ms var(--ease);
}

.faq-list details[open] {
	border-color: rgba(45, 106, 255, 0.22);
	box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
	background: #fff;
}

.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-weight: 600;
	font-size: 1.02rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color 180ms var(--ease);
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

.faq-list summary::after {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--bg-soft)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
		center / 13px no-repeat;
	border-radius: 9px;
	transition:
		transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 220ms var(--ease),
		box-shadow 220ms var(--ease);
}

.faq-list details[open] summary::after {
	transform: rotate(135deg);
	background-color: var(--accent-soft);
	box-shadow: inset 0 0 0 1px rgba(45, 106, 255, 0.12);
}

/* Smooth open/close: grid 0fr → 1fr */
.faq-list__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-list details[open] .faq-list__panel {
	grid-template-rows: 1fr;
}

.faq-list__panel-inner {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 40ms,
		transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-list details[open] .faq-list__panel-inner {
	opacity: 1;
	transform: translateY(0);
}

.faq-list details p,
.faq-list__panel-inner p {
	margin: 0;
	padding: 0 24px 20px;
	color: var(--ink-soft);
	font-size: 0.97rem;
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.faq-list__panel,
	.faq-list__panel-inner,
	.faq-list summary::after {
		transition: none !important;
	}
	.faq-list__panel-inner {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   SOCIAL PROOF strip
   ========================================================================== */
.social-proof {
	max-width: 1040px;
	margin: 56px auto 0;
	padding: 28px 32px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}

.social-proof__stat strong {
	display: block;
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--ink);
}

.social-proof__stat span {
	font-size: 0.84rem;
	color: var(--muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	:root {
		--section-space-y: 84px;
	}
	.hero {
		min-height: 0;
	}
	.hw {
		position: static;
		transform: none;
		animation: none;
		width: 100%;
		max-width: 340px;
		order: 2;
	}
	.hero-scene {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		min-height: 0;
	}
	.ext-popup {
		order: 1;
	}
	.preview-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.privacy__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.cta-band {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.integrations-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 860px) {
	.topnav {
		display: none;
	}
	.brand__copy span {
		display: none;
	}
	.steps {
		grid-template-columns: 1fr;
	}
	.bento {
		grid-template-columns: 1fr;
	}
	.bento-card--reverse {
		flex-direction: column;
	}
	.usecase-grid {
		grid-template-columns: 1fr;
	}
	.preview-float {
		display: none;
	}
	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
	}
	.social-proof {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
		max-width: 480px;
	}
	.pricing-card.is-featured {
		transform: none;
		margin-top: 20px;
	}
	.pricing-card.is-featured:hover {
		transform: translateY(-4px);
	}
}

@media (max-width: 600px) {
	:root {
		--container-inline: 16px;
		--section-space-y: 64px;
	}
	.topbar__auth-button {
		display: none;
	}
	.hero {
		min-height: 0;
	}
	.hero-scene {
		min-height: 0;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.hw {
		position: static;
		animation: none;
		transform: none;
		width: 100%;
		max-width: 326px;
		order: 2;
	}
	.ext-popup {
		order: 1;
	}
	.integrations-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.footer-columns {
		grid-template-columns: 1fr 1fr;
	}
	.pricing-promo__controls {
		flex-direction: column;
	}
	.cta-band__visual {
		display: none;
	}
}


/* ==========================================================================
   Stage 5 — unified product design system (landing <-> dashboard)
   Migrates the landing onto the dashboard's tokens. Content/layout unchanged.
   ========================================================================== */

/* Typography: display font for headings, calmer weights (no oversized bold) */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; }
.hero h1, .hero-accent { font-weight: 600; }

/* Buttons: flat accent, no blue glow — quiet, professional */
.button--primary,
.topbar__cta,
.hero-actions .button--primary { box-shadow: none; }
.button--primary:hover,
.topbar__cta:hover,
.hero-actions .button--primary:hover { box-shadow: var(--shadow-sm); }
.button--light { box-shadow: var(--shadow-sm); }
.button--light:hover { box-shadow: var(--shadow-md); }

/* Borders to the brand line */
.eyebrow--pill,
.usecase-card__icon { border-color: rgba(2, 144, 255, 0.16); }

/* Stage 5.5: hero is a clean #FFFFFF card on the #FCFCFC canvas (no gray fade) */
.hero { background: var(--surface); }

/* Hero product stage: single accent hue + calm shadow (was navy + heavy glow) */
.preview-stage { background: radial-gradient(125% 130% at 12% 0%, #36a6ff 0%, var(--accent) 48%, var(--accent-strong) 100%) !important; }
.preview-stage .progress-dashboard-frame { box-shadow: var(--shadow-lg) !important; }
.preview-float { box-shadow: var(--shadow-md) !important; }

/* Soft decorative surfaces -> neutral */
.features-panel { background: var(--bg-soft) !important; }
.bento-card__mini { background: var(--surface-2) !important; }
.mini-popup__dot,
.mini-week__bars span.is-on { background: var(--accent) !important; }

/* Privacy panel -> neutral with subtle accent */
.privacy__inner { background: var(--bg-soft) !important; border-color: var(--line) !important; }
.privacy__inner::before { background-image: radial-gradient(rgba(105, 114, 130, 0.08) 1px, transparent 1.4px) !important; }
.privacy__lock { background: var(--accent) !important; box-shadow: var(--shadow-md) !important; }

/* Featured pricing card: single accent hue, calm shadow (was bright navy) */
.pricing-card.is-featured,
.pricing-card.is-featured:hover { background: linear-gradient(160deg, #36a6ff 0%, var(--accent) 55%, var(--accent-strong) 100%) !important; box-shadow: var(--shadow-lg) !important; }
.pricing-card__flag { box-shadow: var(--shadow-md) !important; }

/* CTA band: single accent hue, calm shadow (was bright navy) */
.cta-band { background: linear-gradient(160deg, #36a6ff 0%, var(--accent) 52%, var(--accent-strong) 100%) !important; box-shadow: var(--shadow-lg) !important; }
.cta-dashboard { box-shadow: var(--shadow-md) !important; }


/* ==========================================================================
   Stage 5.1 — product polish (landing matches dashboard surface system)
   ========================================================================== */
:root { --radius-xl: 18px; --radius-lg: 14px; }

/* Border-only surfaces — reduce floating-box feeling */
.pricing-card, .features-panel, .bento-card, .bento-card__mini, .usecase-card,
.hero-tile, .preview-float, .privacy__inner, .pricing-promo,
.faq__item, .integration-card, .step-card, .usecase-card__icon { box-shadow: none !important; }

/* Hero product stage: calm soft tint instead of a saturated blue surface */
.preview-stage { background: linear-gradient(180deg, #eaf3ff 0%, #dce9fb 100%) !important; }
.preview-stage .progress-dashboard-frame { box-shadow: var(--shadow-md) !important; }

/* Conversion surfaces: flat restrained accent, no glow/loud gradient */
.cta-band { background: var(--accent) !important; box-shadow: none !important; }
.pricing-card.is-featured,
.pricing-card.is-featured:hover { background: var(--accent) !important; box-shadow: none !important; }

/* Buttons: consistent, no lift on hover (calm) */
.button { border-radius: 10px; }
.button--primary:hover,
.hero-actions .button--primary:hover,
.topbar__cta:hover { transform: none; box-shadow: none; }
.button--ghost:hover, .button--light:hover, .button--light:hover { transform: none; }
.pricing-card:hover { transform: none; box-shadow: none; border-color: #dfe2e8; }


/* ==========================================================================
   Stage 6 — Premium AI SaaS visual direction
   Black/white base · electric-blue primary accent · subtle violet AI glow.
   Layered at the end so it overrides earlier stages cleanly. No HTML/logic
   changes — pricing/checkout/promo/auth hooks untouched.
   ========================================================================== */

:root {
	/* Single brand accent system (no dual AI-violet) */
	--accent-blue: #0290FF;
	--accent-violet: #0290FF;
	--accent-violet-soft: rgba(2, 144, 255, 0.10);
	--accent-blue-soft: rgba(2, 144, 255, 0.10);

	/* Status (green kept ONLY for success/positive) */
	--success: #10B978;
	--warning: #DAB718;
	--danger: #EF4444;

	/* Premium neutrals */
	--text-strong: #030712;
	--ink-deep: #050505;
	--border: #E5E5E5;

	/* Card language */
	--radius-card: 22px;
	--radius-card-lg: 26px;
}

/* ---------- Typography: large, confident, tight ---------- */
body { font-family: var(--font-sans); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	letter-spacing: -0.035em;
	color: var(--text-strong);
}

.hero h1,
.hero-accent {
	font-weight: 780;
}

.hero h1 {
	font-size: var(--font-size-hero-title);
	line-height: 1.0;
	letter-spacing: -0.045em;
	max-width: 16ch;
	color: var(--ink-deep);
}

/* Restrained AI accent — blue→violet gradient on the single hero accent phrase */
.hero-accent {
	background: linear-gradient(96deg, var(--accent) 0%, var(--accent-violet) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--accent);
}

.hero-lede {
	font-size: clamp(1.06rem, 1.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 46ch;
}

/* Section headings */
.section-head h2,
.section h2,
section h2 {
	font-size: var(--font-size-section-title);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

/* Eyebrows / mono micro-labels read as technical, not marketing */
.eyebrow,
.eyebrow--pill {
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ---------- Button system: soft rect family (match navbar 10px) ---------- */
.button {
	border-radius: 10px;
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: background-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease);
}

/* Primary: premium near-black */
.button--primary,
.hero-actions .button--primary {
	background: var(--ink-deep);
	color: #fff;
	border: 1px solid var(--ink-deep);
	box-shadow: none;
	font-weight: 600;
}
.button--primary:hover,
.hero-actions .button--primary:hover {
	background: #1b1b1f;
	border-color: #1b1b1f;
	color: #fff;
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Secondary: clean white, thin border */
.button--ghost {
	background: var(--surface);
	color: var(--ink-deep);
	border: 1px solid var(--border);
	box-shadow: none;
	font-weight: 500;
}
.button--ghost:hover {
	background: var(--surface);
	border-color: #d4d4d4;
	transform: translateY(-1px);
}

/* Light button (on dark/blue surfaces) → neutral premium */
.button--light {
	background: #fff;
	color: var(--ink-deep);
	font-weight: 500;
}

/* ---------- Card language: thin warm borders, calm radius ---------- */
.pricing-card,
.features-panel,
.bento-card,
.usecase-card,
.faq__item,
.integration-card,
.step-card,
.privacy__inner,
.pricing-promo {
	border-radius: var(--radius-card);
	border: 1px solid var(--border);
}

/* ---------- Hero: clean white card + subtle violet/blue atmosphere ---------- */
.hero {
	position: relative;
	isolation: isolate;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 50% 118%, var(--accent-violet-soft) 0%, transparent 70%),
		radial-gradient(55% 50% at 82% -8%, var(--accent-blue-soft) 0%, transparent 70%);
}
.hero > * { position: relative; z-index: 1; }

/* Hero product stage: calm single-hue surface (no loud gradient) */
.preview-stage {
	background: radial-gradient(120% 130% at 15% 0%, #f4f8ff 0%, #eef2ff 55%, #e9eeff 100%) !important;
}

/* Respect reduced motion for the only added effect */
@media (prefers-reduced-motion: reduce) {
	.button:hover { transform: none; }
}

/* Header CTA joins the single soft-rect button family */
.topbar__cta {
	background: var(--ink-deep);
	color: #fff;
	border: 1px solid var(--ink-deep);
	border-radius: 10px;
	box-shadow: none;
}
.topbar__cta:hover {
	background: #1b1b1f;
	border-color: #1b1b1f;
	color: #fff;
}
.topbar__auth-button {
	border-radius: 10px;
}

/* Hero headline: wrap safely inside the narrow card, no clipping on mobile */
.hero h1 {
	overflow-wrap: break-word;
	word-break: normal;
}
@media (max-width: 600px) {
	.hero h1 {
		font-size: clamp(2.05rem, 8.6vw, 2.7rem);
		line-height: 1.06;
		letter-spacing: -0.035em;
		max-width: 100%;
	}
	.hero-lede { font-size: 1.02rem; }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.hero h1 { font-size: clamp(2.8rem, 6vw, 4rem); max-width: 18ch; }
}


/* ==========================================================================
   EDITORIAL MID-PAGE BAND (Stage 6.2)
   ========================================================================== */
.section--editorial {
	padding: var(--section-space-y) 0;
	background: var(--canvas);
	border-bottom: 1px solid var(--line-faint);
}

.editorial-band {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-inline);
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 64px;
	align-items: center;
}

.editorial-band__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.editorial-band__content h2 {
	font-size: var(--font-size-section-title);
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin-top: 16px;
	margin-bottom: 20px;
}

.editorial-band__description {
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.55;
	margin-bottom: 24px;
}

/* Premium Graphic Language SVG */
.editorial-abstract-graphic {
	width: 100%;
	max-width: 500px;
	height: auto;
	border-radius: var(--radius-md);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	margin-bottom: 28px;
	padding: 0;
	box-sizing: border-box;
}

.editorial-band__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.editorial-band__bullets li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.editorial-band__bullets .bullet-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	border: 1px solid rgba(2, 144, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}

.editorial-band__bullets .bullet-icon svg {
	width: 18px;
	height: 18px;
}

.editorial-band__bullets strong {
	display: block;
	font-size: 1.02rem;
	color: var(--ink);
	margin-bottom: 4px;
}

.editorial-band__bullets span {
	font-size: 0.94rem;
	color: var(--ink-soft);
	line-height: 1.45;
}

/* Visual frame for the photo with overlays */
.editorial-band__visual {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.editorial-image-frame {
	position: relative;
	width: 100%;
	max-width: 440px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
	background: var(--bg-soft);
}

.editorial-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.97) contrast(0.98);
	transition: transform 0.6s var(--ease);
}

.editorial-image-frame:hover .editorial-image {
	transform: scale(1.03);
}

.editorial-overlay-gradient {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 80%, rgba(132, 115, 255, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

/* absolute positioned UI overlays */
.editorial-overlay-card {
	position: absolute;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 4px 18px rgba(3, 7, 18, 0.06), var(--shadow-sm);
	z-index: 5;
	display: flex;
	pointer-events: none;
}

/* ==========================================================================
   EDITORIAL RESPONSIBILITY OVERRIDES
   ========================================================================== */
@media (max-width: 1024px) {
	.editorial-band {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.editorial-abstract-graphic {
		max-width: 100%;
	}
	.editorial-image-frame {
		max-width: 440px;
	}
}

@media (max-width: 480px) {
	.timer-card {
		top: 14px;
		left: 14px;
		padding: 8px 8px;
		width: 116px;
	}
	.timer-card__time {
		font-size: 1.1rem;
	}
	.peak-card {
		bottom: 14px;
		right: 14px;
		padding: 8px 8px;
		gap: 8px;
	}
	.peak-card__icon {
		display: none; /* Hide icon on tiny screens to save space */
	}
	.editorial-overlay-badge {
		top: 14px;
		right: 14px;
		padding: 4px 8px;
		font-size: 0.68rem;
	}
}


/* ==========================================================================
   STAGE 6.3 — RECOVERY: hero, header, logo, typography
   (Appended last so it wins the cascade.)
   ========================================================================== */

/* Display = same loaded stack as UI (Geist). Wordmark uses Space Grotesk separately. */
:root {
	--font-display: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Allow sticky header: keep horizontal clip, free the vertical axis */
.page-shell {
	overflow-x: clip;
	overflow-y: visible;
}

/* --- Sticky header --- */
.site-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 252, 252, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease),
		background-color var(--duration-normal) var(--ease);
}
.site-topbar.is-scrolled {
	background: rgba(252, 252, 252, 0.9);
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-xs);
}

/* --- Header layout: brand left, nav balanced, controls hard-right --- */
.topbar__controls {
	margin-left: auto;
}

/* Dual-label CTA: full on desktop, short on mobile */
.topbar__cta-short { display: none; }
.topbar__cta-full { display: inline; }

/* --- Hero typography (calmer, premium, Cyrillic-tuned) --- */
.hero h1,
.hero-accent {
	font-family: var(--font-display);
	font-weight: 700;
}
.hero h1 {
	font-size: clamp(3.4rem, 5.2vw, 5.4rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-width: 15ch;
	color: var(--ink-deep, #0f172a);
	text-wrap: balance;
}

/* Hero accent phrase: solid brand blue (no dual-tone AI gradient) */
.hero-accent {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	-webkit-text-fill-color: unset;
	color: var(--accent, #0290FF);
	white-space: normal;
	padding-bottom: 0.04em;
}

/* --- Mobile hero + header --- */
@media (max-width: 600px) {
	.hero h1 {
		font-size: clamp(2.25rem, 9.4vw, 3rem);
		font-weight: 700;
		line-height: 1.08;
		letter-spacing: -0.025em;
		max-width: 100%;
	}
	/* compact CTA pinned to the right edge */
	.topbar__cta-full { display: none; }
	.topbar__cta-short { display: inline; }
	.topbar__cta { padding: 0 14px; }
}

@media (min-width: 601px) and (max-width: 1024px) {
	.hero h1 {
		font-size: clamp(2.9rem, 6vw, 4.2rem);
		max-width: 16ch;
	}
}

/* --- Editorial graphic spacing polish (integration) --- */
.editorial-abstract-graphic {
	max-width: 460px;
	border: none;
	background: transparent;
	margin: 4px 0 24px;
}


/* ==========================================================================
   STAGE 6.4 — HERO COMPRESSION (appended last; wins the cascade)
   ========================================================================== */
/* Compact, premium headline scale */
.hero h1 {
	font-size: clamp(3.1rem, 4.7vw, 4.9rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 16ch;
}

/* Tighter first-screen rhythm: less top mass, mockup appears sooner */
.hero {
	min-height: 480px;
	padding-top: clamp(12px, 1.4vw, 16px);
}
.hero-intro { gap: 10px; }
.hero-scene { margin-top: clamp(4px, 0.6vw, 10px); }

@media (min-width: 601px) and (max-width: 1024px) {
	.hero h1 {
		font-size: clamp(2.7rem, 5.4vw, 3.8rem);
		max-width: 16ch;
	}
}

@media (max-width: 600px) {
	.hero h1 {
		font-size: clamp(2.15rem, 8.8vw, 2.75rem);
		font-weight: 700;
		line-height: 1.08;
		letter-spacing: -0.02em;
		max-width: 100%;
	}
	.hero {
		margin: 8px 8px 8px;
		padding-top: 12px;
	}
	.hero-scene { margin-top: 6px; }
}

/* Stage 6.4: keep short accent phrase "в Tenvilo" unbroken */
.hero-accent { white-space: nowrap; }


/* ==========================================================================
   STAGE 6.5 — PRODUCT CAPABILITIES BENTO + quiet eyebrows
   ========================================================================== */

/* Tone down the loud centered blue pills into a quiet muted eyebrow */
.eyebrow--pill {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.eyebrow--quiet {
	display: inline-block;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.section--bento-caps { padding: var(--section-space-y) 0; }
.section-head--center { text-align: center; max-width: 720px; margin: 0 auto 44px; padding: 0 var(--container-inline); }
.section-head--center h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
}
.section-head--center p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; }

/* 2x2 grid */
.caps-grid {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 var(--container-inline);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.caps-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 24px;
	padding: 24px 24px 28px;
	overflow: hidden;
}

/* subtle per-card pastel surface */
.caps-card--focus    { background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 62%); }
.caps-card--guard    { background: linear-gradient(180deg, #FAFAFF 0%, #FFFFFF 62%); }
.caps-card--window   { background: linear-gradient(180deg, #F7F8FF 0%, #FFFFFF 62%); }
.caps-card--progress { background: linear-gradient(180deg, #F4F9FF 0%, #FFFFFF 62%); }

.caps-card__visual {
	position: relative;
	min-height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.caps-card__text h3 {
	font-family: var(--font-display);
	font-size: 1.16rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 8px;
	color: var(--ink);
}
.caps-card__text p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }

/* --- Card 1: focus popup --- */
.caps-popup {
	width: 100%;
	max-width: 280px;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.caps-popup__head { display: flex; align-items: center; gap: 8px; }
.caps-popup__mark { width: 22px; height: 22px; border-radius: 7px; background: #0B0F1C; color:#fff; display:grid; place-items:center; font-weight:700; font-size:0.72rem; }
.caps-popup__head strong { font-size: 0.92rem; }
.caps-popup__badge { margin-left: auto; font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.caps-popup__timer { display: flex; align-items: center; justify-content: space-between; background: #0B0F1C; border-radius: 12px; padding: 10px 12px; color: #fff; }
.caps-popup__timer small { display:block; font-size: 0.64rem; color: rgba(255,255,255,0.6); }
.caps-popup__timer strong { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: -0.02em; }
.caps-popup__play { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; }
.caps-popup__play svg { width: 15px; height: 15px; fill: #fff; }
.caps-popup__row { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; }
.caps-popup__row small { color: var(--muted); }
.caps-popup__row span { color: var(--ink); font-weight: 500; }
.caps-popup__bar { height: 6px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.caps-popup__bar i { display: block; height: 100%; width: 68%; border-radius: 999px; background: linear-gradient(90deg, #0290FF, #3B5BFF); }

/* --- Card 2: distraction guard tabs --- */
.caps-tabs { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.caps-tab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid #E5E5E5; background: #fff; }
.caps-tab__fav { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.caps-tab small { font-size: 0.82rem; color: var(--ink); }
.caps-tab__state { margin-left: auto; font-size: 0.7rem; color: #10b981; }
.caps-tab__state--off { color: #c4c9d2; }
.caps-tab--off { opacity: 0.55; filter: saturate(0.7); }
.caps-tab--off small { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }
.caps-tabs__label { margin-top: 2px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* --- Card 3: timeline --- */
.caps-timeline { width: 100%; max-width: 300px; height: auto; }

/* --- Card 4: dashboard --- */
.caps-dash { width: 100%; max-width: 290px; background: #fff; border: 1px solid #E5E5E5; border-radius: 16px; padding: 14px 16px; }
.caps-dash__kpis { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.caps-dash__kpis small { display: block; font-size: 0.64rem; color: var(--muted); }
.caps-dash__kpis strong { font-size: 0.98rem; color: var(--ink); letter-spacing: -0.01em; }
.caps-dash__bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.caps-dash__bars span { flex: 1; height: var(--h); border-radius: 5px 5px 3px 3px; background: #E3E9F2; }
.caps-dash__bars span.is-on { background: linear-gradient(180deg, #3B5BFF, #0290FF); }

/* --- Mobile --- */
@media (max-width: 860px) {
	.caps-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
	.caps-card { padding: 22px 20px 24px; border-radius: 20px; }
	.caps-card__visual { min-height: 150px; margin-bottom: 16px; }
	.section-head--center { margin-bottom: 32px; }
}

/* =========================================================================
   STAGE 6.6 — Quiet section eyebrows + visual-first bento system
   ========================================================================= */

/* Tone down redundant section pills -> calm uppercase eyebrow */
.eyebrow--pill {
	display: inline-block;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	color: var(--muted, #6b7280);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- Bento visual base --- */
.bv {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--surface-2, #f3f5f9) 0%, var(--surface, #fff) 100%);
}
.bv-glow {
	position: absolute;
	width: 320px; height: 320px;
	top: -120px; right: -90px;
	background: radial-gradient(circle, rgba(47,107,255,0.18), transparent 70%);
	pointer-events: none;
}

/* CARD 1 — Focus session */
.focuscard {
	position: relative;
	width: 100%;
	max-width: 300px;
	border-radius: 18px;
	padding: 20px;
	background: var(--surface, #fff);
	border: 1px solid var(--border, rgba(15,23,42,0.08));
	box-shadow: 0 18px 40px -24px rgba(15,23,42,0.35);
}
.focuscard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.focuscard__goal {
	font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
	background: var(--surface-2, #eef2f8); color: var(--text, #0f172a);
}
.focuscard__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, #2f6bff); }
.focuscard__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #2f6bff); box-shadow: 0 0 0 4px rgba(47,107,255,0.18); }
.focuscard__timer { font-size: clamp(40px, 5vw, 54px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }
.focuscard__bar { margin-top: 16px; height: 8px; border-radius: 999px; background: var(--surface-2, #eef2f8); overflow: hidden; }
.focuscard__bar span { display: block; height: 100%; width: 68%; border-radius: 999px; background: linear-gradient(90deg, var(--accent, #2f6bff), #6f8dff); }
.focuscard__play {
	position: absolute; right: 18px; bottom: -18px;
	width: 48px; height: 48px; border: none; border-radius: 50%; cursor: default;
	background: var(--accent, #2f6bff);
	box-shadow: 0 14px 30px -10px rgba(47,107,255,0.6);
}
.focuscard__play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }

/* CARD 2 — Distraction guard */
.guardwin {
	width: 100%; max-width: 300px;
	border-radius: 16px; overflow: hidden;
	background: var(--surface, #fff);
	border: 1px solid var(--border, rgba(15,23,42,0.08));
	box-shadow: 0 18px 40px -24px rgba(15,23,42,0.35);
}
.guardwin__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--surface-2, #eef2f8); }
.guardwin__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15,23,42,0.18); }
.guardwin__bar i:first-child { background: #ff5f57; } .guardwin__bar i:nth-child(2) { background: #febc2e; } .guardwin__bar i:nth-child(3) { background: #28c840; }
.guardwin__bar span { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted, #6b7280); }
.guardwin__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.g-tab { height: 34px; border-radius: 8px; background: var(--surface-2, #eef2f8); }
.g-tab.is-on { background: linear-gradient(150deg, rgba(47,107,255,0.18), rgba(47,107,255,0.06)); border: 1px solid rgba(47,107,255,0.35); }
.g-tab.is-off { opacity: 0.4; filter: blur(1.2px); }
.guardwin__shield {
	position: absolute; right: 26px; bottom: 22px;
	width: 46px; height: 52px;
	background: var(--accent, #2f6bff);
	-webkit-mask: no-repeat center/contain; mask: no-repeat center/contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.5-8 11-4.6-2.5-8-6-8-11V5l8-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 8.5-8 11-4.6-2.5-8-6-8-11V5l8-3z'/%3E%3C/svg%3E");
	box-shadow: 0 14px 30px -10px rgba(47,107,255,0.6);
}

/* CARD 3 — Best focus window */
.bv--peak { padding: 8px; }
.peak-callout {
	position: absolute; top: 18px; left: 18px; z-index: 2;
	font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
	background: var(--surface, #fff); color: var(--accent, #2f6bff);
	border: 1px solid rgba(47,107,255,0.3); box-shadow: 0 10px 24px -14px rgba(15,23,42,0.4);
}
.peak-wave { width: 100%; height: 100%; max-height: 150px; }

/* CARD 4 — Progress dashboard */
.statgrid {
	width: 100%; max-width: 320px;
	display: grid; grid-template-columns: 1fr auto; gap: 16px 18px; align-items: center;
}
.statgrid__big b { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--text, #0f172a); }
.statgrid__big small { color: var(--muted, #6b7280); font-size: 13px; }
.statgrid__ring {
	position: relative; width: 76px; height: 76px; border-radius: 50%;
	background: conic-gradient(var(--accent, #2f6bff) calc(var(--p) * 1%), var(--surface-2, #eef2f8) 0);
	display: grid; place-items: center;
}
.statgrid__ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface, #fff); }
.statgrid__ring span { position: relative; font-weight: 800; font-size: 20px; color: var(--text, #0f172a); }
.statgrid__week { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.statgrid__week span { flex: 1; height: var(--h); border-radius: 6px 6px 4px 4px; background: linear-gradient(180deg, var(--accent, #2f6bff), #8aa4ff); opacity: 0.85; }
.statgrid__streak {
	grid-column: 1 / -1; justify-self: start;
	font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
	background: rgba(255,138,0,0.12); color: #d97706;
}
.statgrid__streak::before { content: "🔥 "; }


/* =========================================================================
   STAGE 7.1 — "Calm Light Premium, Product-First"
   Grounded in: Stripe/Vercel (subtle gradient-mesh), Vercel/Framer (card depth)
   ========================================================================= */

/* Subtle brand gradient-mesh behind hero (depth without clutter, single accent) */
.hero { position: relative; isolation: isolate; }
.hero::before {
	content: "";
	position: absolute;
	inset: -10% -5% auto -5%;
	height: 620px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(620px 360px at 22% 18%, rgba(47,107,255,0.12), transparent 60%),
		radial-gradient(560px 340px at 82% 8%, rgba(124,150,255,0.10), transparent 62%),
		radial-gradient(700px 420px at 50% -10%, rgba(47,107,255,0.06), transparent 70%);
	filter: saturate(115%);
}
/* guard against horizontal overflow from the mesh */
.hero, .section { overflow-x: clip; }

/* Premium card depth for bento (thin border + layered soft shadow + surface gradient) */
.bento-card {
	border: 1px solid var(--border, rgba(15,23,42,0.08));
	background:
		linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0)) ,
		var(--surface, #fff);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.6) inset,
		0 22px 48px -30px rgba(15,23,42,0.32),
		0 4px 14px -10px rgba(15,23,42,0.18);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.bento-card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.7) inset,
		0 30px 60px -28px rgba(15,23,42,0.40),
		0 8px 20px -12px rgba(47,107,255,0.18);
}
/* deepen the mini visual field with a calm surface gradient */
.bento-card__mini {
	border: 1px solid var(--border, rgba(15,23,42,0.06));
	background:
		radial-gradient(420px 260px at 80% -10%, rgba(47,107,255,0.08), transparent 60%),
		linear-gradient(160deg, var(--surface-2, #f3f5f9) 0%, var(--surface, #fff) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
	.bento-card { transition: none; }
	.bento-card:hover { transform: none; }
}


/* =========================================================================
   STAGE 7.1 FIX — real visual rebuild (not just polish)
   Applied patterns:
   - Aceternity "Bento Grid"      -> asymmetric 12-col bento
   - Aceternity "Glare Card"      -> spotlight hover on cards
   - Linear/Stripe perspective    -> hero product window as 3D proof
   - Magic UI "Animated Beam/hub" -> integrations as connected hub
   - Magic UI "Border Beam"       -> animated gradient border on primary CTA
   - Linear/Vercel rhythm         -> calmer section vertical rhythm
   ========================================================================= */

/* ---- 1. Asymmetric bento grid (Aceternity Bento Grid) ---- */
@media (min-width: 900px) {
	.bento { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
	.bento-card--focus { grid-column: span 7; }
	.bento-card--guard { grid-column: span 5; }
	.bento-card--peak  { grid-column: span 5; }
	.bento-card--stats { grid-column: span 7; }
	/* let the featured visual breathe */
	.bento-card--focus .bento-card__mini,
	.bento-card--stats .bento-card__mini { min-height: 220px; }
}

/* ---- 2. Spotlight / glare hover (Aceternity Glare Card) ---- */
.bento-card { position: relative; overflow: hidden; }
.bento-card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(480px circle at 50% -10%, rgba(47,107,255,0.12), transparent 60%);
	opacity: 0; transition: opacity .45s var(--ease, ease);
}
.bento-card:hover::after { opacity: 1; }

/* deepen mini visual field with real tokens */
.bento-card__mini {
	border: 1px solid var(--line);
	background:
		radial-gradient(420px 240px at 82% -12%, rgba(47,107,255,0.08), transparent 60%),
		linear-gradient(160deg, var(--surface-2, #f3f5f9), var(--surface, #fff)) !important;
}

/* ---- 3. Hero product window as 3D product proof (Linear / Stripe) ---- */
@media (min-width: 980px) {
	.hero-scene { perspective: 1700px; }
	.ext-popup {
		transform: rotateY(-8deg) rotateX(4deg);
		transition: transform .7s var(--ease, cubic-bezier(.2,.7,.2,1));
		box-shadow:
			0 50px 90px -45px rgba(15,23,42,0.55),
			0 14px 34px -18px rgba(47,107,255,0.28);
		border: 1px solid var(--line);
	}
	.hero-scene:hover .ext-popup { transform: rotateY(0deg) rotateX(0deg); }
}
/* soft reflective glow beneath the product window */
.hero-scene::after {
	content: ""; position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
	width: 70%; height: 90px; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 100% at 50% 0%, rgba(47,107,255,0.20), transparent 70%);
	filter: blur(10px);
}

/* ---- 4. Integrations connected hub (Magic UI Animated Beam, adapted) ---- */
.integrations-grid { position: relative; }
.integration-tile {
	position: relative; z-index: 1;
	background: linear-gradient(180deg, rgba(255,255,255,0.7), var(--surface, #fff));
	border: 1px solid var(--line);
	box-shadow: 0 14px 30px -22px rgba(15,23,42,0.4);
	transition: transform .35s var(--ease, ease), box-shadow .35s ease, border-color .35s ease;
}
.integration-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(47,107,255,0.45);
	box-shadow: 0 20px 40px -20px rgba(47,107,255,0.35);
}
.integration-tile::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; opacity: 0;
	background: radial-gradient(120px circle at 50% 50%, rgba(47,107,255,0.18), transparent 70%);
	transition: opacity .35s ease;
}
.integration-tile:hover::before { opacity: 1; }
/* faint connecting field behind the tiles -> "everything links to Tenvilo" */
.integrations-grid::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 70% at 50% 50%, rgba(47,107,255,0.07), transparent 70%);
}

/* ---- 5. Border-beam on primary CTA (Magic UI Border Beam) ---- */
/* Skip glow-btn: overflow/isolation would clip/smear the hover glow */
.button--primary:not(.glow-btn) { position: relative; overflow: hidden; isolation: isolate; }
.button--primary:not(.glow-btn)::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
	background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.85) 50%, transparent 75%);
	background-size: 220% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: ctaBeam 3.6s linear infinite; opacity: .9;
}
@keyframes ctaBeam { to { background-position: -220% 0; } }

/* ---- 6. Calmer section rhythm (Linear / Vercel) ---- */
.section { padding-block: var(--section-pad); }
.section-head { margin-bottom: clamp(36px, 4vw, 60px); }
.section-head h2 { letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
	.ext-popup { transform: none !important; transition: none; }
	.button--primary::after { animation: none; }
	.bento-card::after { transition: none; }
}

/* ---------- Footer language switcher ---------- */
.lang-switcher {
	position: relative;
	display: inline-block;
	font-family: var(--font-sans);
}

.lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	box-shadow: var(--shadow-xs);
	transition: border-color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease);
}

.lang-switcher__toggle:hover {
	border-color: #cdd3df;
	background: #fff;
}

.lang-switcher__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--ink);
}
.lang-switcher__icon svg { width: 18px; height: 18px; }

.lang-switcher__label { white-space: nowrap; }

.lang-switcher__chevron {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--muted);
	transition: transform var(--duration-fast) var(--ease);
}
.lang-switcher__chevron svg { width: 14px; height: 14px; }

.lang-switcher.is-open .lang-switcher__chevron { transform: rotate(180deg); }

.lang-switcher__menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	min-width: 180px;
	max-height: min(420px, calc(100vh - 32px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(127, 127, 127, 0.28) transparent;
	margin: 0;
	padding: 8px;
	list-style: none;
	/* Options never touch: hover/selected pills stay separated */
	display: grid;
	gap: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	z-index: 40;
}
.lang-switcher__menu[hidden] { display: none; }

.lang-switcher__menu::-webkit-scrollbar {
	width: 8px;
}

.lang-switcher__menu::-webkit-scrollbar-track {
	background: transparent;
}

.lang-switcher__menu::-webkit-scrollbar-thumb {
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.28);
	background-clip: padding-box;
}

.lang-switcher__menu::-webkit-scrollbar-thumb:hover {
	background: rgba(127, 127, 127, 0.42);
	background-clip: padding-box;
}

.lang-switcher__option {
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--ink-soft);
	transition: background-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease);
}
.lang-switcher__option:hover { background: var(--bg-soft); color: var(--ink); }
.lang-switcher__option[aria-selected="true"] {
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-weight: 600;
}

/* =====================================================================
   Reference-led landing v2
   Sources inspected: Fireworks, ElevenLabs, Gumloop, Linear, Vercel,
   Framer, Raycast, Resend, Arc. The page uses Tenvilo's real video,
   real dashboard route, and honest copy instead of generated widgets.
   ===================================================================== */

:root {
	--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--ref-bg: #fdfcfc;
	--ref-surface: #ffffff;
	--ref-ink: #09090b;
	--ref-muted: #5f636d;
	--ref-line: rgba(9, 9, 11, 0.1);
	--ref-action: #111113;
	--ref-soft-a: #f6eee5;
	--ref-soft-b: #eef1f7;
	--ref-soft-c: #f5f1ea;
	--ref-radius: 12px;
	--ref-radius-lg: 18px;
	--ref-shadow: 0 18px 58px rgba(9, 9, 11, 0.12);
}

body {
	background:
		radial-gradient(circle at 18% 6%, rgba(246, 238, 229, 0.82), transparent 34%),
		radial-gradient(circle at 84% 4%, rgba(238, 241, 247, 0.86), transparent 30%),
		var(--ref-bg);
	color: var(--ref-ink);
}

.site-topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(251, 251, 253, 0.78);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-bottom: 1px solid rgba(8, 10, 18, 0.06);
}

.topbar {
	max-width: 1280px;
	min-height: 76px;
}

.topbar__cta,
.button--primary {
	background: var(--ref-action);
	color: #fff;
	border: 1px solid var(--ref-action);
	box-shadow: none;
}

.topbar__cta:hover,
.button--primary:hover {
	/* allow glow */
	transform: none;
	box-shadow: none;
}

.button {
	border-radius: 10px;
	font-family: var(--font-sans);
	font-weight: 500;
}

.button--ghost {
	border-color: rgba(8, 10, 18, 0.12);
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	font-weight: 500;
}

.topbar__cta {
	border-radius: 10px;
}

.shell {
	max-width: none;
}

.reference-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2vw, 24px);
	width: min(100% - 32px, 1440px);
	min-height: min(760px, calc(100svh - 116px));
	margin: 16px auto 0;
	padding: clamp(24px, 2.6vw, 32px) clamp(24px, 5vw, 76px) clamp(24px, 2.5vw, 32px);
	border: 1px solid rgba(8, 10, 18, 0.08);
	border-radius: 24px;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(circle at 24% 12%, rgba(246, 238, 229, 0.9), transparent 28%),
		radial-gradient(circle at 78% 10%, rgba(238, 241, 247, 0.96), transparent 30%),
		linear-gradient(180deg, #fdfcfc 0%, #fbfaf8 58%, #ffffff 100%);
}

.reference-hero::before {
	content: none;
}

.reference-hero::after {
	content: none;
}

.reference-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 980px;
	margin-inline: auto;
}

.reference-hero__kicker,
.eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ref-muted);
}

.reference-hero__kicker {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	margin-bottom: 16px;
}

.reference-hero h1 {
	max-width: 18ch;
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: clamp(2.9rem, 4.25vw, 4.55rem);
	line-height: 1;
	letter-spacing: -0.025em;
	font-weight: 500;
	color: var(--ref-ink);
	text-wrap: balance;
}

.reference-hero h1 span {
	color: inherit;
}

.reference-hero__lede {
	max-width: 58ch;
	margin: 16px auto 0;
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	line-height: 1.5;
	color: var(--ref-muted);
}

.reference-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.reference-hero__actions .button,
.page-shell .reference-hero__cta .button {
	min-height: 48px;
	padding-inline: 22px;
	font-weight: 500;
}

.reference-hero__facts {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.reference-hero__facts li {
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(8, 10, 18, 0.09);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: #3b4250;
	font-size: 0.84rem;
	font-weight: 650;
}

.reference-hero__media {
	position: relative;
	z-index: 2;
	width: min(100%, 720px);
	margin-inline: auto;
}

.reference-video-frame {
	overflow: hidden;
	border-radius: var(--ref-radius-lg);
	border: none;
	background: #111;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transform: none;
	transform-origin: center;
}

.reference-video-frame__video {
	display: block;
	width: 100%;
	aspect-ratio: 3508 / 2160;
	object-fit: contain;
	object-position: center;
	background: #111;
}

.reference-hero .reveal {
	opacity: 1;
	transform: none;
}

.reference-hero__glass {
	position: absolute;
	z-index: 4;
	min-width: 190px;
	padding: 16px 16px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 18px 46px rgba(29, 40, 65, 0.15);
}

.reference-hero__glass span {
	display: block;
	color: var(--ref-muted);
	font-size: 0.76rem;
	font-weight: 650;
	margin-bottom: 3px;
}

.reference-hero__glass strong {
	display: block;
	color: var(--ref-ink);
	font-size: 0.96rem;
}

.reference-hero__glass--top {
	top: clamp(28px, 4vw, 42px);
	right: clamp(-8px, 3vw, 34px);
}

.reference-hero__glass--bottom {
	left: clamp(-8px, 3vw, 34px);
	bottom: clamp(18px, 3vw, 30px);
}

.section {
	padding-block: var(--section-pad);
}

.section-head {
	gap: 16px;
	margin-bottom: 40px;
}

.section-head h2,
.audience-section__intro h2 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.2vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.028em;
	line-height: 1.03;
	color: var(--ref-ink);
}

.section-head p,
.audience-section__intro p {
	color: var(--ref-muted);
	font-size: 1.08rem;
	line-height: 1.6;
}

.flow-section {
	max-width: 1280px;
	padding-top: clamp(28px, 3.8vw, 48px);
}

.flow-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.flow-step {
	position: relative;
	min-height: 230px;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(9, 9, 11, 0.09);
	background: rgba(255, 255, 255, 0.82);
	box-shadow: none;
	overflow: hidden;
}

.flow-step__top,
.feature-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	color: #8a8278;
}

.flow-step__top span,
.feature-card__top span {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	color: currentColor;
}

.flow-step__top svg,
.feature-card__top svg {
	width: 24px;
	height: 24px;
	color: var(--ref-ink);
	opacity: 0.8;
}

.flow-step__visual,
.feature-card__visual {
	position: relative;
	display: grid;
	gap: 8px;
	min-height: 110px;
	margin-bottom: 24px;
	padding: 16px;
	border-radius: 12px;
	background: #f8f7f4;
	border: 1px solid rgba(9, 9, 11, 0.08);
	overflow: hidden;
}

.flow-step__visual::after,
.feature-card__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.78) 48%, transparent 62%);
	transform: translateX(-120%);
	animation: product-sheen 5.8s ease-in-out infinite;
	pointer-events: none;
}

.flow-step__visual strong,
.feature-card__visual strong {
	position: relative;
	z-index: 1;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ref-ink);
}

.flow-step__visual em,
.feature-card__visual em,
.feature-card__visual i,
.flow-step__visual i {
	position: relative;
	z-index: 1;
	display: inline-flex;
	width: fit-content;
	font-style: normal;
	font-size: 0.78rem;
	color: var(--ref-muted);
}

.flow-step__visual > div,
.feature-card__visual > div {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.flow-step__visual i,
.feature-card__visual i {
	padding: 8px 8px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid rgba(9, 9, 11, 0.08);
	color: var(--ref-ink);
}

.flow-step__progress {
	height: 8px;
	border-radius: 999px;
	background: rgba(9, 9, 11, 0.08);
}

.flow-step__progress span {
	display: block;
	width: 68%;
	height: 100%;
	border-radius: inherit;
	background: #111113;
	animation: progress-breathe 3.8s ease-in-out infinite;
}

.flow-step__bars {
	align-items: end;
	height: 54px;
	gap: 8px;
}

.flow-step__bars i,
.mini-week i {
	width: 18px;
	padding: 0;
	border: 0;
	border-radius: 5px 5px 3px 3px;
	background: #111113;
	opacity: 0.22;
}

.flow-step__bars i:nth-child(1) { height: 24px; }
.flow-step__bars i:nth-child(2) { height: 38px; opacity: 0.45; }
.flow-step__bars i:nth-child(3) { height: 52px; opacity: 0.75; }
.flow-step__bars i:nth-child(4) { height: 33px; opacity: 0.38; }
.flow-step__bars i:nth-child(5) { height: 44px; opacity: 0.58; }

.flow-step::after {
	content: "";
	position: absolute;
	right: -28px;
	top: 50%;
	width: 50px;
	height: 26px;
	border-top: 1px solid rgba(9, 9, 11, 0.18);
	border-right: 1px solid rgba(9, 9, 11, 0.18);
	border-radius: 0 20px 0 0;
	transform: translateY(-50%) rotate(12deg);
}

.flow-step:last-child::after {
	display: none;
}

.flow-step h3 {
	font-size: 1.26rem;
	font-weight: 500;
	margin-bottom: 8px;
}

.flow-step p {
	color: var(--ref-muted);
	line-height: 1.55;
}

.product-strip {
	width: 100%;
	min-height: 100svh;
	padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 7vw, 96px);
	background: #08090a;
	color: #fff;
	overflow: hidden;
}

.product-strip__intro {
	width: min(100% - 48px, 1080px);
	margin: 0 auto clamp(24px, 3vw, 32px);
	text-align: center;
}

.product-strip__intro .eyebrow,
.product-strip__intro p {
	color: rgba(255, 255, 255, 0.58);
}

.product-strip__intro h2 {
	max-width: 18ch;
	margin: 8px auto 0;
	color: #fff;
	font-size: clamp(2.8rem, 5vw, 4.85rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.product-strip__intro p {
	max-width: 62ch;
	margin: 16px auto 0;
	font-size: clamp(1rem, 1.4vw, 1.22rem);
	line-height: 1.55;
}

.product-strip__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(88vw, 1180px);
	gap: 24px;
	width: 100%;
	padding: 0 max(24px, calc((100vw - 1180px) / 2)) 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.product-strip__rail::-webkit-scrollbar {
	display: none;
}

.product-panel {
	scroll-snap-align: center;
	min-height: min(520px, 58svh);
	display: grid;
	grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 4vw, 56px);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
		#111113;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.product-panel__copy span {
	display: inline-flex;
	margin-bottom: 20px;
	font-family: var(--font-mono);
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.48);
}

.product-panel__copy h3 {
	max-width: 13ch;
	color: #fff;
	font-size: clamp(2.1rem, 3.8vw, 3.95rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.product-panel__copy p {
	max-width: 34ch;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 1.02rem;
	line-height: 1.58;
}

.product-panel__stage {
	position: relative;
	min-height: 390px;
	border-radius: 14px;
	background:
		radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.12), transparent 32%),
		linear-gradient(135deg, #1b1c20, #0b0c0f);
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.extension-card,
.allowed-list,
.blocked-state,
.review-card {
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(78%, 430px);
	transform: translate(-50%, -50%);
	border-radius: 14px;
	padding: 24px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--ref-ink);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.extension-card {
	background: linear-gradient(180deg, #1c1b78, #0d0a35);
	color: #fff;
}

.extension-card__tabs,
.extension-card__presets {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.extension-card__tabs i,
.extension-card__presets i {
	padding: 8px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	font-style: normal;
	font-size: 0.78rem;
}

.extension-card strong,
.review-card strong {
	display: block;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.extension-card label,
.extension-card span,
.review-card span,
.blocked-state span {
	display: block;
	color: currentColor;
	opacity: 0.68;
	font-size: 0.86rem;
}

.extension-card__field {
	margin-top: 8px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.browser-surface {
	position: absolute;
	inset: 34px;
	border-radius: 14px;
	background: #2d2f31;
	overflow: hidden;
}

.browser-surface__bar {
	height: 58px;
	background: #191b1d;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.allowed-list {
	right: 34px;
	left: auto;
	transform: translateY(-50%);
}

.allowed-list strong,
.blocked-state strong {
	display: block;
	margin-bottom: 16px;
	font-size: 1.3rem;
	font-weight: 500;
}

.allowed-list span {
	display: block;
	padding: 12px 16px;
	margin-top: 8px;
	border-radius: 10px;
	background: #f7f7f5;
	color: var(--ref-muted);
}

.allowed-list button {
	width: 100%;
	margin-top: 12px;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	background: #111113;
	color: #fff;
	font: inherit;
}

.blocked-state {
	text-align: center;
	background: #f7f6f2;
}

.blocked-state p {
	color: var(--ref-muted);
}

.blocked-state__timer {
	margin-top: 24px;
	padding: 12px 16px;
	border-radius: 999px;
	background: #111113;
	color: #fff;
}

.review-card {
	display: grid;
	gap: 24px;
}

.review-card__bars {
	display: flex;
	align-items: end;
	gap: 8px;
	height: 130px;
}

.review-card__bars i {
	flex: 1;
	border-radius: 8px 8px 4px 4px;
	background: #111113;
	opacity: 0.2;
	animation: review-bars 4s ease-in-out infinite;
}

.review-card__bars i:nth-child(1) { height: 42px; }
.review-card__bars i:nth-child(2) { height: 76px; animation-delay: 120ms; }
.review-card__bars i:nth-child(3) { height: 104px; animation-delay: 240ms; }
.review-card__bars i:nth-child(4) { height: 68px; animation-delay: 360ms; }
.review-card__bars i:nth-child(5) { height: 92px; animation-delay: 480ms; }
.review-card__bars i:nth-child(6) { height: 54px; animation-delay: 600ms; }

.review-card__split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid rgba(9, 9, 11, 0.08);
}

.dashboard-proof {
	width: 100%;
	max-width: none;
	min-height: max(760px, calc(100svh - var(--topbar-height, 76px)));
	display: grid;
	grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
	padding: 0;
	background:
		linear-gradient(90deg, #102217 0%, #172018 48%, #1f2024 48%, #1f2024 100%);
	color: #fff;
	overflow: hidden;
}

.dashboard-proof__copy {
	position: relative;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(40px, 6vw, 88px);
	isolation: isolate;
	background:
		linear-gradient(180deg, rgba(4, 9, 6, 0.06), rgba(4, 9, 6, 0.76)),
		radial-gradient(110% 82% at 16% 8%, rgba(182, 220, 74, 0.82), transparent 52%),
		radial-gradient(72% 68% at 78% 34%, rgba(69, 129, 84, 0.68), transparent 58%),
		linear-gradient(136deg, #243b1e 0%, #112417 48%, #070b09 100%);
}

.dashboard-proof__copy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px),
		repeating-linear-gradient(16deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 10px);
	mix-blend-mode: soft-light;
	opacity: 0.72;
}

.dashboard-proof__copy span {
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 1rem;
	font-weight: 500;
}

.dashboard-proof__copy h2 {
	max-width: 12ch;
	margin: 0;
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(3.2rem, 5.7vw, 6.4rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.dashboard-proof__copy p {
	max-width: 40rem;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	line-height: 1.52;
}

.dashboard-proof__link {
	width: fit-content;
	margin-top: 32px;
	padding: 12px 24px;
	border-radius: 10px;
	background: #fff;
	color: #101113;
	font-weight: 500;
	box-shadow: none;
}

.dashboard-proof__showcase {
	position: relative;
	min-width: 0;
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(36px, 5vw, 76px) 0 clamp(36px, 5vw, 76px) clamp(28px, 4.8vw, 72px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
		#202126;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.dashboard-proof__showcase::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 22%;
	background: linear-gradient(90deg, rgba(32, 33, 38, 1), rgba(32, 33, 38, 0));
	pointer-events: none;
	z-index: 3;
}

.dashboard-proof__shell {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: min(980px, 78vw);
	border-radius: 14px;
	padding: 0;
	background: #f7f8fa;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.dashboard-proof .preview-stage {
	padding: 0;
	background: transparent !important;
	box-shadow: none !important;
}

.dashboard-proof .progress-dashboard-frame {
	max-width: none;
	margin: 0 auto;
	border-radius: 14px;
	box-shadow: none;
}

.dashboard-proof .progress-dashboard-frame__viewport {
	height: min(58svh, 640px);
	min-height: 560px;
}

.dashboard-proof .progress-dashboard-frame__embed {
	--dashboard-preview-scale: 0.68;
	left: 50%;
	transform: translateX(-50%) scale(var(--dashboard-preview-scale, 1));
	transform-origin: top center;
}

.dashboard-proof__scan {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 22%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(-130%);
	animation: dashboard-scan 7s ease-in-out infinite;
	pointer-events: none;
}

.cohere-card-strip {
	position: relative;
	width: 100%;
	padding: 96px 0 80px;
	background: transparent;
	color: #07080b;
	overflow: hidden;
}

.cohere-card-strip__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: min(calc(100% - 80px), 1185px);
	margin: 0 auto 40px;
	gap: 28px;
}

.cohere-card-strip__header h2 {
	max-width: none;
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3.1rem);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.cohere-card-strip__arrows {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-bottom: 4px;
}

.cohere-card-strip__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #111318;
	cursor: pointer;
	transition: none;
}

.cohere-card-strip__arrow svg {
	width: 26px;
	height: 26px;
}

.cohere-card-strip__arrow.is-disabled {
	opacity: 0.28;
	cursor: default;
}

/* hover animation removed */
.cohere-card-strip__arrow:not(.is-disabled):hover {
	color: #111318;
}

.cohere-card-strip__rail {
	display: flex;
	gap: 20px;
	width: 100vw;
	margin: 0;
	padding: 0 max(40px, calc((100vw - 1184px) / 2)) 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.cohere-card-strip__rail::-webkit-scrollbar {
	display: none;
}

.cohere-card {
	position: relative;
	flex: 0 0 420px;
	width: 420px;
	height: 420px;
	--card-media-scale: 1.02;
	--card-media-hover-scale: 1.07;
	border-radius: 16px;
	background: transparent;
	overflow: hidden;
	isolation: isolate;
	scroll-snap-align: start;
	border: none;
	box-shadow: none;
}

.cohere-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(var(--card-media-scale));
	border-radius: 16px;
}

.cohere-card--product {
	--card-media-scale: 1.16;
	--card-media-hover-scale: 1.21;
}

.cohere-card--product img {
	object-position: 64% 48%;
}

.cohere-card--silk {
	--card-media-scale: 1.04;
	--card-media-hover-scale: 1.09;
}

.cohere-card--silk img {
	object-position: 50% 50%;
}

.cohere-card--dashboard {
	--card-media-scale: 1.24;
	--card-media-hover-scale: 1.29;
}

.cohere-card--dashboard img {
	object-position: 82% 42%;
}

.cohere-card__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.22)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 80%);
	pointer-events: none;
}

.cohere-card--text-light .cohere-card__shade {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.1) 44%, rgba(0, 0, 0, 0.18)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 82%);
}

.cohere-card--text-dark .cohere-card__shade {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.05)),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 82%);
}

.cohere-card h3 {
	position: relative;
	z-index: 2;
	max-width: 310px;
	margin: 0;
	padding: 32px 32px;
	color: #fff;
	font-size: 2rem;
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: 0;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.24);
}

.cohere-card--text-dark h3 {
	color: #111318;
	text-shadow: none;
}

.cohere-card-strip__progress {
	position: relative;
	width: 188px;              /* short, like the clean ref */
	height: 3px;
	margin: 16px auto 0;
	background: #e5e5e5;
	border-radius: 999px;
	overflow: hidden;
}

.cohere-card-strip__progress span,
.cohere-card-strip__progress i {
	display: block;
	position: absolute;
	inset-block: 0;
	border-radius: 999px;
}

.cohere-card-strip__progress i {
	z-index: 0;
	left: 0;
	right: 0;
	background: #e5e5e5;
}

.cohere-card-strip__progress span {
	z-index: 1;
	left: 0;
	width: 58px;               /* short active segment */
	background: var(--accent, #0290FF);
	box-shadow: 0 1px 3px rgba(2, 144, 255, 0.3);
	transform: translate3d(var(--card-strip-progress-x, 0px), 0, 0);
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cohere-card-strip__progress span {
		transition: none;
	}
}

.audience-section {
	max-width: 1280px;
	display: grid;
	grid-template-columns: 0.78fr 1.22fr;
	gap: clamp(40px, 5.4vw, 84px);
	align-items: start;
}

.audience-section__intro {
	align-self: center;
}

.audience-section__intro h2 {
	margin-bottom: clamp(16px, 2vw, 24px);
}

.audience-section__intro p {
	max-width: 42ch;
}

.audience-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.audience-section__grid article {
	position: relative;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(9, 9, 11, 0.09);
	background: #fff;
	box-shadow: none;
	overflow: hidden;
}

.audience-section__icon {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 24px;
	border-radius: 12px;
	background: #f3f1ec;
	color: #7b746c;
}

.audience-section__icon svg {
	width: 21px;
	height: 21px;
	display: block;
}

.audience-section__icon--students {
	background: #e9f4ff;
	color: #0277d6;
}

.audience-section__icon--developers {
	background: #f0edff;
	color: #6e56cf;
}

.audience-section__icon--freelancers {
	background: #fff3e0;
	color: #dd8408;
}

.audience-section__icon--browser {
	background: #e7f7ee;
	color: #14934c;
}

.audience-section__grid article::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 18px;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	border: 1px solid rgba(9, 9, 11, 0.08);
	opacity: 0.5;
	transform: translate(28px, -28px);
}

.audience-section__grid h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 8px;
}

.audience-section__grid p {
	color: var(--ref-muted);
	line-height: 1.55;
}

.privacy__inner,
.pricing-card,
.pricing-promo,
.faq-list details {
	border-radius: 12px;
}

/* Featured plan: dark brand surface + blue edge (not a flat black slab) */
.pricing-card.is-featured,
.pricing-card.is-featured:hover {
	background:
		radial-gradient(130% 140% at 0% 0%, rgba(58, 118, 255, 0.38) 0%, transparent 52%),
		linear-gradient(165deg, #141821 0%, #0a0c10 55%, #08090a 100%) !important;
	color: #fff;
	border-color: rgba(90, 140, 255, 0.42) !important;
	box-shadow:
		0 22px 52px rgba(20, 40, 100, 0.28),
		0 0 0 1px rgba(90, 140, 255, 0.18) !important;
	transform: translateY(-8px);
}

.final-reference-cta {
	background: #08090a !important;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(3, 7, 18, 0.2) !important;
}

.final-reference-cta__image {
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
	width: min(100%, 340px);
	margin-inline: auto;
}

.final-reference-cta__image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	display: block;
}

@keyframes product-sheen {
	0%, 62% { transform: translateX(-125%); }
	82%, 100% { transform: translateX(125%); }
}

@keyframes progress-breathe {
	0%, 100% { transform: scaleX(0.88); transform-origin: left; opacity: 0.82; }
	50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@keyframes dot-pulse {
	0%, 100% { opacity: 0.2; transform: translateY(0); }
	50% { opacity: 0.9; transform: translateY(-2px); }
}

@keyframes dashboard-scan {
	0%, 54% { transform: translateX(-140%); opacity: 0; }
	62% { opacity: 0.65; }
	86%, 100% { transform: translateX(560%); opacity: 0; }
}

@keyframes review-bars {
	0%, 100% { opacity: 0.24; transform: scaleY(0.86); transform-origin: bottom; }
	50% { opacity: 0.78; transform: scaleY(1); transform-origin: bottom; }
}

@media (max-width: 1080px) {
	.reference-hero,
	.audience-section {
		grid-template-columns: 1fr;
	}

	.dashboard-proof {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dashboard-proof__copy {
		min-height: 560px;
	}

	.dashboard-proof__showcase {
		min-height: 640px;
		padding: 32px 24px 48px;
		border-left: 0;
		justify-content: center;
	}

	.dashboard-proof__showcase::before {
		display: none;
	}

	.dashboard-proof__shell {
		width: min(100%, 980px);
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		--dashboard-preview-scale: 0.62;
	}

	.product-strip__intro {
		width: min(100% - 42px, 840px);
	}

	.product-panel {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.product-panel__copy h3 {
		max-width: 16ch;
	}

	.reference-hero {
		gap: 32px;
	}

	.reference-hero h1 {
		max-width: 17ch;
		font-size: clamp(3.15rem, 8.2vw, 5.1rem);
	}

	.feature-showcase__grid,
	.flow-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow-step:nth-child(2)::after {
		display: none;
	}

	.audience-section__intro {
		position: static;
	}
}

@media (max-width: 720px) {
	.topnav,
	.topbar__auth-button {
		display: none;
	}

	.reference-hero {
		width: calc(100% - 20px);
		margin-top: 8px;
		padding: 20px 16px 24px;
		border-radius: 24px;
		min-height: 0;
		gap: 24px;
	}

	.reference-hero h1 {
		max-width: 100%;
		font-size: clamp(2.14rem, 8.8vw, 2.52rem);
		line-height: 1.02;
		letter-spacing: -0.032em;
	}

	.reference-hero__lede {
		font-size: 1rem;
		line-height: 1.5;
		margin-top: 16px;
	}

	.reference-hero__actions {
		margin-top: 24px;
	}

	.reference-hero__actions {
		flex-direction: column;
	}

	.reference-hero__actions .button {
		width: 100%;
	}

	.reference-hero__facts {
		display: none;
	}

	.reference-hero__glass {
		display: none;
	}

	.product-strip {
		padding-block: 48px 58px;
	}

	.product-strip__intro {
		width: calc(100% - 36px);
	}

	.product-strip__intro h2 {
		font-size: clamp(2.45rem, 12vw, 3.7rem);
	}

	.product-strip__rail {
		grid-auto-columns: calc(100vw - 36px);
		padding-inline: 18px;
	}

	.product-panel {
		padding: 24px;
		border-radius: 16px;
	}

	.product-panel__stage {
		min-height: 330px;
	}

	.product-panel__copy h3 {
		font-size: clamp(1.85rem, 8.6vw, 2.65rem);
	}

	.extension-card,
	.allowed-list,
	.blocked-state,
	.review-card {
		width: min(86%, 360px);
	}

	.flow-steps,
	.feature-showcase__grid,
	.audience-section__grid {
		grid-template-columns: 1fr;
	}

	.dashboard-proof__copy {
		min-height: 520px;
		padding: 36px 24px;
	}

	.dashboard-proof__copy h2 {
		max-width: 11ch;
		font-size: clamp(3rem, 13vw, 4.2rem);
	}

	.dashboard-proof__copy p {
		font-size: 1rem;
	}

	.dashboard-proof__showcase {
		min-height: 0;
		padding: 24px 12px 40px;
	}

	.dashboard-proof__shell {
		width: 100%;
		border-radius: 14px;
	}

	.dashboard-proof .progress-dashboard-frame__viewport {
		height: 430px;
		min-height: 0;
		overflow: hidden;
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		width: 920px;
		height: 1320px;
		--dashboard-preview-scale: 0.325;
	}

	.flow-step {
		min-height: 0;
	}

	.flow-step::after {
		display: none;
	}

	.dashboard-proof .progress-dashboard-frame__footer {
		align-items: flex-start;
		padding: 12px;
		font-size: 0.78rem;
	}

	.final-reference-cta {
		margin-inline: 10px;
		border-radius: 16px;
	}
}

/* ==========================================================================
   FINAL REFERENCE PASS — slimmer nav, animated product surfaces
   ========================================================================== */
.site-topbar {
	background: rgba(255, 255, 255, 0.82) !important;
	border-bottom: 1px solid rgba(8, 10, 18, 0.055) !important;
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
}

.topbar {
	min-height: 58px !important;
	max-width: 1288px;
	padding: 8px clamp(16px, 2.3vw, 32px) !important;
	gap: clamp(16px, 2.4vw, 32px);
}

.site-topbar .brand {
	gap: 0;
	min-width: 130px;
}

.site-topbar .brand__wordmark {
	display: inline-block;
	font-family: "Space Grotesk", var(--font-display);
	font-size: clamp(1.42rem, 1.65vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.06em;
	color: #0b0d12;
	line-height: 1;
}

.topnav {
	flex: 1;
	gap: clamp(24px, 3vw, 44px);
	margin: 0;
	justify-content: center;
}

.topnav a {
	font-size: 0.98rem;
	font-weight: 500;
	color: rgba(12, 15, 20, 0.72);
}

.topbar__controls {
	gap: 8px;
}

.topbar__auth-button,
.topbar__cta {
	min-height: 42px !important;
	padding-inline: 20px !important;
	border-radius: 10px !important;
	font-size: 0.96rem;
}

.reference-hero {
	min-height: min(720px, calc(100svh - 82px));
	margin-top: 12px;
	border-radius: 18px;
}

.reference-video-frame {
	background: transparent;
}

.reference-video-frame__video {
	aspect-ratio: 1600 / 986;
}

.product-strip {
	position: relative;
	isolation: isolate;
	background: #050607;
}

.product-strip::before,
.product-strip::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.product-strip::before {
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0.04), transparent 26%, rgba(133, 190, 92, 0.12), transparent 58%),
		radial-gradient(86% 72% at 20% 18%, rgba(102, 126, 76, 0.28), transparent 58%),
		linear-gradient(180deg, #060707 0%, #090a0b 58%, #050607 100%);
	background-size: 240% 240%, 120% 120%, 100% 100%;
	animation: section-field 18s ease-in-out infinite alternate;
}

.product-strip::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 42px 42px;
	opacity: 0.12;
	transform: translate3d(0, 0, 0);
	animation: grid-drift 28s linear infinite;
}

.product-strip__rail {
	animation: rail-breathe 16s ease-in-out infinite alternate;
	will-change: transform;
}

.product-panel {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
		#151617;
	box-shadow: 0 18px 58px rgba(0, 0, 0, 0.34);
}

.product-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, 0.1) 48%, transparent 64% 100%);
	transform: translateX(-130%);
	animation: panel-sheen 8.5s ease-in-out infinite;
	pointer-events: none;
}

.product-panel:nth-child(2)::before { animation-delay: 1.2s; }
.product-panel:nth-child(3)::before { animation-delay: 2.4s; }
.product-panel:nth-child(4)::before { animation-delay: 3.6s; }

.product-panel__stage {
	background:
		radial-gradient(circle at 26% 16%, rgba(171, 221, 119, 0.18), transparent 30%),
		linear-gradient(135deg, #222428, #090a0c);
}

.product-panel__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.35;
	animation: grid-drift 18s linear infinite;
}

.extension-card,
.allowed-list,
.blocked-state,
.review-card {
	animation: product-card-float 5.2s ease-in-out infinite;
}

.browser-surface {
	animation: surface-float 6.2s ease-in-out infinite reverse;
}

.allowed-list {
	animation: allowed-list-float 5.4s ease-in-out infinite;
}

.extension-card__field,
.allowed-list span,
.blocked-state__timer {
	position: relative;
	overflow: hidden;
}

.extension-card__field::after,
.allowed-list span::after,
.blocked-state__timer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	transform: translateX(-130%);
	animation: ui-scan 4.8s ease-in-out infinite;
}

.dashboard-proof {
	background: #070908;
}

.dashboard-proof__copy {
	background:
		linear-gradient(180deg, rgba(4, 8, 5, 0.04), rgba(4, 8, 5, 0.78)),
		radial-gradient(120% 86% at 12% 8%, rgba(190, 223, 83, 0.86), transparent 54%),
		radial-gradient(90% 72% at 74% 30%, rgba(74, 138, 76, 0.64), transparent 62%),
		linear-gradient(136deg, #233719 0%, #102014 50%, #060907 100%);
	background-size: 100% 100%, 130% 130%, 120% 120%, 100% 100%;
	animation: dashboard-field 16s ease-in-out infinite alternate;
}

.dashboard-proof__showcase {
	background:
		radial-gradient(80% 64% at 18% 22%, rgba(125, 163, 92, 0.28), transparent 58%),
		radial-gradient(86% 70% at 92% 10%, rgba(236, 240, 226, 0.16), transparent 62%),
		linear-gradient(120deg, #101411 0%, #131713 42%, #080a09 100%) !important;
}

.dashboard-proof__showcase::before {
	background: linear-gradient(90deg, rgba(12, 16, 13, 0.98), rgba(12, 16, 13, 0));
}

.dashboard-proof__showcase::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(118deg, transparent 0 38%, rgba(255, 255, 255, 0.09) 46%, transparent 54% 100%),
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 240% 240%, 40px 40px, 40px 40px;
	opacity: 0.38;
	animation: dashboard-showcase-motion 14s ease-in-out infinite alternate;
	pointer-events: none;
}

.dashboard-proof__shell {
	animation: dashboard-shell-float 7s ease-in-out infinite;
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

@keyframes section-field {
	0% { background-position: 0% 42%, 50% 50%, 0 0; }
	100% { background-position: 100% 58%, 44% 56%, 0 0; }
}

@keyframes dashboard-field {
	0% { background-position: 0 0, 42% 40%, 64% 50%, 0 0; }
	100% { background-position: 0 0, 56% 50%, 46% 42%, 0 0; }
}

@keyframes dashboard-showcase-motion {
	0% { background-position: 0% 50%, 0 0, 0 0; }
	100% { background-position: 100% 50%, 28px 18px, 18px 28px; }
}

@keyframes grid-drift {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 84px 42px, 42px 84px; }
}

@keyframes rail-breathe {
	0% { transform: translateX(0); }
	100% { transform: translateX(-42px); }
}

@keyframes panel-sheen {
	0%, 55% { transform: translateX(-130%); opacity: 0; }
	68% { opacity: 1; }
	92%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes product-card-float {
	0%, 100% { transform: translate(-50%, -50%); }
	50% { transform: translate(-50%, calc(-50% - 10px)); }
}

@keyframes allowed-list-float {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(calc(-50% - 10px)); }
}

@keyframes surface-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes ui-scan {
	0%, 52% { transform: translateX(-130%); }
	78%, 100% { transform: translateX(130%); }
}

@keyframes dashboard-shell-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.product-strip::before,
	.product-strip::after,
	.product-strip__rail,
	.product-panel::before,
	.product-panel__stage::before,
	.extension-card,
	.allowed-list,
	.blocked-state,
	.review-card,
	.browser-surface,
	.extension-card__field::after,
	.allowed-list span::after,
	.blocked-state__timer::after,
	.dashboard-proof__copy,
	.dashboard-proof__showcase::after,
	.dashboard-proof__shell {
		animation: none !important;
	}
}

@media (max-width: 720px) {
	.topbar {
		min-height: 54px !important;
		padding: 8px 16px !important;
	}

	.site-topbar .brand {
		min-width: 0;
	}

	.site-topbar .brand__wordmark {
		font-size: 1.46rem;
	}

	.topbar__cta {
		min-height: 40px !important;
		padding-inline: 16px !important;
	}

	.product-strip__rail {
		animation: none;
	}

	.dashboard-proof__showcase {
		background:
			radial-gradient(88% 60% at 16% 0%, rgba(125, 163, 92, 0.24), transparent 58%),
			linear-gradient(180deg, #101411 0%, #080a09 100%) !important;
	}
}

/* ==========================================================================
   REFERENCE CORRECTION PASS — nav, product block, dashboard section
   ========================================================================== */
.site-topbar {
	background: rgba(255, 255, 255, 0.96) !important;
	border-bottom: 1px solid rgba(15, 18, 24, 0.08) !important;
	box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
}

.site-topbar.is-scrolled {
	background: rgba(255, 255, 255, 0.98) !important;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.11) !important;
}

.topbar {
	min-height: 72px !important;
	max-width: 1360px;
	padding: 12px clamp(28px, 4vw, 56px) !important;
	gap: clamp(24px, 3vw, 40px);
}

.site-topbar .brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 188px;
}

.site-topbar .brand img {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

.site-topbar .brand__wordmark {
	display: inline-block;
	font-family: "Space Grotesk", var(--font-display);
	font-size: clamp(1.28rem, 1.35vw, 1.54rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: #07090d;
}

.topnav {
	flex: 1;
	gap: clamp(28px, 3.2vw, 48px);
	margin: 0;
	justify-content: center;
}

.topnav a {
	font-size: 0.96rem;
	font-weight: 500;
	color: rgba(11, 13, 18, 0.72);
}

.topbar__controls {
	gap: 12px;
}

.topbar__auth-button,
.topbar__cta {
	min-height: 44px !important;
	padding-inline: 21px !important;
	border-radius: 12px !important;
	font-size: 0.96rem;
}

.product-strip.workflow-showcase {
	position: relative;
	min-height: auto;
	padding: clamp(80px, 8vw, 116px) clamp(24px, 4vw, 56px);
	background:
		radial-gradient(90% 90% at 8% 12%, rgba(132, 166, 82, 0.2), transparent 58%),
		linear-gradient(135deg, #080b09 0%, #101512 42%, #060707 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.product-strip.workflow-showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 44px 44px;
	opacity: 0.46;
	animation: none !important;
}

.product-strip.workflow-showcase::after,
.workflow-showcase .product-strip::after {
	display: none !important;
	animation: none !important;
}

.workflow-showcase__inner {
	width: min(100%, 1280px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}

.workflow-showcase__copy h2 {
	max-width: 11.5ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.65rem, 4.7vw, 5.05rem);
	font-weight: 500;
	line-height: 0.99;
	letter-spacing: -0.045em;
	color: #fff;
}

.workflow-showcase__copy p {
	max-width: 35rem;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: clamp(1rem, 1.14vw, 1.13rem);
	line-height: 1.58;
}

.workflow-showcase__steps {
	display: grid;
	gap: 1px;
	width: min(100%, 440px);
	margin-top: clamp(28px, 3vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
}

.workflow-showcase__steps div {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 16px;
	background: rgba(10, 12, 11, 0.72);
}

.workflow-showcase__steps span {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.44);
}

.workflow-showcase__steps strong {
	font-size: 0.96rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88);
}

.workflow-showcase__stage {
	position: relative;
	min-height: clamp(520px, 52vw, 660px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background:
		radial-gradient(70% 70% at 26% 20%, rgba(150, 186, 102, 0.18), transparent 58%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.workflow-browser {
	position: absolute;
	right: clamp(24px, 4vw, 54px);
	bottom: clamp(30px, 5vw, 68px);
	width: min(74%, 720px);
	border-radius: 16px;
	background: #24282b;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
	overflow: hidden;
}

.workflow-browser__chrome {
	height: 48px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	background: #343738;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.82rem;
}

.workflow-browser__chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff6b57;
}

.workflow-browser__chrome span:nth-child(2) { background: #f6c451; }
.workflow-browser__chrome span:nth-child(3) { background: #37c96f; }

.workflow-browser__chrome div {
	margin-left: 8px;
	padding: 8px 12px;
	border-radius: 9px;
	background: rgba(0, 0, 0, 0.22);
	color: rgba(255, 255, 255, 0.72);
}

.workflow-browser__canvas {
	position: relative;
	min-height: 470px;
	padding: 32px;
	background:
		linear-gradient(135deg, rgba(29, 34, 37, 0.96), rgba(14, 16, 18, 0.96)),
		#16191b;
}

.workflow-browser__tabs {
	display: flex;
	gap: 8px;
}

.workflow-browser__tabs i {
	padding: 8px 12px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.76);
	font-style: normal;
	font-size: 0.8rem;
}

.workflow-browser__search {
	width: min(64%, 420px);
	margin: 80px auto 0;
	padding: 16px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: rgba(20, 22, 24, 0.56);
	font-size: 0.9rem;
}

.workflow-browser__dock {
	position: absolute;
	left: 34px;
	bottom: 30px;
	width: 260px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-browser__dock span,
.workflow-note span {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8rem;
}

.workflow-browser__dock strong,
.workflow-note strong {
	display: block;
	margin-top: 8px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.workflow-panel {
	position: absolute;
	right: 28px;
	top: 88px;
	width: min(300px, 34%);
	padding: 16px;
	border-radius: 14px;
	background: linear-gradient(180deg, #201b86, #0d0a38);
	color: #fff;
	box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
}

.workflow-panel__top strong {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
}

.workflow-panel__top span {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.78rem;
}

.workflow-panel__chips {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.workflow-panel__chips i {
	padding: 8px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	font-style: normal;
	font-size: 0.76rem;
}

.workflow-panel__field {
	margin-top: 16px;
	padding: 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.86rem;
}

.workflow-panel__sites {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.workflow-panel__sites span {
	padding: 8px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.76rem;
}

.workflow-panel button {
	width: 100%;
	margin-top: 16px;
	padding: 12px 12px;
	border: 0;
	border-radius: 10px;
	background: #57a5ff;
	color: #fff;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
}

.workflow-note {
	display: none;
}

.workflow-note--block {
	top: clamp(22px, 3vw, 34px);
}

.workflow-note--progress {
	display: none;
}

.dashboard-proof {
	position: relative;
	min-height: max(720px, calc(100svh - var(--topbar-height, 76px)));
	display: grid;
	grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(28px, 4vw, 68px);
	align-items: center;
	padding: clamp(72px, 8vw, 120px) clamp(24px, 5vw, 72px);
	background: #070708 !important;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.dashboard-proof::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(5, 5, 6, 0.62) 0%, rgba(5, 5, 6, 0.38) 42%, rgba(5, 5, 6, 0.12) 100%),
		linear-gradient(180deg, rgba(5, 5, 6, 0.34), rgba(5, 5, 6, 0.76));
	pointer-events: none;
}

.dashboard-proof::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.18;
	pointer-events: none;
}

.dashboard-proof__bg-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: contrast(1.08) brightness(0.82);
	pointer-events: none;
}

.dashboard-proof__copy {
	position: relative;
	z-index: 2;
	min-height: auto;
	justify-content: center;
	padding: 0 0 0 clamp(0px, 2vw, 28px);
	background: transparent !important;
	animation: none !important;
}

.dashboard-proof__copy::before {
	display: none !important;
}

.dashboard-proof__copy h2 {
	max-width: 12.5ch;
	margin: 0;
	font-size: clamp(2.65rem, 4.45vw, 4.75rem);
	font-weight: 500;
	line-height: 1.01;
	letter-spacing: -0.043em;
}

.dashboard-proof__copy p {
	max-width: 31rem;
	margin-top: 24px;
	color: rgba(255, 255, 255, 0.76);
	font-size: clamp(0.98rem, 1.12vw, 1.12rem);
	line-height: 1.58;
}

.dashboard-proof__link {
	position: relative;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 48px;
	min-height: 0;
	margin-top: 32px;
	padding: 0 24px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.86);
	background: #ffffff;
	color: #111312;
	font-weight: 500;
	line-height: 1;
	box-shadow: none;
	transition:
		background-color 300ms var(--ease),
		border-color 300ms var(--ease),
		color 300ms var(--ease);
}

.dashboard-proof__link span {
	position: relative;
	z-index: 1;
	margin: 0;
	color: currentColor;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
}

.dashboard-proof__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	border-radius: inherit;
	background: linear-gradient(270deg, rgba(209, 142, 226, 0.92), rgba(255, 119, 89, 0.94));
	opacity: 0;
	transform: translate(0, 0);
	filter: blur(0);
	pointer-events: none;
	transition:
		transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 500ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-proof__link:hover {
	background-color: #ffffff;
	border-color: rgba(255, 255, 255, 0.92);
	color: #111312;
}

.dashboard-proof__link:hover::before {
	opacity: 1;
	transform: translate(-8px, 8px);
	filter: blur(8px);
}

.dashboard-proof__link:focus {
	outline: none;
}

.dashboard-proof__link:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.78);
	outline-offset: 3px;
}

.dashboard-proof__showcase {
	position: relative;
	z-index: 2;
	min-height: auto;
	padding: 0;
	background: transparent !important;
	border-left: 0;
	overflow: visible;
}

.dashboard-proof__showcase::before,
.dashboard-proof__showcase::after,
.dashboard-proof__scan {
	display: none !important;
}

.dashboard-proof__shell {
	width: min(1180px, 66vw);
	border-radius: 16px;
	background: #f7f8fa;
	border: 1px solid rgba(255, 255, 255, 0.34);
	box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	animation: none !important;
}

.dashboard-proof .progress-dashboard-frame {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none;
}

.dashboard-proof .progress-dashboard-frame__toolbar,
.dashboard-proof .progress-dashboard-frame__footer {
	display: none !important;
}

.dashboard-proof .progress-dashboard-frame__viewport {
	height: min(60svh, 650px);
	min-height: 540px;
	border-radius: 16px;
}

.dashboard-proof .progress-dashboard-frame__embed {
	--dashboard-preview-scale: 0.7;
	left: 0;
	transform: scale(var(--dashboard-preview-scale, 1));
	transform-origin: top left;
}

@media (prefers-reduced-motion: reduce) {
	.product-strip.workflow-showcase::before,
	.dashboard-proof::before {
		animation: none !important;
	}

	.dashboard-proof__bg-video {
		display: none;
	}
}

@media (max-width: 1020px) {
	.topbar {
		padding-inline: 22px !important;
	}

	.site-topbar .brand {
		min-width: auto;
	}

	.workflow-showcase__inner,
	.dashboard-proof {
		grid-template-columns: 1fr;
	}

	.workflow-showcase__copy h2,
	.dashboard-proof__copy h2 {
		max-width: 13ch;
	}

	.dashboard-proof__shell {
		width: 100%;
	}
}

@media (max-width: 720px) {
	.topbar {
		min-height: 60px !important;
		padding: 8px 16px !important;
	}

	.site-topbar .brand {
		gap: 8px;
	}

	.site-topbar .brand img {
		width: 32px;
		height: 32px;
		border-radius: 9px;
	}

	.site-topbar .brand__wordmark {
		font-size: 1.32rem;
	}

	.topbar__cta {
		min-height: 40px !important;
		padding-inline: 15px !important;
		border-radius: 10px !important;
	}

	.product-strip.workflow-showcase {
		padding: 68px 12px;
	}

	.workflow-showcase__copy {
		padding-inline: 10px;
	}

	.workflow-showcase__copy h2,
	.dashboard-proof__copy h2 {
		font-size: clamp(2.6rem, 13vw, 3.55rem);
	}

	.workflow-showcase__stage {
		min-height: 600px;
		border-radius: 16px;
	}

	.workflow-browser {
		right: 12px;
		bottom: 18px;
		width: calc(100% - 24px);
	}

	.workflow-browser__canvas {
		min-height: 410px;
		padding: 24px;
	}

	.workflow-browser__search {
		width: 92%;
		margin-top: 64px;
	}

	.workflow-panel {
		width: 240px;
		right: 18px;
		top: 82px;
	}

	.workflow-note {
		left: 18px;
		width: 190px;
	}

	.dashboard-proof {
		min-height: auto;
		padding: 64px 12px 0;
		gap: 36px;
	}

	.dashboard-proof__copy {
		padding-inline: 12px;
	}

	.dashboard-proof__showcase {
		padding-bottom: 0;
	}

	.dashboard-proof__shell {
		width: 100%;
		border-radius: 14px 14px 0 0;
	}

	.dashboard-proof .progress-dashboard-frame,
	.dashboard-proof .progress-dashboard-frame__viewport {
		border-radius: 14px 14px 0 0;
	}

	.dashboard-proof .progress-dashboard-frame__viewport {
		height: 520px;
		min-height: 520px;
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		--dashboard-preview-scale: 0.42;
	}
}

/* Scroll performance: keep the sticky nav on a cheap compositor layer. */
.site-topbar {
	background: #fff !important;
	border-bottom: 1px solid rgba(15, 18, 24, 0.08) !important;
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.075) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
	transition:
		transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 180ms ease,
		background-color var(--duration-normal) var(--ease),
		border-color var(--duration-normal) var(--ease),
		box-shadow var(--duration-normal) var(--ease) !important;
	will-change: transform;
	backface-visibility: hidden;
	contain: layout paint;
}

.site-topbar.is-scrolled {
	background: #fff !important;
	border-bottom-color: rgba(15, 18, 24, 0.08) !important;
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.075) !important;
}

/* Navbar refinement: keep the same system, tighten hierarchy and spacing. */
:root {
	--topbar-height: 68px;
}

html {
	scroll-padding-top: calc(var(--topbar-height) + 16px);
	overscroll-behavior-y: none;
	background: #f4f0e8;
}

body {
	overscroll-behavior-y: none;
	background:
		radial-gradient(circle at 18% 6%, rgba(246, 238, 229, 0.9), transparent 34%),
		radial-gradient(circle at 84% 4%, rgba(238, 241, 247, 0.9), transparent 30%),
		#f4f0e8;
}

.page-shell {
	padding-top: var(--topbar-height);
}

section[id],
.cta-band[id],
.site-footer[id] {
	scroll-margin-top: calc(var(--topbar-height) + 16px);
}

/* Reference motion pass: Cohere/Zapier-style, calm and scroll-led. */
.reveal {
	transform: translateY(18px);
	transition:
		opacity 500ms ease,
		transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.flow-steps.reveal.is-visible .flow-step,
.audience-section__grid.reveal.is-visible article,
.pricing-shell.reveal.is-visible .pricing-card,
.faq-list.reveal.is-visible details,
.privacy__inner.reveal.is-visible .privacy__item {
	animation: reference-rise 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--motion-i, 0) * 72ms);
}

.flow-steps .flow-step:nth-child(1),
.audience-section__grid article:nth-child(1),
.pricing-card:nth-child(1),
.faq-list details:nth-child(1),
.privacy__item:nth-child(1) { --motion-i: 0; }

.flow-steps .flow-step:nth-child(2),
.audience-section__grid article:nth-child(2),
.pricing-card:nth-child(2),
.faq-list details:nth-child(2),
.privacy__item:nth-child(2) { --motion-i: 1; }

.flow-steps .flow-step:nth-child(3),
.audience-section__grid article:nth-child(3),
.pricing-card:nth-child(3),
.faq-list details:nth-child(3),
.privacy__item:nth-child(3) { --motion-i: 2; }

.flow-steps .flow-step:nth-child(4),
.audience-section__grid article:nth-child(4),
.faq-list details:nth-child(4),
.privacy__item:nth-child(4) { --motion-i: 3; }

.faq-list details:nth-child(5) { --motion-i: 4; }

.privacy__inner {
	background:
		radial-gradient(92% 120% at 100% 0%, rgba(233, 244, 255, 0.82) 0%, rgba(233, 244, 255, 0) 58%),
		radial-gradient(72% 90% at 0% 100%, rgba(246, 238, 229, 0.62) 0%, rgba(246, 238, 229, 0) 62%),
		linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
	border-color: rgba(3, 7, 18, 0.1) !important;
	box-shadow: 0 1px 2px rgba(3, 7, 18, 0.04) !important;
}

.privacy__inner::before {
	background-image: radial-gradient(rgba(3, 7, 18, 0.065) 1px, transparent 1.4px) !important;
	opacity: 0.42 !important;
	animation: privacy-grid-drift 18s linear infinite;
}

.privacy__lock {
	background: linear-gradient(160deg, #111827 0%, #09090b 100%) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 18px rgba(3, 7, 18, 0.14) !important;
}

.privacy__lock svg {
	width: 27px;
	height: 27px;
}

.privacy__policy {
	color: #111827 !important;
	transition: color 180ms ease, gap 180ms ease;
}

.privacy__policy svg {
	color: #7b5b44 !important;
}

.privacy__policy:hover {
	color: #7b5b44 !important;
	gap: 8px;
}

.privacy__badge--yes {
	background: rgba(17, 24, 39, 0.07) !important;
	color: #111827 !important;
}

.privacy__badge--no {
	background: rgba(124, 91, 68, 0.11) !important;
	color: #7b5b44 !important;
}

.dashboard-proof::after {
	animation: dashboard-grid-drift 24s linear infinite;
}

.dashboard-proof__bg-video {
	animation: dashboard-media-drift 18s ease-in-out infinite alternate;
}

.cohere-card {
	transition:
		border-color 160ms ease,
		background-color 160ms ease;
}

.cohere-card:hover {
	transform: none;
}

.cohere-card img {
	transform: scale(var(--card-media-scale)) !important;
	transform-origin: center;
	transition:
		transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
		filter 180ms ease;
	will-change: transform;
}

.cohere-card:hover img {
	transform: scale(var(--card-media-hover-scale)) !important;
}

@keyframes reference-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes privacy-grid-drift {
	from { background-position: 0 0; }
	to { background-position: 44px 22px; }
}

@keyframes dashboard-grid-drift {
	from { background-position: 0 0, 0 0; }
	to { background-position: 96px 48px, 96px 48px; }
}

@keyframes dashboard-media-drift {
	from { transform: scale(1.01) translate3d(0, 0, 0); }
	to { transform: scale(1.045) translate3d(-1.2%, 0.8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.flow-steps.reveal.is-visible .flow-step,
	.audience-section__grid.reveal.is-visible article,
	.pricing-shell.reveal.is-visible .pricing-card,
	.faq-list.reveal.is-visible details,
	.privacy__inner.reveal.is-visible .privacy__item,
	.privacy__inner::before,
	.dashboard-proof::after,
	.dashboard-proof__bg-video {
		animation: none !important;
	}

	.cohere-card,
	.cohere-card img {
		transition: none !important;
	}
}

.site-topbar {
	position: fixed !important;
	inset: 0 0 auto 0 !important;
	width: 100% !important;
	z-index: 1000 !important;
	border-bottom-color: rgba(15, 18, 24, 0.075) !important;
	box-shadow: 0 1px 0 rgba(15, 18, 24, 0.045) !important;
}

.site-topbar.is-scrolled {
	border-bottom-color: rgba(15, 18, 24, 0.075) !important;
	box-shadow: 0 1px 0 rgba(15, 18, 24, 0.055) !important;
}

.site-topbar.is-hidden {
	transform: translate3d(0, -100%, 0) !important;
	opacity: 0;
	pointer-events: none;
}

.topbar {
	max-width: 1248px !important;
	min-height: 68px !important;
	padding: 8px clamp(24px, 3vw, 32px) !important;
	gap: clamp(24px, 3vw, 36px) !important;
}

.site-topbar .brand {
	gap: 12px;
	min-width: 170px;
}

.site-topbar .brand img {
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.site-topbar .brand__wordmark {
	font-size: clamp(1.36rem, 1.35vw, 1.58rem);
	letter-spacing: -0.045em;
}

.topnav {
	flex: 1;
	gap: clamp(24px, 2.9vw, 40px);
	margin: 0;
	justify-content: center;
}

.topnav a {
	padding: 8px 2px;
	border-radius: 8px;
	font-size: 0.95rem;
	color: rgba(11, 13, 18, 0.7);
}

.topnav a:hover {
	color: #07090d;
	background: transparent;
}

.topbar__controls {
	gap: 16px;
}

.topbar__auth-button {
	min-height: 38px !important;
	padding: 0 2px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: rgba(11, 13, 18, 0.68);
	font-size: 0.95rem;
	font-weight: 500;
}

.topbar__auth-button:hover {
	color: #07090d;
	background: transparent !important;
	border-color: transparent !important;
}

.topbar__auth-button.is-loading {
	background: transparent !important;
}

.topbar__cta {
	min-height: 44px !important;
	padding-inline: 22px !important;
	border-radius: 12px !important;
	font-size: 0.96rem;
	font-weight: 650;
	background: #09090b;
	color: #fff;
	/* default rest: no shadow; hover glow is set by .glow-btn--primary */
	box-shadow: none;
}

.topbar__cta:hover {
	/* allow .glow-btn--primary cool shadow / white ::before */
	transform: none;
}

@media (max-width: 1080px) {
	.cohere-card-strip {
		padding: 84px 0 68px;
	}

	.cohere-card-strip__header {
		width: calc(100% - 48px);
		margin-bottom: 32px;
	}

	.cohere-card-strip__header h2 {
		max-width: none;
		font-size: clamp(1.85rem, 3.4vw, 2.6rem);
		white-space: nowrap;
	}

	.cohere-card-strip__rail {
		padding-inline: 24px;
	}

	.cohere-card {
		flex-basis: 380px;
		width: 380px;
		height: 380px;
	}

	.cohere-card-strip__progress {
		width: 168px !important;
	}
}

@media (max-width: 720px) {
	.topbar {
		max-width: 100% !important;
		min-height: 60px !important;
		padding: 8px 16px !important;
	}

	.site-topbar .brand {
		gap: 8px;
		min-width: 0;
	}

	.site-topbar .brand img {
		width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	.site-topbar .brand__wordmark {
		font-size: 1.34rem;
	}

	.topbar__controls {
		gap: 0;
	}

	.topbar__cta {
		min-height: 40px !important;
		padding-inline: 16px !important;
		border-radius: 10px !important;
	}

	.cohere-card-strip {
		padding: 68px 0 56px;
	}

	.cohere-card-strip__header {
		align-items: center;
		width: calc(100% - 32px);
		gap: 16px;
		margin-bottom: 28px;
	}

	.cohere-card-strip__header h2 {
		font-size: clamp(1.45rem, 5.2vw, 2rem);
		line-height: 1.12;
		white-space: normal; /* narrow screens: allow wrap */
	}

	.cohere-card-strip__arrows {
		gap: 8px;
		padding-bottom: 0;
	}

	.cohere-card-strip__arrow {
		width: 30px;
		height: 30px;
	}

	.cohere-card-strip__arrow svg {
		width: 24px;
		height: 24px;
	}

	.cohere-card-strip__rail {
		gap: 16px;
		padding-inline: 16px;
		scroll-snap-type: x mandatory;
	}

	.cohere-card {
		flex-basis: 78vw;
		height: 360px;
		border-radius: 18px;
		scroll-snap-align: center;
	}

	.cohere-card h3 {
		max-width: 240px;
		padding: 24px;
		font-size: 1.55rem;
	}

	.cohere-card-strip__progress {
		width: 160px !important;
		margin-top: 20px !important;
	}

.cohere-card-strip__progress span {
	width: 52px !important;
}
}

/* Dashboard proof: keep the split section dense at the handoff into Features. */
.dashboard-proof {
	min-height: 0 !important;
	height: clamp(650px, calc(100svh - var(--topbar-height, 68px)), 820px);
	grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.36fr) !important;
	align-items: end !important;
	gap: clamp(24px, 3.6vw, 56px) !important;
	padding: clamp(40px, 5.4vw, 80px) clamp(24px, 5vw, 72px) 0 !important;
	background: #070809 url("assets/images/generated/analytics-silk-poster.jpg") 36% center / cover no-repeat !important;
}

.dashboard-proof::before {
	background:
		linear-gradient(90deg, rgba(4, 5, 7, 0.58) 0%, rgba(4, 5, 7, 0.34) 44%, rgba(4, 5, 7, 0.08) 100%),
		linear-gradient(180deg, rgba(4, 5, 7, 0.1) 0%, rgba(4, 5, 7, 0.32) 100%) !important;
}

.dashboard-proof__brand {
	position: absolute;
	top: clamp(34px, 5.4vw, 70px);
	left: clamp(28px, 5vw, 92px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.94);
	font-size: clamp(1rem, 1.1vw, 1.18rem);
	font-weight: 650;
	letter-spacing: -0.03em;
}

.dashboard-proof__brand img {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.dashboard-proof__copy {
	align-self: end !important;
	padding: 0 0 clamp(48px, 7.2vh, 88px) clamp(8px, 2.8vw, 56px) !important;
}

.dashboard-proof__copy h2 {
	max-width: 12.25ch !important;
}

.dashboard-proof__showcase {
	align-self: end !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	height: 100% !important;
}

.dashboard-proof__shell {
	width: min(1060px, 59vw) !important;
	margin-left: auto !important;
	margin-bottom: 0 !important;
	border-radius: 18px 18px 0 0 !important;
	transform: translateX(clamp(0px, 2.1vw, 34px));
}

.dashboard-proof .preview-stage,
.dashboard-proof .progress-dashboard-frame,
.dashboard-proof .progress-dashboard-frame__viewport {
	border-radius: 18px 18px 0 0 !important;
}

.dashboard-proof .progress-dashboard-frame__viewport {
	height: clamp(540px, calc(100svh - var(--topbar-height, 68px) - 116px), 660px) !important;
	min-height: 0 !important;
}

.dashboard-proof .progress-dashboard-frame__embed {
	--dashboard-preview-scale: 1.4;
	width: 1800px !important;
	pointer-events: none;
}

@media (max-width: 1200px) {
	.dashboard-proof {
		grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.18fr) !important;
	}

	.dashboard-proof__shell {
		width: min(880px, 57vw) !important;
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		--dashboard-preview-scale: 0.92;
	}
}

@media (max-width: 1500px) and (min-width: 1321px) {
	.dashboard-proof {
		grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr) !important;
		gap: 28px !important;
	}

	.dashboard-proof__copy {
		padding-left: clamp(20px, 3vw, 40px) !important;
	}

	.dashboard-proof__copy h2 {
		max-width: 9.9ch !important;
		font-size: clamp(3.35rem, 4.65vw, 4.3rem) !important;
	}

	.dashboard-proof__copy p {
		max-width: 23rem !important;
	}
}

@media (max-width: 1320px) and (min-width: 1181px) {
	.dashboard-proof {
		grid-template-columns: minmax(310px, 0.76fr) minmax(0, 1.24fr) !important;
		gap: 24px !important;
	}

	.dashboard-proof__copy {
		padding-left: 16px !important;
	}

	.dashboard-proof__copy h2 {
		font-size: clamp(3.25rem, 5vw, 4.2rem) !important;
		max-width: 8.8ch !important;
	}

	.dashboard-proof__copy p {
		max-width: 21.5rem !important;
	}

	.dashboard-proof__shell {
		width: min(920px, 60vw) !important;
	}
}

@media (max-width: 1180px) {
	.dashboard-proof {
		height: auto;
		min-height: 0 !important;
		grid-template-columns: 1fr !important;
		gap: 40px !important;
		padding: 64px 24px 0 !important;
	}

	.dashboard-proof__copy {
		max-width: 720px;
		padding: 0 clamp(8px, 2vw, 16px) 0 !important;
	}

	.dashboard-proof__copy h2 {
		max-width: 11.5ch !important;
		font-size: clamp(3.15rem, 8vw, 4.6rem) !important;
	}

	.dashboard-proof__copy p {
		max-width: 34rem !important;
	}

	.dashboard-proof__brand {
		position: relative;
		top: auto;
		left: auto;
		align-self: start;
		margin-left: clamp(8px, 2vw, 16px);
	}

	.dashboard-proof__showcase {
		height: auto !important;
	}

	.dashboard-proof__shell {
		width: min(100%, 980px) !important;
		transform: none;
	}

	.dashboard-proof .progress-dashboard-frame__viewport {
		height: clamp(500px, 58vw, 620px) !important;
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		--dashboard-preview-scale: 1.35;
	}
}

@media (max-width: 720px) {
	.dashboard-proof {
		padding: 56px 12px 0 !important;
		gap: 32px !important;
	}

	.dashboard-proof__copy {
		padding-inline: 10px !important;
	}

	.dashboard-proof__copy h2 {
		max-width: 12.5ch !important;
		/* Bring the heading back onto the mobile type scale (other h2s are ~2-2.2rem) */
		font-size: clamp(2.25rem, 8.8vw, 3rem) !important;
	}

	.dashboard-proof .progress-dashboard-frame__viewport {
		/* Match the scaled iframe content height (~880px * 0.42) —
		   taller values left a white dead band below the dashboard cards */
		height: 372px !important;
	}

	.dashboard-proof .progress-dashboard-frame__embed {
		--dashboard-preview-scale: 0.42;
	}
}

/* Fixed navbar is 60px — anchors must clear it */
section[id],
.cta-band[id],
.site-footer[id],
.dashboard-proof[id] {
	scroll-margin-top: 76px !important;
}

html {
	scroll-padding-top: 76px !important;
}

/* Feature carousel: keep the large-screen composition finished, not clipped. */
.cohere-card-strip {
	padding: 88px 0 80px !important;
	overflow: hidden !important;
}

.cohere-card-strip__header,
.cohere-card-strip__rail {
	width: min(calc(100% - 96px), 1248px) !important;
	margin-inline: auto !important;
}

.cohere-card-strip__progress {
	width: 188px !important;
	margin-inline: auto !important;
}

.cohere-card-strip__header {
	margin-bottom: 36px !important;
}

.cohere-card-strip__rail {
	gap: 24px !important;
	padding: 0 0 8px !important;
	scroll-padding-inline: 0 !important;
}

.cohere-card {
	flex: 0 0 420px !important;
	width: 420px !important;
	height: 420px !important;
	min-width: 0;
}

.cohere-card h3 {
	max-width: 280px !important;
	padding: 28px 28px !important;
	font-size: clamp(1.42rem, 1.2vw, 1.68rem) !important;
	line-height: 1.08 !important;
	font-weight: 500;
}

.cohere-card-strip__progress {
	margin-top: 32px !important;
}

@media (max-width: 1080px) {
	.cohere-card-strip {
		padding: 80px 0 64px !important;
	}

	.cohere-card-strip__header,
	.cohere-card-strip__rail {
		width: calc(100% - 48px) !important;
	}

	.cohere-card-strip__progress {
		width: 168px !important;
	}

	.cohere-card-strip__rail {
		gap: 20px !important;
	}

	.cohere-card {
		flex-basis: 380px !important;
		width: 380px !important;
		height: 380px !important;
	}
}

@media (max-width: 720px) {
	.cohere-card-strip {
		padding: 64px 0 56px !important;
	}

	.cohere-card-strip__header,
	.cohere-card-strip__rail {
		width: calc(100% - 32px) !important;
	}

	.cohere-card-strip__progress {
		width: 160px !important;
	}

	.cohere-card-strip__rail {
		gap: 16px !important;
		scroll-snap-type: x mandatory;
	}

	.cohere-card {
		flex-basis: 340px !important;
		width: 340px !important;
		height: 340px !important;
	}

	.cohere-card h3 {
		max-width: 220px !important;
		padding: 24px !important;
		font-size: 1.34rem !important;
	}
}

/* Cosmetic polish: spacing/adaptive fixes only, no visual redesign. */
@media (min-width: 1600px) {
	.cohere-card-strip__header,
	.cohere-card-strip__rail {
		width: min(calc(100% - 128px), 1480px) !important;
	}

	.cohere-card-strip__progress {
		width: 188px !important;
	}

	.cohere-card {
		flex-basis: 420px !important;
		width: 420px !important;
		height: 420px !important;
	}
}

@media (max-width: 1536px) and (min-width: 1181px) {
	.dashboard-proof__copy {
		width: fit-content !important;
		max-width: min(34vw, 500px) !important;
	}

	.dashboard-proof__copy p {
		max-width: 20.75rem !important;
	}

	.dashboard-proof__shell {
		transform: translateX(clamp(0px, 1vw, 14px)) !important;
	}
}

@media (max-width: 1536px) and (min-width: 1321px) {
	.dashboard-proof__shell {
		transform: translateX(clamp(14px, 1.8vw, 28px)) !important;
	}
}

@media (max-width: 1300px) and (min-width: 1181px) {
	.dashboard-proof__copy h2 {
		max-width: 8.55ch !important;
		font-size: clamp(3.05rem, 4.85vw, 3.95rem) !important;
	}

	.dashboard-proof__shell {
		width: min(900px, 59vw) !important;
	}
}

.cohere-card {
	contain: paint;
	isolation: isolate;
}

.cohere-card img {
	backface-visibility: hidden;
}

/* Comment cleanup: remove decorative use-case circles and let the dashboard fill the right edge. */
.audience-section__grid article::after {
	display: none !important;
}

.dashboard-proof {
	padding-right: 0 !important;
}

.dashboard-proof__shell {
	margin-right: -1px !important;
}

@media (max-width: 1180px) {
	.dashboard-proof {
		padding-right: 24px !important;
	}

	.dashboard-proof__shell {
		margin-right: 0 !important;
	}
}

@media (max-width: 720px) {
	.dashboard-proof {
		padding-right: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dashboard-proof__link::before {
		display: none;
	}

	.dashboard-proof__link {
		transition: none !important;
	}
}

/* Auth page */
/* ==========================================================================
   Auth / login — fullscreen: video LEFT + form RIGHT (no floating card)
   ========================================================================== */
html:has(.auth-page-body),
html:has(.loginPage),
html:has(.authPage) {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

.auth-page-body,
.loginPage,
.authPage {
	width: 100%;
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #ffffff;
	color: var(--ink);
	overflow: hidden;
	display: block;
}

.loginShell,
.authShell {
	width: 100vw;
	height: 100dvh;
	min-height: 100dvh;
	max-width: none;
	display: grid;
	grid-template-columns:
		minmax(560px, 1.05fr)
		minmax(500px, 0.95fr);
	gap: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	align-items: stretch;
}

/* —— LEFT: inset only around video —— */
.videoPanelSlot {
	min-width: 0;
	min-height: 100dvh;
	height: 100dvh;
	padding: 8px 0 8px 8px;
	box-sizing: border-box;
	background: #ffffff;
}

/* —— LEFT: video carousel —— */
.visualCarousel {
	position: relative;
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: 18px;
	background: #020812;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
}

.visualCarouselSlides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.visualCarouselSlide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 700ms;
}

.visualCarouselSlide[data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s;
	z-index: 1;
}

.visualCarouselSlide video,
.visualCarouselVideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	display: block;
	background: #020812;
}

.visualCarouselOverlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(2, 8, 18, 0.16) 0%,
		rgba(2, 8, 18, 0.05) 36%,
		rgba(2, 8, 18, 0.26) 62%,
		rgba(2, 8, 18, 0.86) 100%
	);
}

.visualBrand {
	position: absolute;
	z-index: 6;
	top: 22px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.visualBrand img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	border-radius: 8px;
}

.visualBrand span {
	font-family: "Space Grotesk", var(--font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
}

.backToWebsite {
	position: absolute;
	z-index: 6;
	top: 22px;
	right: 22px;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(4, 9, 16, 0.30);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 520;
	text-decoration: none;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		transform 160ms ease;
}

.backToWebsite:hover {
	background: rgba(4, 9, 16, 0.50);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.backToWebsite svg {
	display: block;
	flex-shrink: 0;
}

.visualCarouselCaption {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: clamp(96px, calc(10vh + 14px), 130px);
	width: min(82%, 560px);
	transform: translateX(-50%);
	text-align: center;
	text-wrap: balance;
	color: #ffffff;
	pointer-events: none;
}

.visualCarouselCaptionText {
	margin: 0;
	font-size: clamp(28px, 2.3vw, 38px);
	font-weight: 520;
	line-height: 1.07;
	letter-spacing: -0.04em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.42);
}

.visualCarouselProgress {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: clamp(48px, calc(4.5vh + 14px), 62px);
	width: min(46%, 300px);
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.carouselProgressTrack {
	position: relative;
	width: 100%;
	height: 3px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.30);
	cursor: pointer;
}

.carouselProgressTrack:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: 3px;
}

.carouselProgressFill {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.96);
	will-change: transform;
}

/* —— RIGHT: form panel (full column, no card chrome) —— */
.auth-page__form-column,
.loginColumn,
.authFormPanel {
	min-width: 0;
	min-height: 100dvh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	padding:
		clamp(44px, 6vh, 72px)
		clamp(50px, 6vw, 104px)
		clamp(32px, 4vh, 48px);
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.auth-page__stack,
.loginInner,
.authFormInner {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	flex: 1;
	box-sizing: border-box;
}

.auth-page__form-primary,
.formPrimary {
	margin-block: auto;
	width: 100%;
}

.auth-page__intro {
	margin-top: 0;
	margin-bottom: 0;
}

.auth-page__intro h1 {
	margin: 0 0 32px;
	max-width: 100%;
	font-size: clamp(34px, 3.4vw, 44px);
	font-weight: 560;
	line-height: 1.05;
	letter-spacing: -0.045em;
	color: #0a0a0a;
}

.auth-page__title-line {
	display: block;
}

.auth-page__form {
	display: grid;
	gap: 16px;
	width: 100%;
	max-width: 440px;
	margin-top: 0;
}

.auth-page__google,
.auth-page__submit,
.auth-page__field input,
.auth-page__password-wrap input {
	width: 100%;
	height: 54px;
	min-height: 54px;
	border-radius: 12px;
	font-size: 15px;
	box-sizing: border-box;
	touch-action: manipulation;
}

.auth-page__google {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: #ffffff;
	color: #1f1f1f;
	font-weight: 500;
	letter-spacing: -0.01em;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 4px 12px rgba(15, 23, 42, 0.035);
	cursor: pointer;
	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease,
		transform 180ms ease;
}

.auth-page__google-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.auth-page__google:hover {
	border-color: rgba(15, 23, 42, 0.18);
	background: #fafafa;
}

.auth-page__google:focus-visible,
.auth-page__submit:focus-visible {
	outline: 2px solid rgba(79, 70, 229, 0.4);
	outline-offset: 2px;
}

.auth-page__google.is-loading {
	opacity: 0.72;
	pointer-events: none;
}

.auth-page__google-mark {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	line-height: 0;
}

.auth-page__google-mark svg {
	display: block;
	width: 20px;
	height: 20px;
}

.auth-page__divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin: 2px 0;
	background: transparent;
}

.auth-page__divider > span {
	height: 1px;
	background: rgba(15, 23, 42, 0.11);
	border: 0;
}

.auth-page__divider em,
.auth-page__divider-label {
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(71, 85, 105, 0.65);
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 2px;
	margin: 0;
}

.auth-page__divider-label .i18n-en-inline,
.auth-page__divider-label .i18n-ru-inline,
.auth-page__divider-label .i18n-es-inline,
.auth-page__divider-label .i18n-de-inline,
.auth-page__divider-label .i18n-fr-inline,
.auth-page__divider-label .i18n-pt-inline,
.auth-page__divider-label .i18n-it-inline,
.auth-page__divider-label .i18n-ja-inline,
.auth-page__divider-label .i18n-ko-inline,
.auth-page__divider-label .i18n-zh-inline {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.auth-page__field {
	display: grid;
	gap: 8px;
}

.auth-page__field > .auth-page__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: rgba(15, 23, 42, 0.72);
}

/* Shared Email/Password input system — higher border contrast on white */
.auth-page__field input,
.auth-page__password-wrap input,
.auth-page__field input.passwordInput,
.passwordInput,
.authInput {
	border: 1px solid #d7dce4;
	background: #ffffff;
	padding: 0 16px;
	color: #111827;
	outline: none;
	font: inherit;
	font-size: 15px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-page__field input:hover:not(:disabled):not(:focus):not(:focus-visible),
.auth-page__password-wrap input:hover:not(:disabled):not(:focus):not(:focus-visible),
.passwordInput:hover:not(:disabled):not(:focus):not(:focus-visible),
.authInput:hover:not(:disabled):not(:focus):not(:focus-visible) {
	border-color: #c3cad5;
}

.auth-page__field input::placeholder,
.auth-page__password-wrap input::placeholder,
.passwordInput::placeholder,
.authInput::placeholder {
	color: #8b97aa;
	opacity: 1;
	font-size: 15px;
}

.auth-page__field input:focus,
.auth-page__field input:focus-visible,
.auth-page__password-wrap input:focus,
.auth-page__password-wrap input:focus-visible,
.passwordInput:focus,
.passwordInput:focus-visible,
.authInput:focus,
.authInput:focus-visible {
	outline: none;
	border-color: #7f8a9b;
	box-shadow: 0 0 0 3px rgba(79, 94, 240, 0.10);
}

.auth-page__field input[aria-invalid="true"],
.auth-page__field input[aria-invalid="true"]:focus,
.auth-page__field input[aria-invalid="true"]:focus-visible,
.auth-page__field input.is-error,
.auth-page__field input.is-error:focus,
.auth-page__field input.is-error:focus-visible,
.auth-page__password-wrap input[aria-invalid="true"],
.auth-page__password-wrap input[aria-invalid="true"]:focus,
.auth-page__password-wrap input[aria-invalid="true"]:focus-visible,
.auth-page__password-wrap input.is-error,
.auth-page__password-wrap input.is-error:focus,
.auth-page__password-wrap input.is-error:focus-visible,
.passwordInput[aria-invalid="true"],
.passwordInput[aria-invalid="true"]:focus,
.passwordInput.is-error,
.passwordInput.is-error:focus,
.authInput[aria-invalid="true"],
.authInput[aria-invalid="true"]:focus,
.authInput.is-error,
.authInput.is-error:focus {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.auth-page__field input:disabled,
.auth-page__password-wrap input:disabled,
.passwordInput:disabled,
.authInput:disabled {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #94a3b8;
	cursor: not-allowed;
}

/* Six-cell OTP input: one real input preserves paste/autofill/accessibility. */
.auth-page__otp {
	position: relative;
	width: 100%;
}

.auth-page__otp-slots {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	pointer-events: none;
}

.auth-page__otp-slot {
	display: grid;
	place-items: center;
	height: 56px;
	min-width: 0;
	border: 1px solid #d7dce4;
	border-radius: 12px;
	background: #ffffff;
	color: #111827;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.auth-page__otp-slot.is-filled {
	border-color: #b9c1cc;
	background: #fbfcfe;
}

.auth-page__otp:focus-within .auth-page__otp-slot.is-active {
	border-color: #111827;
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.auth-page__otp .auth-page__code-input {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;
	width: 100% !important;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: transparent !important;
	caret-color: transparent !important;
	opacity: 0.01;
	cursor: text;
}

.auth-page__otp .auth-page__code-input[aria-invalid="true"] + .auth-page__otp-slots .auth-page__otp-slot {
	border-color: #dc2626;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.05);
}

@media (max-width: 520px) {
	.auth-page__otp-slots { gap: 7px; }
	.auth-page__otp-slot,
	.auth-page__otp .auth-page__code-input { height: 52px !important; }
	.auth-page__otp-slot { border-radius: 10px; font-size: 21px; }
}

.auth-page__field .formError,
.auth-page__form .formError {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: #b91c1c;
}

.auth-page__submit {
	margin-top: 4px;
	border: 0;
	background: #111111;
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}

.auth-page__submit:hover {
	background: #1b1b1b;
	transform: translateY(-1px);
}

.auth-page__submit:active {
	transform: translateY(0);
}

.auth-page__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 20px;
	color: rgba(71, 85, 105, 0.82);
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}

.auth-page__links p {
	margin: 0;
}

.auth-page__links a {
	color: #171717;
	font-weight: 600;
	text-decoration: none;
}

.auth-page__links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.auth-page__fineprint {
	width: 100%;
	max-width: 440px;
	margin: auto auto 0;
	padding-top: 24px;
	color: rgba(100, 116, 139, 0.72);
	font-size: 12px;
	line-height: 1.55;
	text-align: center;
	flex-shrink: 0;
}

.auth-page__fineprint a {
	color: rgba(23, 23, 23, 0.78);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.auth-page__fineprint a:hover {
	color: #0a0a0a;
}

/* Password field + Lucide Eye / EyeOff toggle */
.auth-page__password-wrap,
.passwordField {
	position: relative;
	display: block;
	width: 100%;
}

.auth-page__password-wrap input,
.passwordInput {
	width: 100%;
	padding-right: 52px !important;
}

.auth-page__password-toggle,
.passwordToggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #8793a5;
	cursor: pointer;
	touch-action: manipulation;
	transition: color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

.auth-page__password-wrap:focus-within .auth-page__password-toggle,
.passwordField:focus-within .passwordToggle {
	color: #596579;
}

.auth-page__password-toggle:hover,
.passwordToggle:hover {
	color: #596579;
	background: rgba(15, 23, 42, 0.045);
}

.auth-page__password-toggle:active,
.passwordToggle:active {
	transform: translateY(-50%) scale(0.94);
}

.auth-page__password-toggle:focus-visible,
.passwordToggle:focus-visible {
	outline: 2px solid rgba(79, 94, 240, 0.30);
	outline-offset: 1px;
}

.auth-page__password-toggle svg,
.passwordToggle svg {
	display: none;
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
	pointer-events: none;
	flex-shrink: 0;
}

.auth-page__password-toggle[data-visible="false"] .auth-page__eye--show,
.auth-page__password-toggle:not([data-visible="true"]) .auth-page__eye--show,
.passwordToggle[data-visible="false"] .auth-page__eye--show,
.passwordToggle:not([data-visible="true"]) .auth-page__eye--show {
	display: block;
}

.auth-page__password-toggle[data-visible="true"] .auth-page__eye--hide,
.passwordToggle[data-visible="true"] .auth-page__eye--hide {
	display: block;
}

/* Entrance */
.auth-enter {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--enter-i, 0) * 75ms);
}

.auth-ready .auth-enter {
	opacity: 1;
	transform: translateY(0);
}

/* Tablet */
@media (max-width: 1099px) {
	html:has(.auth-page-body),
	html:has(.loginPage),
	html:has(.authPage) {
		height: auto;
		overflow: auto;
	}

	.auth-page-body,
	.loginPage,
	.authPage {
		height: auto;
		min-height: 100dvh;
		overflow-y: auto;
		overflow-x: hidden;
		background: #ffffff;
	}

	.loginShell,
	.authShell {
		width: 100%;
		height: auto;
		min-height: 100dvh;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	/* form first, video second */
	.auth-page__form-column,
	.loginColumn,
	.authFormPanel {
		order: 1;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 36px 28px 28px;
		border-radius: 0;
	}

	.videoPanelSlot {
		order: 2;
		height: auto;
		min-height: 660px;
		padding: 0 12px 12px;
	}

	.visualCarousel {
		min-height: 660px;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.visualCarouselCaption {
		bottom: 86px;
	}

	.visualCarouselProgress {
		bottom: 42px;
		width: min(60%, 280px);
	}
}

/* Mobile — form first, video below */
@media (max-width: 759px) {
	.auth-page-body,
	.loginPage,
	.authPage {
		padding: 0;
		background: #ffffff;
	}

	.loginShell,
	.authShell {
		width: 100%;
		padding: 0;
		gap: 0;
		border-radius: 0;
		min-height: 0;
	}

	.auth-page__form-column,
	.loginColumn,
	.authFormPanel {
		order: 1;
		padding: 32px 16px;
		border-radius: 0;
	}

	.videoPanelSlot {
		order: 2;
		min-height: 580px;
		padding: 0 8px 8px;
	}

	.visualCarousel {
		min-height: 580px;
		aspect-ratio: auto;
		border-radius: 14px;
	}

	.auth-page__stack,
	.loginInner,
	.authFormInner {
		max-width: none;
	}

	.auth-page__intro h1 {
		font-size: clamp(32px, 8vw, 38px);
		margin-bottom: 28px;
	}

	.auth-page__form {
		max-width: none;
	}

	.visualBrand {
		top: 16px;
		left: 16px;
	}

	.backToWebsite {
		top: 14px;
		right: 14px;
		padding: 8px 12px;
		font-size: 11px;
	}

	.visualCarouselCaption {
		bottom: 78px;
		width: min(88%, 360px);
	}

	.visualCarouselCaptionText {
		font-size: clamp(24px, 6.5vw, 30px);
	}

	.visualCarouselProgress {
		bottom: 36px;
		width: min(70%, 240px);
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.visualCarouselVideo {
		/* keep element for poster; pause handled in JS */
	}

	.visualCarouselSlide {
		transition: none;
	}

	.auth-enter {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.auth-page__google,
	.auth-page__submit,
	.auth-page__field input {
		transition: none !important;
	}

	.auth-page__submit:hover {
		transform: none;
	}

	.backToWebsite:hover {
		transform: none;
	}
}


/* Mobile auth polish — compact single-purpose sign-in screen */
.auth-page__mobile-topbar {
	display: none;
}

@media (max-width: 759px) {
	html:has(.auth-page-body),
	html:has(.loginPage),
	html:has(.authPage),
	.auth-page-body,
	.loginPage,
	.authPage {
		background: #ffffff;
	}

	.loginShell,
	.authShell {
		min-height: 100dvh;
		background: #ffffff;
	}

	.videoPanelSlot {
		display: none;
	}

	.auth-page__form-column,
	.loginColumn,
	.authFormPanel {
		min-height: 100dvh;
		padding:
			max(18px, env(safe-area-inset-top))
			20px
			max(18px, env(safe-area-inset-bottom));
		overflow: visible;
	}

	.auth-page__mobile-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	.auth-page__mobile-brand {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		text-decoration: none;
	}

	.auth-page__mobile-brand img {
		display: block;
		width: auto;
		height: 24px;
		max-width: 104px;
		object-fit: contain;
	}

	.auth-page__mobile-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		min-height: 40px;
		padding: 0 4px;
		color: #667085;
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		transition: color 150ms ease, transform 150ms ease;
	}

	.auth-page__mobile-back:hover {
		color: #111827;
	}

	.auth-page__mobile-back:active {
		transform: translateX(-1px);
	}

	.auth-page__stack,
	.loginInner,
	.authFormInner {
		max-width: 420px;
		min-height: 0;
		margin-inline: auto;
		flex: 1;
	}

	.auth-page__form-primary,
	.formPrimary {
		margin-block: auto;
		padding-block: 28px 20px;
	}

	.auth-page__intro h1 {
		margin: 0 0 24px;
		font-size: clamp(30px, 8vw, 34px);
		font-weight: 600;
		line-height: 1.08;
		letter-spacing: -0.042em;
	}

	.auth-page__form {
		gap: 14px;
	}

	.auth-page__google,
	.auth-page__submit,
	.auth-page__field input,
	.auth-page__password-wrap input {
		height: 50px;
		min-height: 50px;
		border-radius: 11px;
		font-size: 14px;
	}

	.auth-page__google {
		padding-inline: 18px;
	}

	.auth-page__google-inner {
		gap: 10px;
	}

	.auth-page__divider {
		gap: 12px;
		margin: 0;
	}

	.auth-page__divider em,
	.auth-page__divider-label {
		font-size: 11px;
	}

	.auth-page__field {
		gap: 7px;
	}

	.auth-page__field > .auth-page__label {
		font-size: 12px;
	}

	.auth-page__field input,
	.auth-page__password-wrap input,
	.auth-page__field input.passwordInput,
	.passwordInput,
	.authInput {
		padding-inline: 14px;
		font-size: 14px;
	}

	.auth-page__field input::placeholder,
	.auth-page__password-wrap input::placeholder,
	.passwordInput::placeholder,
	.authInput::placeholder {
		font-size: 14px;
	}

	.auth-page__submit {
		margin-top: 2px;
		font-size: 14px;
	}

	.auth-page__links {
		gap: 6px;
		margin-top: 16px;
		font-size: 13px;
		line-height: 1.4;
	}

	.auth-page__fineprint {
		max-width: 380px;
		margin: 0 auto;
		padding-top: 0;
		font-size: 10.5px;
		line-height: 1.48;
		color: #98a2b3;
	}
}

@media (max-width: 359px) {
	.auth-page__form-column,
	.loginColumn,
	.authFormPanel {
		padding-inline: 16px;
	}

	.auth-page__mobile-topbar {
		margin-bottom: 22px;
	}

	.auth-page__intro h1 {
		font-size: 28px;
		margin-bottom: 20px;
	}
}

/* ---------- Glow buttons (Open analytics style, Tenvilo palette) ---------- */
.glow-btn {
	position: relative;
	overflow: visible !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px !important;
	box-shadow: none;
	transform: none !important;
	isolation: auto !important;
	line-height: 1;
	font-family: var(--font-sans);
	font-weight: 500;
	transition:
		background-color 300ms var(--ease),
		border-color 300ms var(--ease),
		color 300ms var(--ease),
		box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-btn::after {
	display: none !important;
}

.glow-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	border-radius: inherit;
	opacity: 0;
	transform: translate(0, 0);
	filter: blur(0);
	pointer-events: none;
	transition:
		transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 500ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-btn:hover::before {
	opacity: 1;
	transform: translate(-8px, 8px);
	filter: blur(8px);
}

.glow-btn:hover {
	transform: none !important;
}

/* White / light variants keep face-only hover (glow is ::before) */
.glow-btn--ghost:hover,
.glow-btn--light:hover {
	box-shadow: none !important;
}

.glow-btn:focus {
	outline: none;
}

.glow-btn:focus-visible {
	outline: 2px solid rgba(8, 10, 18, 0.22);
	outline-offset: 3px;
}

/* Black buttons: same offset glow as white, cool blue palette.
   Use box-shadow (not ::before z-index:-1) so fixed navbar / overflow
   parents cannot clip the glow into a hard hero line. */
.glow-btn--primary {
	background: #17181d !important;
	color: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	z-index: auto !important;
	isolation: auto !important;
	overflow: visible !important;
}

/* kill pseudo glow on black — box-shadow is the source of truth */
.glow-btn--primary::before {
	display: none !important;
	opacity: 0 !important;
}

.glow-btn--primary:hover {
	background: #17181d !important;
	background-color: #17181d !important;
	color: #fff !important;
	border-color: rgba(0, 0, 0, 0.16) !important;
	transform: none !important;
	/* offset bottom-left cool glow (mirrors white button direction) */
	box-shadow:
		-6px 8px 16px -2px rgba(56, 120, 255, 0.55),
		-10px 12px 28px -2px rgba(90, 200, 255, 0.4),
		-2px 4px 12px rgba(130, 150, 255, 0.35),
		2px 2px 14px rgba(56, 120, 255, 0.18) !important;
}

.glow-btn--primary:hover::before {
	display: none !important;
	opacity: 0 !important;
}

/* White buttons: same hover glow as Open analytics (purple → coral offset blur) */
.glow-btn--ghost,
.glow-btn--light {
	background: #fff !important;
	color: #111312 !important;
	border: 1px solid rgba(8, 10, 18, 0.12) !important;
}

.glow-btn--ghost::before,
.glow-btn--light::before {
	background: linear-gradient(
		270deg,
		rgba(209, 142, 226, 0.92),
		rgba(255, 140, 110, 0.9) 52%,
		rgba(255, 119, 89, 0.94)
	);
}

.glow-btn--ghost:hover,
.glow-btn--light:hover {
	background: #fff !important;
	color: #111312 !important;
	border-color: rgba(8, 10, 18, 0.18) !important;
	transform: none !important;
	box-shadow: none !important;
}

.glow-btn--ghost:hover::before,
.glow-btn--light:hover::before {
	opacity: 1;
	transform: translate(-8px, 8px);
	filter: blur(8px);
}

.glow-btn--ghost-dark {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.32) !important;
	font-weight: 500;
}

.glow-btn--ghost-dark::before {
	background: linear-gradient(270deg, rgba(120, 113, 127, 0.62), rgba(255, 119, 89, 0.48));
}

.glow-btn--ghost-dark:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.42) !important;
}

/* Final CTA white button keeps Open analytics glow (no lift override) */
.final-reference-cta .glow-btn--light {
	color: #111312 !important;
	border-color: rgba(255, 255, 255, 0.86) !important;
}

.final-reference-cta .glow-btn--light:hover {
	transform: none !important;
	box-shadow: none !important;
}

.final-reference-cta .glow-btn--light:hover::before {
	opacity: 1 !important;
	transform: translate(-8px, 8px) !important;
	filter: blur(8px) !important;
}

.topbar__cta.glow-btn {
	min-height: 44px !important;
	padding: 0 16px !important;
	font-weight: 500;
	font-size: 0.94rem;
}

.reference-hero__actions .glow-btn,
.page-shell .reference-hero__cta .glow-btn {
	min-height: 48px !important;
	padding-inline: 22px !important;
	font-weight: 500;
	font-size: 0.94rem;
}

#plans .pricing-card .glow-btn {
	width: 100%;
	min-height: 46px !important;
}

#plans .pricing-promo__button.glow-btn {
	width: auto;
	flex: 0 0 auto;
	min-width: 132px;
	min-height: 46px !important;
}

.pricing-promo__input {
	border-radius: 10px !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.cta-band__actions .glow-btn,
.footer-brand .glow-btn {
	min-height: 48px !important;
	padding-inline: 22px !important;
}

/* Quiet utility control — not a product CTA */
.lang-switcher__toggle {
	min-height: 40px !important;
	padding: 8px 16px !important;
	border-radius: 10px !important;
	border: 1px solid rgba(8, 10, 18, 0.12) !important;
	background: #fff !important;
	color: #111312 !important;
	box-shadow: none !important;
	font-weight: 500;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.lang-switcher__toggle:hover {
	border-color: rgba(8, 10, 18, 0.22) !important;
	background: #f7f7f8 !important;
	box-shadow: none !important;
	transform: none !important;
}

.lang-switcher__toggle:hover::before {
	display: none !important;
	opacity: 0 !important;
}

.pricing-card.is-featured .glow-btn--light,
.pricing-card.is-featured .glow-btn--light:hover {
	background: #fff !important;
	color: #111312 !important;
	border-color: rgba(255, 255, 255, 0.86) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Pricing: keep glow BEHIND the white pill.
   Do NOT set z-index/isolation/transform on the button — that traps
   ::before (z-index: -1) above the solid background and smears the gradient. */
.pricing-card .glow-btn {
	overflow: visible !important;
	z-index: auto !important;
	isolation: auto !important;
	transform: none !important;
}

.pricing-card .glow-btn::before {
	z-index: -1 !important;
}

/* Room for the offset glow without clipping flag badges */
.pricing-card,
.pricing-grid {
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.glow-btn::before {
		display: none;
	}

	.glow-btn {
		transition: none !important;
	}
}


/* ============================================================================
   Stage 9 — Runway-accurate video hero (measured from runwayml.com)
   Appended last to win the cascade over earlier stage overrides.
   Reference @1917px viewport: video 168..1735 (w1567, ~81.7%), top~67, navbar~60,
   heading ~48px/weight400, grey list beside heading, top-aligned.
   ============================================================================ */

.page-shell { padding-top: 60px !important; }

/* ---- HERO container: centered, same width as the navbar ---- */
.page-shell .reference-hero {
	display: block !important;
	width: min(100% - 32px, 1568px) !important;
	max-width: none !important;
	margin: 8px auto 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	min-height: 0 !important;
	text-align: left !important;
}

.reference-hero__frame {
	position: relative !important;
	width: 100% !important;
	height: calc(100svh - 152px) !important;
	min-height: 460px !important;
	max-height: 900px !important;
	/* Match site soft-rect language (buttons 10px; large panel slightly larger) */
	border-radius: 16px !important;
	overflow: hidden !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	isolation: isolate;
	transform: none !important;
}

.reference-hero__video {
	position: absolute !important;
	/* Overscan past the top edge: the raw capture includes the macOS menu bar
	   and desktop wallpaper, which must never show inside the hero. */
	inset: -7% 0 0 0 !important;
	width: 100% !important;
	height: 107% !important;
	object-fit: cover !important;
	object-position: center !important;
	aspect-ratio: auto !important;
	z-index: 1;
	background: #0d0f10;
	filter: brightness(0.92) contrast(1.08);
}

@media (max-width: 1024px) {
	/* Taller container = less natural vertical crop, so overscan more. */
	.reference-hero__video {
		inset: -14% 0 0 0 !important;
		height: 114% !important;
	}
}

@media (max-width: 720px) {
	/* Portrait crop: pan toward the Tenvilo popup mock (right side of the footage)
	   so the product stays in frame instead of an empty browser center. */
	.reference-hero__video {
		object-position: 82% center !important;
	}
}

.reference-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(4, 6, 12, 0.82) 0%,
		rgba(4, 6, 12, 0.45) 34%,
		rgba(4, 6, 12, 0.18) 60%,
		rgba(4, 6, 12, 0.45) 100%
	);
}

/* ---- Overlay: cluster anchored to the bottom-left of the video ---- */
.reference-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 clamp(24px, 5vw, 92px) clamp(32px, 6vh, 56px);
}

.reference-hero__cluster {
	display: flex;
	align-items: flex-start;
	gap: clamp(32px, 5vw, 80px);
	max-width: 100%;
}

.page-shell .reference-hero__copy {
	position: relative;
	z-index: 3;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: left !important;
}

.page-shell .reference-hero h1 {
	margin: 20px 0 0 0 !important;
	max-width: none !important;
	color: #ffffff !important;
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 3.2vw, 3.6rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	font-weight: 400 !important;
	text-wrap: balance;
	text-shadow: 0 4px 32px rgba(0, 0, 0, 0.65);
}
.page-shell .reference-hero h1 span { color: #ffffff !important; }

.page-shell .reference-hero__cta {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	margin-top: 8px !important;
	/* room for white CTA glow inside overflow:hidden frame */
	padding-bottom: 16px !important;
	overflow: visible !important;
}

.page-shell .reference-hero__cta p {
	margin-top: 8px !important;
	font-size: 14px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}

/* ---- Grey list: right of heading, top-aligned, compact (Runway style) ---- */
.reference-hero__highlights {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 8px 0 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.reference-hero__highlights li {
	color: rgba(255, 255, 255, 0.56);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* ---- NAVBAR: full width to page edges ---- */
.page-shell .site-topbar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	width: 100% !important;
	height: 60px !important;
	z-index: 1000 !important;
	display: flex !important;
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transition: background-color 0.28s ease, backdrop-filter 0.28s ease,
		box-shadow 0.28s ease, color 0.28s ease !important;
}

.page-shell .site-topbar .topbar {
	width: 100% !important;
	max-width: min(100% - 32px, 1568px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
}

.page-shell .site-topbar .topnav {
	flex: 1 !important;
	margin: 0 !important;
	justify-content: center !important;
}

.page-shell .site-topbar .brand {
	flex-shrink: 0 !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.page-shell .site-topbar .topbar__controls {
	flex-shrink: 0 !important;
	margin-left: auto !important; /* ensure right aligned */
}

.mobile-site-menu-toggle {
	display: none;
	position: relative;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(10, 10, 12, 0.1);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.84);
	color: #111318;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.mobile-site-menu-toggle:hover {
	background: #ffffff;
	border-color: rgba(10, 10, 12, 0.18);
}

.mobile-site-menu-toggle:active { transform: scale(0.96); }

.mobile-site-menu-toggle:focus-visible {
	outline: 2px solid #2e90fa;
	outline-offset: 2px;
}

.mobile-site-menu-toggle__icon {
	position: absolute;
	width: 20px;
	height: 20px;
	transition: opacity 160ms ease, transform 180ms ease;
}

.mobile-site-menu-toggle__icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.82);
}

.mobile-site-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 16px;
	width: min(300px, calc(100vw - 32px));
	padding: 8px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
	-webkit-backdrop-filter: blur(18px) saturate(145%);
	backdrop-filter: blur(18px) saturate(145%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px) scale(0.985);
	transform-origin: top right;
	transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.mobile-site-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 9px;
	color: #343842;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.mobile-site-menu a:hover,
.mobile-site-menu a:focus-visible {
	background: #f3f5f7;
	color: #0d0f12;
	outline: none;
}

.mobile-site-menu__auth {
	margin-top: 4px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 0 0 9px 9px !important;
}

.site-topbar.mobile-menu-open .mobile-site-menu-toggle__icon--menu {
	opacity: 0;
	transform: rotate(45deg) scale(0.82);
}

.site-topbar.mobile-menu-open .mobile-site-menu-toggle__icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.site-topbar.mobile-menu-open .mobile-site-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}

.page-shell .site-topbar.is-scrolled .mobile-site-menu-toggle {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.page-shell .site-topbar.is-scrolled .mobile-site-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.24);
}

.page-shell .site-topbar.is-scrolled .mobile-site-menu {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(18, 20, 24, 0.97);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.page-shell .site-topbar.is-scrolled .mobile-site-menu a { color: rgba(255, 255, 255, 0.76); }

.page-shell .site-topbar.is-scrolled .mobile-site-menu a:hover,
.page-shell .site-topbar.is-scrolled .mobile-site-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.page-shell .site-topbar.is-scrolled .mobile-site-menu__auth { border-top-color: rgba(255, 255, 255, 0.1); }

/* Make navbar content (logo left, Add to Chrome right) align exactly with hero video frame edges */
.page-shell .site-topbar .topbar__cta {
	/* Beyond UI-style soft rect — not full pill */
	border-radius: 10px !important;
	padding: 0 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	font-weight: 500 !important;
}

.page-shell .site-topbar .topbar__cta:hover {
	/* keep glow-btn offset blur; no extra lift */
	transform: none !important;
}

/* stays pinned (never slides away) */
.page-shell .site-topbar.is-hidden {
	transform: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* once the navbar overlaps the video: near-black, slight transparency + blur */
.page-shell .site-topbar.is-scrolled {
	background: rgba(10, 11, 14, 0.9) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
	backdrop-filter: blur(16px) saturate(140%) !important;
	border-bottom: 0 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32) !important;
}
.page-shell .site-topbar.is-scrolled .brand__wordmark,
.page-shell .site-topbar.is-scrolled .topnav a,
.page-shell .site-topbar.is-scrolled .topbar__auth-button {
	color: #ffffff !important;
}
.page-shell .site-topbar.is-scrolled .topbar__account-icon svg { stroke: #ffffff !important; }

/* Dark navbar (black): Add to Chrome = white button, Sign in = gray */
.page-shell .site-topbar.is-scrolled .topbar__cta {
	background: #fff !important;
	color: #111318 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
	border-radius: 10px !important;
	font-weight: 500 !important;
}
.page-shell .site-topbar.is-scrolled .topbar__auth-button {
	color: rgba(255, 255, 255, 0.65) !important;
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
}

.page-shell .site-topbar.is-scrolled .topnav a:hover {
	background: transparent !important;
	color: #fff !important;
}

/* Navbar: never clip CTA glow against hero edge */
.page-shell .site-topbar,
.page-shell .site-topbar .topbar,
.page-shell .site-topbar .topbar__controls {
	overflow: visible !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn {
	z-index: auto !important;
	isolation: auto !important;
	overflow: visible !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn:hover {
	transform: none !important;
}

/* Black navbar CTA: tight halo — no long +Y shadow (that cut against hero edge) */
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover {
	background: #17181d !important;
	background-color: #17181d !important;
	color: #fff !important;
	box-shadow:
		0 0 0 1px rgba(56, 120, 255, 0.14),
		0 2px 10px rgba(56, 120, 255, 0.28),
		-3px 4px 12px -2px rgba(90, 200, 255, 0.35),
		2px 2px 10px rgba(130, 150, 255, 0.2) !important;
}

.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover::before {
	display: none !important;
	opacity: 0 !important;
}

/* Scrolled navbar: white CTA, warm glow via ::before (works on dark bar) */
.page-shell .site-topbar.is-scrolled .topbar__cta:hover {
	transform: none !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #111318 !important;
	box-shadow: none !important;
}

.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn:hover::before {
	display: block !important;
	opacity: 1 !important;
	transform: translate(-8px, 8px) !important;
	filter: blur(10px) !important;
	background: linear-gradient(
		270deg,
		rgba(209, 142, 226, 0.92),
		rgba(255, 140, 110, 0.9) 52%,
		rgba(255, 119, 89, 0.94)
	) !important;
}
.page-shell .site-topbar.is-scrolled .topbar__auth-button:hover {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.reference-hero__highlights li { white-space: normal; }
}
@media (max-width: 760px) {
	.page-shell { padding-top: 56px !important; }
	.page-shell .site-topbar .topbar {
		max-width: calc(100% - 24px) !important;
		gap: 10px !important;
	}
	.page-shell .site-topbar .topbar__controls { gap: 8px !important; }
	.page-shell .site-topbar .topnav,
	.page-shell .site-topbar .topbar__auth-button { display: none !important; }
	.mobile-site-menu-toggle { display: grid; }
	.mobile-site-menu { display: block; right: 12px; }
	.reference-hero__frame {
		height: clamp(480px, 72svh, 620px) !important;
		min-height: 0 !important;
		max-height: 620px !important;
		border-radius: 14px !important;
	}
	.reference-hero__overlay { padding: 0 18px 20px; }
	.page-shell .reference-hero h1 {
		margin-top: 0 !important;
		font-size: clamp(2rem, 8.4vw, 2.35rem) !important;
		line-height: 1.04 !important;
		letter-spacing: -0.03em !important;
	}
	.page-shell .reference-hero__cta {
		margin-top: 12px !important;
		padding-bottom: 0 !important;
	}
	.page-shell .reference-hero__cta p {
		max-width: 30ch;
		font-size: 13px !important;
		line-height: 1.42 !important;
	}
	.reference-hero__cluster {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.reference-hero__highlights {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 16px;
	}
	.reference-hero__copy { order: 1; }
	.reference-hero__highlights li { font-size: 0.72rem; }
	.page-shell .site-topbar { height: 56px !important; }
}

html,
body {
	background: #fff;
}

.page-shell {
	background: #fff;
}

/* ensure some sections that relied on warm canvas are clean on white */
.cohere-card-strip {
	background: #fff;
}

/* Light navbar: Sign in more gray */
.site-topbar .topbar__auth-button {
	color: #666 !important;
}

/* Hover lift and glow allowed for navbar CTA to match setup button */

/* Scrollbar: dark background under it (track), indicator (thumb) as before */
html {
  scrollbar-width: thin;
  scrollbar-color: #888 #0d0f10;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0d0f10;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* --------------------------------------------------------------------------
   Glow buttons (final cascade)
   White → warm purple/coral. Black → cool blue/indigo/cyan.
   Same mechanics: offset (-8px, 8px) + blur(8px) behind solid face.
   Button must NOT create a stacking context or the glow smears on top.
   -------------------------------------------------------------------------- */

/* --- shared layering --- */
.glow-btn--ghost,
.glow-btn--light,
.glow-btn--primary,
.dashboard-proof__link,
.page-shell .site-topbar .topbar__cta.glow-btn {
	position: relative;
	overflow: visible !important;
	z-index: auto !important;
	isolation: auto !important;
}

.glow-btn--ghost::before,
.glow-btn--light::before,
.glow-btn--primary::before,
.dashboard-proof__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block !important;
	border-radius: inherit;
	opacity: 0;
	transform: translate(0, 0);
	filter: blur(0);
	pointer-events: none;
	transition:
		transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 500ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- white face + warm glow --- */
.glow-btn--ghost::before,
.glow-btn--light::before,
.dashboard-proof__link::before {
	background: linear-gradient(
		270deg,
		rgba(209, 142, 226, 0.92),
		rgba(255, 140, 110, 0.9) 52%,
		rgba(255, 119, 89, 0.94)
	) !important;
}

.glow-btn--ghost:hover,
.glow-btn--light:hover,
.dashboard-proof__link:hover,
.final-reference-cta .glow-btn--light:hover,
.pricing-card .glow-btn--ghost:hover,
.pricing-card .glow-btn--light:hover,
.pricing-card.is-featured .glow-btn--light:hover,
.page-shell .site-topbar.is-scrolled .topbar__cta:hover {
	transform: none !important;
	box-shadow: none !important;
	background: #fff !important;
	background-color: #fff !important;
}

.glow-btn--ghost:hover::before,
.glow-btn--light:hover::before,
.dashboard-proof__link:hover::before,
.final-reference-cta .glow-btn--light:hover::before,
.pricing-card .glow-btn--ghost:hover::before,
.pricing-card .glow-btn--light:hover::before,
.pricing-card.is-featured .glow-btn--light:hover::before,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn:hover::before {
	opacity: 1 !important;
	transform: translate(-8px, 8px) !important;
	filter: blur(10px) !important;
	background: linear-gradient(
		270deg,
		rgba(209, 142, 226, 0.92),
		rgba(255, 140, 110, 0.9) 52%,
		rgba(255, 119, 89, 0.94)
	) !important;
}

/* --- black face + cool glow via box-shadow (no ::before under hero) --- */
.glow-btn--primary::before {
	display: none !important;
	opacity: 0 !important;
}

/* Default black buttons (e.g. Apply): fuller cool offset glow */
.glow-btn--primary:hover,
.pricing-promo__button.glow-btn--primary:hover {
	transform: none !important;
	background: #17181d !important;
	background-color: #17181d !important;
	color: #fff !important;
	box-shadow:
		-6px 8px 16px -2px rgba(56, 120, 255, 0.55),
		-10px 12px 28px -2px rgba(90, 200, 255, 0.4),
		-2px 4px 12px rgba(130, 150, 255, 0.35),
		2px 2px 14px rgba(56, 120, 255, 0.18) !important;
}

/* Navbar must stay last + tighter — do not inherit Apply's long +Y shadow */
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover {
	transform: none !important;
	background: #17181d !important;
	background-color: #17181d !important;
	color: #fff !important;
	box-shadow:
		0 0 0 1px rgba(56, 120, 255, 0.14),
		0 2px 10px rgba(56, 120, 255, 0.28),
		-3px 4px 12px -2px rgba(90, 200, 255, 0.35),
		2px 2px 10px rgba(130, 150, 255, 0.2) !important;
}

.glow-btn--primary:hover::before,
.pricing-promo__button.glow-btn--primary:hover::before,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover::before {
	display: none !important;
	opacity: 0 !important;
}

/* Pricing white buttons: solid face, no SC */
.pricing-card .glow-btn--ghost,
.pricing-card .glow-btn--light,
.pricing-card.is-featured .glow-btn--ghost,
.pricing-card.is-featured .glow-btn--light,
.pricing-card.is-featured .glow-btn--ghost:hover,
.pricing-card.is-featured .glow-btn--light:hover {
	background: #fff !important;
	background-color: #fff !important;
	color: #111312 !important;
	z-index: auto !important;
	isolation: auto !important;
	transform: none !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
}

/* Pricing Apply — solid black face + cool shadow glow */
.pricing-promo,
.pricing-promo__controls {
	overflow: visible !important;
}

.pricing-promo__button.glow-btn--primary,
.pricing-promo__button.glow-btn--primary:hover {
	background: #17181d !important;
	background-color: #17181d !important;
	color: #fff !important;
	z-index: auto !important;
	isolation: auto !important;
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
}

.pricing-promo__button.glow-btn--primary:hover {
	box-shadow:
		-6px 8px 16px -2px rgba(56, 120, 255, 0.55),
		-10px 12px 28px -2px rgba(90, 200, 255, 0.4),
		-2px 4px 12px rgba(130, 150, 255, 0.35),
		2px 2px 14px rgba(56, 120, 255, 0.18) !important;
}

/* Don't clip the glow around CTAs */
.cta-band__actions,
.footer-brand,
.reference-hero__cta,
.reference-hero__actions,
.pricing-card,
.pricing-grid,
.pricing-promo,
.pricing-promo__controls,
.topbar__controls,
.page-shell .site-topbar,
.page-shell .site-topbar .topbar {
	overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	.glow-btn--ghost::before,
	.glow-btn--light::before,
	.glow-btn--primary::before,
	.dashboard-proof__link::before {
		display: none !important;
	}

	.glow-btn--primary:hover,
	.pricing-promo__button.glow-btn--primary:hover,
	.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover {
		box-shadow: none !important;
	}
}

/* --------------------------------------------------------------------------
   Pricing: selected plan = black + lifts up ($1.99 ↔ $15.99)
   No !important on transform so rise/fall transitions work.
   -------------------------------------------------------------------------- */
.pricing-grid {
	align-items: stretch !important;
	gap: 20px !important;
	padding-top: 16px;
}

.pricing-card {
	background: #fff !important;
	color: #111318 !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	border-radius: 18px !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
	padding: 28px 24px 24px !important;
	min-height: 100%;
	transform: translateY(0) scale(1);
	transition:
		transform 420ms cubic-bezier(0.34, 1.25, 0.64, 1),
		box-shadow 420ms cubic-bezier(0.4, 0, 0.2, 1),
		background 380ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 380ms cubic-bezier(0.4, 0, 0.2, 1),
		color 300ms ease;
	will-change: transform;
}

.pricing-card:hover:not(.is-featured):not(.is-plan-rising):not(.is-plan-falling) {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
	border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Selected plan rises + goes black */
.pricing-card.is-featured {
	background:
		radial-gradient(130% 120% at 10% 0%, rgba(70, 120, 255, 0.22) 0%, transparent 48%),
		linear-gradient(165deg, #16181f 0%, #0c0d11 48%, #08090a 100%) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow:
		0 28px 56px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(255, 255, 255, 0.06) !important;
	transform: translateY(-16px) scale(1.03);
	z-index: 3;
}

.pricing-card.is-featured:hover:not(.is-plan-rising):not(.is-plan-falling) {
	transform: translateY(-18px) scale(1.035);
}

/* Extra pop when a plan becomes selected */
.pricing-card.is-plan-rising {
	animation: pricingRise 520ms cubic-bezier(0.34, 1.5, 0.64, 1) both;
	z-index: 4;
}

.pricing-card.is-plan-falling {
	animation: pricingFall 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes pricingRise {
	0% {
		transform: translateY(0) scale(0.98);
	}
	55% {
		transform: translateY(-24px) scale(1.05);
	}
	100% {
		transform: translateY(-16px) scale(1.03);
	}
}

@keyframes pricingFall {
	0% {
		transform: translateY(-16px) scale(1.03);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

.pricing-card__flag {
	background: #fff !important;
	color: #111318 !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition:
		opacity 280ms ease,
		transform 380ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.pricing-card.is-featured .pricing-card__flag:not([hidden]) {
	animation: pricingFlagIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes pricingFlagIn {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(8px) scale(0.88);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

.pricing-card__label {
	color: #2d6aff !important;
	transition: color 300ms ease;
}

.pricing-card.is-featured .pricing-card__label {
	color: rgba(255, 255, 255, 0.72) !important;
}

.pricing-card h3 {
	color: #111318 !important;
	font-weight: 600 !important;
	transition: color 300ms ease;
}

.pricing-card.is-featured h3 {
	color: #fff !important;
}

.pricing-card__description {
	color: rgba(17, 19, 24, 0.62) !important;
	min-height: 44px;
	transition: color 300ms ease;
}

.pricing-card.is-featured .pricing-card__description {
	color: rgba(255, 255, 255, 0.72) !important;
}

.pricing-card__price strong {
	color: #111318 !important;
	font-weight: 700 !important;
	font-size: 2.5rem !important;
	letter-spacing: -0.03em !important;
	transition: color 300ms ease;
}

.pricing-card.is-featured .pricing-card__price strong {
	color: #fff !important;
}

.pricing-card__price span,
.pricing-card__billing,
.pricing-card__price-old {
	color: rgba(17, 19, 24, 0.5) !important;
	transition: color 300ms ease;
}

.pricing-card.is-featured .pricing-card__price span,
.pricing-card.is-featured .pricing-card__billing,
.pricing-card.is-featured .pricing-card__price-old {
	color: rgba(255, 255, 255, 0.58) !important;
}

.pricing-card__features {
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.pricing-card__features li {
	color: rgba(17, 19, 24, 0.78) !important;
	font-size: 0.93rem !important;
	padding-left: 32px !important;
	line-height: 1.4;
	transition: color 300ms ease;
}

.pricing-card.is-featured .pricing-card__features li {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* Light cards: blue checks */
.pricing-card__features li::before {
	width: 20px !important;
	height: 20px !important;
	top: 0 !important;
	background: rgba(45, 106, 255, 0.12)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")
		center / 11px no-repeat !important;
	transition: background 300ms ease, box-shadow 300ms ease;
}

/* Black featured: light checks on dark */
.pricing-card.is-featured .pricing-card__features li::before {
	background: rgba(255, 255, 255, 0.16)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")
		center / 11px no-repeat !important;
}

.pricing-card .button,
.pricing-card [data-checkout-button] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 48px !important;
	margin-top: auto;
	border-radius: 10px !important;
	font: inherit;
	font-weight: 500 !important;
	font-size: 0.95rem !important;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 320ms ease,
		color 320ms ease,
		border-color 320ms ease,
		box-shadow 320ms ease !important;
}

/* Side cards: outline CTA */
.pricing-card--free .button,
.pricing-card:not(.is-featured) [data-checkout-button],
.pricing-card:not(.is-featured) .button {
	background: #fff !important;
	color: #111318 !important;
	border: 1px solid rgba(15, 23, 42, 0.14) !important;
	box-shadow: none !important;
}

/* Featured black card: white CTA */
.pricing-card.is-featured .button,
.pricing-card.is-featured .button--primary,
.pricing-card.is-featured .button--ghost,
.pricing-card.is-featured [data-checkout-button],
.pricing-card.is-featured [data-checkout-button]:hover,
.pricing-card.is-featured .glow-btn--light,
.pricing-card.is-featured .glow-btn--light:hover,
.pricing-card.is-featured .glow-btn--ghost,
.pricing-card.is-featured .glow-btn--ghost:hover {
	background: #fff !important;
	background-color: #fff !important;
	color: #111318 !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
	transform: none !important;
}

.pricing-promo {
	background: #f6f7f9 !important;
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pricing-card,
	.pricing-card .button,
	.pricing-card [data-checkout-button],
	.pricing-card__flag {
		transition: none !important;
		animation: none !important;
	}

	.pricing-card.is-plan-rising,
	.pricing-card.is-plan-falling {
		animation: none !important;
	}
}

.cohere-card--dashboard img {
	object-fit: cover;
	object-position: center 30%;
}

.dashboard-proof__brand {
	display: none !important;
}

.footer-socials {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.footer-socials a {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(17, 19, 24, 0.55);
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #fff;
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.footer-socials a:hover {
	color: #111318;
	border-color: rgba(15, 23, 42, 0.2);
	background: #f7f7f8;
}

.footer-socials svg {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   Navbar CTA — exact same glow animation as hero "Add to Chrome"
   Warm purple→coral offset blur (white face). No hard hero strip:
   solid face on ::after, glow on ::before, isolation only on the button
   so the glow never paints under the sticky topbar / backdrop-filter.
   -------------------------------------------------------------------------- */

/* Kill earlier "no ::after on glow-btn" for the navbar CTA face layer */
.page-shell .site-topbar .topbar__cta.glow-btn::after {
	display: block !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn,
.page-shell .site-topbar .topbar__cta.glow-btn--primary,
.page-shell .site-topbar.is-scrolled .topbar__cta,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary {
	position: relative !important;
	overflow: visible !important;
	/* Own stacking context so ::before glow stays with the button
	   (above topbar bg) instead of slipping under it → hard hero strip */
	isolation: isolate !important;
	z-index: 2 !important;
	transform: none !important;
	/* Face lives on ::after — keep shell transparent */
	background: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transition:
		color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn > * {
	position: relative;
	z-index: 1;
}

/* Solid face (matches hero white pill / black pill) */
.page-shell .site-topbar .topbar__cta.glow-btn::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	border-radius: inherit !important;
	pointer-events: none !important;
	transition:
		background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Not scrolled: black face */
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn::after {
	background: #17181d !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	box-shadow: none !important;
}
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn {
	color: #fff !important;
}

/* Scrolled: white face — same as hero ghost CTA */
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn::after {
	background: #fff !important;
	border: 1px solid rgba(8, 10, 18, 0.08) !important;
	box-shadow: none !important;
}
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn {
	color: #111318 !important;
}

/* Glow blob — same mechanics as .glow-btn--ghost::before */
.page-shell .site-topbar .topbar__cta.glow-btn::before,
.page-shell .site-topbar .topbar__cta.glow-btn--primary::before,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn::before,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: inherit !important;
	opacity: 0 !important;
	transform: translate(0, 0) !important;
	filter: blur(0) !important;
	pointer-events: none !important;
	transition:
		transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 500ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Scrolled white: exact hero warm purple → coral gradient */
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn::before,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn--primary::before {
	background: linear-gradient(
		270deg,
		rgba(209, 142, 226, 0.92),
		rgba(255, 140, 110, 0.9) 52%,
		rgba(255, 119, 89, 0.94)
	) !important;
}

/* Not scrolled black: cool blue (same motion, different palette) */
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn::before,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary::before {
	background: linear-gradient(
		270deg,
		rgba(56, 120, 255, 0.85),
		rgba(90, 200, 255, 0.75) 52%,
		rgba(130, 150, 255, 0.7)
	) !important;
}

/* Hover: same as hero — no lift, no box-shadow, just ::before glide */
.page-shell .site-topbar .topbar__cta.glow-btn:hover,
.page-shell .site-topbar .topbar__cta.glow-btn--primary:hover,
.page-shell .site-topbar.is-scrolled .topbar__cta:hover,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn:hover,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn--primary:hover,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover {
	transform: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-color: transparent !important;
	filter: none !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn:hover::before,
.page-shell .site-topbar .topbar__cta.glow-btn--primary:hover::before,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn:hover::before,
.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn--primary:hover::before,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary:hover::before {
	display: block !important;
	opacity: 1 !important;
	transform: translate(-8px, 8px) !important;
	/* Match final hero/ghost cascade */
	filter: blur(10px) !important;
}

.page-shell .site-topbar.is-scrolled .topbar__cta.glow-btn:hover::after {
	background: #fff !important;
	border-color: rgba(8, 10, 18, 0.18) !important;
}
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn:hover::after {
	background: #17181d !important;
	border-color: rgba(0, 0, 0, 0.16) !important;
}

/* Never clip the glow against the hero edge */
.page-shell .site-topbar,
.page-shell .site-topbar .topbar,
.page-shell .site-topbar .topbar__controls {
	overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	.page-shell .site-topbar .topbar__cta.glow-btn::before,
	.page-shell .site-topbar .topbar__cta.glow-btn--primary::before {
		transition: none !important;
	}
	.page-shell .site-topbar .topbar__cta.glow-btn:hover::before {
		opacity: 0 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* --------------------------------------------------------------------------
   Pricing page (/pricing/): kill global featured lift / flag pill animation.
   Featured monthly is static black; badge is top-right seal, not center pill.
   -------------------------------------------------------------------------- */
.pricing-shell-page .pricing-card.is-featured,
.pricing-shell-page .pricing-card.is-featured:hover,
.pricing-shell-page .pricing-card.is-featured:hover:not(.is-plan-rising):not(.is-plan-falling),
.pricing-shell-page .pricing-card.pricing-card--featured-static,
.pricing-shell-page .pricing-card.pricing-card--featured-static:hover {
	transform: none !important;
	animation: none !important;
	will-change: auto !important;
}

.pricing-shell-page .pricing-card.is-featured .pricing-card__flag:not([hidden]),
.pricing-shell-page .pricing-card--featured-static .pricing-card__flag,
.pricing-shell-page .pricing-card--featured-static .pricing-card__flag:not([hidden]),
.pricing-shell-page .pricing-card--featured-static .pricing-card__verified {
	animation: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	color: #fff !important;
}

.pricing-shell-page .pricing-card.is-plan-rising,
.pricing-shell-page .pricing-card.is-plan-falling {
	animation: none !important;
}

/* ==========================================================================
   Full-bleed dark footer (navbar scrolled palette) — edge to edge
   ========================================================================== */
.site-footer {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(56px, 7vw, 88px) 0 28px !important;
	background: #0a0b0e !important;
	border-top: 0 !important;
	color: rgba(255, 255, 255, 0.72) !important;
	box-sizing: border-box;
}

/* Inner rows: same content width as page, centered — bg still full-bleed */
.site-footer__top,
.site-footer__bottom {
	width: min(100% - 48px, 1200px) !important;
	max-width: min(100% - 48px, 1200px) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.45fr 2.55fr;
	gap: clamp(36px, 5vw, 72px);
	padding-bottom: 40px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-brand p {
	color: rgba(255, 255, 255, 0.8) !important;
}

.site-footer .brand--footer .brand__copy strong,
.site-footer .brand--footer strong {
	color: #ffffff !important;
}

.site-footer .brand--footer .brand__copy span,
.site-footer .brand--footer span:not(.brand__copy) {
	color: rgba(255, 255, 255, 0.78) !important;
}

/* Footer CTA: white ghost on dark (same family as navbar scrolled CTA) */
.site-footer .footer-brand .button,
.site-footer .footer-brand .glow-btn,
.site-footer .footer-brand .glow-btn--ghost {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #111318 !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	box-shadow: none !important;
}

.site-footer .footer-brand .glow-btn::before,
.site-footer .footer-brand .glow-btn::after,
.site-footer .footer-brand .glow-btn:hover::before,
.site-footer .footer-brand .glow-btn:hover::after {
	/* keep warm hover glow if present; face stays white */
}

.site-footer .footer-columns h3 {
	color: rgba(255, 255, 255, 0.42) !important;
}

.site-footer .footer-columns a {
	color: rgba(255, 255, 255, 0.88) !important;
}

.site-footer .footer-columns a:hover {
	color: #ffffff !important;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 24px !important;
	border-top: 0 !important; /* separator is on top block */
}

.site-footer__bottom p {
	color: rgba(255, 255, 255, 0.68) !important;
}

/* Lang switcher on dark footer */
.site-footer .lang-switcher__toggle {
	background: transparent !important;
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	box-shadow: none !important;
}

.site-footer .lang-switcher__toggle:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	color: #fff !important;
}

.site-footer .lang-switcher__icon,
.site-footer .lang-switcher__chevron {
	color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer .lang-switcher__label {
	color: rgba(255, 255, 255, 0.85) !important;
}

.site-footer .lang-switcher__menu {
	background: #14161a !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.site-footer .lang-switcher__menu::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	background-clip: padding-box;
}

.site-footer .lang-switcher__menu::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
	background-clip: padding-box;
}

.site-footer .lang-switcher__option {
	color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer .lang-switcher__option:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
}

.site-footer .lang-switcher__option[aria-selected="true"] {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

/* Socials on dark footer */
.site-footer .footer-socials a {
	color: rgba(255, 255, 255, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	background: transparent !important;
	background-color: transparent !important;
}

.site-footer .footer-socials a:hover {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 900px) {
	.site-footer__top,
	.site-footer__bottom {
		width: min(100% - 32px, 1200px) !important;
		max-width: min(100% - 32px, 1200px) !important;
	}

	.site-footer__top {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 600px) {
	.site-footer .footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		max-width: none !important;
	}
}

/* Navbar Add to Chrome: same soft radius as Beyond UI Get Started (~10px, not pill) */
.page-shell .site-topbar .topbar__cta,
.page-shell .site-topbar .topbar__cta.glow-btn,
.page-shell .site-topbar .topbar__cta.glow-btn--primary,
.page-shell .site-topbar.is-scrolled .topbar__cta,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta {
	border-radius: 10px !important;
}

.page-shell .site-topbar .topbar__cta.glow-btn::before,
.page-shell .site-topbar .topbar__cta.glow-btn::after,
.page-shell .site-topbar .topbar__cta.glow-btn--primary::before,
.page-shell .site-topbar .topbar__cta.glow-btn--primary::after {
	border-radius: 10px !important;
}

/* ==========================================================================
   Site-wide buttons: soft 10px radius (same as navbar Add to Chrome)
   ========================================================================== */
.button,
.button--primary,
.button--ghost,
.button--light,
.button--ghost-light,
.glow-btn,
.glow-btn--primary,
.glow-btn--ghost,
.glow-btn--light,
.glow-btn--ghost-dark,
.topbar__cta,
.topbar__auth-button,
.pricing-card .button,
.pricing-card [data-checkout-button],
.pricing-card__cta,
.pricing-promo__button,
.pricing-promo__input,
.cta-band__actions .button,
.cta-band__actions .glow-btn,
.footer-brand .button,
.footer-brand .glow-btn,
.reference-hero__cta .button,
.reference-hero__cta .glow-btn,
.reference-hero__actions .button,
.reference-hero__actions .glow-btn,
.dashboard-proof__link,
.lang-switcher__toggle,
.not-found-actions .button,
.not-found-actions .glow-btn {
	border-radius: 10px !important;
}

.glow-btn::before,
.glow-btn::after,
.glow-btn--primary::before,
.glow-btn--primary::after,
.glow-btn--ghost::before,
.glow-btn--ghost::after,
.glow-btn--light::before,
.glow-btn--light::after,
.topbar__cta.glow-btn::before,
.topbar__cta.glow-btn::after {
	border-radius: 10px !important;
}

/* Large media panels — same soft radius family as hero frame (16px) */
.cohere-card,
.cohere-card img {
	border-radius: 16px !important;
}

.cta-band.final-reference-cta,
.final-reference-cta {
	border-radius: 16px !important;
}

.final-reference-cta__image,
.final-reference-cta__image img {
	border-radius: 14px !important;
}

/* ==========================================================================
   Trust testimonials marquee — white section, border-only cards, white edge fade
   ========================================================================== */
.trust-section {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: var(--section-pad) !important;
	padding-bottom: clamp(48px, 6vw, 80px) !important;
	scroll-margin-top: 80px;
	overflow: hidden !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	backdrop-filter: none !important;
}

/* Header stack: one margin-bottom on header only (subtitle → marquee ≈ 58px) */
.trust-section .trust-section__header,
.trust-section .section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 56px;
	padding-inline: var(--container-inline, 24px);
	gap: 0;
	background: transparent !important;
	box-shadow: none !important;
	filter: none !important;
}

.trust-section__eyebrow,
.trust-section .eyebrow {
	display: block;
	margin: 0 0 20px;
	padding: 0;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	color: rgba(71, 85, 105, 0.78) !important;
	text-align: center;
	text-transform: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.trust-section__title,
.trust-section .section-head h2 {
	margin: 0 0 24px !important;
	padding: 0;
	text-align: center;
	text-wrap: balance;
	background: transparent !important;
	box-shadow: none !important;
}

.trust-section__subtitle,
.trust-section .section-head p {
	max-width: 760px;
	margin: 0 auto !important;
	padding: 0;
	text-align: center;
	text-wrap: balance;
	line-height: 1.5 !important;
	color: rgba(71, 85, 105, 0.78) !important;
	font-size: 1.06rem;
	background: transparent !important;
	box-shadow: none !important;
}

/* Marquee shell — pure white, no gray haze */
.trust-marquee {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
	gap: 24px;
	padding: 8px 0 16px;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	backdrop-filter: none !important;
}

.trust-marquee::before,
.trust-marquee::after {
	display: none !important;
	content: none !important;
	box-shadow: none !important;
	background: none !important;
	filter: none !important;
}

.marquee {
	--duration: 32s;
	--gap: 24px;
	display: flex;
	overflow: hidden;
	padding: 8px 0;
	gap: var(--gap);
	width: 100%;
	user-select: none;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;
	opacity: 1 !important;
}

.marquee::before,
.marquee::after {
	display: none !important;
	content: none !important;
}

.marquee__group {
	display: flex;
	flex-shrink: 0;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--gap);
	min-width: max-content;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	animation: marquee var(--duration) linear infinite;
	will-change: transform;
}

.marquee__group::before,
.marquee__group::after {
	display: none !important;
	content: none !important;
}

.marquee--reverse .marquee__group {
	animation-direction: reverse;
}

.marquee--reverse {
	padding-left: 48px;
	background: transparent !important;
	box-shadow: none !important;
}

.marquee--pause-on-hover:hover .marquee__group {
	animation-play-state: paused;
}

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100% - var(--gap))); }
}

/* Cards: white + thin border, NO soft multi-layer shadow haze */
.trust-marquee .marquee-card,
.marquee-card {
	position: relative !important;
	inset: auto !important;
	display: flex !important;
	flex-direction: column !important;
	flex-shrink: 0 !important;
	width: 272px !important;
	min-width: 272px !important;
	min-height: 142px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 16px !important;
	border-radius: 16px !important;
	border: 1px solid rgba(15, 23, 42, 0.09) !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	animation: none !important;
	opacity: 1 !important;
	overflow: visible !important;
	cursor: default;
	box-sizing: border-box;
	gap: 0 !important;
	transition:
		transform 160ms ease,
		border-color 160ms ease;
}

.trust-marquee .marquee-card:hover,
.marquee-card:hover {
	transform: translateY(-1px) !important;
	border-color: rgba(15, 23, 42, 0.14) !important;
	background: #ffffff !important;
	box-shadow: none !important;
	filter: none !important;
	animation: none !important;
}

.marquee-card__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.marquee-card__avatar {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 999px;
	object-fit: cover;
	background: #e8eaf0;
	border: 1px solid rgba(15, 23, 42, 0.06);
	flex-shrink: 0;
	box-shadow: none !important;
	filter: none !important;
}

.marquee-card__name {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(15, 23, 42, 0.94);
	letter-spacing: -0.01em;
}

.marquee-card__user {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 450;
	line-height: 1.2;
	color: rgba(71, 85, 105, 0.62);
}

.marquee-card__body {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(30, 41, 59, 0.82);
	font-style: normal;
	flex: 1 1 auto;
}

/* Pure white edge fades only */
.trust-marquee__fade {
	pointer-events: none;
	position: absolute;
	inset-block: 0;
	width: clamp(80px, 10vw, 180px);
	z-index: 5;
	box-shadow: none !important;
	filter: none !important;
}

.trust-marquee__fade--left {
	left: 0;
	background: linear-gradient(
		to right,
		#ffffff 0%,
		rgba(255, 255, 255, 0.96) 25%,
		rgba(255, 255, 255, 0) 100%
	);
}

.trust-marquee__fade--right {
	right: 0;
	background: linear-gradient(
		to left,
		#ffffff 0%,
		rgba(255, 255, 255, 0.96) 25%,
		rgba(255, 255, 255, 0) 100%
	);
}

@media (max-width: 960px) {
	.marquee {
		--gap: 18px;
		--duration: 34s;
	}
	.trust-marquee { gap: 18px; }
	.trust-marquee .marquee-card,
	.marquee-card {
		width: 248px !important;
		min-width: 248px !important;
	}
	.trust-marquee__fade { width: clamp(80px, 12vw, 120px); }
	.marquee--reverse { padding-left: 32px; }
	.trust-section {
		scroll-margin-top: 72px;
	}
	.trust-section .section-head,
	.trust-section .trust-section__header {
		margin-bottom: 48px;
	}
}

@media (max-width: 600px) {
	.marquee {
		--gap: 16px;
		--duration: 40s;
	}
	.trust-marquee {
		gap: 16px;
		padding: 8px 0 16px;
	}
	.trust-marquee .marquee-card,
	.marquee-card {
		width: min(280px, calc(100vw - 48px)) !important;
		min-width: min(280px, calc(100vw - 48px)) !important;
		min-height: 132px !important;
		padding: 16px !important;
	}
	.trust-marquee__fade { width: clamp(36px, 10vw, 56px); }
	.marquee--reverse { padding-left: 20px; }
	.trust-section {
		scroll-margin-top: 64px;
	}
	.trust-section .section-head,
	.trust-section .trust-section__header {
		margin-bottom: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__group { animation: none !important; }
	.marquee {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-inline: 16px;
	}
	.marquee__group[aria-hidden="true"] { display: none !important; }
	.marquee__group { min-width: 0; }
	.trust-marquee .marquee-card:hover,
	.marquee-card:hover { transform: none !important; }
	.trust-marquee__fade { display: none; }
}

/* ==========================================================================
   Features Bento Grid — Magic UI structure, Tenvilo product content
   ========================================================================== */
.bento-features {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--section-pad) clamp(24px, 3.5vw, 48px);
	background: #ffffff;
	box-sizing: border-box;
}

.bento-features__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.bento-features__header {
	margin: 0 0 clamp(48px, 5vw, 64px);
	text-align: left;
}

.bento-features__header h2 {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(2.75rem, 5vw, 4.5rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: #09090b;
	text-wrap: balance;
}

.bento-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(320px, 1fr));
	gap: 20px;
}

.bento-card {
	--i: 0;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 320px;
	border-radius: 24px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: linear-gradient(
		180deg,
		rgba(250, 250, 250, 1) 0%,
		rgba(255, 255, 255, 1) 100%
	);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.025),
		0 12px 40px rgba(15, 23, 42, 0.045);
	transition:
		transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 450ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 450ms cubic-bezier(0.22, 1, 0.36, 1);
	/* entrance */
	opacity: 0;
	transform: translateY(18px);
	filter: blur(4px);
}

.bento-grid.is-inview .bento-card {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 450ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 450ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i) * 85ms);
}

.bento-card:hover {
	transform: translateY(-3px);
	border-color: rgba(15, 23, 42, 0.13);
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.025),
		0 18px 48px rgba(15, 23, 42, 0.07);
}

.bento-grid.is-inview .bento-card:hover {
	transform: translateY(-3px);
}

.bento-card--presets {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.bento-card--notifications {
	grid-column: 2 / 4;
	grid-row: 1 / 2;
}

.bento-card--integrations {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

.bento-card--block {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.bento-card__visual {
	position: absolute;
	inset: 0 0 28% 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Integrations: keep graph solid longer; fade only near copy */
.bento-card--integrations .bento-card__visual {
	inset: 0 0 22% 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 68%,
		rgba(0, 0, 0, 0.82) 78%,
		rgba(0, 0, 0, 0.35) 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 68%,
		rgba(0, 0, 0, 0.82) 78%,
		rgba(0, 0, 0, 0.35) 90%,
		transparent 100%
	);
}

/* Notifications: show ~2.5–3 items before soft fade */
.bento-card--notifications .bento-card__visual {
	inset: 0 0 24% 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 62%,
		rgba(0, 0, 0, 0.72) 78%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 62%,
		rgba(0, 0, 0, 0.72) 78%,
		transparent 100%
	);
}

.bento-card--presets .bento-card__visual {
	inset: 0 0 26% 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 58%,
		rgba(0, 0, 0, 0.75) 78%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 58%,
		rgba(0, 0, 0, 0.75) 78%,
		transparent 100%
	);
}

.bento-card--block .bento-card__visual {
	inset: 0 0 30% 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 70%,
		rgba(0, 0, 0, 0.55) 88%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 70%,
		rgba(0, 0, 0, 0.55) 88%,
		transparent 100%
	);
}

.bento-card:hover .bento-card__visual {
	transform: scale(1.015);
}

.bento-card__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to top,
		#fafafa 0%,
		rgba(250, 250, 250, 1) 32%,
		rgba(250, 250, 250, 0.9) 55%,
		rgba(250, 250, 250, 0.4) 78%,
		transparent 100%
	);
}

.bento-card--integrations .bento-card__fade {
	height: 40%;
	background: linear-gradient(
		to top,
		#fafafa 0%,
		rgba(250, 250, 250, 0.98) 40%,
		rgba(250, 250, 250, 0.55) 72%,
		transparent 100%
	);
}

.bento-card--notifications .bento-card__fade {
	height: 44%;
	background: linear-gradient(
		to top,
		#fafafa 0%,
		rgba(250, 250, 250, 0.98) 38%,
		rgba(250, 250, 250, 0.5) 70%,
		transparent 100%
	);
}

.bento-card__copy {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 26px;
	z-index: 5;
}

.bento-card__icon {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	color: rgba(24, 24, 27, 0.82);
}

.bento-card__copy h3 {
	margin: 0;
	font-size: clamp(1.35rem, 1.8vw, 1.65rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: rgba(9, 9, 11, 0.94);
}

.bento-card__copy p {
	margin: 8px 0 0;
	max-width: 430px;
	font-size: clamp(0.92rem, 1.1vw, 1.05rem);
	font-weight: 400;
	line-height: 1.5;
	color: rgba(63, 63, 70, 0.68);
}

/* —— Visual: Smart presets —— */
.bento-viz--presets {
	height: 100%;
	padding: 20px 16px 0;
}

.bento-presets {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 268px;
	margin: 0 auto;
}

.bento-preset {
	padding: 12px 12px 8px;
	border-radius: 15px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.045);
	opacity: 0.72;
	transform: scale(0.985);
	transition:
		opacity 550ms ease,
		transform 550ms ease,
		box-shadow 550ms ease,
		border-color 550ms ease;
	animation: bento-preset-cycle 18s ease-in-out infinite;
}

.bento-preset:nth-child(1) { animation-delay: 0s; }
.bento-preset:nth-child(2) { animation-delay: -9s; }

@keyframes bento-preset-cycle {
	0%, 42% {
		opacity: 1;
		transform: translateY(0) scale(1);
		border-color: rgba(15, 23, 42, 0.1);
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
	}
	50%, 100% {
		opacity: 0.72;
		transform: translateY(0) scale(0.985);
		border-color: rgba(15, 23, 42, 0.08);
		box-shadow: 0 4px 16px rgba(15, 23, 42, 0.045);
	}
}

.bento-preset__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.bento-preset__head strong {
	font-size: 0.9rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: rgba(9, 9, 11, 0.92);
}

.bento-preset__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #0b0d12;
	color: #fff;
	flex-shrink: 0;
	opacity: 1;
}

.bento-preset__play svg {
	width: 12px;
	height: 12px;
	margin-left: 1px;
}

.bento-preset__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 500;
	color: rgba(63, 63, 70, 0.68);
	min-width: 0;
}

.bento-preset__favs {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.bento-preset__favs img {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	object-fit: contain;
	padding: 1px;
	margin: 0;
	box-sizing: border-box;
}

.bento-preset__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 4px;
	border-radius: 5px;
	background: rgba(15, 23, 42, 0.05);
	border: 1px solid rgba(15, 23, 42, 0.06);
	font-size: 0.62rem;
	font-weight: 650;
	color: rgba(63, 63, 70, 0.72);
	letter-spacing: -0.02em;
}

/* —— Visual: Notifications animated list —— */
.bento-viz--notifications {
	height: 100%;
	padding: 16px 24px 8px;
	overflow: hidden;
}

.bento-notifs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 420px;
	margin-left: auto;
	margin-top: 4px;
	animation: bento-notifs-shift 6.5s ease-in-out infinite;
}

@keyframes bento-notifs-shift {
	0%, 14% { transform: translateY(0); }
	48% { transform: translateY(-10px); }
	86%, 100% { transform: translateY(0); }
}

.bento-notif {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
	animation: bento-notif-in 6.5s ease-in-out infinite;
	will-change: opacity, transform;
	flex-shrink: 0;
}

.bento-notif:nth-child(1) { animation-delay: 0s; }
.bento-notif:nth-child(2) { animation-delay: 0.1s; }
.bento-notif:nth-child(3) { animation-delay: 0.2s; }
.bento-notif:nth-child(4) { animation-delay: 0.3s; }
.bento-notif:nth-child(5) { animation-delay: 0.4s; }

@keyframes bento-notif-in {
	0% { opacity: 0; transform: translateY(8px); filter: blur(2px); }
	12% { opacity: 1; transform: translateY(0); filter: blur(0); }
	70% { opacity: 1; transform: translateY(0); filter: blur(0); }
	100% { opacity: 0.55; transform: translateY(-3px); filter: blur(0); }
}

.bento-notif__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	flex-shrink: 0;
	background: rgba(15, 23, 42, 0.04);
	color: rgba(24, 24, 27, 0.82);
}

.bento-notif__icon svg {
	width: 18px;
	height: 18px;
}

.bento-notif__icon--focus { background: rgba(91, 108, 255, 0.1); color: #4f5ef0; }
.bento-notif__icon--goal { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.bento-notif__icon--preset { background: rgba(15, 23, 42, 0.06); color: #18181b; }
.bento-notif__icon--break { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.bento-notif__icon--block { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.bento-notif__body {
	min-width: 0;
	flex: 1;
}

.bento-notif__body strong {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: rgba(9, 9, 11, 0.92);
	line-height: 1.25;
}

.bento-notif__body small {
	display: block;
	margin-top: 3px;
	font-size: 0.75rem;
	font-weight: 450;
	color: rgba(63, 63, 70, 0.66);
	line-height: 1.35;
}

/* —— Visual: Integrations graph —— */
.bento-viz--integrations {
	position: relative;
	height: 100%;
	min-height: 210px;
	opacity: 1;
}

.bento-beam {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 1;
	pointer-events: none;
}

.bento-beam__path {
	fill: none;
	stroke: rgba(15, 23, 42, 0.11);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.bento-beam__pulse {
	fill: #6b7cff;
	opacity: 0.55;
}

.bento-int-node {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
	z-index: 2;
	opacity: 1;
}

.bento-int-node--user {
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	width: 58px;
	height: 58px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.bento-int-node--user img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.bento-int-node--core {
	left: 44%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 86px;
	height: 86px;
	z-index: 3;
	opacity: 1;
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.04),
		0 16px 40px rgba(15, 23, 42, 0.1);
}

.bento-int-node__logo {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 14px;
	pointer-events: none;
	user-select: none;
}

.bento-int-connectors {
	position: absolute;
	right: 9%;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}

.bento-int-node--connector {
	position: relative;
	left: auto;
	top: auto;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	opacity: 1;
}

.bento-int-node--connector img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* —— Visual: Blocking flow —— */
.bento-viz--block {
	height: 100%;
	padding: 28px 16px 0;
}

.bento-block-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(100%, 220px);
	margin: 0 auto;
}

/* Soft vertical link between the three status rows */
.bento-block-flow__rail {
	position: absolute;
	left: 17px;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: linear-gradient(
		to bottom,
		rgba(15, 23, 42, 0.08) 0%,
		rgba(15, 23, 42, 0.12) 50%,
		rgba(239, 68, 68, 0.18) 100%
	);
	z-index: 0;
	pointer-events: none;
}

.bento-block-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #fff;
	box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
	font-size: 0.8rem;
	font-weight: 500;
	color: rgba(9, 9, 11, 0.82);
	opacity: 1;
}

.bento-block-step em {
	font-style: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bento-block-step__dot {
	position: relative;
	z-index: 1;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #a1a1aa;
	flex-shrink: 0;
}

.bento-block-step--mid .bento-block-step__dot {
	background: #5b6cff;
	box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}

.bento-block-step--stop {
	border-color: rgba(239, 68, 68, 0.2);
	background: #fff;
}

.bento-block-step--stop .bento-block-step__dot {
	background: #ef4444;
}

/* Tablet: 2 columns — narrow pair on top, wide cards full-width below */
@media (max-width: 1024px) {
	.bento-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 16px;
	}

	.bento-card {
		min-height: 300px;
	}

	.bento-card--presets {
		grid-column: 1 / 2;
		grid-row: 1;
	}

	.bento-card--block {
		grid-column: 2 / 3;
		grid-row: 1;
	}

	.bento-card--notifications {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.bento-card--integrations {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* Mobile: single column */
@media (max-width: 720px) {
	.bento-features {
		padding: var(--section-pad) 20px;
	}

	.bento-features__header {
		margin-bottom: 36px;
	}

	.bento-features__header h2 {
		max-width: none;
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.bento-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bento-card,
	.bento-card--presets,
	.bento-card--notifications,
	.bento-card--integrations,
	.bento-card--block {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 300px;
	}

	.bento-card__copy {
		left: 20px;
		right: 20px;
		bottom: 18px;
	}

	/* Keep integrations graph fully inside the visual on narrow screens */
	.bento-card--integrations .bento-card__visual {
		inset: 0 0 36% 0;
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 72%,
			rgba(0, 0, 0, 0.75) 86%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 72%,
			rgba(0, 0, 0, 0.75) 86%,
			transparent 100%
		);
	}

	.bento-card--integrations .bento-card__fade {
		height: 48%;
	}

	.bento-int-node--user {
		left: 6%;
		top: 50%;
		transform: translateY(-50%);
		width: 48px;
		height: 48px;
	}

	.bento-int-node--user img {
		width: 24px;
		height: 24px;
	}

	.bento-int-node--core {
		left: 40%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 72px;
		height: 72px;
	}

	.bento-int-node__logo {
		width: 42px;
		height: 42px;
	}

	/* Reset desktop centering; keep column fully in-bounds (no top/bottom + -50% clash) */
	.bento-int-connectors {
		right: 5%;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		gap: 4px;
	}

	.bento-int-node--connector {
		width: 44px;
		height: 44px;
	}

	.bento-int-node--connector img {
		width: 22px;
		height: 22px;
	}

	/* Notifications: stop list from crossing heading on mobile */
	.bento-card--notifications .bento-card__visual {
		inset: 0 0 42% 0;
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 55%,
			rgba(0, 0, 0, 0.7) 72%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			#000 0%,
			#000 55%,
			rgba(0, 0, 0, 0.7) 72%,
			transparent 100%
		);
	}

	.bento-card--notifications .bento-card__fade {
		height: 52%;
	}

	.bento-viz--notifications {
		padding: 16px 16px 0;
	}

	.bento-notifs {
		gap: 8px;
		margin-top: 0;
		max-width: none;
		margin-left: 0;
		/* Keep stack static-height; hide 4th/5th from layout pressure on mobile */
		max-height: 148px;
		overflow: hidden;
	}

	.bento-notif {
		padding: 8px 12px;
	}

	.bento-notif:nth-child(n + 4) {
		display: none;
	}

	.bento-card--presets .bento-card__visual {
		inset: 0 0 38% 0;
	}

	.bento-card--block .bento-card__visual {
		inset: 0 0 38% 0;
	}

	.bento-viz--block {
		padding: 20px 16px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bento-card,
	.bento-grid.is-inview .bento-card {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.bento-card:hover {
		transform: none !important;
	}

	.bento-card:hover .bento-card__visual {
		transform: none !important;
	}

	.bento-preset,
	.bento-notifs,
	.bento-notif {
		animation: none !important;
		filter: none !important;
	}

	.bento-preset {
		opacity: 1 !important;
		transform: none !important;
	}

	.bento-notif {
		opacity: 1 !important;
		transform: none !important;
	}

	.bento-beam__pulse {
		display: none !important;
	}
}

/* ==========================================================================
   Design-taste fine-tune (preserve brand, anti-slop)
   - Single accent #0290FF (retire Stage-6 violet AI gradient)
   - Brand primary CTAs back to accent blue
   - Radius lock: controls 10px, cards 14–16px
   - Shadows tinted to ink (no pure-black glow chrome)
   ========================================================================== */

:root {
	/* Collapse dual AI accent → singular brand blue */
	--accent-violet: #0290FF;
	--accent-violet-soft: rgba(2, 144, 255, 0.10);
	--accent-blue: #0290FF;
	--ink-deep: #0a0a0a;
	--text-strong: #0a0a0a;

	/* Shared product radius scale (site ↔ dashboard) */
	--radius-control: 10px;
	--radius-card: 16px;
	--radius-card-lg: 18px;
}

/* Hero accent phrase: solid brand blue, no violet gradient text */
.hero-accent {
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: unset !important;
	color: var(--accent) !important;
}

/* Primary marketing CTAs stay near-black (not brand blue) */
.button--primary,
.hero-actions .button--primary,
a.button--primary {
	background: #17181d !important;
	border-color: #17181d !important;
	color: #fff !important;
	box-shadow: none !important;
}
.button--primary:hover,
.hero-actions .button--primary:hover,
a.button--primary:hover {
	background: #1b1b1f !important;
	border-color: #1b1b1f !important;
	color: #fff !important;
	box-shadow: none !important;
	transform: none;
}

/* Light CTA on blue band stays readable white surface */
.button--light {
	background: #fff !important;
	color: var(--ink-deep) !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* Control / card radius lock */
.button,
.topbar__cta,
input,
select,
textarea {
	border-radius: var(--radius-control) !important;
}
.bento-card,
.pricing-card,
.faq-list details,
.marquee-card,
.beyond-panel {
	border-radius: var(--radius-card) !important;
}

/* Soften pure-black decorative shadow chrome to ink-tinted */
.button--primary,
.hero-actions .button--primary {
	/* already set above */
}
.preview-float,
.progress-dashboard-frame {
	box-shadow: 0 8px 24px rgba(3, 7, 18, 0.07) !important;
}

/* Eyebrow restraint: remaining labels are quiet mono, not uppercase tracking spam */
.eyebrow,
.eyebrow--pill {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Trust / FAQ section heads: slightly calmer vertical rhythm */
.section-head {
	gap: 16px;
}

/* Canvas continuity with dashboard */
body {
	background: var(--canvas);
	color: var(--ink);
}

/* Navbar + primary glow CTAs: near-black face (not brand blue) */
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn::after,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary::after {
	background: #17181d !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn,
.page-shell .site-topbar:not(.is-scrolled) .topbar__cta.glow-btn--primary {
	color: #fff !important;
}
.topbar__cta,
a.topbar__cta,
.site-topbar .topbar__cta {
	/* Face is on ::after; keep shell transparent */
	background: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
.glow-btn--primary:not(.topbar__cta) {
	background: #17181d !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	color: #fff !important;
}
.glow-btn--primary:not(.topbar__cta):hover {
	background: #17181d !important;
	background-color: #17181d !important;
	border-color: rgba(0, 0, 0, 0.16) !important;
	color: #fff !important;
}

/* =============================================================
   Live SPA dashboard preview — the frame now embeds the real
   React dashboard at /dashboard/. The iframe keeps a fixed
   desktop layout width per breakpoint (1280px desktop, 900px
   compact) and main.js scales it to exactly fit the frame
   width, so the SPA never collapses to its mobile layout.
   The frame's outer size/radius/shadow are unchanged; extra
   iframe height is simply cropped by the viewport.
   ============================================================= */
.dashboard-proof .progress-dashboard-frame__embed {
	/* Inherit the JS-computed fit-to-width scale set on the shell */
	--dashboard-preview-scale: inherit !important;
	width: 1280px !important;
	height: 1500px !important;
	left: 0 !important;
	transform: scale(var(--dashboard-preview-scale, 0.66)) !important;
	transform-origin: top left !important;
	pointer-events: none !important;
	background: #f6f7f9;
}

.dashboard-proof .progress-dashboard-frame__poster {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	background: #f6f7f9;
}

@media (max-width: 720px) {
	.dashboard-proof .progress-dashboard-frame__embed,
	.dashboard-proof .dashboard-proof__scan {
		display: none !important;
	}

	.dashboard-proof .progress-dashboard-frame__poster {
		display: block;
	}
}

/* ============ Tenvilo brand identity (mark + i-dot) ============ */
.brand svg.brand__mark {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #0b0d12;
}

.page-shell .site-topbar.is-scrolled svg.brand__mark {
	color: #ffffff;
}

.site-topbar .brand svg.brand__mark {
	margin-right: 2px;
}

.brand--footer img.brand__mark--footer,
.site-topbar .brand img.brand__mark--footer {
	width: 36px;
	height: 36px;
	border-radius: 0;
	box-shadow: none;
}

span.brand-i {
	position: relative;
	display: inline-block;
	font-size: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.brand-i-dot {
	position: absolute;
	left: calc(50% + 0.015em);
	transform: translateX(-50%);
	top: 0.075em;
	width: 0.19em;
	height: 0.19em;
	border-radius: 50%;
	background: #0290ff;
	pointer-events: none;
}

/* Footer wordmark (line-height 1.1) — tittle sits lower */
.brand__copy .brand-i-dot {
	top: 0.21em;
	left: 50%;
}

/* keep the footer "i" white: beat .site-footer span:not(.brand__copy) !important */
.site-footer .brand--footer strong span.brand-i {
	color: #ffffff !important;
	font-size: inherit !important;
}

/* ============ Canonical rendered wordmark (one asset everywhere) ============ */
.brand__wordmark--img {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

img.brand-wordmark-img {
	display: block;
	height: 16px !important; /* matches previous 21.8px text wordmark cap height */
	width: auto !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Light topbar: ink wordmark; dark (scrolled / permanently dark) topbar: white.
   !important: .site-topbar .brand img sets display:block at higher specificity. */
img.brand-wordmark-img--white {
	display: none !important;
}

.site-topbar.is-scrolled img.brand-wordmark-img--ink {
	display: none !important;
}

.site-topbar.is-scrolled img.brand-wordmark-img--white {
	display: block !important;
}

/* Footer lockup (dark): white asset sized to the old 1.05rem/650 strong */
img.brand-wordmark-img--footer {
	height: 13px !important;
	margin: 3px 0;
}

/* Login visual panel (dark): sized to the old 21px wordmark */
.visualBrand img.brand-wordmark-img--login {
	display: block;
	height: 16px !important;
	width: auto !important;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

/* ==========================================================================
   Auth form — reference pass: blue focus ring + field warnings (2026-07)
   ========================================================================== */

/* Focused field: blue rounded ring with a visible gap around the input,
   like the reference — replaces the old soft indigo glow. */
.auth-page__field input:focus,
.auth-page__field input:focus-visible,
.auth-page__password-wrap input:focus,
.auth-page__password-wrap input:focus-visible,
.passwordInput:focus,
.passwordInput:focus-visible,
.authInput:focus,
.authInput:focus-visible {
	border-color: #d7dce4;
	box-shadow: none;
	/* Thin ring hugging the field (2px, small gap) — not a fat halo */
	outline: 2px solid #3e7bfa;
	outline-offset: 2px;
}

/* Invalid field keeps the red border even while focused */
.auth-page__field input.is-error:focus,
.auth-page__field input.is-error:focus-visible,
.auth-page__password-wrap input.is-error:focus,
.auth-page__password-wrap input.is-error:focus-visible,
.authInput.is-error:focus,
.authInput.is-error:focus-visible {
	border-color: #dc2626;
	outline-color: #3e7bfa;
}

/* Warning row under a field: red filled circle with white "!" + message */
.auth-field-error {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 550;
	line-height: 1.3;
	color: #d93036;
}

.auth-field-error[hidden] {
	display: none;
}

.auth-field-error__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 999px;
	background: #d93036;
	color: #ffffff;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
}

/* Neutral note under the form (e.g. "email sign-in coming soon") */
.auth-form-note {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(15, 23, 42, 0.66);
	text-align: center;
}

.auth-form-note[hidden] {
	display: none;
}

/* ==========================================================================
   Prepaint guard — auth-dependent topbar controls stay invisible until the
   cached auth state is applied (kills the guest→signed-in flash on reload).
   Layout space is preserved: visibility, not display.
   ========================================================================== */

html.preauth .topbar__controls {
	visibility: hidden;
}

/* Language menu must never paint open on load/bfcache restore */
.lang-switcher__menu[hidden] {
	display: none !important;
}

/* ==========================================================================
   Global bilingual content blocks (same contract as login/legal pages).
   Wrap copy as <span class="i18n-en">…</span><span class="i18n-ru">…</span>;
   html[lang] decides which renders. display:contents keeps inner markup
   (br/strong/links) participating in the parent layout.
   ========================================================================== */
.i18n-en,
.i18n-ru,
.i18n-es,
.i18n-de,
.i18n-fr,
.i18n-pt,
.i18n-it,
.i18n-ja,
.i18n-ko,
.i18n-zh {
	display: none;
}

html[lang="en"] .i18n-en,
html[lang="ru"] .i18n-ru,
html[lang="es"] .i18n-es,
html[lang="de"] .i18n-de,
html[lang="fr"] .i18n-fr,
html[lang="pt"] .i18n-pt,
html[lang="it"] .i18n-it,
html[lang="ja"] .i18n-ja,
html[lang="ko"] .i18n-ko,
html[lang="zh"] .i18n-zh,
html:not([lang="en"]):not([lang="ru"]):not([lang="es"]):not([lang="de"]):not([lang="fr"]):not([lang="pt"]):not([lang="it"]):not([lang="ja"]):not([lang="ko"]):not([lang="zh"]) .i18n-en {
	display: contents;
}

/* ==========================================================================
   Final CTA — centered minimal (badge → headline → sub → one button → meta)
   ========================================================================== */
.install-final {
	max-width: 820px;
	margin-inline: auto;
	padding: var(--section-pad) var(--container-inline);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.install-final__badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.install-final h2 {
	margin: 24px 0 16px;
	font-size: clamp(2.3rem, 4.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--ink);
	max-width: 18ch;
}

.install-final__sub {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--muted);
}

.install-final__cta {
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 32px;
	border-radius: var(--radius-pill);
	background: #0a0a0a;
	color: #ffffff;
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) ease;
}

.install-final__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(10, 10, 10, 0.22);
}

/* Sunrise horizon: a wide arc rising from the bottom of the section with a
   soft brand-blue glow and the Tenvilo mark perched on its crest. */
.install-final {
	padding-bottom: 0;
}

.install-final__horizon {
	position: relative;
	/* Break out of the 820px copy column: the flex parent centers items,
	   so a 100vw child lands exactly on the viewport. */
	width: 100vw;
	height: 190px;
	margin-top: 48px;
	overflow: hidden;
	pointer-events: none;
}

/* Ambient glow behind the arc */
.install-final__horizon::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -40px;
	transform: translateX(-50%);
	width: min(92vw, 980px);
	height: 300px;
	background: radial-gradient(
		ellipse 50% 100% at 50% 100%,
		rgba(2, 144, 255, 0.22),
		rgba(2, 144, 255, 0.08) 45%,
		transparent 72%
	);
}

/* The arc itself: top edge of a huge circle */
.install-final__horizon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 56px;
	transform: translateX(-50%);
	width: max(150vw, 1600px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 30%, var(--canvas) 60%);
	border: 1px solid rgba(2, 144, 255, 0.28);
	box-shadow:
		0 -18px 44px -18px rgba(2, 144, 255, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.install-final__horizon-mark {
	position: absolute;
	left: 50%;
	top: 56px;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #0a0a0a;
	box-shadow:
		0 0 0 6px #ffffff,
		0 10px 30px rgba(10, 10, 10, 0.18);
}

@media (max-width: 720px) {
	.install-final__horizon {
		height: 140px;
		margin-top: 36px;
	}
}

/* ---------- Account settings modal ---------- */
body.settings-modal-open {
	overflow: hidden;
}

.settings-modal[hidden] {
	display: none;
}

.settings-modal {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 160ms ease;
}

.settings-modal.is-open {
	opacity: 1;
}

.settings-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(245, 246, 248, 0.78);
	backdrop-filter: blur(5px);
}

.settings-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	width: min(740px, calc(100vw - 48px));
	min-height: 480px;
	max-height: min(620px, calc(100vh - 48px));
	overflow: hidden;
	border: 1px solid #d9dde4;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
	transform: translateY(8px) scale(0.985);
	transition: transform 160ms ease;
}

.settings-modal.is-open .settings-modal__dialog {
	transform: translateY(0) scale(1);
}

.settings-modal__close {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #111827;
	transition: background-color var(--duration-fast) var(--ease);
}

.settings-modal__close:hover,
.settings-modal__close:focus-visible {
	background: #f1f3f6;
}

.settings-modal__close svg {
	width: 20px;
	height: 20px;
}

.settings-modal__sidebar {
	padding: 64px 16px 16px;
	border-right: 1px solid #e5e7eb;
	background: #fbfbfc;
}

.settings-modal__brand {
	display: block;
	padding: 0 12px 16px;
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #111827;
}

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

.settings-modal__nav {
	display: grid;
	gap: 4px;
}

.settings-modal__nav button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #374151;
	font: inherit;
	font-size: 0.94rem;
	font-weight: 500;
	text-align: left;
	transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.settings-modal__nav button:hover {
	background: #f0f1f3;
	color: #111827;
}

.settings-modal__nav button[aria-selected="true"] {
	background: #ececef;
	color: #111827;
}

.settings-modal__nav svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.settings-modal__content {
	overflow: auto;
	padding: 28px 28px 32px;
}

.settings-modal__panel h2 {
	margin: 0 0 28px;
	padding-right: 44px;
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: -0.03em;
	color: #111827;
}

.settings-account-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #ffffff;
}

.settings-account-card__avatar {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #111827;
	background-position: center;
	background-size: cover;
	color: #ffffff;
	font-size: 0.84rem;
	font-weight: 700;
}

.settings-account-card__identity {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.settings-account-card__identity strong {
	overflow: hidden;
	font-size: 0.98rem;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #111827;
}

.settings-account-card__identity span {
	overflow: hidden;
	font-size: 0.86rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6b7280;
}

.settings-list {
	margin-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.settings-list > div {
	display: grid;
	grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	min-height: 58px;
	border-bottom: 1px solid #e5e7eb;
}

.settings-list span {
	font-size: 0.9rem;
	color: #4b5563;
}

.settings-list strong {
	overflow: hidden;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #111827;
}

.settings-danger-button {
	margin-top: 24px;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid #f0caca;
	border-radius: 10px;
	background: #fff;
	color: #b42318;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.settings-danger-button:hover {
	border-color: #eaa6a6;
	background: #fff5f5;
}

.settings-plan-card {
	padding: 20px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
}

.settings-plan-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.settings-plan-card__head > div {
	display: grid;
	gap: 4px;
}

.settings-plan-card__head span {
	font-size: 0.82rem;
	color: #6b7280;
}

.settings-plan-card__head strong {
	font-size: 1.12rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #111827;
}

.settings-plan-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: #edf6ff;
	color: #0272ce !important;
	font-size: 0.78rem !important;
	font-weight: 650;
}

.settings-list--plan {
	margin-top: 20px;
}

.settings-plan-note {
	margin: 16px 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: #6b7280;
}

.settings-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.settings-plan-actions .button {
	min-height: 42px;
	padding: 0 16px;
	border-radius: 10px;
}

@media (max-width: 720px) {
	.settings-modal {
		padding: 12px;
		place-items: stretch;
	}

	.settings-modal__dialog {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		width: 100%;
		min-height: 0;
		max-height: calc(100vh - 24px);
	}

	.settings-modal__close {
		top: 12px;
		left: 12px;
	}

	.settings-modal__sidebar {
		padding: 56px 12px 12px;
		border-right: 0;
		border-bottom: 1px solid #e5e7eb;
	}

	.settings-modal__brand {
		display: none;
	}

	.settings-modal__nav {
		grid-template-columns: 1fr 1fr;
	}

	.settings-modal__nav button {
		justify-content: center;
	}

	.settings-modal__content {
		padding: 24px 16px 28px;
	}

	.settings-modal__panel h2 {
		margin-bottom: 20px;
	}

	.settings-list > div {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 12px 0;
	}

	.settings-list strong {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.settings-modal,
	.settings-modal__dialog,
	.mobile-site-menu,
	.mobile-site-menu-toggle,
	.mobile-site-menu-toggle__icon {
		transition: none;
	}
}

/* Account menu must be able to extend below the fixed 60px navbar. */
.page-shell .site-topbar {
	contain: none !important;
}

.page-shell .topbar__account-wrap,
.page-shell .topbar__account-menu {
	z-index: 1100;
}

/* Active subscriptions are managed from Settings; current/incompatible pricing CTAs stay inert. */
#plans [data-checkout-button].is-current-plan,
#plans [data-checkout-button].is-unavailable-plan {
	cursor: default !important;
	pointer-events: none !important;
	background: #eef0f3 !important;
	border-color: #e1e4e8 !important;
	color: #717784 !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* Email auth modes: quiet secondary actions + stable mode transitions. */
.auth-page__secondary-action,
.auth-page__text-action {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	color: #171717;
	cursor: pointer;
}

.auth-page__secondary-action {
	min-height: 42px;
	margin-top: -4px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		opacity 150ms ease,
		transform 150ms ease;
}

.auth-page__secondary-action:hover:not(:disabled) {
	background: #f5f6f8;
}

.auth-page__secondary-action:active:not(:disabled) {
	transform: translateY(1px);
}

.auth-page__secondary-action:focus-visible,
.auth-page__text-action:focus-visible {
	outline: 2px solid rgba(79, 94, 240, 0.34);
	outline-offset: 2px;
}

.auth-page__secondary-action:disabled {
	cursor: default;
	opacity: 0.5;
}

.auth-page__secondary-action--back {
	color: rgba(71, 85, 105, 0.8);
	font-weight: 500;
}

.auth-page__text-action {
	padding: 0;
	font-weight: 600;
	text-decoration: none;
}

.auth-page__text-action:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.auth-page__code-input {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.auth-page__field input[readonly] {
	background: #f8fafc;
	color: #64748b;
}

.auth-form-note[data-state="info"] {
	color: rgba(51, 65, 85, 0.82);
}

.auth-form-note[data-state="error"] {
	color: #b42318;
}

.auth-page__form.auth-mode-swap > :not([hidden]) {
	animation: authModeFade 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-page__form.is-submitting {
	cursor: progress;
}

.auth-page__form.is-submitting .auth-page__submit {
	opacity: 0.72;
}

@keyframes authModeFade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-page__form.auth-mode-swap > :not([hidden]) {
		animation: none;
	}
	.auth-page__secondary-action {
		transition: none;
	}
}

/* Author display rules must never override the semantic hidden state used by auth modes. */
.auth-page__field[hidden],
.auth-page__google[hidden],
.auth-page__divider[hidden],
.auth-page__links[hidden],
.auth-page__secondary-action[hidden] {
	display: none !important;
}