/* ============================================================
   Self-hosted Inter Tight (variable) - replaces Google Fonts.
   Font files live at /fonts/inter/ on the server.
   LATIN SUBSET (53KB vs 234KB full) - built with fontTools from
   fonts/inter-tight/*.ttf; rerun the subset if glyphs are missing.
   ============================================================ */
@font-face {
	font-family: 'Inter Tight';
	src: url('/fonts/inter/InterTight-Latin-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url('/fonts/inter/InterTight-Latin-Italic-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ===================================================================
	   2026 DESIGN SYSTEM, mrc brand
	   =================================================================== */
	:root {
		--ink: #1a1a1c;
		--body: #5b6470;
		--muted: #8a929c;
		--line: #e8eaef;
		--accent: #006478;       /* mrc teal */
		--accent-dk: #00485a;
		--accent-tint: #e7f2f4;
		--cyan: #2dd4bf;
		--btn-ink: #2046ae;       /* m-Power blue (primary buttons) */
		--bg-soft: #f4f5f8;
		--bg-soft-2: #f0f2f6;
		--radius: 22px;
	}

	body {
		font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		color: var(--body);
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background: #fff;
	}

	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 {
		font-family: 'Inter Tight', sans-serif;
		color: var(--ink);
		font-weight: 500;
		letter-spacing: -0.02em;
		line-height: 1.15;
	}

	p { line-height: 1.65; }

	.accent { color: var(--accent); }
	.text-ink { color: var(--ink) !important; }

	/* ---- Layout rhythm ---- */
	.sec { padding: clamp(4rem, 9vw, 7.5rem) 0; }
	.sec-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
	.bg-soft { background: var(--bg-soft); }
	.bg-soft-2 { background: var(--bg-soft-2); }
	.bg-white { background: #fff; }
	.border-b-line { border-bottom: 1px solid var(--line); }
	.bg-ink { background: var(--ink); color: rgba(255,255,255,.78); }
	.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink h5 { color: #fff; }

	/* Dark feature band with interest: ink base + faint dot texture (masked to fade)
	   + a soft cyan glow, mirroring the hero / v3-cta treatment. Header text goes
	   light; white and gradient bento cards sit on top unchanged. The m-Power (.u-69)
	   highlight is re-colored to cyan ONLY in the header, where it would otherwise be
	   too dark on ink; inside the light cards it keeps its normal color. Added 7/23. */
	.bg-ink-fx { background: var(--ink); position: relative; overflow: hidden; }
	.bg-ink-fx::before {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
		background-size: 26px 26px;
		-webkit-mask-image: radial-gradient(ellipse 100% 85% at 50% 0%, #000 22%, transparent 80%);
		mask-image: radial-gradient(ellipse 100% 85% at 50% 0%, #000 22%, transparent 80%);
	}
	.bg-ink-fx::after {
		content: ""; position: absolute; top: -180px; right: -100px; width: 540px; height: 380px;
		border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.24), transparent 66%);
		filter: blur(64px); pointer-events: none;
	}
	.bg-ink-fx > .container { position: relative; z-index: 1; }
	.bg-ink-fx .sec-head h2 { color: #fff; }
	.bg-ink-fx .sec-head p { color: rgba(255,255,255,.72); }
	.bg-ink-fx .sec-head .u-69 { color: var(--cyan); }

	.sec-head { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
	.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.035em; }
	.sec-head p { font-size: 1.13rem; color: var(--body); max-width: 620px; margin: 0 auto; }
	.sec-head p + p { margin-top: 1rem; }
	/* Wider variant for text-heavy intros (video-series pages); the base 720px
	   container otherwise caps child paragraphs no matter their own max-width. */
	.sec-head-wide { max-width: 900px; }

	/* ---- Pill eyebrow (teal) ---- */
	.pill-eyebrow {
		display: inline-flex; align-items: center; gap: .5rem;
		background: var(--accent-tint); color: var(--accent-dk);
		font-size: .78rem; font-weight: 600; letter-spacing: .04em;
		text-transform: uppercase;
		padding: .42rem .95rem; border-radius: 999px;
		margin-bottom: 1.3rem;
	}
	.pill-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
	.bg-ink .pill-eyebrow { background: rgba(45,212,191,.12); color: var(--cyan); }
	.bg-ink .pill-eyebrow::before { background: var(--cyan); }
	/* soft/ivory eyebrow (no dot) - the quiet neutral variant for centered
	   section headers, adapted from the Nexsas "More features" pill */
	.eyebrow-soft {
		display: inline-block; background: #f0efe9; color: #6b6b60;
		font-size: .78rem; font-weight: 600; letter-spacing: .02em;
		padding: .42rem 1.05rem; border-radius: 999px; margin-bottom: 1.3rem;
	}

	/* ---- Centered feature trio (line-art icon on top) ----
	   Adapted 7/2 from the Nexsas "Featured guides" block: centered icon,
	   title, description in a 3-up (or N-up) row. Icons are thin line-art
	   SVGs (currentColor stroke) so they inherit --ink and stay crisp. */
	.feat-center { text-align: center; padding: 0 1rem; }
	.feat-center .fc-icon {
		width: 56px; height: 56px; margin: 0 auto 1.4rem;
		color: var(--ink); display: flex; align-items: center; justify-content: center;
	}
	.feat-center .fc-icon svg { width: 100%; height: 100%; display: block; }
	.feat-center h3 { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-bottom: .55rem; letter-spacing: -0.01em; }
	.feat-center p { font-size: .97rem; color: var(--body); line-height: 1.6; margin: 0; max-width: 34ch; margin-left: auto; margin-right: auto; }
	.feat-center .fc-icon.accent { color: var(--accent); }
	/* left-aligned variant (for flanking columns, not centered rows) */
	.feat-center.left { text-align: left; padding: 0; }
	.feat-center.left .fc-icon { margin-left: 0; width: 46px; height: 46px; margin-bottom: 1rem; }
	.feat-center.left h3 { font-size: 1.15rem; }
	.feat-center.left p { margin-left: 0; margin-right: 0; max-width: none; }

	/* ---- Feature flank (features either side of a central visual) ----
	   Adapted 7/2 from the Nexsas mortgage "why choose us": a product visual
	   centered, feature blocks stacked down the left and right. Collapses to a
	   single column (visual first) on mobile. */
	.feature-flank { display: grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
	.feature-flank .ff-col { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
	.feature-flank .ff-visual { display: flex; justify-content: center; }
	.feature-flank .ff-visual img { max-width: 100%; height: auto; }
	@media (max-width: 900px) {
		.feature-flank { grid-template-columns: 1fr; }
		.feature-flank .ff-visual { order: -1; margin-bottom: 1rem; }
	}
	/* soft panel container - near-white rounded card, no border/shadow, meant
	   to sit on a .bg-soft band (the Nexsas "community" cards). Wrap anything;
	   pairs naturally with .feat-center for a boxed centered trio. */
	.panel-soft {
		background: #fff; border-radius: 20px; padding: clamp(2rem, 3.5vw, 2.75rem);
		height: 100%; transition: box-shadow .3s ease, transform .3s ease;
	}
	.panel-soft:hover { box-shadow: 0 16px 38px rgba(15,30,45,.07); transform: translateY(-3px); }
	.panel-soft .feat-center { padding: 0; }

	/* Rounded tinted icon tile for option cards (bigger, clearly spaced from the
	   heading). Icons keep their own inline stroke colors. Added 7/23. */
	.svc-icon {
		width: 60px; height: 60px; border-radius: 16px; background: var(--accent-tint);
		display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
	}
	.svc-icon svg { width: 30px; height: 30px; display: block; }

	/* ---- Soft CTA panel with squiggle accents ----
	   Adapted 7/2 from the Nexsas "Speed up compliance" box: light gray
	   rounded panel, generous padding, decorative gradient squiggles in two
	   corners (recreated as inline SVG in mrc teal->cyan, not their lime),
	   centered copy + dark pill. The light-mode counterpart to .v3-cta. */
	.cta-soft {
		position: relative; overflow: hidden;
		background: #eceeed; border-radius: 28px;
		padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem; text-align: center;
	}
	.cta-soft .cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
	.cta-soft h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; color: var(--ink); margin-bottom: 1rem; letter-spacing: -0.025em; }
	.cta-soft p { color: var(--body); font-size: 1.1rem; max-width: 470px; margin: 0 auto 2rem; }
	.cta-squiggle { position: absolute; z-index: 1; pointer-events: none; width: clamp(120px, 16vw, 210px); height: auto; opacity: .9; }
	.cta-squiggle.tr { top: 9%; right: 3%; }
	.cta-squiggle.bl { bottom: 9%; left: 3%; transform: rotate(180deg); }

	/* "Proudly built and supported" trust pill */
	.built-pill {
		display: inline-flex; align-items: center; gap: .6rem;
		background: var(--accent-tint); color: var(--accent-dk);
		font-size: 1rem; font-weight: 600;
		padding: .7rem 1.45rem; border-radius: 999px;
		border: 1px solid rgba(0,100,120,.18);
	}
	.built-pill i { color: var(--accent); font-size: 1.05rem; }

	/* ---- Pill buttons ---- */
	.btn-pill {
		display: inline-flex; align-items: center; gap: .55rem;
		font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1rem;
		padding: .85rem 1.7rem; border-radius: 999px;
		text-decoration: none; border: 1px solid transparent;
		transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
		cursor: pointer; line-height: 1;
	}
	.btn-ink { background: var(--btn-ink); color: #fcfcfc; }
	.btn-ink:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(32,70,174,.30); }
	.btn-teal { background: #2046ae; color: #fff; }
	.btn-teal:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(32,70,174,.30); }
	.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
	.btn-ghost:hover { color: var(--ink); border-color: #cfd5dd; transform: translateY(-2px); }
	.btn-ghost .play { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; }
	.btn-ghost .play .fa { position: relative; left: 1.5px; }
	.bg-ink .btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
	.v3-hero .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(26,26,28,.3); }
	.v3-hero .btn-ghost:hover { background: rgba(255,255,255,.4); border-color: rgba(26,26,28,.5); }
	.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

	/* ===================== HERO ===================== */
	/* shared hero + logo backdrop: one confident tinted block with depth,
	   meeting the white customer-proof section below for clean separation. */
	.hero-wrap {
		position: relative;
		overflow: hidden;
		background:
			radial-gradient(58% 55% at 86% -8%, rgba(45,212,191,.32), transparent 60%),
			radial-gradient(52% 50% at 2% 104%, rgba(32,100,174,.16), transparent 62%),
			linear-gradient(180deg, #e4f2f4 0%, #f1f9fa 56%, #e9f5f7 100%);
	}
	.v3-hero {
		position: relative;
		padding: clamp(6rem, 9vw, 9.5rem) 0 0;
		background: transparent;
	}
	/* dotted grid texture */
	.v3-hero::before {
		content: ""; position: absolute; inset: 0; z-index: 0;
		background-image: radial-gradient(rgba(0,100,120,.17) 1px, transparent 1px);
		background-size: 28px 28px;
		-webkit-mask-image: radial-gradient(ellipse 85% 72% at 50% 32%, #000 16%, transparent 78%);
		mask-image: radial-gradient(ellipse 85% 72% at 50% 32%, #000 16%, transparent 78%);
	}
	/* soft ambient glow */
	.v3-hero::after {
		content: ""; position: absolute; z-index: 0; top: -140px; left: 50%; transform: translateX(-50%);
		width: 900px; height: 480px; border-radius: 50%;
		background: radial-gradient(circle, rgba(0,100,120,.12), transparent 68%);
		filter: blur(50px);
	}
	.v3-hero .container { position: relative; z-index: 2; }
	.v3-hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 1.4rem; }
	.v3-hero .hero-sub { font-size: 1.3rem; color: #3d4750; max-width: 860px; margin: 0 auto 2.2rem; }
	.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

	/* hero product visual: browser-framed, slightly tilted, cycles through real apps */
	.hero-shot {
		max-width: 940px;
		margin: clamp(1.5rem, 3vw, 3rem) auto 0;
		perspective: 1700px;
		position: relative; z-index: 3;
	}
	.hero-shot .device-frame {
		transform: rotateX(7deg);
		transform-origin: center top;
		box-shadow: 0 55px 100px rgba(15,30,45,.22), 0 14px 34px rgba(15,30,45,.10);
	}
	.hero-shot .dscreen { padding: 0; }
	.hero-shot .dscreen img { width: 100%; display: block; }
	@media (max-width: 991px) { .hero-shot .device-frame { transform: none; } }

	/* ---- Coded example app shown in the hero frame (modern business UI) ---- */
	.ui-app { display: flex; min-height: 430px; background: #f6f8fb; text-align: left; color: var(--ink); }
	.ui-side { width: 196px; flex-shrink: 0; background: #0e2a33; padding: 1.05rem .85rem; }
	.ui-brand { display: flex; align-items: center; gap: .5rem; padding: .15rem .4rem 1.2rem; }
	.ui-brand .dot { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--cyan), var(--accent)); }
	.ui-brand b { color: #fff; font-size: .88rem; font-weight: 600; }
	.ui-nav { display: flex; flex-direction: column; gap: .12rem; }
	.ui-nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px; color: rgba(255,255,255,.6); font-size: .81rem; font-weight: 500; }
	.ui-nav a .fa { width: 15px; font-size: .8rem; text-align: center; }
	.ui-nav a.active { background: rgba(109,213,237,.16); color: #fff; }
	.ui-main { flex: 1; min-width: 0; padding: 1.05rem 1.25rem; }
	.ui-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
	.ui-top h3 { font-size: 1.02rem; font-weight: 600; margin: 0; }
	.ui-top .right { display: flex; align-items: center; gap: .55rem; }
	.ui-pill { font-size: .71rem; font-weight: 500; color: var(--body); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; }
	.ui-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2046AE, var(--accent)); }
	.ui-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-bottom: .9rem; }
	.ui-kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .75rem .8rem; }
	.ui-kpi .k { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
	.ui-kpi .v { font-size: 1.2rem; font-weight: 700; margin: .22rem 0 .12rem; letter-spacing: -.01em; }
	.ui-kpi .t { font-size: .7rem; font-weight: 600; }
	.ui-kpi .t.up { color: #16a34a; }
	.ui-kpi .t.down { color: #dc2626; }
	.ui-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: .75rem; }
	.ui-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85rem .95rem; }
	.ui-card .ch { font-size: .78rem; font-weight: 600; margin-bottom: .85rem; }
	.ui-chart { display: flex; align-items: flex-end; gap: .45rem; height: 112px; }
	.ui-chart b { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--cyan), var(--accent)); }
	.ui-list { display: flex; flex-direction: column; gap: .5rem; }
	.ui-row { display: flex; align-items: center; justify-content: space-between; font-size: .77rem; }
	.ui-row .nm { color: var(--ink); font-weight: 500; }
	.ui-tag { font-size: .64rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px; }
	.ui-tag.green { background: rgba(22,163,74,.12); color: #16a34a; }
	.ui-tag.amber { background: rgba(180,83,9,.14); color: #b45309; }
	.ui-tag.blue { background: rgba(32,100,174,.12); color: #2046AE; }
	@media (max-width: 767px) {
		.ui-side { display: none; }
		.ui-kpis { grid-template-columns: repeat(2, 1fr); }
		.ui-grid2 { grid-template-columns: 1fr; }
	}

	/* ---- Fanned arc of five example apps below the hero ----
	   landscape app windows, bottom-aligned and overlapping; heights run
	   tall/mid/short/mid/tall so the tops trace a shallow semicircle. */
	.hero-fan {
		position: relative; z-index: 5;
		display: flex; justify-content: center; align-items: flex-end;
		margin: clamp(2rem, 4vw, 3.5rem) 0 0;
		padding: 70px 0 0;
		overflow: hidden;
	}
	/* the slit: a thin slot spanning past the cards that their bottoms disappear into */
	/* soft shadow rising from the slit, kept to the card area so it doesn't spread wide */
	.hero-fan::before {
		content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
		width: 1352px; max-width: 100%; height: 22px;
		background: linear-gradient(180deg, transparent, rgba(7,38,48,.16));
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
		pointer-events: none; z-index: 6;
	}
	.hero-fan::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
		background: linear-gradient(90deg, transparent, rgba(7,38,48,.4) 16%, rgba(7,38,48,.4) 84%, transparent);
		pointer-events: none; z-index: 7;
	}
	.fan-card {
		width: 352px; flex-shrink: 0;
		margin-bottom: -30px;
		background: #fff; border: 1px solid var(--line); border-radius: 12px;
		box-shadow: 0 34px 64px rgba(15,30,45,.17), 0 8px 22px rgba(15,30,45,.07);
		overflow: hidden; text-align: left;
	}
	.fan-card + .fan-card { margin-left: -102px; }
	.fan-card:nth-child(1) { z-index: 1; height: 322px; }
	.fan-card:nth-child(2) { z-index: 2; height: 284px; }
	.fan-card:nth-child(3) { z-index: 3; height: 250px; }
	.fan-card:nth-child(4) { z-index: 2; height: 284px; }
	.fan-card:nth-child(5) { z-index: 1; height: 322px; }
	/* gentle staggered float — small enough that bottoms stay tucked in the slit */
	@keyframes fanFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
	.fan-card { animation: fanFloat 6.5s ease-in-out infinite; }
	.fan-card:nth-child(2) { animation-delay: .9s; }
	.fan-card:nth-child(3) { animation-delay: 1.8s; }
	.fan-card:nth-child(4) { animation-delay: 2.7s; }
	.fan-card:nth-child(5) { animation-delay: 3.6s; }
	@media (prefers-reduced-motion: reduce) { .fan-card { animation: none; } }
	.fan-card .fbar { display: flex; gap: .3rem; align-items: center; padding: .45rem .55rem; background: #fbfcfd; border-bottom: 1px solid var(--line); }
	.fan-card .fbar span { width: 7px; height: 7px; border-radius: 50%; background: #dfe4ea; }
	.fan-card .fbody { padding: .75rem .8rem; display: flex; flex-direction: column; gap: .52rem; }
	.fc-h { font-size: .74rem; font-weight: 600; color: var(--ink); }
	.fc-kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
	.fc-kpi { background: #f6f8fb; border: 1px solid var(--line); border-radius: 7px; padding: .4rem .45rem; }
	.fc-kpi .v { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
	.fc-kpi .k { font-size: .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
	.fc-chart { display: flex; align-items: flex-end; gap: .24rem; height: 62px; }
	.fc-chart b { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cyan), var(--accent)); }
	.fc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
	.fc-tile { display: flex; align-items: center; gap: .45rem; background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .6rem; font-size: .66rem; font-weight: 600; color: var(--ink); }
	.fc-tile i { width: 20px; height: 20px; border-radius: 6px; background: rgba(0,100,120,.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .58rem; flex-shrink: 0; }
	.fc-chat { display: flex; flex-direction: column; gap: .35rem; }
	.fc-aih { display: flex; align-items: center; gap: .4rem; }
	.fc-aih .ic { width: 19px; height: 19px; border-radius: 5px; background: rgba(0,100,120,.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .6rem; }
	.fc-aih b { font-size: .68rem; font-weight: 600; color: var(--ink); }
	.fc-msg { font-size: .64rem; line-height: 1.32; padding: .42rem .55rem; border-radius: 10px; max-width: 92%; }
	.fc-msg.in { background: #f0f2f6; color: var(--ink); align-self: flex-start; border-bottom-left-radius: 3px; }
	.fc-msg.out { background: linear-gradient(135deg, var(--accent), #2046AE); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
	.fc-table { width: 100%; border-collapse: collapse; font-size: .62rem; }
	.fc-table th { text-align: left; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .52rem; letter-spacing: .03em; padding: .3rem .35rem; border-bottom: 1px solid var(--line); }
	.fc-table td { padding: .34rem .35rem; border-bottom: 1px solid var(--line); color: var(--ink); }
	.fc-table tr:last-child td { border-bottom: none; }
	.fc-tag { font-size: .48rem; font-weight: 600; padding: .1rem .38rem; border-radius: 999px; }
	.fc-tag.green { background: rgba(22,163,74,.12); color: #16a34a; }
	.fc-tag.amber { background: rgba(180,83,9,.14); color: #b45309; }
	.fc-tag.blue { background: rgba(32,100,174,.12); color: #2046AE; }
	.fc-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .5rem; }
	.fc-field { display: flex; flex-direction: column; gap: .18rem; }
	.fc-field label { font-size: .54rem; color: var(--muted); }
	.fc-field .inp { height: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfd; }
	.fc-btn { margin-top: .15rem; height: 28px; border-radius: 7px; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
	@media (max-width: 991px) {
		.hero-fan { padding: 0; }
		.fan-card { display: none; }
		.fan-card:nth-child(3) { display: block; height: auto; width: 340px; max-width: 92vw; margin-left: 0; }
	}

	/* ---- Tilted product mockup ---- */
	.mock-wrap { position: relative; margin-top: clamp(3rem, 6vw, 5rem); perspective: 1600px; }
	.mock {
		max-width: 880px; margin: 0 auto; background: #fff; border-radius: 16px;
		border: 1px solid var(--line);
		box-shadow: 0 50px 90px rgba(15,30,45,.18), 0 10px 30px rgba(15,30,45,.08);
		overflow: hidden;
		transform: rotateX(7deg); transform-origin: center top;
	}
	.mock-bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: #fbfcfd; }
	.mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #dfe4ea; }
	.mock-bar .url { margin-left: 1rem; height: 22px; flex: 1; max-width: 340px; border-radius: 6px; background: #eef1f5; }
	.mock-body { display: flex; min-height: 320px; }
	.mock-side { width: 210px; border-right: 1px solid var(--line); padding: 1.1rem; background: #fbfcfd; }
	.mock-side .row { display: flex; align-items: center; gap: .6rem; padding: .5rem .4rem; border-radius: 8px; margin-bottom: .25rem; }
	.mock-side .row.active { background: var(--accent-tint); }
	.mock-side .dot { width: 22px; height: 22px; border-radius: 6px; background: #e4e8ee; flex-shrink: 0; }
	.mock-side .row.active .dot { background: var(--accent); }
	.mock-side .ln { height: 9px; border-radius: 4px; background: #e4e8ee; flex: 1; }
	.mock-side .row.active .ln { background: rgba(0,100,120,.35); }
	.mock-main { flex: 1; padding: 1.4rem 1.5rem; }
	.mock-main .title { height: 14px; width: 38%; border-radius: 5px; background: var(--ink); margin-bottom: 1.3rem; }
	.mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-bottom: 1.5rem; }
	.mock-cards .c { border: 1px solid var(--line); border-radius: 11px; padding: .9rem; }
	.mock-cards .c .k { height: 8px; width: 60%; background: #e4e8ee; border-radius: 4px; margin-bottom: .6rem; }
	.mock-cards .c .v { height: 16px; width: 80%; background: var(--ink); border-radius: 4px; }
	.mock-cards .c.teal .v { background: var(--accent); }
	.mock-chart { display: flex; align-items: flex-end; gap: .55rem; height: 120px; padding-top: .5rem; border-top: 1px solid var(--line); }
	.mock-chart b { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--cyan), var(--accent)); display: block; }
	.mock-chip {
		position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px;
		box-shadow: 0 16px 34px rgba(15,30,45,.14);
		padding: .6rem .9rem; display: flex; align-items: center; gap: .55rem;
		font-size: .85rem; font-weight: 600; color: var(--ink); z-index: 4;
	}
	.mock-chip i { color: var(--accent); }
	.mock-chip.c1 { top: 8%; left: 2%; }
	.mock-chip.c2 { bottom: 16%; left: -1%; }
	.mock-chip.c3 { top: 34%; right: 1%; }
	@media (max-width: 991px) {
		.mock { transform: none; }
		.mock-side { width: 130px; }
		.mock-chip { display: none; }
	}

	/* ---- Hero orbit ring: requests sit ALWAYS-ON, evenly along an OVAL ---- */
	/* Oval (wider than tall) so the hero copy keeps its natural width. */
	.hero-ring {
		position: relative; z-index: 2;
		width: var(--ovw, 1180px);
		height: var(--ovh, 540px);
		margin: 0 auto;
		display: flex; align-items: center; justify-content: center;
	}
	/* the ellipse the bubbles sit on — line hidden, bubbles still trace the oval */
	.ring-line {
		position: absolute; inset: 0; z-index: 1;
		border-radius: 50%;
		border: 1.5px dashed transparent;
	}
	.ring-line::before {
		content: ""; position: absolute; inset: 8%;
		border-radius: 50%;
		background: radial-gradient(ellipse at 50% 46%, rgba(45,212,191,.05), transparent 62%);
	}
	/* centered hero copy at its natural width (unchanged formatting) */
	.hero-core { position: relative; z-index: 3; max-width: 940px; }

	/* bubble layer sits exactly over the ring box; bubbles are centered on
	   their circle point via translate(-50%,-50%). R = half of --ring. */
	.hero-float { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
	.req-bubble {
		position: absolute;
		transform: translate(-50%, -50%);
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 16px;
		padding: .65rem .95rem;
		font-size: .88rem;
		font-weight: 600;
		color: var(--ink);
		line-height: 1.3;
		width: max-content;
		max-width: 180px;
		box-shadow: 0 14px 30px rgba(0,30,40,.14);
		opacity: 0;
		animation: reqCycle 52s ease-in-out infinite;
	}
	.req-bubble i { color: var(--accent); margin-right: .4rem; }
	/* 8 evenly spaced clock positions on the ellipse (they ride the box edge,
	   so the same %s that trace a circle trace the oval). Diagonal % = 14.65 / 85.35.
	   AI questions (r1, r3, r5) are spread 90deg apart so they never bunch. */
	.req-bubble.r1 { top: 0%;     left: 50%; }    /* 12:00 - AI strategy   */
	.req-bubble.r2 { top: 4%; left: 88%; } /* 1:30  - reporting     */
	.req-bubble.r3 { top: 50%;    left: 100%; }   /* 3:00  - AI chatbots   */
	.req-bubble.r4 { top: 85.35%; left: 85.35%; } /* 4:30  - portal        */
	.req-bubble.r5 { top: 100%;   left: 50%; }    /* 6:00  - AI over data  */
	.req-bubble.r6 { top: 85.35%; left: 14.65%; } /* 7:30  - mobile        */
	.req-bubble.r7 { top: 50%;    left: 0%; }     /* 9:00  - dashboard     */
	.req-bubble.r8 { top: 4%; left: 12%; } /* 10:30 - automate      */

	/* one at a time: each fades in, holds ~4s (extended +1s 7/2), fades out,
	   then the next appears. 8 slots x 6.5s = 52s cycle.
	   Reveal order hops around the oval (not clockwise) so it feels lively. */
	.req-bubble.r1 { animation-delay: 0s; }   /* 12:00 */
	.req-bubble.r4 { animation-delay: 6.5s; }   /* 4:30  */
	.req-bubble.r7 { animation-delay: 13s; }   /* 9:00  */
	.req-bubble.r2 { animation-delay: 19.5s; }   /* 1:30  */
	.req-bubble.r5 { animation-delay: 26s; }   /* 6:00  */
	.req-bubble.r8 { animation-delay: 32.5s; }  /* 10:30 */
	.req-bubble.r3 { animation-delay: 39s; }  /* 3:00  */
	.req-bubble.r6 { animation-delay: 45.5s; }  /* 7:30  */
	@keyframes reqCycle {
		0%    { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
		2.7%  { opacity: .75; transform: translate(-50%, -50%) scale(1); } /* fade in (1.4s) */
		10.4% { opacity: .75; transform: translate(-50%, -50%) scale(1); } /* hold (~4s) */
		12.5% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } /* fade out (1.1s) */
		100%  { opacity: 0; transform: translate(-50%, -50%) scale(.9); } /* wait its turn */
	}
	@media (prefers-reduced-motion: reduce) {
		.req-bubble { animation: none; opacity: 1; }
	}

	/* Below ~1360px there isn't room for the oval + outer bubbles: drop it,
	   stack the copy normally. */
	@media (max-width: 1359px) {
		.hero-ring { width: 100%; height: auto; }
		.ring-line, .hero-float { display: none; }
		.hero-core { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; }
	}

	/* ---- Credibility stat bar (flat band under the hero) ---- */
	.sec-stats { background: #fff; border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
	.cred {
		display: grid; grid-template-columns: repeat(4, 1fr);
	}
	.cred .item { text-align: center; padding: 1.8rem 1rem; position: relative; }
	.cred .item + .item::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
	.cred .num { font-size: 2.4rem; font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
	.cred .lbl { font-size: .82rem; color: var(--body); margin-top: .55rem; }
	@media (max-width: 767px) {
		.cred { grid-template-columns: repeat(2,1fr); }
		.cred .item:nth-child(odd)::before { display: none; }
	}

	/* ---- Generic soft card ---- */
	.card-soft {
		background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
		padding: 2rem 1.85rem; height: 100%;
		transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
	}
	.card-soft:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15,30,45,.1); border-color: #d8dde4; }
	.card-ico {
		width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
		background: var(--accent-tint); color: var(--accent); font-size: 1.3rem; margin-bottom: 1.2rem;
	}
	/* .card-h: same style on an h3, for pages where the card sits directly
	   under an h2 (h2 -> h4 is a skipped heading level; solutions template
	   uses <h3 class="card-h">). Legacy pages keep plain h4. */
	.card-soft h3, .card-soft h4, .card-soft .card-h { font-size: 1.12rem; font-weight: 600; margin-bottom: .55rem; }
	.card-soft p { font-size: .96rem; margin-bottom: 0; }
		/* "reasons IT leaders come to us" horizontal image cards */
		.ohelp-card { display: flex; align-items: stretch; gap: 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; padding-right: 1.6rem; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
		.ohelp-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15,30,45,.1); border-color: #d8dde4; }
		.ohelp-img { flex-shrink: 0; width: 208px; background: #fff; border-right: 1px solid var(--line); display: flex; align-items: center; padding: 1rem; }
		.ohelp-svg { width: 100%; height: auto; display: block; }
		.ohelp-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
		/* coded mini-mockups (illustration per card) */
		.om-mock { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 20px rgba(15,30,45,.08); overflow: hidden; }
		.om-mock .fbar { display: flex; gap: .28rem; align-items: center; padding: .42rem .5rem; background: #fbfcfd; border-bottom: 1px solid var(--line); }
		.om-mock .fbar span { width: 6px; height: 6px; border-radius: 50%; background: #dfe4ea; }
		.om-mock .fbody { padding: .6rem .65rem; display: flex; flex-direction: column; gap: .45rem; }
		.om-nodes { display: flex; align-items: center; justify-content: center; gap: .25rem; }
		.om-node { font-size: .56rem; font-weight: 700; color: var(--accent); background: rgba(0,100,120,.1); border: 1px solid rgba(0,100,120,.22); border-radius: 6px; padding: .3rem .4rem; white-space: nowrap; }
		.om-link { width: 12px; height: 2px; background: var(--accent); opacity: .45; flex-shrink: 0; }
		.om-mock .fc-tile { font-size: .58rem; padding: .45rem .4rem; min-width: 0; }
		.om-mock .fc-tile i { width: 15px; height: 15px; font-size: .5rem; }
		.ohelp-title { white-space: nowrap; }
		@media (max-width: 860px) { .ohelp-title { white-space: normal; } }
		.ohelp-body { padding: 1.5rem 0; align-self: center; }
		.ohelp-body h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: .5rem; }
		.ohelp-body h3 a { color: inherit; text-decoration: none; }
		.ohelp-card:hover .ohelp-body h3 a, .ohelp-body h3 a:hover { color: var(--accent); }
		.ohelp-body p { font-size: .95rem; margin: 0; color: var(--body); }
		@media (max-width: 575px) { .ohelp-card { flex-direction: column; padding-right: 0; } .ohelp-img { width: 100%; border-right: none; border-bottom: 1px solid var(--line); } .ohelp-body { padding: 1.3rem 1.4rem; } }
	.sec-link { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; }
	.sec-link .fa { transition: transform .2s ease; }
	.sec-link:hover .fa { transform: translateX(4px); }

	/* ---- quote row band (section seam) ---- */
	.quote-band { padding: 4.4rem 0; background: var(--accent); }
	.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1140px; margin: 0 auto; }
	.qr-item { padding: 0 2.4rem; }
	.qr-item:first-child { padding-left: 0; }
	.qr-item:last-child { padding-right: 0; }
	.qr-item + .qr-item { border-left: 1px solid rgba(255,255,255,.22); }
	.qr-mark { display: block; font-size: 2.4rem; line-height: .6; font-weight: 700; color: #fff; opacity: .45; margin-bottom: .95rem; }
	.qr-text { font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 1.55; margin-bottom: .85rem; }
	.qr-who { font-size: .84rem; color: rgba(255,255,255,.78); margin: 0; }
	.qr-who strong { color: #fff; font-weight: 600; }
		/* single-quote slider (teal band) */
		.quote-slider { max-width: 860px; margin: 0 auto; }
		.qr-slide { text-align: center; padding: 0 1rem; }
		.qr-slide .qr-mark { font-size: 3.4rem; margin-bottom: 1rem; }
		.qr-slide .qr-text { font-size: 1.7rem; line-height: 1.45; margin-bottom: 1.4rem; }
		.qr-slide .qr-who { font-size: 1rem; }
		.quote-band .slick-dots { margin-top: 1.8rem; }
		.quote-band .slick-dots li button:before { color: #fff; font-size: 9px; opacity: .45; }
		.quote-band .slick-dots li.slick-active button:before { color: #fff; opacity: 1; }
		/* CSS-only quote rotator — replaces the slick quote-slider, zero JS.
		   Slides enter from the right and exit left. Timing is baked for
		   4 slides x 6s = 24s cycle: adding/removing a slide means updating the
		   nth-child (negative) delays AND the qr-slide-x percentages. Negative
		   delays start slides 2-4 mid-cycle (offscreen) so nothing stacks at load. */
		.quote-rotator { display: grid; max-width: 860px; margin: 0 auto; overflow: hidden; }
		.quote-rotator .qr-slide { grid-area: 1 / 1; transform: translateX(105%); animation: qr-slide-x 24s infinite; }
		.quote-rotator .qr-slide:nth-child(2) { animation-delay: -18s; }
		.quote-rotator .qr-slide:nth-child(3) { animation-delay: -12s; }
		.quote-rotator .qr-slide:nth-child(4) { animation-delay: -6s; }
		.quote-rotator:hover .qr-slide { animation-play-state: paused; }
		@keyframes qr-slide-x {
			/* entry and exit segments MUST share one timing function: mismatched
			   easing desynchronizes the push and the slides overlap mid-band */
			0% { transform: translateX(105%); animation-timing-function: ease-in-out; }
			4% { transform: translateX(0); }
			25% { transform: translateX(0); animation-timing-function: ease-in-out; }
			29% { transform: translateX(-105%); }
			100% { transform: translateX(-105%); }
		}
		/* 3-slide variant (18s) and 2-slide variant (12s). Same ~6s-per-slide
		   cadence as the 4-slide default; the enter/hold/exit percentages scale
		   with the shorter cycle, so each count needs its own keyframe. */
		.quote-rotator.qr-3 .qr-slide { animation-name: qr-slide-x-3; animation-duration: 18s; animation-delay: 0s; }
		.quote-rotator.qr-3 .qr-slide:nth-child(2) { animation-delay: -12s; }
		.quote-rotator.qr-3 .qr-slide:nth-child(3) { animation-delay: -6s; }
		@keyframes qr-slide-x-3 {
			0% { transform: translateX(105%); animation-timing-function: ease-in-out; }
			6% { transform: translateX(0); }
			33% { transform: translateX(0); animation-timing-function: ease-in-out; }
			39% { transform: translateX(-105%); }
			100% { transform: translateX(-105%); }
		}
		.quote-rotator.qr-2 .qr-slide { animation-name: qr-slide-x-2; animation-duration: 12s; animation-delay: 0s; }
		.quote-rotator.qr-2 .qr-slide:nth-child(2) { animation-delay: -6s; }
		@keyframes qr-slide-x-2 {
			0% { transform: translateX(105%); animation-timing-function: ease-in-out; }
			8% { transform: translateX(0); }
			50% { transform: translateX(0); animation-timing-function: ease-in-out; }
			58% { transform: translateX(-105%); }
			100% { transform: translateX(-105%); }
		}
		@media (prefers-reduced-motion: reduce) {
			.quote-rotator .qr-slide { animation: none; }
			.quote-rotator .qr-slide:first-child { transform: none; }
		}
		/* G2 rating row under the quote band (adapted from the trial/demo hero-proof pattern) */
		.qr-g2-row { margin-top: 1.8rem; }
		.qr-g2 { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; color: #fff; font-weight: 700; }
		.qr-g2 .g2-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ff492c; color: #fff; font-size: .6rem; font-weight: 800; flex: none; }
		.qr-g2 .qr-stars { width: 104px; height: 20px; flex: none; }
		.qr-g2-row .sec-link { display: block; color: #fff; }
		/* cs-quote: textured teal variant (promoted 7/9 from tpg-2026 case-study pages) */
		.quote-band.cs-quote { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--accent-dk) 0%, var(--accent) 58%, #0b7a8f 100%); }
		.quote-band.cs-quote::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 75% 95% at 50% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 95% at 50% 50%, #000 25%, transparent 80%); }
		.quote-band.cs-quote::after { content: ""; position: absolute; top: -130px; right: -90px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.38), transparent 68%); filter: blur(46px); }
		.quote-band.cs-quote .container { position: relative; z-index: 2; }
		.quote-band.cs-quote .qr-mark { color: var(--cyan); opacity: .95; }
		.quote-band.cs-quote .qr-who { color: rgba(255,255,255,.95); } /* .78 fails AA on the gradient's lightest corner */
	@media (max-width: 991px) {
		.quote-row { grid-template-columns: 1fr; }
		.qr-item { padding: 1.5rem 0; }
		.qr-item:first-child { padding-top: 0; }
		.qr-item + .qr-item { border-left: none; border-top: 1px solid var(--line); }
	}

	/* ---- "3 ways" path cards: 1 + 2 = Both ---- */
	.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1120px; margin: 0 auto; align-items: stretch; }
	.pcard {
		position: relative; overflow: hidden;
		display: flex; flex-direction: column;
		background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
		padding: 2.1rem 2rem 1.9rem;
		transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
	}
	.pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15,30,45,.09); border-color: #d8dde4; }
	.pcard .ghost {
		position: absolute; top: .55rem; right: 1.2rem;
		font-size: 4.6rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
		color: var(--accent); opacity: .07; pointer-events: none;
	}
	.pcard .kick {
		display: inline-flex; align-items: center; gap: .55rem;
		font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; position: relative; z-index: 1;
		color: var(--accent); margin-bottom: .95rem;
	}
	.pcard .kick::before { display: none; }
	.pcard h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; }
	.pcard .lead-line { font-size: .97rem; margin-bottom: 1.05rem; }
	.pcard .ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
	.pcard .ticks li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; font-size: .93rem; color: #3d4750; }
	.pcard .ticks li .fa { color: var(--accent); font-size: .78rem; position: relative; top: -1px; }
	.pcard .arrow { margin-top: auto; align-self: flex-start; color: var(--accent); font-weight: 600; text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; gap: .45rem; }
	.pcard .arrow .fa { transition: transform .2s ease; }
	.pcard .arrow:hover .fa { transform: translateX(4px); }
	.pcard .flag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.4); padding: .25rem .7rem; border-radius: 999px; }
		/* large watermark number behind each card header */
		.pcard .pnum { position: absolute; top: -1.1rem; right: .6rem; z-index: 0; font-family: 'Inter Tight', sans-serif; font-size: 7.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--accent); opacity: .08; pointer-events: none; user-select: none; }
		/* per-card logos */
		.pcard .plogo-zone { display: flex; align-items: center; height: 48px; margin-bottom: 1.2rem; position: relative; z-index: 1; }
		.pcard .plogo { position: relative; z-index: 1; width: auto; }
		.pcard .plogo-mp { height: 48px; width: auto; max-width: none; }
		.pcard .plogo-mrc { height: 15px; width: auto; max-width: none; margin-left: -14px; }
		.pcard .plogo-pair { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; height: 48px; margin-bottom: 1.2rem; }
		.pcard .plogo-pair img.mp { height: 40px; width: auto; }
		.pcard .plogo-pair img.mc { height: 15px; width: auto; margin-left: -14px; }
		.pcard .plogo-pair span { color: rgba(255,255,255,.45); font-weight: 600; font-size: 1.05rem; }
	/* icon chip atop each path card — helps each option read distinctly at a glance */
	.pcard .picon {
		width: 50px; height: 50px; border-radius: 14px;
		display: flex; align-items: center; justify-content: center;
		background: var(--accent-tint); color: var(--accent);
		font-size: 1.3rem; margin-bottom: 1.2rem;
	}
	/* featured "Both" card: SAME shape as the other two, elevated dark treatment */
	.pcard.both {
		position: relative;
		background: linear-gradient(150deg, #0b3947 0%, var(--ink) 62%);
		border-color: transparent;
		box-shadow: 0 26px 56px rgba(7,38,48,.28);
	}
	.pcard.both .pnum { color: var(--cyan); opacity: .18; }
	.pcard.both .kick { color: var(--cyan); }
	.pcard.both .kick::before { background: var(--cyan); }
	.pcard.both h4 { color: #fff; }
	.pcard.both .lead-line { color: rgba(255,255,255,.84); margin-bottom: 1.05rem; }
	.pcard.both .ticks li { color: rgba(255,255,255,.85); }
	.pcard.both .ticks li .fa { color: var(--cyan); }
	.pcard.both .arrow { color: var(--cyan); }
	.pcard.both .flag { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; }
	@media (max-width: 991px) {
		.paths-grid { grid-template-columns: 1fr; max-width: 460px; }
	}

	/* ---- Problem list (modern hairline rows) ---- */
	.pain-list { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(15,30,45,.06); }
	.pain-row { display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 2rem; border-bottom: 1px solid var(--line); transition: background .18s ease, padding-left .18s ease; }
	.pain-row:last-child { border-bottom: none; }
	.pain-row:hover { background: var(--bg-soft-2); padding-left: 2.3rem; }
	.pain-row .idx { font-family: 'Inter Tight', monospace; font-size: .82rem; font-weight: 600; letter-spacing: .05em; color: var(--accent); width: 2rem; flex-shrink: 0; }
	.pain-row .ptxt { font-size: 1.1rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
	.pain-row .chev { margin-left: auto; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .2s ease, transform .2s ease; flex-shrink: 0; }
	.pain-row:hover .chev { opacity: 1; transform: none; }
	.pain-note { max-width: 900px; margin: 1.5rem auto 0; display: flex; gap: 1.2rem; align-items: flex-start; background: linear-gradient(150deg, var(--ink), #262b36); color: #fff; border-radius: 18px; padding: 1.7rem 2rem; box-shadow: 0 22px 48px rgba(15,30,45,.14); }
	.pain-note .pnico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(109,213,237,.14); color: var(--cyan); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
	.pain-note .lbl { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: .35rem; }
	.pain-note p { margin: 0; font-size: 1.05rem; color: rgba(255,255,255,.9); line-height: 1.6; }

	/* ---- Modern feature rows (platform section) ---- */
	.feat-row { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.25rem 0; }
	.feat-row + .feat-row { border-top: 1px solid var(--line); }
	.feat-row .fchip { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
	.feat-row h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .3rem; }
	.feat-row p { font-size: .95rem; margin: 0; }

	/* ---- Device frame (wraps product imagery) ---- */
	.device-frame { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 34px 64px rgba(15,30,45,.14); overflow: hidden; }
	.device-frame .dbar { display: flex; align-items: center; gap: .45rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: #fbfcfd; }
	.device-frame .dbar span { width: 11px; height: 11px; border-radius: 50%; background: #dfe4ea; }
	.device-frame .dbar .durl { margin-left: 1rem; height: 20px; flex: 1; max-width: 280px; border-radius: 6px; background: #eef1f5; }
	.device-frame .dscreen { padding: 1rem; }

	/* ---- Logo wall ---- */
	.logo-wall img { filter: none; opacity: 1; transition: transform .3s ease; }
	.logo-wall img:hover { transform: translateY(-3px); }
	/* Continuous logo marquee (pure CSS, no slider JS). The track holds two
	   identical .logo-set groups; animating to -50% then looping is seamless
	   because the second set is exactly where the first one started. */
	.logo-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	}
	.logo-track { display: flex; width: max-content; animation: logo-scroll 40s linear infinite; }
	.logo-marquee:hover .logo-track { animation-play-state: paused; }
	.logo-set { display: flex; align-items: center; }
	.logo-set img { height: 60px; width: auto; margin: 0 clamp(1.3rem, 2.6vw, 2.4rem); }
	@keyframes logo-scroll { to { transform: translateX(-50%); } }
	@media (max-width: 767px) {
		.logo-set img { height: 44px; margin: 0 1rem; }
	}
	@media (prefers-reduced-motion: reduce) {
		.logo-track { animation: none; }
	}
	/* logo strip: white band, separated from the proof section by a hairline */
	.logo-band {
		background: #fafcfd;
		border-top: 1px solid #d8dee5;
		border-bottom: 1px solid #d8dee5;
	}
	/* customer-proof section: white, with tighter top padding */
	.proof-sec {
		background: #fff;
		padding-top: clamp(3.5rem, 6vw, 5.5rem);
	}
	.proof-sec .container {
		padding-top: 0;
	}

	/* ---- Video proof cards ---- */
	.vidc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .9rem; height: 100%; transition: transform .26s ease, box-shadow .26s ease; }
	.vidc:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(15,30,45,.1); }
	.vidc .thumb { border-radius: 13px; overflow: hidden; position: relative; display: block; }
	.vidc .thumb img { width: 100%; display: block; aspect-ratio: 14 / 9; object-fit: cover; }
	.vidc .play2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
	.vidc q { display: block; font-size: .95rem; color: #3d4750; line-height: 1.55; margin: 1rem .5rem .6rem; quotes: none; }
	.vidc .who { font-size: .8rem; color: var(--muted); margin: 0 .5rem .4rem; }

	/* ---- Theater row (video player that expands into a card grid; lightbox replacement,
	        approved 2026-07-15). Companion JS is inline on each page while prototyping;
	        it moves to mrc-2026.js in runbook Phase 1. ---- */
	.theater-row { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0 15px; }
	.theater-inner { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
	.theater-row.open .theater-inner { grid-template-rows: 1fr; }
	.theater-clip { overflow: hidden; min-height: 0; }
	.theater-frame { margin: .3rem 0 1.7rem; background: #101a24; border-radius: 16px; padding: .65rem .65rem .8rem; box-shadow: 0 30px 60px rgba(15,30,45,.25); }
	.theater-bar { display: flex; align-items: center; gap: .8rem; padding: .3rem .35rem .6rem; }
	.theater-bar strong { flex: 1; color: #fff; font-size: .98rem; font-weight: 600; line-height: 1.35; }
	.theater-bar a { color: #9fd8e2; font-size: .85rem; white-space: nowrap; }
	.theater-close { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; }
	.theater-close:hover, .theater-close:focus-visible { background: #df2b35; }
	.theater-player { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
	.theater-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	@media (max-width: 767px) {
		.theater-frame { border-radius: 12px; padding: .45rem .45rem .55rem; }
		.theater-bar a { display: none; }
	}
	@media (prefers-reduced-motion: reduce) {
		.theater-inner { transition: none; }
	}

	/* ---- Pillars ---- */
	.pillar { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.9rem; height: 100%; border-top: 3px solid var(--accent); }
	.pillar.p2 { border-top-color: #2046AE; }
	.pillar.p3 { border-top-color: var(--cyan); }
	.pillar h4 { font-size: 1.18rem; font-weight: 600; margin-bottom: .7rem; }
	.pillar .q { font-size: .92rem; color: var(--body); }

	/* ---- Comparison table ---- */
	.m-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
	.m-table th, .m-table td { padding: 1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .97rem; }
	.m-table thead th { background: #fbfcfd; color: var(--ink); font-weight: 600; }
	.m-table thead th:last-child { background: var(--accent); color: #fff; }
	.m-table tbody td:last-child { background: var(--accent-tint); font-weight: 600; color: var(--ink); }
	.m-table tbody tr:last-child td { border-bottom: none; }

	/* ---- Case study cards ---- */
	.cs-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; text-align: left; position: relative; transition: transform .24s ease, box-shadow .24s ease; }
	.cs-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15,30,45,.09); }
	/* Whole-card link (opt-in): add class `card-link` to a card's .cs-foot link and the
	   entire card navigates to the case study. A sibling video/media link stays clickable
	   above the stretch via z-index, so it keeps its own behavior. No nested <a> tags. */
	.cs-card .video-thumb { z-index: 2; }
	.cs-card .cs-foot.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
	.cs-card .tag { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
	.cs-card h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.35; margin-bottom: .9rem; }
	.cs-card .result { font-size: .92rem; color: var(--body); line-height: 1.5; }
		.cs-card .result strong { color: var(--accent); }
	.cs-card .cs-foot { display: flex; align-items: center; gap: .45rem; background: var(--bg-soft); border-top: 1px solid var(--line); padding: 1rem 1.7rem; font-size: .92rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: background .2s ease; }
		.cs-card .cs-foot:hover { background: #e9edf2; }
		.cs-card .cs-foot .fa { transition: transform .2s ease; }
		.cs-card .cs-foot:hover .fa { transform: translateX(3px); }
		.cs-card .cs-cover { width: 100%; height: 148px; display: flex; align-items: center; justify-content: center; padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--line); background: #fff; }
		.cs-card .cs-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
		.cs-card .cs-body { padding: 1.5rem 1.7rem 1.6rem; flex: 1 1 auto; }

	/* ---- Is / Isn't ---- */
	.isnt-col { border-radius: var(--radius); padding: 2.4rem 2.2rem; height: 100%; }
	.isnt-col.is { background: linear-gradient(160deg, var(--accent), var(--accent-dk)); color: #fff; }
	.isnt-col.isnt { background: var(--ink); color: #fff; }
	.isnt-col h3 { color: #fff; font-weight: 600; margin-bottom: 1.4rem; }
	.isnt-col ul { list-style: none; padding: 0; margin: 0; }
	.isnt-col li { padding: .6rem 0; font-size: 1.02rem; display: flex; gap: .7rem; align-items: flex-start; color: rgba(255,255,255,.9); }
	.isnt-col li i { margin-top: .25rem; }

	/* ---- Steps ---- */
	.step .num { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 600; font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
	.step h4 { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }

	/* ---- FAQ ---- */
	.accordion .card { border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none; margin-bottom: 0; }
	.accordion .card-title a { font-weight: 500; color: var(--ink); font-size: 1.05rem; }

	/* ---- CTA band ---- */
	.v3-cta { background: var(--ink); position: relative; overflow: hidden; }
	.v3-cta::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 620px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0,100,120,.5), transparent 68%); filter: blur(60px); }
	.v3-cta .container { position: relative; z-index: 2; }


	/* ---- Navbar: solid white from top (light hero) ---- */
	.navbar { background: #fff !important; box-shadow: 0 1px 0 rgba(15,30,45,.07); position: sticky; top: 0; z-index: 1030; padding-top: 10px !important; padding-bottom: 10px !important; }
	.navbar .logo-light { display: none !important; }
	.navbar .logo-dark { display: inline-block !important; }
	.navbar .nav-link { color: var(--ink) !important; font-family: 'Inter Tight', sans-serif; }
	.navbar .nav-link:hover { color: var(--accent) !important; text-decoration: none !important; }
	.navbar .nav-link:focus { text-decoration: none !important; }
	.navbar .submenu .nav-link { color: var(--body) !important; }
	.navbar .submenu .nav-link:hover { color: var(--accent) !important; text-decoration: none !important; }
	.navbar .btn-success { border-radius: 999px !important; background: var(--btn-ink) !important; border-color: var(--btn-ink) !important; color: #fff !important; font-family: 'Inter Tight', sans-serif; }

	/* ---- Dropdown: open on hover, slide down into view (desktop only) ----
	   page.min.js runs its own hover-intent dropdown logic (1s delay + inline
	   style animation) that fights these transitions: moving between nav items
	   left the old menu pinned open for ~1s while the new one opened, then both
	   snapped (the "double open + flash"). Verified 7/2 by sampling computed
	   styles during hover. !important defeats the JS inline styles so CSS owns
	   desktop dropdowns entirely; :hover/:focus-within are the only open states.
	   The same JS still runs the mobile accordion below 992px - leave it alone. */
	@media (min-width: 992px) {
		.navbar .nav-navbar > .nav-item > .submenu {
			display: block !important;
			opacity: 0 !important;
			visibility: hidden !important;
			transform: translateY(-20px) !important;
			transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s !important;
			/* a CLOSING panel stays visible for .3s while it fades - without this
			   it still catches the mouse, re-hovers its parent, and re-opens
			   (= the flash when moving between items along the panels' top edge) */
			pointer-events: none !important;
		}
		.navbar .nav-navbar > .nav-item:hover > .submenu,
		.navbar .nav-navbar > .nav-item:focus-within > .submenu {
			opacity: 1 !important;
			visibility: visible !important;
			transform: translateY(0) !important;
			transition: opacity .3s ease, transform .3s ease, visibility 0s !important;
			pointer-events: auto !important;
		}
	}

	/* ===================== interior page hero =====================
	   The quiet cousin of the homepage hero, for every interior page:
	   same light gradient + dotted grid family, ~half the height, no
	   entrance animation (calmer + LCP-safe by construction).
	   Text-only: use .ph-grid.solo. With visual: put it in .ph-frame. */
	.page-hero {
		background-image:
			radial-gradient(circle, rgba(0,100,120,.09) 1px, transparent 1.5px),
			radial-gradient(900px 420px at 78% -10%, rgba(45,212,191,.16), transparent 60%),
			radial-gradient(700px 380px at 12% 0%, rgba(0,100,120,.08), transparent 55%);
		background-size: 26px 26px, auto, auto;
		background-repeat: repeat, no-repeat, no-repeat;
		background-color: #e6edf1;
		border-bottom: 1px solid var(--line);
		padding: clamp(3.2rem, 6.5vw, 5.2rem) 0;
		position: relative;
	}
	/* chevron divider at the hero's bottom edge - the 2026 adaptation of the
	   legacy shape-divider (same geometry, slimmed 150px -> 70px). Fill must
	   match the NEXT section's background: set --arrow-fill inline. */
	.page-hero.has-arrow { border-bottom: 0; padding-bottom: calc(clamp(3.2rem, 6.5vw, 5.2rem) + 80px); }
	.ph-arrow { position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; }
	.ph-arrow svg { display: block; width: calc(100% + 1.3px); height: 70px; }
	.ph-arrow .shape-fill { fill: var(--arrow-fill, #fff); }
	@media (max-width: 767px) { .ph-arrow svg { height: 42px; } .page-hero.has-arrow { padding-bottom: calc(clamp(3.2rem, 6.5vw, 5.2rem) + 48px); } }
	/* centered hero: visual (if any) sits below the copy in a capped frame */
	.ph-frame-below { max-width: 880px; margin: clamp(2.2rem, 4.5vw, 3.2rem) auto 0; }
	.page-hero .crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.2rem; font-weight: 500; }
	.page-hero .crumbs a { color: var(--body); text-decoration: none; }
	.page-hero .crumbs a:hover { color: var(--accent); }
	.page-hero .crumbs i { font-size: .7rem; margin: 0 .45rem; }
	.page-hero .ph-eyebrow {
		display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
		text-transform: uppercase; color: var(--accent); background: var(--accent-tint);
		padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1.1rem;
	}
	/* white-card variant: for heroes whose tinted wash swallows the default pill */
	.page-hero .ph-eyebrow-card {
		color: #2046AE; background: #fff; border: 1px solid #cfe3e6;
		box-shadow: 0 1px 3px rgba(7,38,48,.08);
	}
	/* centered CTA row under a card grid (bento, frame-card) */
	.sec-foot-cta { margin-top: 2.4rem; }
	.page-hero h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; margin-bottom: 1.1rem; }
	.page-hero .ph-sub { font-size: 1.16rem; color: var(--body); line-height: 1.65; margin-bottom: 1.8rem; max-width: 56ch; }
	/* bold one-line claim between the h1 and the sub */
	.hero-tagline { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: #22333b; margin: .5rem 0 0; }
	/* checkmark tick row under the hero CTA */
	.hero-ticks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 2rem; margin: 1.9rem auto 0; padding: 0; max-width: 760px; }
	.hero-ticks li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 500; color: #2b3a44; }
	.hero-ticks .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #d3f3ec; color: #0b7a66; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; }
	.ph-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
	.ph-grid.solo { grid-template-columns: minmax(0, 780px); justify-content: center; text-align: center; }
	.ph-grid.solo .ph-sub { margin-left: auto; margin-right: auto; }
	@media (max-width: 991px) { .ph-grid { grid-template-columns: 1fr; } }
	/* browser-chrome frame for the hero visual */
	.ph-frame { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px rgba(7,38,48,.14); overflow: hidden; }
	.ph-frame .ph-bar { display: flex; gap: 6px; padding: 11px 14px; background: #fbfcfd; border-bottom: 1px solid var(--line); }
	.ph-frame .ph-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e4e8ee; }
	.ph-frame img, .ph-frame video { display: block; width: 100%; height: auto; }
	.ph-shot { position: relative; }
	.ph-shot .ph-play {
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
		width: 66px; height: 66px; border-radius: 50%; background: var(--btn-ink); color: #fff;
		display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
		box-shadow: 0 14px 34px rgba(15,30,45,.3); transition: transform .2s ease;
	}
	.ph-shot .ph-play:hover { transform: translate(-50%, -50%) scale(1.08); color: #fff; }

	/* avatar-stack trust line (overlapping avatars + "Trusted by ..." text).
	   Reusable proof bit for heroes, near CTAs, or section intros. */
	.trust-line { display: inline-flex; align-items: center; gap: .85rem; }
	.trust-avatars { display: flex; }
	.trust-avatars img, .trust-avatars .more {
		width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -12px;
	}
	.trust-avatars > :first-child { margin-left: 0; }
	.trust-avatars .more { background: var(--accent-tint); color: var(--accent-dk); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
	.trust-text { line-height: 1.25; }
	.trust-text b { display: block; color: var(--ink); font-size: .95rem; }
	.trust-text span { font-size: .82rem; color: var(--muted); }

	/* ---- Stack-cards (sticky heading + piling cards) ----
	   Adapted 7/2 from the Nexsas app-development "end-to-end" section: left
	   heading column stays pinned (sticky) while right-column cards slide up and
	   pile on each other. Pure CSS sticky, no JS. Set --i (0,1,2...) per card so
	   each pins a few px lower, leaving a visible peek of the stack. */
	.stack-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
	.stack-head { position: sticky; top: 100px; }
	.stack-cards { display: flex; flex-direction: column; gap: 1.4rem; }
	.stack-card {
		position: sticky; top: calc(100px + var(--i, 0) * 20px);
		background: #fff; border: 1px solid var(--line); border-radius: 18px;
		padding: 1.9rem 2rem; box-shadow: 0 10px 30px rgba(15,30,45,.05);
	}
	.stack-card h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
	.stack-card p { font-size: .95rem; color: var(--body); line-height: 1.6; margin: 0; }
	.stack-card .stack-num { font-family: 'Inter Tight', monospace; font-size: .78rem; font-weight: 600; letter-spacing: 1px; color: var(--accent); margin-bottom: .7rem; }
	/* Coded mini-illustration inside a stack card. Lived only in
	   solutions-2026.css until 8/2, when the industry pages picked up the same
	   treatment; promoted here so both sections share one rule. The duplicate
	   in solutions-2026.css is identical and loads later, so it is a no-op. */
	.stack-illus { margin-top: 1rem; background: #ecf5f6; border-radius: 16px; padding: 1.3rem 1rem; }
	.stack-illus svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
	.stack-head .stack-illus { border-radius: 20px; }
	.stack-head .stack-illus svg { max-width: 400px; }
	.stack-illus.illus-lg { width: 100%; padding: 1.6rem 1.3rem; }
	.stack-illus.illus-lg svg { max-width: 480px; }
	@media (max-width: 900px) {
		.stack-section { grid-template-columns: 1fr; }
		.stack-head { position: static; }
		.stack-card { position: static; }
	}

	/* ---- Testimonial carousel card ----
	   Adapted 7/2 from the Nexsas ai-software reviews carousel: a row of quote
	   cards that step-scroll (Slick centerMode); the centered card goes dark
	   with a gradient glow on top. Dark state applies via .slick-center (auto,
	   when the carousel runs) OR .active (for a static row). */
	.tq-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem; margin: 0 .6rem; transition: background .4s ease, color .4s ease, border-color .4s ease; }
	.tq-card .tq-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 1.2rem; }
	.tq-card .tq-quote { font-size: 1rem; color: var(--body); line-height: 1.6; margin-bottom: 1.6rem; }
	.tq-card .tq-name { font-weight: 600; color: var(--ink); }
	.tq-card .tq-title { font-size: .85rem; color: var(--muted); }
	.tq-card.active, .slick-center .tq-card { position: relative; overflow: hidden; background: #0c1116; border-color: #0c1116; }
	.tq-card.active::before, .slick-center .tq-card::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 3px; background: linear-gradient(90deg, transparent, #2dd4bf, #864FFE, transparent); }
	.tq-card.active .tq-quote, .slick-center .tq-card .tq-quote { color: #fff; }
	.tq-card.active .tq-name, .slick-center .tq-card .tq-name { color: #fff; }
	.tq-card.active .tq-title, .slick-center .tq-card .tq-title { color: rgba(255,255,255,.6); }

	/* ---- Bento grid (mixed-size cards) ----
	   Adapted 7/2 from the Nexsas voice-generator features grid: an asymmetric
	   grid where one card is large and the rest are small. Add .b-col2 / .b-row2
	   to a card to make it span. .b-glow adds a soft gradient corner accent. */
	.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; grid-auto-rows: minmax(190px, auto); grid-auto-flow: row dense; }
	.bento-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.9rem; display: flex; flex-direction: column; transition: border-color .3s ease, box-shadow .3s ease; }
	.bento-card:hover { border-color: #c9d2db; box-shadow: 0 16px 38px rgba(15,30,45,.07); }
	.bento-card.b-col2 { grid-column: span 2; }
	.bento-card.b-row2 { grid-row: span 2; }
	.bento-card h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
	.bento-card p { font-size: .93rem; color: var(--body); line-height: 1.55; margin: 0; max-width: 42ch; }
	.bento-card .b-visual { margin-top: auto; padding-top: 1.4rem; }
	.bento-card.b-glow::after { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 160px; background: radial-gradient(circle, rgba(45,212,191,.5), rgba(32,70,174,.3) 45%, transparent 70%); filter: blur(30px); opacity: .55; pointer-events: none; }
	/* dark / inverted tile */
	.bento-card.b-dark { background: #0c1116; border-color: #0c1116; }
	.bento-card.b-dark h3 { color: #fff; }
	.bento-card.b-dark p { color: rgba(255,255,255,.72); }
	.bento-card.b-dark:hover { border-color: #223; box-shadow: 0 16px 38px rgba(0,0,0,.25); }
	/* gradient-fill tile (teal -> m-Power blue, mrc palette) */
	.bento-card.b-gradient { background: linear-gradient(135deg, var(--accent-tint), #dfe7fb 55%, #eef1ff); border-color: transparent; }
	.bento-card.b-gradient h3 { color: var(--ink); }
	.bento-card.b-gradient p { color: var(--body); }
	@media (max-width: 900px) {
		.bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
		.bento-card.b-col2, .bento-card.b-row2 { grid-column: auto; grid-row: auto; }
	}

	/* ---- Split media + checklist section ----
	   Adapted 7/2 from the Nexsas "Designed to deliver" section: two columns,
	   a circular image on a tinted blob with floating stat chips on one side,
	   heading + subhead + checklist + CTA on the other. Add .flip to swap sides.
	   The visual can hold a circular photo OR a framed screenshot. */
	.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
	/* .flip moves the visual to the left while keeping content first in the DOM
	   (better reading/source order). Author content-first, visual-second. */
	.split-media.flip .sm-visual { order: -1; }
	@media (max-width: 900px) { .split-media { grid-template-columns: 1fr; } .split-media.flip .sm-visual { order: 0; } }
	/* boxed row wrapper - puts a split-media row in its own hairline panel
	   (the crypto-services "alternating bordered rows" look). Stack several,
	   alternating .flip on the inner .split-media, for a feature sequence. */
	.split-boxed { border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.8rem, 4vw, 3.5rem); }
	.split-boxed + .split-boxed { margin-top: 1.5rem; }
	/* .soft = gray-filled panel instead of hairline border (tonal break on an
	   otherwise white page). Bumped padding since it reads as a full section. */
	.split-boxed.soft { border-color: transparent; background: var(--bg-soft); padding: clamp(2.2rem, 5vw, 4.5rem); }
	.sm-visual { position: relative; display: flex; justify-content: center; }
	.sm-circle { position: relative; width: min(100%, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--accent-tint); }
	.sm-circle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
	/* plain large rounded image (the About / "bold ideas" treatment) */
	.sm-image { width: 100%; border-radius: 22px; overflow: hidden; }
	.sm-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
	/* prose paragraphs in the content side (alternative to .check-list) */
	.sm-content .sm-prose p { color: var(--body); line-height: 1.7; margin: 0 0 1.1rem; }
	.sm-content .sm-prose { margin-bottom: 1.8rem; }
	.sm-chip { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(7,38,48,.16); padding: .7rem 1rem; z-index: 3; }
	.sm-chip.stat { background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem; padding: .6rem 1.1rem; }
	.sm-chip .sc-lbl { font-size: .72rem; color: var(--muted); font-weight: 600; }
	.sm-chip .sc-row { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
	.sm-chip .sc-row b { font-size: .95rem; color: var(--ink); }
	.sm-chip .sc-arrow { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; }
	.sm-content h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 600; letter-spacing: -0.025em; margin-bottom: 1rem; }
	.sm-content .sm-sub { font-size: 1.08rem; color: var(--body); line-height: 1.6; margin-bottom: 1.6rem; }
	.check-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .9rem; }
	.check-list li { display: flex; align-items: center; gap: .75rem; font-weight: 500; color: var(--ink); }
	.check-list li .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .68rem; flex: none; }
	.check-list li .ck.accent { background: var(--accent); }
	/* inline (horizontal) checklist variant */
	.check-list.inline { flex-direction: row; flex-wrap: wrap; gap: .8rem 1.6rem; }

	/* ---- Frame card (media-top resource card) ----
	   Adapted 7/2 from the Nexsas tutorial cards Steve picked: white card,
	   1px hairline border, 20px radius, full-bleed image on top, then a padded
	   body with a category badge + meta row, title, description, and an
	   OUTLINED pill button with an arrow. No shadow. Badge uses mrc teal tint
	   (Nexsas used lime) to stay on-brand; .badge-lime keeps the original. */
	.frame-card {
		background: #fff; border: 1px solid var(--line); border-radius: 20px;
		overflow: hidden; height: 100%; display: flex; flex-direction: column;
		transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
	}
	.frame-card:hover { border-color: #c9d2db; box-shadow: 0 18px 40px rgba(15,30,45,.08); transform: translateY(-3px); }
	.frame-card .fr-media { display: block; overflow: hidden; }
	.frame-card .fr-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .5s ease; }
	.frame-card:hover .fr-media img { transform: scale(1.04); }
	.frame-card .fr-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
	.frame-card .fr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1rem; }
	.frame-card .fr-meta-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--body); white-space: nowrap; }
	.frame-card .fr-meta-item i { color: var(--muted); font-size: .85rem; }
	.frame-card .fr-body h3, .frame-card .fr-body h4 { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
	.frame-card .fr-body > p { font-size: .93rem; color: var(--body); line-height: 1.6; margin: 0; }
	.frame-card .fr-result { font-size: .92rem; color: var(--body); margin: .7rem 0 0; }
	.frame-card .fr-result strong { color: var(--ink); font-weight: 600; }
	.frame-card .fr-foot { margin-top: auto; padding-top: 1.5rem; }
	/* category badge (reusable outside cards too) */
	.badge-cat { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .01em;
		padding: .35rem 1rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dk); }
	/* a heading directly after the pill needs air; site-wide fix (Steve 7/22),
	   replaces the per-page pill margin-bottom compensations */
	.badge-cat + h2, .badge-cat + h3, .badge-cat + h4 { margin-top: 1rem; }
	.badge-lime { background: #e8fbc6; color: #3d5210; }
	/* neutral gray meta pill (location, type, status) - from the Nexsas
	   career cards. Quieter than badge-cat; use for non-category metadata. */
	.pill-tag { display: inline-block; font-size: .8rem; font-weight: 500;
		padding: .32rem .9rem; border-radius: 999px; background: var(--bg-soft); color: var(--body); }
	.panel-soft .pill-tag { background: var(--bg-soft-2); }
	/* outlined read-more pill with sliding arrow */
	.fr-btn {
		display: inline-flex; align-items: center; gap: .55rem;
		border: 1px solid var(--line); border-radius: 999px; background: #fff;
		padding: .6rem 1.2rem; font-size: .92rem; font-weight: 500; color: var(--ink);
		transition: border-color .25s ease, color .25s ease, background .25s ease;
	}
	.fr-btn i { font-size: .8rem; transition: transform .25s ease; }
	.fr-btn:hover, .fr-btn:focus { border-color: var(--accent); color: var(--accent); }
	.fr-btn:hover i { transform: translateX(3px); }
	/* inline SVG illustrations inside frame-card media slots */
	.fr-media .fr-illus { width: 100%; height: auto; display: block; transition: transform .5s ease; }
	.frame-card:hover .fr-media .fr-illus { transform: scale(1.04); }

	/* ---- Promoted 7/9 from products/index-2026 (shipped page). Class-scoped;
	   inert on pages that don't use the markup. services/*-2026 still carries a
	   local vtq copy — delete it on next touch of that file. ---- */
	/* hero video cover: play button + caption pill over a ph-shot */
	.hero-video .hv-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
	.hero-video .ph-play {
		position: static; transform: none; background: #df2b35;
		box-shadow: 0 10px 26px rgba(223,43,53,.40);
		transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
	}
	.hero-video .hv-cover:hover .ph-play,
	.hero-video .hv-cover:focus-visible .ph-play {
		transform: scale(1.14) translateY(-3px);
		background: #c51f29;
		box-shadow: 0 18px 42px rgba(223,43,53,.52);
	}
	@media (prefers-reduced-motion: reduce) { .hero-video .ph-play { transition: none; } .hero-video .hv-cover:hover .ph-play { transform: none; } }
	.hero-video .hv-caption {
		position: absolute; left: 50%; top: calc(50% + 3.5rem); transform: translateX(-50%);
		display: inline-flex; align-items: center; white-space: nowrap;
		background: rgba(10,25,32,.88); color: #fff; font-weight: 600; font-size: .95rem;
		letter-spacing: .01em; padding: .55rem 1.2rem; border-radius: 999px; text-decoration: none;
		transition: background-color .2s ease;
	}
	.hero-video .hv-caption:hover { background: rgba(10,25,32,1); color: #fff; }
	.hero-video .hv-caption .fa { font-size: .8rem; color: #ff6b73; }
	/* Play-in-place facade (mrc-2026.js block 11 swaps the poster for .hv-player).
	   The shot is a fixed 16:9 box so the poster and the player fill it identically —
	   no size jump on click, and 4:3 fallback thumbnails crop instead of letterbox.
	   .hv-player was a page-local override on products/index-2026; shared here so
	   every js-play hero sizes correctly. */
	.hero-video .ph-shot { aspect-ratio: 16 / 9; }
	.hero-video .ph-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.hv-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
	.hv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	/* Image lightbox (mrc-2026.js block 13): dismissable overlay for case-study
	   screenshots. Replaces page.min.js's image lightbox. */
	.imglb-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(8,20,26,.88); cursor: zoom-out; opacity: 0; transition: opacity .2s ease; }
	.imglb-overlay.open { opacity: 1; }
	.imglb-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
	.imglb-close { position: absolute; top: 1.1rem; right: 1.3rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color .18s ease; }
	.imglb-close:hover { background: rgba(255,255,255,.28); }
	@media (prefers-reduced-motion: reduce) { .imglb-overlay { transition: none; } }
	/* hero / stack logo lockups */
	.hero-logo { display: block; width: 88px; height: 88px; margin: 0 auto .75rem; filter: drop-shadow(0 6px 9px rgba(23,58,94,.30)); }
	.stack-logo { display: block; width: 64px; height: 64px; margin-bottom: 1.1rem; filter: drop-shadow(0 5px 8px rgba(23,58,94,.28)); }
	/* ohelp-style cards inside the sticky stack layout */
	.stack-card.stack-ohelp { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 1.7rem 1.1rem 1.1rem; }
	.stack-ohelp .ohelp-img { flex: 0 0 116px; width: 116px; padding: 0; border-right: 0; background: transparent; }
	.stack-ohelp .ohelp-svg { border-radius: 14px; }
	.stack-ohelp .ohelp-body { padding: 0; }
	@media (max-width: 575px) { .stack-card.stack-ohelp { flex-direction: column; align-items: flex-start; gap: .9rem; } .stack-ohelp .ohelp-img { width: 96px; flex-basis: auto; } }
	/* vtq morph carousel: vidc side cards morph into a wide teal feature card (library 14c) */
	.vtq-sec .sec-head { max-width: 960px; }
	.vtq { --sideW: 232px; --centerW: 640px; --gap: 24px; --slotH: 300px; max-width: calc(2*var(--sideW) + var(--centerW) + 2*var(--gap) + 64px); margin: 0 auto; }
	.vtq-viewport { overflow: hidden; padding: 20px 32px 96px; }
	.vtq-track { display: flex; gap: var(--gap); align-items: stretch; will-change: transform; transition: transform .65s cubic-bezier(.25,.6,.3,1); }
	.vtq-slot { position: relative; flex: 0 0 var(--sideW); height: var(--slotH); opacity: 0; transition: flex-basis .65s cubic-bezier(.25,.6,.3,1), opacity .45s ease; }
	.vtq-slot.is-center, .vtq-slot.is-near { opacity: 1; }
	.vtq-slot:not(.is-center):not(.is-near) { pointer-events: none; }
	.vtq-slot.is-center { flex-basis: var(--centerW); z-index: 2; }
	.vtq-card { position: absolute; inset: 0; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 26px rgba(20,45,80,.08); overflow: hidden; transition: background-color .6s ease, border-color .6s ease, box-shadow .6s ease; }
	.vtq-slot.is-center .vtq-card { background: var(--accent); border-color: var(--accent); box-shadow: 0 24px 52px rgba(0,70,85,.30); }
	.vtq-lay { position: absolute; top: 0; bottom: 0; left: 0; box-sizing: border-box; transition: opacity .45s ease; }
	.vtq-lay-side { width: var(--sideW); opacity: 1; padding: .8rem; display: flex; flex-direction: column; justify-content: center; }
	.vtq-lay-side .thumb { display: block; border-radius: 12px; overflow: hidden; }
	.vtq-lay-side .thumb img { width: 100%; height: auto; aspect-ratio: 14 / 9; object-fit: cover; display: block; }
	.vtq-lay-side q { display: block; quotes: none; font-size: .8rem; color: #3d4750; line-height: 1.45; margin: .65rem .3rem .4rem; }
	.vtq-lay-side .who { font-size: .72rem; color: #6e7680; margin: 0 .3rem; } /* darker than --muted for AA contrast */
	.vtq-lay-feat { width: var(--centerW); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 1.9rem; padding: 1.6rem 2.2rem; }
	.vtq-slot.is-center .vtq-lay-side { opacity: 0; pointer-events: none; }
	.vtq-slot.is-center .vtq-lay-feat { opacity: 1; pointer-events: auto; }
	.vtq-feat-media { flex: 0 0 auto; width: 158px; height: 158px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 10px 24px rgba(10,35,70,.3); }
	.vtq-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.vtq-body { flex: 1 1 auto; min-width: 0; }
	.vtq-mark { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 2.4rem; line-height: 0; height: 1rem; color: rgba(255,255,255,.45); }
	.vtq-quote { font-size: 1.08rem; line-height: 1.5; font-weight: 500; margin: 0 0 .8rem; color: #fff; }
	.vtq-name { margin: 0; font-weight: 600; font-size: .95rem; color: #fff; }
	.vtq-title { font-size: .82rem; margin: .12rem 0 0; color: rgba(255,255,255,.82); } /* .72 fails AA on teal */
	.vtq-slot:not(.is-center) { cursor: pointer; }
	.vtq-slot:not(.is-center) .vtq-card:hover { box-shadow: 0 18px 38px rgba(20,45,80,.16); border-color: #c7d3de; }
	.vtq.no-anim .vtq-track, .vtq.no-anim .vtq-slot, .vtq.no-anim .vtq-card, .vtq.no-anim .vtq-lay { transition: none !important; }
	@media (prefers-reduced-motion: reduce) { .vtq-track, .vtq-slot, .vtq-card, .vtq-lay { transition-duration: .01s !important; } }
	.vtq-dots { display: flex; justify-content: center; gap: .5rem; margin-top: -1.8rem; }
	.vtq-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #8494a1; cursor: pointer; transition: background .2s ease, width .2s ease; } /* 3:1 non-text contrast */
	.vtq-dots button.on { background: var(--accent); width: 24px; border-radius: 5px; }
	@media (max-width: 700px) {
		.vtq { --slotH: 340px; }
		.vtq-lay-feat { flex-direction: column; text-align: center; justify-content: center; gap: 1rem; padding: 1.3rem; }
		.vtq-feat-media { width: 120px; height: 120px; }
		.vtq-mark { display: none; }
	}
	/* bento row-span utility */
	.bento-card.b-row3 { grid-row: span 3; }
	@media (max-width: 900px) { .bento-card.b-row3 { grid-row: auto; } }
	/* dark-quote: ink variant of the cs-quote textured band */
	.quote-band.dark-quote { position: relative; overflow: hidden; background: linear-gradient(150deg, #0a0f14 0%, #0c1116 55%, #10222b 100%); }
	.quote-band.dark-quote::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 75% 95% at 50% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 95% at 50% 50%, #000 25%, transparent 80%); }
	.quote-band.dark-quote::after { content: ""; position: absolute; top: -130px; right: -90px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.22), transparent 68%); filter: blur(46px); }
	.quote-band.dark-quote .container { position: relative; z-index: 2; }
	.quote-band.dark-quote .qr-mark { color: var(--cyan); opacity: .9; }
	/* bm: app-example marquee inside a bento card */
	.bm-wrap { position: relative; overflow: hidden; margin-top: auto; padding-top: 1.35rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
	.bm-track { display: flex; width: max-content; animation: bmScroll 48s linear infinite; }
	.bm-wrap:hover .bm-track { animation-play-state: paused; }
	@keyframes bmScroll { to { transform: translateX(-50%); } }
	@media (prefers-reduced-motion: reduce) { .bm-track { animation: none; } }
	.bm-item { flex: none; width: 200px; margin-right: 1rem; }
	.bm-mock { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; height: 170px; box-shadow: 0 8px 18px rgba(15,30,45,.07); }
	.bm-mock .fbar { display: flex; gap: .28rem; align-items: center; padding: .4rem .5rem; background: #fbfcfd; border-bottom: 1px solid var(--line); }
	.bm-mock .fbar span { width: 6px; height: 6px; border-radius: 50%; background: #dfe4ea; }
	.bm-mock .fbody { padding: .6rem .65rem; display: flex; flex-direction: column; gap: .45rem; }
	.bm-label { text-align: center; font-size: .74rem; font-weight: 600; color: #6e7680; margin-top: .55rem; } /* darker than --muted for AA contrast */
	/* checkmark control list (bento cards) */
	.ctrl-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
	.ctrl-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--body); line-height: 1.45; }
	.ctrl-list li svg { flex: none; margin-top: .15rem; }

	/* ---- Image-topped feature cards (embedded product UI) ---- */
	.feat-img-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; height: 100%; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
	.feat-img-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15,30,45,.1); border-color: #d8dde4; }
	.feat-img-card .shot { background: var(--bg-soft-2); padding: 1.3rem 1.3rem 0; border-bottom: 1px solid var(--line); height: 230px; }
	.feat-img-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-radius: 9px 9px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: 0 -10px 24px rgba(15,30,45,.08); }
	.feat-img-card .body { padding: 1.4rem 1.5rem 1.6rem; }
	.feat-img-card .body .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: .9rem; }
	.feat-img-card h5 { font-size: 1.1rem; font-weight: 600; margin-bottom: .45rem; }
	.feat-img-card p { font-size: .94rem; margin: 0; }

	/* ---- Dark glowing bento cards ---- */
	.glow-card { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.8rem 1.6rem; height: 100%; overflow: hidden; }
	.glow-card::before { content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, transparent, var(--glow, #6dd5ed), transparent); }
	.glow-card::after { content: ""; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 180px; height: 130px; background: radial-gradient(circle, var(--glow, #6dd5ed), transparent 70%); opacity: .3; filter: blur(28px); pointer-events: none; }
	.glow-card .gnum { font-family: 'Inter Tight', monospace; color: var(--glow, #6dd5ed); font-size: .8rem; font-weight: 600; letter-spacing: 1px; margin-bottom: .7rem; position: relative; z-index: 1; }
	.glow-card h5 { color: #fff; font-weight: 600; position: relative; z-index: 1; }
	.glow-card p { color: rgba(255,255,255,.72); position: relative; z-index: 1; margin-bottom: 0; }

	/* ---- Numbered step cards (top-border) ---- */
	.step-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 4px 4px 16px 16px; padding: 1.9rem 1.7rem; height: 100%; transition: transform .24s ease, box-shadow .24s ease; }
	.step-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,30,45,.08); }
	.step-card.s2 { border-top-color: #2046AE; }
	.step-card.s3 { border-top-color: var(--cyan); }
	.step-card .skicker { font-family: 'Inter Tight', monospace; font-size: .74rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
	.step-card.s2 .skicker { color: #2046AE; }
	.step-card.s3 .skicker { color: #0a9bb0; }
	.step-card h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: .5rem; }
	.step-card p { margin: 0; font-size: .96rem; }

	/* ---- FAQ aside ---- */
	.faq-aside { background: linear-gradient(160deg, var(--accent), var(--accent-dk)); color: #fff; border-radius: var(--radius); padding: 2.3rem; position: relative; overflow: hidden; }
	.faq-aside::after { content: ""; position: absolute; bottom: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.4), transparent 70%); filter: blur(40px); }
	.faq-aside > * { position: relative; z-index: 1; }
	.faq-aside h2 { color: #fff; font-weight: 600; margin-bottom: .8rem; }
	.faq-aside p { color: rgba(255,255,255,.85); font-size: 1rem; }
	.faq-aside .chip { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .5rem .95rem; font-size: .85rem; font-weight: 600; color: #fff; margin-bottom: 1.4rem; }

		/* ---- AI governance panel (coded mockup) ---- */
	.aigov-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px rgba(15,30,45,.12); padding: 1.5rem 1.6rem; max-width: 440px; margin: 0 auto; }
	.aigov-head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
	.aigov-head .aigov-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
	.aigov-head b { display: block; font-size: 1rem; color: var(--ink); font-weight: 600; line-height: 1.2; }
	.aigov-head small { font-size: .78rem; color: var(--muted); }
	.aigov-block { margin-bottom: 1.05rem; }
	.aigov-block:last-of-type { margin-bottom: 0; }
	.aigov-lbl { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
	.aigov-rows { display: flex; flex-direction: column; gap: .4rem; }
	.aigov-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; border-radius: 9px; font-size: .9rem; font-weight: 500; }
	.aigov-row.on { background: rgba(0,100,120,.07); color: var(--ink); }
	.aigov-row.on i { color: var(--accent); }
	.aigov-row.off { background: #f1f2f5; color: var(--muted); }
	.aigov-row.off i { color: var(--muted); }
	.aigov-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
	.aigov-chips span { font-size: .8rem; font-weight: 600; color: var(--accent-dk); background: var(--accent-tint); border-radius: 999px; padding: .35rem .8rem; }
	.aigov-chips span.muted { background: #f1f2f5; color: var(--muted); }
	.aigov-select { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 9px; font-size: .88rem; font-weight: 500; color: var(--ink); background: #fbfcfd; }
	.aigov-select i { color: var(--muted); }
	.aigov-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--body); }
	.aigov-foot i { color: var(--accent); }
/* ===================== scroll reveal ===================== */
	.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
	.reveal.is-visible { opacity: 1; transform: none; }
	.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
	.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
	@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

	/* Hero copy is the LCP element — it must never start at opacity:0 or
	   Lighthouse counts LCP at the END of the fade (measured: 3.2s vs 0.8s FCP).
	   Keep the rise-up motion via a transform-only CSS keyframe that runs
	   immediately on load (no JS dependency). Fade reveals stay everywhere else. */
	.hero-core .reveal, .hero-fan.reveal {
		opacity: 1; transform: none; transition: none;
		animation: hero-rise .6s ease both;
	}
	.hero-core .reveal.d1 { animation-delay: .05s; }
	.hero-core .reveal.d2 { animation-delay: .15s; }
	.hero-core .reveal.d3 { animation-delay: .25s; }
	.hero-fan.reveal { animation-delay: .25s; }
	@keyframes hero-rise { from { transform: translateY(26px); } to { transform: none; } }
	@media (prefers-reduced-motion: reduce) { .hero-core .reveal, .hero-fan.reveal { animation: none; } }

	/* ===================== case study pages (.cs-*) =====================
	   Promoted 7/9 from customers/autochair-2026.html + tpg-2026.html once the
	   template was approved (the .quote-band.cs-quote variant was promoted
	   earlier, next to .quote-band). autochair-2026 (non-video) and tpg-2026
	   (video) are the clone sources for every /customers/ page. */
	/* company logo introducing the at-a-glance strip (sits below the hero).
	   44px suits a tight wordmark; override per page for squarer logos. */
	.cs-hero-logo { display: block; height: 44px; width: auto; margin: 0 auto 2rem; }
	/* readable article column */
	.cs-wrap { max-width: 760px; margin: 0 auto; }
	.cs-wrap h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 1rem; }
	.cs-wrap h3 { font-size: 1.5rem; font-weight: 600; margin: 2.8rem 0 .8rem; }
	.cs-wrap h4 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 2.2rem 0 .6rem; }
	.cs-wrap p { font-size: 1.08rem; color: var(--body); line-height: 1.75; margin: 0 0 1.2rem; }
	.cs-wrap p a { color: var(--accent); font-weight: 500; }
	.cs-lead { font-size: 1.2rem !important; color: #3d4750 !important; }
	/* inline pull-quote (teal-tinted, left rule); .who attribution is optional */
	.cs-pull { margin: 1.9rem 0; padding: 1.4rem 1.6rem; background: var(--accent-tint); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; }
	.cs-pull p { font-size: 1.15rem; color: var(--ink); font-style: italic; margin: 0 0 .5rem; line-height: 1.55; }
	.cs-pull p:last-child { margin-bottom: 0; }
	.cs-pull .who { font-size: .9rem; color: var(--accent-dk); font-weight: 600; font-style: normal; }
	/* figure with caption */
	.cs-fig { margin: 2rem 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(15,30,45,.08); }
	.cs-fig a { display: block; }
	.cs-fig img { display: block; width: 100%; height: auto; }
	.cs-fig figcaption { font-size: .85rem; color: var(--muted); text-align: center; padding: .7rem 1rem; border-top: 1px solid var(--line); background: #fbfcfd; }
	/* image floated inside prose (company photo) */
	.cs-inline-img { float: right; width: 300px; max-width: 42%; margin: .3rem 0 1rem 1.5rem; border-radius: 12px; border: 1px solid var(--line); }
	@media (max-width: 575px) { .cs-inline-img { float: none; width: 100%; max-width: 100%; margin: 0 0 1.2rem; } }
	/* hero video (video template): capped .ph-frame below the hero copy; the
	   lightbox link is the thumbnail itself, no .ph-play overlay (thumbnail art
	   carries its own play button) */
	.cs-video { max-width: 420px; }
	.cs-video .ph-frame a { display: block; }
	.cs-video-cap { font-size: .92rem; color: var(--body); text-align: center; margin: 1rem auto 0; max-width: 46ch; }
	/* at-a-glance facts strip */
	.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; max-width: 940px; margin: 0 auto; }
	.cs-facts .f { background: #fff; padding: 1.3rem 1.4rem; }
	.cs-facts .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: .35rem; }
	.cs-facts .v { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
	@media (max-width: 767px) { .cs-facts { grid-template-columns: repeat(2, 1fr); } }

	/* ===================== filter pills + filterable grid (.demo-filter) =====================
	   Promoted 7/10 from products/demos-2026.html. A pill row that filters a .row of
	   .demo-item columns by data-groups tokens. The page's inline script toggles
	   .on / aria-pressed on the buttons and .is-hidden on the items, and drives the
	   FLIP shuffle animation (fade out leavers, slide survivors, fade in entrants). */
	.demo-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 2.8rem; }
	.demo-filter button {
		font: inherit; font-size: .88rem; font-weight: 600; color: var(--body);
		background: #fff; border: 1px solid var(--line); border-radius: 999px;
		padding: .5rem 1.15rem; cursor: pointer;
		transition: color .2s ease, border-color .2s ease, background-color .2s ease;
	}
	.demo-filter button:hover, .demo-filter button:focus-visible { border-color: var(--accent); color: var(--accent); }
	.demo-filter button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
	.demo-item.is-hidden { display: none; }

	/* ===================== video play overlay (.video-thumb .vplay) =====================
	   Promoted 7/10 from products/demos-2026.html. Small centered play badge over a
	   card's media link (add .video-thumb to the .fr-media anchor, put an
	   aria-hidden .vplay span inside). Red per the 7/10 standing rule: all video
	   play buttons #df2b35, hover #c51f29. */
	.video-thumb { position: relative; display: block; }
	.video-thumb .vplay {
		position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
		width: 52px; height: 52px; border-radius: 50%;
		background: #df2b35; color: #fff;
		display: flex; align-items: center; justify-content: center;
		font-size: .95rem; box-shadow: 0 8px 20px rgba(223,43,53,.40);
		transition: transform .22s ease, background-color .22s ease;
	}
	.video-thumb .vplay .fa { position: relative; left: 2px; }
	.frame-card:hover .video-thumb .vplay { transform: translate(-50%,-50%) scale(1.12); background: #c51f29; }
	@media (prefers-reduced-motion: reduce) { .frame-card:hover .video-thumb .vplay { transform: translate(-50%,-50%); } }

	/* ===================== frosted quote rotator (.qrot) =====================
	   Promoted 7/10 from products/demos-2026.html (the 7/9 trial-page design; the
	   standing rule: every teal quote band uses this, not the slick fade slider).
	   Sits inside .quote-band.cs-quote; a per-page inline script cycles .in/.out
	   (card slides in from the right, pauses, exits left; hover holds; reduced
	   motion gets a static first quote). Cards flex-center so short quotes sit
	   mid-card. NOTE: solutions/ai-2026.html still carries a redundant local copy
	   (without the flex centering) — delete it on next touch. */
	.qrot { display: grid; max-width: 820px; margin: 0 auto; }
	.qrot-card {
		grid-area: 1 / 1;
		background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
		backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
		border-radius: 20px; padding: 2.2rem 2.6rem; text-align: center;
		display: flex; flex-direction: column; justify-content: center;
		opacity: 0; transform: translateX(120vw); visibility: hidden;
	}
	.qrot-card .qr-mark { display: block; font-size: 3rem; line-height: .6; font-weight: 700; color: var(--cyan); opacity: .95; margin-bottom: 1rem; }
	.qrot-card .qr-text { font-size: 1.45rem; font-weight: 500; color: #fff; line-height: 1.5; margin-bottom: 1.1rem; }
	.qrot-card .qr-who { font-size: .95rem; color: rgba(255,255,255,.95); margin: 0; }
	.qrot-card .qr-who strong { color: #fff; font-weight: 600; }
	.qrot-card.in {
		visibility: visible; opacity: 1; transform: none;
		transition: transform .65s cubic-bezier(.25,.6,.3,1), opacity .5s ease, visibility 0s;
	}
	.qrot-card.out {
		visibility: visible; opacity: 0; transform: translateX(-120vw);
		transition: transform .6s cubic-bezier(.55,.05,.7,.4), opacity .55s ease, visibility 0s;
	}
	@media (max-width: 575px) { .qrot-card { padding: 1.7rem 1.4rem; } .qrot-card .qr-text { font-size: 1.15rem; } }
	@media (prefers-reduced-motion: reduce) { .qrot-card, .qrot-card.in, .qrot-card.out { transition: none; } }

	/* ===================== Google CSE results (search/index-2026.html) =====================
	   Google's cse.js injects its own stylesheet AFTER ours and paints each
	   result row (and the widget's tab/refinement headers) #fafbfb, which reads
	   as gray stripes on the white 2026 page. The page's inline override block
	   doesn't cover these, so they're neutralized here. !important is required
	   to beat the injected styles. Only matches on the search page. */
	.gsc-webResult.gsc-result,
	.gsc-results .gsc-imageResult,
	.gsc-tabHeader.gsc-tabhActive,
	.gsc-refinementHeader { background: transparent !important; }

	/* ===================== Mautic demo-form kit =====================
	   Promoted from aw/trial-2026.html's page-level skin (per that page's
	   promotion note) when the aw/ landing pages adopted the 2026 design.
	   Scoped to .demo-card instead of one form's wrapper id so the same
	   skin works with ANY embedded Mautic form. The float-label behavior
	   is driven by the Mautic form block in mrc-2026.js. */
	.demo-card {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: 0 24px 60px rgba(20,45,80,.10);
		padding: clamp(1.6rem, 3vw, 2.4rem);
	}
	.demo-card h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .4rem; }
	.demo-card .dc-sub { font-size: .95rem; color: var(--body); margin-bottom: 1.4rem; }
	.demo-card .mauticform-row { margin-bottom: 1.05rem; }
	.demo-card label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
	/* Float labels: placeholder-only look when empty; on focus/fill the label
	   fades in as a small chip on the field's top edge, so captions persist
	   after typing/autofill (the accessible version of placeholders). */
	.demo-card .mauticform-row:not(.mauticform-checkboxgrp) { position: relative; }
	.demo-card .mauticform-row:not(.mauticform-checkboxgrp) .mauticform-label {
		position: absolute; top: -.55rem; left: 14px; z-index: 1;
		margin: 0; padding: 0 .4rem; background: #fff; border-radius: 4px;
		font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--accent-dk);
		opacity: 0; transform: translateY(4px); pointer-events: none;
		transition: opacity .15s ease, transform .15s ease;
	}
	.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(:focus) .mauticform-label,
	.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-input:not(:placeholder-shown)) .mauticform-label,
	.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-textarea:not(:placeholder-shown)) .mauticform-label,
	.demo-card .mauticform-row.has-value:not(.mauticform-checkboxgrp) .mauticform-label {
		opacity: 1; transform: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.demo-card .mauticform-label { transition: none; }
	}
	.demo-card .mauticform-input,
	.demo-card .mauticform-selectbox,
	.demo-card .mauticform-textarea {
		width: 100%; box-sizing: border-box;
		font-family: inherit; font-size: .95rem; color: var(--ink);
		background: #fbfcfd; border: 1px solid #d6dbe3; border-radius: 10px;
		padding: .68rem .9rem;
		transition: border-color .15s ease, box-shadow .15s ease;
	}
	.demo-card .mauticform-input:focus,
	.demo-card .mauticform-selectbox:focus,
	.demo-card .mauticform-textarea:focus {
		outline: none; border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(0,100,120,.14);
	}
	.demo-card .mauticform-helpmessage { font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
	.demo-card .mauticform-errormsg { display: block; color: #c2333f; font-size: .82rem; margin-top: .3rem; }
	.demo-card .mauticform-checkboxgrp-row { display: flex; align-items: flex-start; gap: .55rem; }
	.demo-card .mauticform-checkboxgrp-checkbox { flex: none; width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--accent); }
	.demo-card .mauticform-checkboxgrp-label { font-weight: 400; font-size: .85rem; color: var(--body); line-height: 1.5; margin: 0; }
	/* the privacy-policy link ships from Mautic with inline color:white (built
	   for the old teal panels); force it visible on the white card */
	.demo-card .mauticform-checkboxgrp a { color: var(--accent) !important; }
	.demo-card .mauticform-button-wrapper { margin-top: .4rem; }
	/* Button: legacy-compat's bare .btn rule sets uppercase 11px letterspaced
	   text plus green --btn-* hover/active variables (all still needed by old
	   sliders). Neutralize each property explicitly, and pin :active with a
	   doubled class so it outranks the framework's 4-class active selector. */
	/* Selector depth matters here: Mautic's generate.js injects its own
	   stylesheet AFTER ours (document.write at the embed point) with
	   .mauticform-button-wrapper .mauticform-button (0,0,2,0) rules. Going
	   through the wrapper class puts these at (0,0,3,0)+ so the skin beats
	   the injected defaults on specificity, not order. (trial-2026's inline
	   skin solved the same problem with its wrapper-ID scope.) */
	.demo-card .mauticform-button-wrapper .mauticform-button {
		display: block; width: 100%;
		font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff;
		text-transform: none; letter-spacing: normal; white-space: normal;
		background: var(--btn-ink); border: 0; border-radius: 999px;
		padding: .85rem 1.5rem; cursor: pointer;
		transition: background-color .18s ease, transform .18s ease;
	}
	.demo-card .mauticform-button-wrapper .mauticform-button:hover { background: #183a94; transform: translateY(-1px); box-shadow: none; border: 0; }
	.demo-card .mauticform-button-wrapper .mauticform-button:active { background: #183a94; border: 0; box-shadow: none; transform: translateY(-1px); }
	.demo-card .mauticform-button-wrapper .mauticform-button:disabled,
	.demo-card .mauticform-button-wrapper .mauticform-button.submitting { opacity: .65; cursor: default; transform: none; }
	.demo-card .mauticform-post-success { color: var(--accent-dk); font-weight: 600; }

	/* form section: copy left, form right; stack on mobile */
	.demo-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
	.demo-split .check-intro { font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
	@media (max-width: 991px) { .demo-split { grid-template-columns: 1fr; } }

	/* confirmation card (thanks pages) */
	.confirm-card {
		max-width: 640px; margin: 0 auto; text-align: center;
		background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
		box-shadow: 0 24px 60px rgba(20,45,80,.10);
		padding: clamp(2rem, 4vw, 3rem);
	}
	.confirm-card .tick {
		display: inline-flex; align-items: center; justify-content: center;
		width: 60px; height: 60px; border-radius: 50%;
		background: rgba(0,100,120,.10); color: var(--accent-dk);
		font-size: 1.6rem; margin-bottom: 1.2rem;
	}
	.confirm-card h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: .6rem; }
	.confirm-card p { font-size: 1.05rem; color: var(--body); margin-bottom: 1.6rem; }

	/* small helpers used by the aw landing pages */
	.lb-lead { color: var(--muted); font-weight: 500; margin-bottom: 2rem; }
	.sec-more { margin-top: 1.6rem; }

	/* Bootstrap-style centering for a lone grid column (col-* + mx-auto).
	   Used on 2026 pages but missing from legacy-compat's purge set. */
	.mx-auto { margin-left: auto !important; margin-right: auto !important; }


/* ============================================================
   Phase 2 utilities (generated 2026-07-17 from inline style="" attrs).
   One class per distinct former inline-style string, exact declarations,
   so style-src can drop 'unsafe-inline'. Loaded LAST so it wins source order.
   ============================================================ */
.hero-h1{font-size:clamp(2rem,4vw,2.8rem) !important;color:#fff !important;margin-bottom:1rem !important;font-weight:700 !important;letter-spacing:-0.035em !important;}  /* x207 */
.hero-sub{max-width:620px !important;margin:0 auto 2rem !important;color:rgba(255,255,255,.8) !important;font-size:1.15rem !important;}  /* x159 */
/* The .hero-sub utility above is white, for the dark hero/CTA bands on the converted
   pages. The homepage (.hero-core, homepage-only) reuses .hero-sub on a LIGHT hero, so
   scope-restore its subtext to the inherited dark color. Fix 2026-07-17 for the homepage
   regression caused by making the Unit A utilities !important. Adjust color to taste. */
.hero-core .hero-sub{color:inherit !important;}
.arrow-light{--arrow-fill:#fff !important;}  /* x146 */
.u-1{max-width:820px !important;}  /* x92 */
.media-block{display:block !important;width:100% !important;height:auto !important;}  /* x62 */
.u-2{max-width:860px !important;margin:0 auto !important;}  /* x58 */
.u-3{max-width:720px !important;}  /* x56 */
.hero-sub-600{max-width:600px !important;margin:0 auto 2rem !important;color:rgba(255,255,255,.8) !important;font-size:1.15rem !important;}  /* x45 */
.tac{text-align:center !important;}  /* x45 */
.u-4{grid-template-columns:minmax(0,880px) !important;}  /* x43 */
.u-5{max-width:820px !important;margin-left:auto !important;margin-right:auto !important;}  /* x43 */
.u-6{padding-bottom:0 !important;}  /* x42 */
.u-7{font-size:1.9rem !important;}  /* x41 */
.u-8{max-width:64ch !important;}  /* x41 */
.u-9{max-width:760px !important;}  /* x41 */
.u-10{max-width:860px !important;}  /* x40 */
.u-11{background:#fff !important;color:var(--ink) !important;margin-top:.4rem !important;}  /* x39 */
.u-12{font-size:.85rem !important;color:var(--muted) !important;margin-top:2.5rem !important;}  /* x36 */
.u-13{grid-template-columns:minmax(0,900px) !important;}  /* x34 */
.media-inline{max-width:100% !important;height:auto !important;border-radius:12px !important;margin:1.4rem 0 !important;display:block !important;}  /* x34 */
.u-14{text-align:center !important;font-size:.9rem !important;color:var(--muted) !important;margin-top:.5rem !important;}  /* x28 */
.media-hero{border-radius:20px !important;overflow:hidden !important;box-shadow:0 12px 28px rgba(7,38,48,.12), 0 32px 70px rgba(0,100,120,.16) !important;}  /* x26 */
.u-15{max-width:72ch !important;}  /* x26 */
.media-drop{display:block !important;margin:0 auto 1rem !important;filter:drop-shadow(0 5px 8px rgba(23,58,94,.28)) !important;}  /* x24 */
.u-16{margin-bottom:2rem !important;}  /* x20 */
.u-17{font-size:.8rem !important;opacity:.9 !important;margin-top:1.4rem !important;margin-bottom:0 !important;}  /* x18 */
.u-18{margin-top:1rem !important;}  /* x18 */
.u-19{white-space:nowrap !important;font-size:2.1rem !important;}  /* x18 */
.u-20{margin-top:2.8rem !important;}  /* x17 */
.u-21{font-size:1rem !important;}  /* x16 */
.u-22{font-size:.85rem !important;color:var(--muted) !important;margin-bottom:.8rem !important;}  /* x15 */
.u-23{font-size:1.25rem !important;margin-bottom:.2rem !important;}  /* x15 */
.u-24{color:var(--body) !important;margin-bottom:1.4rem !important;}  /* x14 */
.u-25{font-size:1.3rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:.6rem !important;}  /* x14 */
.u-26{margin-top:2.4rem !important;}  /* x11 */
.u-27{max-width:900px !important;margin:0 auto !important;}  /* x11 */
.u-28{--i:0 !important;}  /* x10 */
.u-29{--i:1 !important;}  /* x10 */
.u-30{--i:2 !important;}  /* x10 */
.u-31{--i:3 !important;}  /* x10 */
.u-32{font-size:.8rem !important;opacity:.7 !important;margin-top:1.4rem !important;margin-bottom:0 !important;}  /* x10 */
.u-33{grid-template-columns:minmax(0,940px) !important;}  /* x10 */
.u-34{max-width:1000px !important;margin-left:auto !important;margin-right:auto !important;}  /* x10 */
.u-35{max-width:800px !important;}  /* x10 */
.u-36{--i:4 !important;}  /* x9 */
.u-37{--i:5 !important;}  /* x9 */
.u-38{color:var(--body) !important;}  /* x9 */
.u-39{font-size:1.6rem !important;}  /* x9 */
.u-40{margin-bottom:.4rem !important;}  /* x9 */
.u-41{max-width:66ch !important;}  /* x9 */
.u-42{max-width:780px !important;}  /* x9 */
.u-43{font-size:.85rem !important;color:var(--body) !important;margin-top:2.5rem !important;}  /* x8 */
.u-44{font-size:.85rem !important;color:var(--muted) !important;margin-top:1.4rem !important;}  /* x8 */
.u-45{font-size:.88rem !important;color:var(--body) !important;margin-bottom:1.1rem !important;}  /* x8 */
.u-46{font-size:1.1rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:.5rem !important;}  /* x8 */
.u-47{margin-left:0 !important;}  /* x8 */
.u-48{max-width:560px !important;}  /* x8 */
.u-49{max-width:960px !important;}  /* x7 */
.arrow-light-soft{--arrow-fill:#fff !important;background-color:#e6edf1 !important;}  /* x6 */
.u-50{background:var(--bg-soft) !important;border:1px solid var(--line) !important;}  /* x6 */
.u-51{display:block !important;}  /* x6 */
.u-52{font-size:clamp(1.5rem,2.6vw,1.9rem) !important;font-weight:700 !important;margin:0 !important;}  /* x6 */
.u-53{grid-template-columns:1fr 1fr !important;grid-auto-rows:minmax(150px,auto) !important;}  /* x6 */
.u-54{grid-template-columns:minmax(0,1000px) !important;}  /* x6 */
.u-55{grid-template-columns:minmax(0,820px) !important;}  /* x6 */
.u-56{max-width:56ch !important;}  /* x6 */
.u-57{max-width:680px !important;}  /* x6 */
.u-58{max-width:none !important;}  /* x6 */
.u-59{text-align:center !important;margin-bottom:1.6rem !important;}  /* x6 */
.u-60{margin-bottom:2.4rem !important;}  /* x5 */
.u-61{margin-top:.4rem !important;}  /* x5 */
.u-62{max-width:70ch !important;}  /* x5 */
.u-63{max-width:840px !important;margin-left:auto !important;margin-right:auto !important;}  /* x5 */
.u-64{padding-top:0 !important;}  /* x5 */
.u-65{font-size:1.15rem !important;font-weight:700 !important;color:var(--ink) !important;margin:0 0 1.1rem !important;}  /* x4 */
.u-66{height:100% !important;}  /* x4 */
.u-67{margin-bottom:0 !important;}  /* x4 */
.u-68{max-width:640px !important;}  /* x4 */
.u-69{white-space:nowrap !important;}  /* x4 */
.u-70{color:#fff !important;}  /* x3 */
.u-71{color:var(--body) !important;line-height:1.7 !important;}  /* x3 */
.u-72{color:var(--body) !important;line-height:1.65 !important;}  /* x3 */
.u-73{font-size:.92rem !important;color:var(--body) !important;margin-bottom:1.1rem !important;}  /* x3 */
.u-74{font-size:1.15rem !important;font-weight:600 !important;color:#22333b !important;margin:.3rem 0 0 !important;}  /* x3 */
.u-75{font-size:1.15rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:.5rem !important;}  /* x3 */
.u-76{font-size:1.15rem !important;margin-bottom:.8rem !important;}  /* x3 */
.u-77{font-size:1.6rem !important;color:var(--ink) !important;font-weight:700 !important;margin-top:auto !important;}  /* x3 */
.u-78{grid-template-columns:minmax(0,800px) !important;}  /* x3 */
.u-79{height:42% !important;}  /* x3 */
.u-80{height:50% !important;}  /* x3 */
.u-81{height:58% !important;}  /* x3 */
.u-82{height:66% !important;}  /* x3 */
.u-83{height:74% !important;}  /* x3 */
.u-84{height:80% !important;}  /* x3 */
.u-85{height:90% !important;}  /* x3 */
.u-86{justify-content:center !important;}  /* x3 */
.u-87{margin-top:.6rem !important;}  /* x3 */
.u-88{margin-top:.9rem !important;}  /* x3 */
.u-89{margin-top:1.1rem !important;}  /* x3 */
.u-90{margin-top:1.6rem !important;}  /* x3 */
.u-91{margin-top:2.5rem !important;}  /* x3 */
.u-92{margin-top:2.6rem !important;}  /* x3 */
.u-93{max-width:74ch !important;color:#22333b !important;}  /* x3 */
.u-94{max-width:780px !important;margin-left:auto !important;margin-right:auto !important;}  /* x3 */
.u-95{max-width:900px !important;}  /* x3 */
.u-96{--arrow-fill:#f4f5f8 !important;}  /* x2 */
.u-97{background:#fff !important;}  /* x2 */
.u-98{color:#fff !important;font-weight:700 !important;}  /* x2 */
.u-99{color:inherit !important;}  /* x2 */
.u-100{color:var(--accent) !important;}  /* x2 */
.u-101{color:var(--body) !important;line-height:1.6 !important;margin-top:1rem !important;}  /* x2 */
.u-102{color:var(--body) !important;line-height:1.6 !important;margin:0 0 1.6rem !important;}  /* x2 */
.u-103{color:var(--muted) !important;font-weight:500 !important;margin-bottom:2rem !important;}  /* x2 */
.u-104{display:flex !important;gap:.6rem !important;flex-wrap:wrap !important;margin-bottom:1.1rem !important;}  /* x2 */
.u-105{font-size:1.3rem !important;margin-bottom:.9rem !important;}  /* x2 */
.u-106{font-size:1.4rem !important;}  /* x2 */
.u-107{font-size:1.5rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:.6rem !important;}  /* x2 */
.u-108{font-size:1.6rem !important;font-weight:700 !important;margin-top:auto !important;}  /* x2 */
.u-109{grid-template-columns:minmax(0,820px) !important;justify-items:center !important;}  /* x2 */
.u-110{margin-bottom:1.6rem !important;}  /* x2 */
.u-111{margin-bottom:2.6rem !important;}  /* x2 */
.u-112{margin-top:.8rem !important;}  /* x2 */
.u-113{margin-top:2.2rem !important;}  /* x2 */
.u-114{margin-top:auto !important;}  /* x2 */
.u-115{margin:1.8rem 0 2.4rem !important;}  /* x2 */
.u-116{max-width:660px !important;}  /* x2 */
.u-117{max-width:700px !important;}  /* x2 */
.u-118{text-align:left !important;}  /* x2 */
.u-119{width:20% !important;}  /* x2 */
.u-120{--arrow-fill:#f7fafb !important;background-color:#e6edf1 !important;}  /* x1 */
.u-121{--arrow-fill:var(--bg-soft) !important;}  /* x1 */
.u-122{--glow:#2dd4bf !important;}  /* x1 */
.u-123{--glow:#6dd5ed !important;}  /* x1 */
.u-124{--glow:#864FFE !important;}  /* x1 */
.u-125{align-items:center !important;}  /* x1 */
.u-126{align-items:center !important;margin-bottom:clamp(3rem,6vw,4.5rem) !important;}  /* x1 */
.u-127{aspect-ratio:4/5 !important;}  /* x1 */
.u-128{background-color:#e6edf1 !important;}  /* x1 */
.u-129{background:#0c1116 !important;}  /* x1 */
.u-130{background:#111 !important;color:#fff !important;padding:2.5rem 0 !important;}  /* x1 */
.u-131{background:#b4530a !important;color:#fff !important;}  /* x1 */
.u-132{background:var(--accent-tint) !important;margin-bottom:0 !important;}  /* x1 */
.u-133{background:var(--ink) !important;color:#fff !important;}  /* x1 */
.u-134{bottom:12% !important;left:-6% !important;}  /* x1 */
.u-135{color:#22333b !important;}  /* x1 */
.u-136{color:#6e7680 !important;font-weight:500 !important;margin-bottom:2rem !important;}  /* x1 */
.u-137{color:#fff !important;font-size:2rem !important;}  /* x1 */
.u-138{color:rgba(255,255,255,.7) !important;max-width:70ch !important;margin:0 !important;}  /* x1 */
.u-139{color:rgba(255,255,255,.85) !important;}  /* x1 */
.u-140{color:var(--accent) !important;font-weight:600 !important;}  /* x1 */
.u-141{color:var(--body) !important;line-height:1.65 !important;margin:0 !important;}  /* x1 */
.u-142{color:var(--body) !important;line-height:1.7 !important;margin-bottom:1.7rem !important;}  /* x1 */
.u-143{color:var(--body) !important;margin:2.2rem 0 1.2rem !important;}  /* x1 */
.u-144{color:var(--ink) !important;border-color:var(--line) !important;}  /* x1 */
.u-145{color:var(--ink) !important;font-weight:700 !important;}  /* x1 */
.u-146{display:block !important;margin-bottom:1.1rem !important;}  /* x1 */
.u-147{display:block !important;margin:0 auto 1.1rem !important;filter:drop-shadow(0 5px 8px rgba(23,58,94,.28)) !important;}  /* x1 */
.u-148{display:block !important;width:100% !important;}  /* x1 */
.u-149{display:block !important;width:100% !important;height:auto !important;border-radius:14px !important;}  /* x1 */
.u-150{display:flex !important;gap:1rem !important;flex-wrap:wrap !important;align-items:center !important;}  /* x1 */
.u-151{display:none !important;visibility:hidden !important;}  /* x1 */
.u-152{font-size:.95rem !important;}  /* x1 */
.u-153{font-size:.95rem !important;color:var(--accent-dk) !important;font-weight:600 !important;margin:.95rem 0 0 !important;}  /* x1 */
.u-154{font-size:.95rem !important;color:var(--body) !important;margin-bottom:1.2rem !important;}  /* x1 */
.u-155{font-size:1.1rem !important;color:var(--body) !important;max-width:640px !important;margin:0 auto 1.4rem !important;}  /* x1 */
.u-156{font-size:1.25rem !important;color:var(--body) !important;max-width:760px !important;margin:0 auto !important;}  /* x1 */
.u-157{font-size:1.2rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:.5rem !important;}  /* x1 */
.u-158{font-size:1.35rem !important;font-weight:700 !important;color:var(--ink) !important;margin-bottom:.6rem !important;}  /* x1 */
.u-159{font-size:1.4rem !important;font-weight:600 !important;color:var(--ink) !important;margin:0 0 1.15rem !important;}  /* x1 */
.u-160{font-size:clamp(1.5rem,3vw,2rem) !important;font-weight:600 !important;color:var(--ink) !important;}  /* x1 */
.u-161{font-size:clamp(1.7rem,3vw,2.2rem) !important;font-weight:700 !important;letter-spacing:-0.02em !important;margin-bottom:1rem !important;}  /* x1 */
.u-162{font-size:clamp(1.7rem,3vw,2.2rem) !important;font-weight:700 !important;letter-spacing:-0.03em !important;color:var(--ink) !important;margin-bottom:1.2rem !important;}  /* x1 */
.u-163{font-size:clamp(1.9rem,3.4vw,2.5rem) !important;font-weight:700 !important;letter-spacing:-0.03em !important;margin-bottom:1.1rem !important;}  /* x1 */
.u-164{font-size:clamp(1.9rem,3.4vw,2.6rem) !important;font-weight:600 !important;letter-spacing:-0.025em !important;}  /* x1 */
.u-165{font-size:clamp(1.9rem,3.4vw,2.6rem) !important;font-weight:700 !important;letter-spacing:-0.025em !important;}  /* x1 */
.u-166{grid-auto-rows:minmax(180px,auto) !important;}  /* x1 */
.u-167{grid-template-columns:minmax(0,760px) !important;justify-items:center !important;}  /* x1 */
.u-168{grid-template-columns:minmax(0,760px) !important;text-align:center !important;margin:0 auto !important;}  /* x1 */
.u-169{grid-template-columns:minmax(0,860px) !important;}  /* x1 */
.u-170{justify-content:flex-start !important;margin-bottom:1.8rem !important;}  /* x1 */
.u-171{margin-bottom:1.4rem !important;}  /* x1 */
.u-172{margin-bottom:1rem !important;}  /* x1 */
.u-173{margin-bottom:2.2rem !important;}  /* x1 */
.u-174{margin-right:.5rem !important;color:var(--accent) !important;}  /* x1 */
.u-175{margin-top:1.8rem !important;}  /* x1 */
.u-176{margin-top:1.8rem !important;justify-content:flex-start !important;}  /* x1 */
.u-177{margin-top:3.4rem !important;}  /* x1 */
.u-178{margin-top:3rem !important;}  /* x1 */
.u-179{margin-top:auto !important;padding-top:1.4rem !important;}  /* x1 */
.u-180{max-height:44px !important;}  /* x1 */
.u-181{max-width: 1400px !important;}  /* x1 */
.u-182{max-width:1000px !important;}  /* x1 */
.u-183{max-width:1000px !important;margin:2.4rem auto 0 !important;}  /* x1 */
.u-184{max-width:1040px !important;}  /* x1 */
.u-185{max-width:320px !important;}  /* x1 */
.u-186{max-width:460px !important;margin:0 auto !important;}  /* x1 */
.u-187{max-width:520px !important;margin-left:auto !important;margin-right:auto !important;text-align:left !important;}  /* x1 */
.u-188{max-width:560px !important;margin:0 auto !important;text-align:center !important;}  /* x1 */
.u-189{max-width:56ch !important;margin-left:auto !important;margin-right:auto !important;}  /* x1 */
.u-190{max-width:60ch !important;}  /* x1 */
.u-191{max-width:640px !important;margin:1.6rem auto 2rem !important;}  /* x1 */
.u-192{max-width:64ch !important;color:#22333b !important;margin-left:auto !important;margin-right:auto !important;}  /* x1 */
.u-193{max-width:64ch !important;margin-left:auto !important;margin-right:auto !important;}  /* x1 */
.u-194{max-width:66ch !important;color:#22333b !important;}  /* x1 */
.u-195{max-width:66ch !important;margin:0 auto 1.4rem !important;color:var(--body) !important;}  /* x1 */
.u-196{max-width:70ch !important;color:#22333b !important;}  /* x1 */
.u-197{max-width:70ch !important;color:#22333b !important;margin-left:auto !important;margin-right:auto !important;}  /* x1 */
.u-198{max-width:720px !important;margin-bottom:2.6rem !important;}  /* x1 */
.u-199{max-width:720px !important;margin:0 auto 1.4rem !important;color:var(--body) !important;}  /* x1 */
.u-200{max-width:720px !important;margin:2rem auto 0 !important;}  /* x1 */
.u-201{max-width:760px !important;margin:0 auto 1.4rem !important;color:var(--body) !important;}  /* x1 */
.u-202{max-width:760px !important;margin:0 auto !important;}  /* x1 */
.u-203{max-width:760px !important;margin:0 auto !important;text-align:center !important;}  /* x1 */
.u-204{max-width:840px !important;}  /* x1 */
.u-205{max-width:850px !important;}  /* x1 */
.u-206{max-width:880px !important;}  /* x1 */
.u-207{max-width:940px !important;margin:0 auto !important;}  /* x1 */
.u-208{max-width:980px !important;}  /* x1 */
.u-209{padding-bottom:1rem !important;}  /* x1 */
.u-210{padding-bottom:clamp(8rem,12vw,11rem) !important;}  /* x1 */
.u-211{padding-top:1rem !important;}  /* x1 */
.u-212{padding-top:clamp(2.4rem,5vw,3.6rem) !important;}  /* x1 */
.u-213{padding-top:clamp(2rem,4vw,3rem) !important;}  /* x1 */
.u-214{text-align:center !important;margin-top:1.8rem !important;}  /* x1 */
.u-215{text-align:center !important;max-width:640px !important;margin:2.6rem auto 0 !important;color:var(--body) !important;font-size:.95rem !important;}  /* x1 */
.u-216{top:18% !important;right:-4% !important;}  /* x1 */
.u-217{width:100% !important;display:block !important;}  /* x1 */
.u-218{width:46px !important;height:46px !important;border-radius:12px !important;background:#ecf5f6 !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:1.05rem !important;flex:none !important;}  /* x1 */
.u-219{width:46px !important;height:46px !important;border-radius:12px !important;background:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:1.05rem !important;flex:none !important;}  /* x1 */
.u-220{width:60% !important;}  /* x1 */


/* ============================================================
   Include styles moved inline -> external (Unit B, CSP, 2026-07-17).
   Formerly <style> blocks in ssi/navbar-home-2026.html + ssi/footer-2026.html.
   Global (every 2026 page), component-scoped selectors; appended last so they
   keep the same cascade position they had as end-of-document inline styles.
   ============================================================ */

/* ---- from ssi/navbar-home-2026.html ---- */
@media (min-width: 992px) {
	/* The visible card is drawn on ::before, NOT on the .submenu box itself, so the
	   box can stay flush against the bar (hover is continuous, no gap to fall into)
	   while the card sits a 16px gap lower. Because there's no translate-gap and no
	   hover-bridge, a wide panel never overlaps the neighbouring toggles, so moving
	   between items hands off cleanly with no flashing. The 16px transparent strip at
	   the panel's top is part of its hit area, so dragging straight down stays open. */
	.navbar .nav-navbar .submenu {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible;
		padding: calc(16px + 1.35rem) 1.5rem 1.35rem !important;  /* top = 16px gap + card's inner padding */
	}
	.navbar .nav-navbar > .nav-item:not(.nav-mega) > .submenu { min-width: 16rem; }

	.navbar .nav-navbar .submenu::before {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 16px; bottom: 0;   /* card starts 16px down (the gap) */
		background: #fff;
		border: 1px solid #eef0f3;
		border-radius: 18px;
		box-shadow: 0 26px 60px rgba(15,30,45,.16), 0 6px 16px rgba(15,30,45,.06);
		z-index: -1;   /* behind the links */
	}

	/* section labels (muted, sentence case) */
	.navbar .nav-navbar .submenu h6,
	.navbar .nav-navbar .submenu .nav-section-heading {
		font-size: .82rem;
		font-weight: 600;
		letter-spacing: .01em;
		text-transform: none;
		color: var(--body);   /* ~6:1 on the white card — passes WCAG AA (was --muted, ~3.1:1, failed) */
		margin: 0 .55rem .4rem;
	}
	.navbar .nav-navbar .submenu .nav-divider {
		margin: .35rem .55rem .55rem;
		border-color: #eef0f3;
	}

	/* links: roomy rows with a rounded hover highlight + nudge right on hover */
	.navbar .nav-navbar .submenu .nav-link {
		font-size: .97rem !important;
		font-weight: 400;
		color: #20262e !important;
		padding: .5rem .6rem !important;
		border-radius: 10px;
		transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
	}
	.navbar .nav-navbar .submenu .nav-link:hover {
		background: var(--accent-tint);
		color: var(--accent-dk) !important;
		padding-left: 1.05rem !important;
	}

	/* Keyboard focus: same highlight as hover plus a clear outline (WCAG 2.4.7) */
	.navbar .nav-navbar .submenu .nav-link:focus-visible {
		background: var(--accent-tint);
		color: var(--accent-dk) !important;
		padding-left: 1.05rem !important;
		outline: 2px solid var(--accent-dk);
		outline-offset: -2px;
	}
	/* Focus indicator on the top-level toggles */
	.navbar .nav-navbar > .nav-item > .nav-link:focus-visible {
		outline: 2px solid var(--accent-dk);
		outline-offset: 2px;
		border-radius: 8px;
	}

	/* Open state set by the dropdown controller (click / keyboard). A dedicated class
	   with !important is the single source of truth for the open visual, so it doesn't
	   get lost in the aria-hidden specificity war between the theme and the custom CSS.
	   Mirrors the hover-open look; the inner rule reveals the mega-menu link columns. */
	.navbar .nav-navbar > .nav-item.is-open > .submenu {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
	}
	.navbar .nav-navbar > .nav-item.is-open .nav {
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* ---- Site search (icon + slide-out drawer), 2026 restyle ----
   The icon was text-white (invisible on the white navbar-light bar). The old
   framework offcanvas covered the whole top of the page in solid teal; it is
   replaced by a drawer that slides out from BEHIND the navbar and rests flush
   beneath it. The wrapper (.search-drawer) is pinned to the navbar's bottom
   edge and clips everything above it, so the panel can only emerge below the
   bar. Controller script is at the bottom of this file (no legacy JS). */
.navbar .nav-search-toggle { color: var(--ink); cursor: pointer; }
.navbar .nav-search-toggle:hover { color: var(--accent-dk); }
.navbar .nav-search-toggle:focus-visible {
	color: var(--accent-dk);
	outline: 2px solid var(--accent-dk);
	outline-offset: 3px;
	border-radius: 8px;
}

.search-drawer {
	position: absolute;
	top: 100%;              /* flush against the navbar's bottom edge, no gap */
	left: 0; right: 0;
	overflow: hidden;       /* clips the panel while it's tucked "behind" the bar */
	padding-bottom: 44px;   /* room inside the clip region for the panel's shadow */
	pointer-events: none;   /* the transparent shadow strip never blocks clicks */
}
.search-drawer-panel {
	background: var(--accent-tint);
	border-bottom: 1px solid #d4e4e8;
	box-shadow: 0 18px 40px rgba(15,30,45,.14);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .32s ease, visibility 0s linear .32s;
	pointer-events: auto;
}
.search-drawer.is-open .search-drawer-panel {
	transform: translateY(0);
	visibility: visible;
	transition: transform .32s ease;
}
@media (prefers-reduced-motion: reduce) {
	.search-drawer-panel,
	.search-drawer.is-open .search-drawer-panel { transition: none; }
}

.search-drawer-panel form {
	display: flex;
	align-items: center;
	gap: .8rem;
	max-width: 760px;
	margin: 0 auto;
	padding: 1.35rem 1.25rem;
}
.search-drawer-panel .form-control {
	flex: 1 1 auto;
	font-family: 'Inter Tight', sans-serif;
	color: var(--ink);
	background: #fff;
	border: 1px solid #cfe0e5;
	border-radius: 999px;
	padding: .7rem 1.35rem;
	height: auto;
	box-shadow: none;
}
.search-drawer-panel .form-control::placeholder { color: var(--muted); }
.search-drawer-panel .form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0,100,120,.14);
}
/* Submit is ink-black, NOT the blue pill: blue stays reserved for the one
   conversion CTA (Get a Demo) so search doesn't compete with it. Fully
   self-styled (no legacy .btn classes) with flex centering, so the label
   sits dead-center regardless of the framework's line-height rules. */
.search-drawer-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: 'Inter Tight', sans-serif;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	padding: .85rem 1.7rem;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.search-drawer-submit:hover { background: #000; transform: translateY(-1px); }
.search-drawer-submit:focus-visible {
	outline: 2px solid var(--accent-dk);
	outline-offset: 2px;
}
.search-drawer-close {
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	padding: .2rem .45rem;
	color: var(--ink);
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s ease;
}
.search-drawer-close:hover,
.search-drawer-close:focus-visible { opacity: 1; }
.search-drawer-close:focus-visible {
	outline: 2px solid var(--accent-dk);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Current-section indicator (set by the section-highlight script at the bottom
   of this file). The toggle for the section you're in gets accent color and,
   on desktop, a short underline bar. The exact page's link inside the dropdown
   gets a tinted row via aria-current="page". */
.navbar .nav-navbar > .nav-item.is-section > .nav-link {
	color: var(--accent-dk) !important;
	font-weight: 600;
}
@media (min-width: 992px) {
	.navbar .nav-navbar > .nav-item.is-section > .nav-link { position: relative; }
	.navbar .nav-navbar > .nav-item.is-section > .nav-link::after {
		content: "";
		position: absolute;
		left: 1.1rem; right: 1.4rem; bottom: 4px;
		height: 3px;
		border-radius: 3px;
		background: var(--accent);
	}
	.navbar .nav-navbar .submenu .nav-link[aria-current="page"] {
		font-weight: 600;
		color: var(--accent-dk) !important;
		background: var(--accent-tint);
	}
}

/* =================== Mobile menu (2026 rebuild, 7/15) ===================
   Native popover slide-in sheet + <details> accordions. Replaces the old
   page.min.js off-canvas. Near-zero JS: open/close/Esc/backdrop = Popover API,
   accordions = <details name>, scroll lock = :has(). A tiny no-popover
   fallback script sits right after the #mnav markup. Desktop (>=992px)
   never sees any of this. */
.mnav-burger { display: none; }
@media (max-width: 991.98px) {
	/* Retire the old off-canvas: this markup now serves desktop dropdowns only */
	.navbar-mobile { display: none !important; }
	.mnav-burger {
		display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
		width: 44px; height: 44px; margin-right: .25rem; padding: 0; background: none; border: 0; cursor: pointer;
	}
	.mnav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); }
}
@media (min-width: 992px) { #mnav { display: none !important; } }
#mnav {
	position: fixed; inset: 0 0 0 auto; margin: 0; width: min(400px, 92vw); height: 100dvh; max-height: none;
	border: 0; padding: 0; background: #fff; box-shadow: -24px 0 60px rgba(15,30,45,.2);
	overflow-y: auto; overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform .3s ease, display .3s ease allow-discrete, overlay .3s ease allow-discrete;
}
#mnav:popover-open { transform: none; }
@starting-style { #mnav:popover-open { transform: translateX(100%); } }
#mnav::backdrop { background: rgba(13,25,33,.45); transition: background .3s ease, display .3s ease allow-discrete, overlay .3s ease allow-discrete; }
@starting-style { #mnav:popover-open::backdrop { background: rgba(13,25,33,0); } }
body:has(#mnav:popover-open) { overflow: hidden; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.mnav-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f0f2f6; color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.mnav-cta { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
/* Demo pill fills the row and centers its label (btn-pill is inline-flex, so it
   needs justify-content, not text-align, to center). In search mode it gives up
   its grow, shrinking to its label so the input can expand. The expand/collapse
   is driven by animating flex-grow (which is interpolatable), not width. */
.mnav-cta .mnav-demo { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; transition: flex-grow .3s ease; }
.mnav-cta.searching .mnav-demo { flex-grow: 0; }

/* Site search: a round icon button that expands into a full input on tap. At
   rest the form is sized to just the button (input flex-basis 0 = zero width);
   tapping grows the form (and shrinks the demo pill). flex-basis:0 keeps the
   input's default intrinsic width from forcing the button off the row. */
.mnav-search { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: .4rem; margin: 0; transition: flex-grow .3s ease; }
.mnav-cta.searching .mnav-search { flex-grow: 1; }
.mnav-search-input {
	flex: 1 1 0; min-width: 0; width: 0; padding: 0; height: 44px;
	background: var(--bg-soft-2); border: 1px solid transparent; border-radius: 999px;
	font-family: 'Inter Tight', sans-serif; font-size: .95rem; color: var(--ink);
	opacity: 0; transition: opacity .2s ease, padding .28s ease, border-color .15s ease, background-color .15s ease;
}
.mnav-cta.searching .mnav-search-input { opacity: 1; padding: 0 1.1rem; }
.mnav-search-input::placeholder { color: var(--muted); }
.mnav-search-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(0,100,120,.14); }
.mnav-search-btn {
	flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--bg-soft-2); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, color .15s ease;
}
.mnav-search-btn:hover { background: #e6e9ef; }
.mnav-cta.searching .mnav-search-btn { background: var(--accent); color: #fff; }
.mnav-search-btn:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }
.mnav-sec summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.4rem; font-weight: 600; font-size: 1.04rem; color: var(--ink); cursor: pointer; }
.mnav-sec summary::-webkit-details-marker { display: none; }
.mnav-sec summary .fa { color: var(--muted); transition: transform .2s ease; }
.mnav-sec[open] summary { color: var(--accent-dk); }
.mnav-sec[open] summary .fa { transform: rotate(180deg); }
.mnav-sec + .mnav-sec { border-top: 1px solid var(--line); }
.mnav-links { padding: 0 1.4rem 1.1rem; display: flex; flex-direction: column; }
/* Full-width rows, min 44px tall so each is a comfortable finger target (WCAG 2.5.5). */
.mnav-links a { display: flex; align-items: center; min-height: 44px; padding: .55rem 0; color: var(--body); font-size: .97rem; text-decoration: none; }
.mnav-links a:active { color: var(--accent-dk); }
/* Section sub-labels: accent-colored micro-headers with a hairline rule above
   each group (except the first) so they clearly read as dividers, not links. */
.mnav-sub { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-dk); margin: 1.1rem 0 .3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mnav-links > .mnav-sub:first-child { margin-top: .25rem; padding-top: 0; border-top: 0; }
/* No-popover fallback (old browsers): hidden until the fallback script toggles it */
@supports not selector(:popover-open) {
	#mnav { display: none; }
	#mnav.mnav-open { display: block; transform: none; }
	body.mnav-locked { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	#mnav, #mnav::backdrop, .mnav-sec summary .fa { transition: none; }
}

/* ---- from ssi/footer-2026.html ---- */
.footer-v3 { background:#006478; color:rgba(255,255,255,.9); }
.footer-v3 h2 { color:#fff; }
.footer-v3 p { color:rgba(255,255,255,.9); }
.footer-v3 .nav-link { color:rgba(255,255,255,.82); padding-left:0; padding-top:.26rem; padding-bottom:.26rem; font-size:.95rem; }
.footer-v3 .nav-link:hover { color:#fff; }
.footer-v3 hr { border-color:rgba(255,255,255,.18); }
.footer-v3 small { color:rgba(255,255,255,.82); }
.footer-v3 .foot-head { color:#fff; font-size:.78rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; margin-bottom:1rem; }
.footer-v3 .foot-lede { color:rgba(255,255,255,.9); font-size:.98rem; line-height:1.6; max-width:340px; }
.footer-v3 .foot-trust { color:rgba(255,255,255,.82); font-size:.86rem; margin:1.1rem 0 0; }
.footer-v3 .foot-trust strong { color:#fff; font-weight:600; }
.footer-v3 .foot-legal { font-size:.82rem; color:rgba(255,255,255,.82); line-height:1.7; }
.footer-v3 .foot-legal a { color:rgba(255,255,255,.82); }
.footer-v3 .foot-legal a:hover { color:#fff; }
.footer-v3 .foot-legal-links { margin:0 0 .9rem; }
.footer-v3 .foot-legal-links a { color:rgba(255,255,255,.82); white-space:nowrap; }
.footer-v3 .foot-legal-links a:hover { color:#fff; }
.footer-v3 .foot-legal-links a:not(:last-child)::after { content:"\00b7"; color:rgba(255,255,255,.45); margin:0 .55rem; }

/* ---------------------------------------------------------------------------
   Self-serve evaluation path (added 2026-07-26, Steve)
   .alt-path  = quiet secondary line under a primary CTA (mpower-demo hero).
   .pt-eval   = the Evaluation column in the license comparison table, modelled
                on products/pricing--new-8-20-25.html. Tinted so it reads as a
                trial rather than a fourth paid tier.
   .pt-note   = the "evaluate over your own data" line under the table.
   Uses --body, not --muted: --muted (#8a929c) fails WCAG AA on white.
   --------------------------------------------------------------------------- */
.alt-path { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(0,0,0,.09); font-size: .93rem; line-height: 1.6; color: var(--body); }
.alt-path a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.price-table th.pt-eval,
.price-table td.pt-eval { background: #f2f8f9; }
.price-table thead th.pt-eval { color: var(--accent); }
.price-table td.pt-eval { font-size: .95rem; }
.price-table td.pt-eval.pt-price { color: var(--accent); font-weight: 700; }
.price-table td.pt-eval.none { color: #8a929c; }

.pt-note { max-width: 760px; margin: 1.4rem auto 0; text-align: center; font-size: .93rem; color: var(--body); }
.pt-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Webinar slide-in card (added 2026-07-31, Steve)
   Native replacement for the Mautic focus item #5 iframe that GTM injected
   sitewide. Markup is injected by mrc-2026.js block 18, so nothing renders
   unless that block decides to show the card (desktop only, frequency-capped,
   suppressed on webinar/thanks/contact/aw pages).
   --------------------------------------------------------------------------- */
.webinar-card {
	position: fixed; left: 22px; bottom: 22px; z-index: 1400;
	width: 340px; padding: 1.45rem 1.5rem 1.4rem;
	background: #fff; border: 1px solid var(--line); border-radius: 18px;
	border-top: 3px solid var(--accent);
	box-shadow: 0 18px 44px rgba(26,26,28,.16);
	opacity: 0; transform: translateY(14px);
	transition: opacity .4s ease, transform .4s ease;
}
.webinar-card.is-open { opacity: 1; transform: none; }
.webinar-card-close {
	position: absolute; top: .55rem; right: .8rem; padding: .25rem;
	background: none; border: none; cursor: pointer;
	font-size: 1.25rem; line-height: 1; color: var(--muted);
}
.webinar-card-close:hover { color: var(--ink); }
.webinar-card-eyebrow {
	font-size: .74rem; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: var(--accent);
	margin: 0 0 .5rem;
}
.webinar-card-title {
	font-family: 'Inter Tight', sans-serif; color: var(--ink);
	font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em;
	line-height: 1.2; margin: 0 0 .45rem;
}
.webinar-card-body { font-size: .93rem; line-height: 1.6; color: var(--body); margin: 0 0 1.05rem; }
.webinar-card .btn-pill { font-size: .93rem; padding: .7rem 1.4rem; }
@media (prefers-reduced-motion: reduce) {
	.webinar-card { transition: none; transform: none; }
}
.u-221{white-space:nowrap !important;font-size:2.1rem !important;}  /* x1 (testimonials-v2 stat) */
/* 8/2 heading-hierarchy fix: press-release boiler heads are h2 now (were h3).
   Mirrors the .pr-boiler h3 rule that lives in the pr-hero block files. */
.pr-boiler h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: .7rem; }