/* ==========================================================================
   Smart Engage V2  —  rebuilt to match Figma "Hyperface website v2"
   Desktop 6:1885 / Mobile 6:4491. Depends on home-v2.css (@font-face,.hv2,.hv-shell).
   ========================================================================== */

/* ---- shared bits ---------------------------------------------------------- */
.se-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	padding: 8px 20px 8px 16px;
}
.se-tag__dot { width: 8px; height: 8px; border-radius: 1px; background: #2ad9c4; flex: none; }
.se-tag__label { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; color: #fff; }
.se-light .se-tag { border-color: rgba(0, 0, 0, 0.15); }
.se-light .se-tag__label { color: #111; }

.se-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #2ad9c4;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.se-btn:hover { background: #24c3b0; }

/* reusable centered section header */
.se-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 80px 0 48px;
	overflow: hidden;
}
.se-head--bordered {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.se-light .se-head--bordered { border-color: rgba(17, 17, 17, 0.2); }
.se-head > * { position: relative; z-index: 1; }
.se-head__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.se-head__title {
	margin: 0;
	max-width: min(1050px, 100%);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.72px;
	color: #fff;
}
.se-head__sub {
	margin: 0;
	max-width: min(1104px, 100%);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.7);
}
.se-light .se-head__eyebrow { color: rgba(0, 0, 0, 0.7); }
.se-light .se-head__title { color: #111; }
.se-light .se-head__sub { color: rgba(0, 0, 0, 0.7); }

/* ==========================================================================
   1. HERO  (Figma 6:1886)
   ========================================================================== */
.se-hero {
	background: #0e0e0e;
	padding: 80px 0 120px;
}
.se-hero__inner {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.se-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	/* Figma splits the 1720 hero row 765 copy / 955 visual. Held at a
	   fixed 765 with flex:none, the copy kept its full width at every
	   viewport and the visual absorbed the entire shortfall — it fell to
	   230px by 1280, under a third of the animation's natural size. Both
	   sides now carry their Figma width as a basis and shrink together, so
	   the split holds at the design ratio. Same fix as .rp-hero__copy. */
	flex: 1 1 765px;
	min-width: 0;
}
.se-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.se-hero__title {
	margin: 0;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.28px;
	color: #fff;
}
.se-hero__lede {
	margin: 0;
	max-width: 765px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: rgba(255, 255, 255, 0.6);
}
.se-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.se-hero__trust { display: flex; align-items: center; gap: 12px; }
.se-hero__trust-ic { flex: none; width: 40px; height: 40px; color: #fff; }
.se-hero__trust span, .se-hero__trust p {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: #fff;
}
.se-hero__visual { flex: 1 1 955px; min-width: 0; }
.se-hero__visual img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   2. ONE ENGINE  (Figma 6:2114, light)
   ========================================================================== */
.se-engine { background: #f6f6f6; padding: 0 0 0; }
.se-engine__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.se-engine__col { display: flex; flex-direction: column; align-items: center; gap: 0; }
.se-engine__col--left { flex: 0 0 30%; }
.se-engine__col--right { flex: 0 0 46%; }
.se-engine__label {
	position: relative;
	padding: 8px 20px;
	border: 1px solid rgba(17, 17, 17, 0.15);
	border-radius: 2px;
	background: #fff;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: #111;
}
.se-engine__shot { width: 100%; }
.se-engine__shot img { width: 100%; height: auto; display: block; }
/* corner-square markers on each label pill */
.se-esq {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #d3d3d3;
	border: 2px solid #d0d0d0;
	border-radius: 1px;
	z-index: 2;
	pointer-events: none;
}
.se-esq--tl { left: -6px; top: -6px; }
.se-esq--tr { right: -6px; top: -6px; }
.se-esq--bl { left: -6px; bottom: -6px; }
.se-esq--br { right: -6px; bottom: -6px; }
.se-engine__mid { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; margin: 0 -60px; position: relative; z-index: 2; }
.se-engine__connector { width: 360px; height: auto; display: block; flex: none; }

/* feature row */
.se-engine__feats {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	max-width: min(1600px, 100%);
	margin: 40px auto 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
}
.se-engine__feat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	/* min-height, not height. At 1920 the content is ~140px so this still
	   resolves to exactly 188px, but a hard height clipped the descriptions
	   mid-sentence at every narrower desktop width: the title takes 2 lines
	   and the description 3, which needs ~232px, so "Deliver contextual
	   experiences based on live…" was cut at the card border. The row is
	   align-items: stretch, so the cards stay equal height as they grow.
	   (The <=900 block already set height:auto for the stacked layout — this
	   was only ever wrong in the 901-1919 band.) */
	min-height: 188px;
	padding: 24px;
}
.se-engine__feat + .se-engine__feat { border-left: 1px solid rgba(0, 0, 0, 0.15); }
.se-engine__feat-ic { width: 28px; height: 28px; display: block; }
.se-engine__feat-top { display: flex; flex-direction: column; gap: 12px; }
.se-engine__feat-title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.2px;
	color: #111;
	overflow-wrap: anywhere;
}
.se-engine__feat-desc {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: #111;
}
/* corner squares on the feature row (4 outer corners + divider tops/bottoms) */
.se-engine__feats::before,
.se-engine__feats::after {
	content: "";
	position: absolute;
	left: -6px;
	width: 12px;
	height: 12px;
	background: #d3d3d3;
	border: 2px solid #d0d0d0;
	border-radius: 1px;
	z-index: 3;
}
.se-engine__feats::before { top: -7px; }
.se-engine__feats::after { bottom: -7px; }
.se-engine__sq {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #d3d3d3;
	border: 2px solid #d0d0d0;
	border-radius: 1px;
	z-index: 3;
}
.se-engine__sq--tr { top: -7px; right: -6px; }
.se-engine__sq--br { bottom: -7px; right: -6px; }
.se-engine__feat:not(:last-child)::before,
.se-engine__feat:not(:last-child)::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -27px;
	width: 12px;
	height: 12px;
	background: #d3d3d3;
	border: 2px solid #d0d0d0;
	border-radius: 1px;
	z-index: 3;
}
.se-engine__feat:not(:last-child)::after { top: auto; bottom: -7px; }
.se-engine__feat { position: relative; }
/* per-card corner squares — used only in the mobile stacked layout */
.se-fsq { display: none; position: absolute; width: 12px; height: 12px; background: #d3d3d3; border: 2px solid #d0d0d0; border-radius: 1px; z-index: 3; pointer-events: none; }
.se-fsq--tl { left: -7px; top: -7px; }
.se-fsq--tr { right: -7px; top: -7px; }
.se-fsq--bl { left: -7px; bottom: -7px; }
.se-fsq--br { right: -7px; bottom: -7px; }

/* ==========================================================================
   3. FROM BANK DATA TO PORTFOLIO ACTION  (Figma 6:2873, dark)
   ========================================================================== */
.se-flow { background: #f6f6f6; padding: 100px 0 0; }
.se-flow__map { position: relative; max-width: min(1600px, 100%); margin: 72px auto 0; }
/* The wire used to be an SVG on a fixed 1000x672 viewBox stretched over the
   map. Because the map's height depends on its content, the top run drifted
   against the step row it is supposed to thread through — measured 4.3px below
   the arrows at 1920 but 0.2px above them at 1024, which is the "arrows are not
   on the line" report. Drawn in CSS instead it is anchored to the two things it
   actually connects: the step row's centre line and the layer pill's centre, so
   it lands on them at every width. */
/* The travelling pulse. It is an SVG rect laid exactly over the CSS loop below,
   with NO viewBox — so the SVG's user units are its own CSS pixels and the rect
   cannot drift off the static line at any width (the old fixed 1000x672 viewBox
   is precisely what made the line miss the arrows). `pathLength="100"` on the
   rect normalises its perimeter to 100 units, so the dash length and one full
   lap are width-independent: 7 units of dash, 93 of gap, offset 0 -> -100.
   Geometry is set in CSS because calc() is needed and SVG attributes cannot
   take it; SVG geometry properties are settable from CSS in all current
   browsers. Replaces a pulse that only rode the top step row. */
.se-flow__wire {
	position: absolute;
	/* Same box as .se-flow__map::before, but expressed as size rather than
	   right/bottom insets: an <svg> is a replaced element, so `width: auto`
	   resolves to its intrinsic 300x150 instead of stretching to the inset
	   box. 12.5% + 12.5% of inset == 75% wide; 28px + 26px == 54px shorter. */
	left: 12.5%;
	top: 28px;
	width: 75%;
	height: calc(100% - 54px);
	display: block;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
}
.se-flow__wire-dash {
	/* inset by half the loop's 1.5px border so the dash rides its centre line */
	x: 0.75px;
	y: 0.75px;
	width: calc(100% - 1.5px);
	height: calc(100% - 1.5px);
	rx: 13.25px;
	ry: 13.25px;
	fill: none;
	stroke: #2ad9c4;
	/* Matched to the loop's own line, NOT thicker. At stroke-width 3 the moving
	   segment rendered ~6px against the line's 1px, and even though both are the
	   same #2ad9c4 the thick band read as a different, more vivid colour — the
	   loop looked like it changed colour wherever the pulse happened to be.
	   Same weight now, so the hue is uniform the whole way round; the pulse is
	   carried by the glow below instead of by extra thickness. */
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 7 93;
	filter: drop-shadow(0 0 5px rgba(42, 217, 196, 0.95));
	animation: se-flow-lap 7s linear infinite;
}
@keyframes se-flow-lap {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
	.se-flow__wire-dash { animation: none; }
}
.se-flow__map::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 12.5%;
	right: 12.5%;
	/* half the 56px step row, and half the layer pill, so the loop runs through
	   the middle of both rather than past them */
	top: 28px;
	bottom: 26px;
	border: 1.5px solid #2ad9c4;
	border-radius: 14px;
	pointer-events: none;
}
/* The wire is a closed loop, so the flow circulates: left-to-right along the
   top step row, DOWN the right side, right-to-left along the bottom through the
   One Operating Layer pill, then back UP the left side. All four arrows used to
   point down (rotate(90deg)), which read as two parallel downward flows instead
   of one circuit. The left pair now points up so the direction matches the
   travelling pulse below, which laps the loop clockwise. */
.se-flow__drop { position: absolute; width: 24px; height: 24px; z-index: 2; transform-origin: center; transform: translateX(-50%) rotate(90deg); pointer-events: none; }
.se-flow__drop--tl,
.se-flow__drop--bl { transform: translateX(-50%) rotate(-90deg); }
.se-flow__drop--tl { left: 12.5%; top: -88px; }
.se-flow__drop--tr { left: 87.5%; top: -88px; }
.se-flow__drop--bl { left: 12.5%; bottom: -44px; }
.se-flow__drop--br { left: 87.5%; bottom: -44px; }
/* corner square markers (reused on steps, chips, layer pill) */
.se-csq { position: absolute; width: 8px; height: 8px; background: #d3d3d3; border: 1px solid #d0d0d0; border-radius: 1px; }
.se-csq--tl { left: -4px; top: -4px; }
.se-csq--tr { right: -4px; top: -4px; }
.se-csq--bl { left: -4px; bottom: -4px; }
.se-csq--br { right: -4px; bottom: -4px; }
/* top step rail */
.se-flow__steps { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 100px; }
/* The pulse that used to live here rode only the top step row and stopped at
   its right end. It is now .se-flow__wire-dash, which laps the entire loop
   (top row -> right side -> bottom pill -> left side) without stopping. */
.se-flow__step { position: relative; background: #fff; border: 1px solid rgba(17, 17, 17, 0.07); padding: 12px 36px; font-size: 20px; letter-spacing: -0.4px; color: #111; white-space: nowrap; }
.se-flow__arrow { width: 24px; height: 24px; flex: none; }
/* cards */
.se-flow__cards { position: relative; z-index: 1; display: flex; align-items: stretch; justify-content: center; gap: 20px; }
.se-flow__card { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; background: #fff; border-radius: 16px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05); padding: 24px; }
.se-flow__card-h { display: flex; align-items: flex-start; gap: 10px; }
.se-flow__card-title { margin: 0; flex: 1; font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: -0.56px; color: #111; }
.se-flow__card-num { flex: none; font-size: 26px; line-height: 1.3; letter-spacing: -0.52px; color: #1d403c; }
.se-flow__chip { position: relative; display: inline-flex; align-self: flex-start; margin-top: 16px; background: rgba(42, 217, 196, 0.2); color: #1d403c; padding: 8px 12px; border-radius: 1px; font-size: 14px; font-weight: 500; line-height: 1; }
.se-flow__chip .se-csq { width: 8px; height: 8px; background: rgba(29, 64, 60, 0.2); border: 0; }
.se-flow__card-body { display: flex; flex-direction: column; gap: 8px; }
.se-flow__card-desc { margin: 0 0 4px; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #111; }
.se-flow__li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: -0.32px; }
.se-flow__diamond { width: 7px; height: 7px; flex: none; transform: rotate(45deg); }
/* bottom operating-layer pill */
.se-flow__layer-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 100px; }
.se-flow__layer { position: relative; display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.07); padding: 12px 16px; font-size: 20px; font-weight: 500; letter-spacing: -0.4px; color: #111; }
.se-flow__layer-ic { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   4. PURPOSE-BUILT MODULES BENTO  (Figma 6:3058, dark)
   ========================================================================== */
.se-modules { position: relative; overflow: hidden; padding: 220px 0 0;
	/* Glow as a background layer so ::before stays the frame rail. */
	background: url("../img/se2/core-glow.webp") center top / 100vw 340px no-repeat, #0e0e0e; }
.se-modules > * { position: relative; z-index: 1; }
.se-modules__bento { display: flex; flex-direction: column; gap: 20px; max-width: min(1600px, 100%); margin: 56px auto 0; }
.se-modules__row { display: flex; gap: 20px; }
.se-modules__card { flex: 1 1 0; min-width: 0; border-radius: 24px; overflow: hidden; }
.se-modules__card img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   5. IMPACT ACROSS THE CUSTOMER LIFECYCLE  (Figma 6:3569, dark tabs)
   ========================================================================== */
.se-life { position: relative; background: #0e0e0e; overflow: hidden; padding: 100px 0; }
.se-life > * { position: relative; z-index: 1; }
.se-life__tabs {
	display: flex;
	/* Same box as .se-life__body below it. This strip used to be listed in
	   home-v2.css among the bands that pull out to the frame rails, which made
	   it 120px wider than the wheel and panel it labels. Onboard IQ's strip is
	   not in that list, which is why that one lines up. */
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.se-life__tab {
	position: relative;
	/* auto, not 0: the labels are very different lengths and the design gives
	   each cell its own width, so a basis of 0 would squeeze "Category/ Usage
	   Expansion" onto two lines while the short cells sat half empty. */
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 22px 20px;
	background: none;
	border: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.38px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	text-align: center;
	/* flex-basis 0 only equalises these cells if they may shrink; min-width
	   defaults to auto, so with nowrap the longest label ("Category/ Usage
	   Expansion") set the floor and the row ran past the strip's right border
	   on narrower desktops. Wrapping is the safety net under the clamps below. */
	min-width: 0;
	transition: color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.se-life__tab + .se-life__tab { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.se-life__tab svg { width: 24px; height: 24px; flex: none; }
.se-life__tab-ic { width: 24px; height: 24px; flex: none; object-fit: contain; opacity: 0.55; transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.se-life__tab:hover { color: rgba(255, 255, 255, 0.85); }
.se-life__tab:hover .se-life__tab-ic { opacity: 0.8; }
.se-life__tab.is-active { color: #fff; }
.se-life__tab.is-active svg { color: #2ad9c4; }
.se-life__tab.is-active .se-life__tab-ic { opacity: 1; }
.se-life__tab::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: #2ad9c4;
	transform: translateX(-50%) scaleX(0);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease;
}
.se-life__tab.is-active::after { transform: translateX(-50%) scaleX(1); opacity: 1; }
.se-life__body {
	display: flex;
	align-items: center;
	gap: 72px;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.se-life__wheel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
/* code-built circular journey (inline SVG: 5 clickable arrows + HTML labels) */
.se-life__wheelwrap { position: relative; width: 100%; max-width: 520px; }
.se-life__wheelsvg { width: 100%; height: auto; display: block; overflow: visible; }
.se-arrow { cursor: pointer; }
.se-arrow:focus { outline: none; }
.se-arrow:focus-visible .se-arrow__stroke { stroke: #2ad9c4; stroke-width: 2; }
.se-arrow__base { fill: #161616; }
.se-arrow__teal { fill: url(#se-arrowgrad); opacity: 0; transition: opacity 0.35s ease; }
.se-arrow__stroke { stroke: rgba(255, 255, 255, 0.1); }
/* progressive: every arrow with index <= data-active stays teal (completed) */
.se-life__wheel[data-active="0"] .se-arrow[data-arrow="0"] .se-arrow__teal,
.se-life__wheel[data-active="1"] .se-arrow[data-arrow="0"] .se-arrow__teal,
.se-life__wheel[data-active="1"] .se-arrow[data-arrow="1"] .se-arrow__teal,
.se-life__wheel[data-active="2"] .se-arrow[data-arrow="0"] .se-arrow__teal,
.se-life__wheel[data-active="2"] .se-arrow[data-arrow="1"] .se-arrow__teal,
.se-life__wheel[data-active="2"] .se-arrow[data-arrow="2"] .se-arrow__teal,
.se-life__wheel[data-active="3"] .se-arrow[data-arrow="0"] .se-arrow__teal,
.se-life__wheel[data-active="3"] .se-arrow[data-arrow="1"] .se-arrow__teal,
.se-life__wheel[data-active="3"] .se-arrow[data-arrow="2"] .se-arrow__teal,
.se-life__wheel[data-active="3"] .se-arrow[data-arrow="3"] .se-arrow__teal,
.se-life__wheel[data-active="4"] .se-arrow__teal { opacity: 1; }
/* journey labels */
.se-life__wlabel {
	position: absolute;
	transform: translate(0, 0);
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	backdrop-filter: blur(6px);
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.32px;
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
	pointer-events: none;
	transition: color 0.35s ease;
}
.se-life__wlabel[style*="width"] { white-space: normal; }
/* The chip is sized as a % of the wheel, so it shrinks faster than a fixed
   font can follow — single words like "Reactivation" bled out of it between
   900 and 1400. Scale the label with the viewport across that band. */
@media (max-width: 1400px) {
	.se-life__wlabel {
		font-size: clamp(8px, 0.85vw, 14px);
		letter-spacing: -0.2px;
		padding: 8px 4px;
	}
}
.se-life__wheel[data-active="0"] .se-life__wlabel[data-label="0"],
.se-life__wheel[data-active="1"] .se-life__wlabel[data-label="0"],
.se-life__wheel[data-active="1"] .se-life__wlabel[data-label="1"],
.se-life__wheel[data-active="2"] .se-life__wlabel[data-label="0"],
.se-life__wheel[data-active="2"] .se-life__wlabel[data-label="1"],
.se-life__wheel[data-active="2"] .se-life__wlabel[data-label="2"],
.se-life__wheel[data-active="3"] .se-life__wlabel[data-label="0"],
.se-life__wheel[data-active="3"] .se-life__wlabel[data-label="1"],
.se-life__wheel[data-active="3"] .se-life__wlabel[data-label="2"],
.se-life__wheel[data-active="3"] .se-life__wlabel[data-label="3"],
.se-life__wheel[data-active="4"] .se-life__wlabel { color: #fff; font-weight: 600; }
/* corner square markers on the wheel box */
.se-life__wheel > .se-csq2 { pointer-events: none; }
.se-csq2 {
	position: absolute;
	width: 16px;
	height: 16px;
	background: rgba(193, 193, 193, 0.3);
	border: 2px solid rgba(223, 223, 223, 0.4);
	border-radius: 1px;
	z-index: 2;
}
.se-csq2--tl { left: -9px; top: -9px; }
.se-csq2--tr { right: -9px; top: -9px; }
.se-csq2--bl { left: -9px; bottom: -9px; }
.se-csq2--br { right: -9px; bottom: -9px; }
.se-life__panels { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); background: #131313; padding: 24px; }
.se-life__panel.is-active { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.se-life__panel { display: none; }
.se-life__panel.is-active { display: block; animation: se-fade 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes se-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.se-life__arrow { transition: none; }
	.se-life__panel.is-active { animation: none; }
}
.se-life__panel-title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.56px;
	color: #fff;
}
.se-life__panel-desc {
	margin: 0 0 32px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.36px;
	color: rgba(255, 255, 255, 0.6);
}
.se-life__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 140px;
	padding: 12px 20px;
	border: 1px solid rgba(42, 217, 196, 0.07);
	background: rgba(42, 217, 196, 0.1);
}
/* teal corner squares on the stat box */
.se-life__stat::before,
.se-life__stat::after,
.se-life__stat > .se-tsq { pointer-events: none; }
.se-tsq {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #2ad9c4;
	border-radius: 1px;
	z-index: 2;
}
.se-tsq--tl { left: -1px; top: -1px; }
.se-tsq--tr { right: -1px; top: -1px; }
.se-tsq--bl { left: -1px; bottom: -1px; }
.se-tsq--br { right: -1px; bottom: -1px; }
.se-life__stat-num {
	display: block;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.72px;
	color: #2ad9c4;
}
.se-life__stat-label {
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #2ad9c4;
}
.se-life__note {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   6. CUSTOMER STORIES  (Figma 6:3736, dark)
   ========================================================================== */
/* flow-root is load-bearing, not cosmetic. The shared `head--dots` rule in
   home-v2.css puts a 64px top margin on the dotted header, and this is the one
   section with padding: 0 — so nothing blocked that margin from collapsing OUT
   through .hv-shell and the section itself. The section box therefore began 64px
   lower, and since the vertical frame rails are drawn per `main > section`
   (::before/::after spanning each section's own box), that 64px belonged to no
   section and the rail broke there — a visible cut just above "Proven in
   Production". flow-root contains the margin instead. Same technique
   home-v2.css already uses on `main > section[class*="-light"]`, and visually
   identical here because .se-life above is the same #0e0e0e. */
.se-stories { background: #0e0e0e; padding: 0; display: flow-root; }
.se-stories__wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: min(1600px, 100%);
	margin: 40px auto 0;
}
.se-stories__arrow {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.se-stories__arrow:hover { background: rgba(255, 255, 255, 0.08); }
/* The pager clamps at both ends instead of looping. */
.se-stories__arrow:disabled { cursor: default; opacity: 0.3; }
.se-stories__arrow:disabled:hover { background: none; }
/* All three slides share this one grid cell, so its height is the tallest of
   them and stays put as you page through. The arrows are centred against it in
   the flex row, and the cards differ by ~39px, so without this they shifted
   ~20px on every click. */
/* The panel is the stage's, not each card's: the cards cross-fade through each
   other and two half-transparent panels in the same cell composite lighter than
   one — a flash on every click. */
.se-stories__stage {
	flex: 1 1 0; min-width: 0; display: grid;
	background: #131313;
	border-radius: 24px;
}
.se-stories__stage > .se-stories__card { grid-area: 1 / 1; }
/* Stretched rather than centred: the stage is as tall as the tallest card, so
   centring dropped each card's copy by half its own slack and the content
   visibly drifted between slides. The art keeps its centred position. */
.se-stories__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: stretch;
	gap: 40px;
	padding: 40px;
	transition: opacity 0.35s ease, visibility 0.35s;
}
@media (prefers-reduced-motion: reduce) {
	.se-stories__card { transition: none; }
}
/* The art was flex:none, so every pixel lost went out of the copy column: it
   collapsed to 130px at 1280 and 0px at 1100, bleeding the bullet text. Let the
   art shrink and give the copy a real basis so both stay usable. */
/* Fixed art box — the width sets it, the ratio sets the height, so all three
   panels occupy the same rectangle whatever a given export's intrinsic size is. */
.se-stories__art {
	width: 664px; flex: 0 1 664px; min-width: 0; align-self: center;
	aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden;
}
.se-stories__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-stories__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* Side-by-side needs the art's 664px plus a readable text column; below that the
   copy was squeezed to ~136px and long words ("Customisable") spilled out of it.
   Stack before that happens rather than shrinking the type. */
@media (max-width: 1330px) {
	.se-stories__card { flex-direction: column; align-items: stretch; }
	.se-stories__art { width: 100%; flex: none; }
	/* Grows into the stage's leftover height (never shrinks) so the bottom-pinned
	   link still lands on the same y once the card is stacked. */
	.se-stories__body { flex: 1 0 auto; }
}
.se-stories__title {
	margin: 0;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.6px;
	color: #fff;
}
.se-stories__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.se-stories__list li {
	position: relative;
	padding-left: 28px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}
.se-stories__list li::before { content: "\2713"; position: absolute; left: 0; color: #2ad9c4; font-weight: 600; }
.se-stories__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
	width: fit-content;
	/* Pinned to the bottom of the copy column so it stays at the same y on every
	   slide, whatever the bullet list above it wraps to. */
	margin-top: auto;
}

/* ==========================================================================
   7. FAQ  (Figma 6:3786, dark)
   ========================================================================== */
.se-faq { background: #0e0e0e; padding: 100px 0; }
.se-faq__card {
	width: 100%;
	max-width: min(1234px, 100%);
	margin: 56px auto 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	padding: 0 40px;
}
.se-faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.se-faq__item:last-child { border-bottom: none; }
.se-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 0;
	cursor: pointer;
	list-style: none;
}
.se-faq__q::-webkit-details-marker { display: none; }
.se-faq__q-text { font-size: 20px; font-weight: 400; line-height: 1.4; color: #fff; }
.se-faq__chev { flex: none; width: 24px; height: 24px; color: rgba(255,255,255,0.7); transition: transform 0.2s ease; }
.se-faq__item[open] .se-faq__chev { transform: scaleY(-1); }
/* Native <details> snaps open; ::details-content is the wrapper the browser puts
   around the panel, so its height can be animated. interpolate-size is what lets
   `auto` take part in the transition, and content-visibility has to transition
   with allow-discrete or the panel would pop in fully on frame one and only its
   height would move. Browsers without ::details-content open instantly, as before. */
.se-faq__item { interpolate-size: allow-keywords; }
.se-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.se-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.se-faq__item::details-content { transition: none; }
}
.se-faq__a {
	margin: 0;
	padding: 0 0 32px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   8. CTA BANNER  (Figma 6:3828)
   ========================================================================== */
.se-cta { background: #0e0e0e; padding: 100px 0; }
.se-cta__banner {
	position: relative;
	width: 100%;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	min-height: 580px;
	border-radius: 32px;
	overflow: hidden;
	background: #0a1614 url("../img/se2/cta-bg.webp") center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
	text-align: center;
}
.se-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 68px; max-width: min(960px, 100%); }
.se-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.se-cta__title { margin: 0; font-size: 59px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.se-cta__title em { font-style: normal; color: #2ad9c4; }
.se-cta__sub { margin: 0; max-width: min(906px, 100%); font-size: 20px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.se-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 16px 24px;
	border-radius: 2px;
	background: #fff;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.se-cta__btn:hover { opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE  (mobile ref: Figma 6:4491)
   ========================================================================== */
@media (max-width: 1200px) {
}

@media (max-width: 900px) {
	.hv-shell { padding-inline: 24px; }
	.hv2 main { overflow-x: hidden; }

	/* rhythm */
	.se-hero { padding: 48px 0 56px; }
	.se-engine { padding: 0 0 56px; }
	.se-flow, .se-modules, .se-life, .se-stories, .se-faq, .se-cta { padding: 56px 0; }
	/* keep the Core Features glow above its header on mobile */
	.se-modules { padding-top: 150px; }
	.se-modules::before { height: 180px; }
	.se-stories { padding-top: 0; }
	.se-head { padding: 40px 0 28px; }

	/* type — cap header text to the container so it wraps instead of overflowing */
	.se-head { max-width: 100%; }
	.se-head__title { max-width: 100%; font-size: 26px; letter-spacing: -0.5px; }
	.se-head__sub { max-width: 100%; font-size: 17px; letter-spacing: -0.3px; }

	/* 1. hero — stack */
	.se-hero__visual { flex: 0 1 auto; }
	.se-hero__inner { flex-direction: column; align-items: stretch; gap: 40px; max-width: 100%; }
	.se-hero__copy { flex: 0 1 auto; width: 100%; gap: 32px; }
	.se-hero__title { font-size: 34px; letter-spacing: -0.68px; }
	.se-hero__lede { font-size: 18px; letter-spacing: -0.36px; }
	.se-hero__cta { gap: 24px; }
	.se-hero__trust { gap: 10px; align-items: flex-start; }
	.se-hero__trust-ic { width: 24px; height: 24px; }
	.se-hero__trust span, .se-hero__trust p { font-size: 14px; line-height: 1.45; }

	/* 2. engine — shot, label, connector, label, shot (Figma 6:4720); stacked feats */
	.se-engine__stage { flex-direction: column; align-items: center; gap: 20px; max-width: 100%; }
	.se-engine__col { align-items: center; }
	.se-engine__col--left, .se-engine__col--right { flex: none; width: 100%; max-width: 420px; }
	.se-engine__col--left { flex-direction: column-reverse; }
	/* Stacked layout: the connector artwork, turned to run top-to-bottom.

	   s2-connector.svg is a 372x293 LEFT-to-RIGHT fan (arms converge from the
	   left, pass through the logo, splay out to the right), so it needs rotating
	   once the columns sit above and below. rotate(90deg) is clockwise, which
	   puts the converging side at the top under "Customer Experience" and the
	   splaying side at the bottom over "Portfolio Intelligence" — the same
	   reading as the desktop left-to-right version.

	   The reason it looked detached before was NOT the rotation, it was the box:
	   a CSS transform does not rotate the layout box, so `width: 130px` reserved
	   130x102 while presenting 102x130 of artwork. The 28px of overhang fell
	   outside the reserved space and the arms stopped short of both labels.

	   Fixed by sizing the container to the art's POST-rotation footprint
	   (292 wide x 372 tall) and letting the image fill it: the img's
	   pre-rotation width becomes its post-rotation height, so at 127.4%
	   (372/292) of the container width it is exactly the container height and
	   the rotated art fills the box with no dead space. Width is capped near the
	   label width so the arms span them rather than floating in the middle. */
	.se-engine__mid {
		position: relative;
		--se-conn-w: clamp(150px, 48vw, 200px);
		width: var(--se-conn-w);
		aspect-ratio: 293 / 372;
		/* Close the stage's own 20px gap so the arms reach the two labels.
		   The GIF this replaced carried 46px of empty canvas on its left edge,
		   which the rotation moved to the top and which had to be subtracted
		   here as well; the SVG's ink spans the full 0..372, so the 20px is now
		   the only thing in the way. */
		margin-top: -20px;
		margin-bottom: -20px;
	}
	.se-engine__connector {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 126.96%;
		/* beats the global `img { max-width: 100% }`, which would otherwise clamp
		   this back to the box width and reintroduce the mismatch */
		max-width: none;
		height: auto;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	/* separate bordered cards with gaps, each with its own 4 corner squares (Figma 6:5396) */
	.se-engine__feats { flex-direction: column; gap: 20px; max-width: 100%; border: none; }
	.se-engine__feat { flex: none; height: auto; min-height: 0; border: 1px solid rgba(0, 0, 0, 0.15); }
	.se-engine__feat + .se-engine__feat { border-left: 1px solid rgba(0, 0, 0, 0.15); }
	/* hide the desktop shared-box squares */
	.se-engine__feats::before,
	.se-engine__feats::after,
	.se-engine__sq,
	.se-engine__feat::before,
	.se-engine__feat::after { display: none; }
	/* show per-card corner squares */
	.se-fsq { display: block; }

	/* 3. flow — centered One Operating Layer -> cards -> step row, two-side dashed rails, Figma 6:5473 */
	.se-flow__map { position: relative; display: flex; flex-direction: column; margin-top: 40px; padding: 0 18px; }
	.se-flow__wire { display: none; }
	.se-flow__map::before { display: none; }
	.se-flow__drop { display: none; }
	/* two vertical dashed rails (left + right) from the top box all the way down */
	.se-flow__map::before,
	.se-flow__map::after { content: ""; position: absolute; top: 0; bottom: 14px; border-left: 1.5px dashed rgba(42, 217, 196, 0.55); pointer-events: none; }
	.se-flow__map::before { left: 5px; }
	.se-flow__map::after { right: 5px; }
	.se-flow__layer-wrap { order: 1; justify-content: center; margin: 0 0 24px; }
	.se-flow__cards { order: 2; flex-direction: column; align-items: stretch; gap: 20px; }
	.se-flow__card { flex: none; min-height: 0; padding: 24px; justify-content: flex-start; gap: 12px; }
	.se-flow__card:not(:last-child)::after { display: none; }
	.se-flow__card-title { font-size: 22px; }
	.se-flow__card-num { order: -1; margin-right: 6px; font-size: 22px; }
	/* bottom step row: no arrow assets on mobile; equal pills that always fit */
	.se-flow__steps { order: 3; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 6px; margin: 24px 0 0; overflow: visible; }
	.se-flow__step { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 11px; text-align: center; }
	.se-flow__arrow { display: none; }

	/* 4. modules bento — stack all cards (flex:none so images don't collapse) */
	.se-modules__bento { max-width: 100%; gap: 16px; }
	.se-modules__row { flex-direction: column; gap: 16px; }
	.se-modules__card { flex: none; }

	/* 5. lifecycle — hide tabs on mobile (wheel arrows drive the journey) */
	.se-life__tabs { display: none; }
	.se-life__body { flex-direction: column; gap: 28px; max-width: 100%; }
	.se-life__wheel { width: 100%; flex: none; padding: 16px; }
	.se-life__panels { width: 100%; flex: none; }
	/* small wrapping labels so long names stay inside the compact wheel */
	.se-life__wlabel { font-size: 9px; max-width: 84px; white-space: normal; padding: 5px 6px; line-height: 1.25; gap: 6px; }

	/* 6. stories — stack */
	/* Arrows move below the card instead of being hidden: there's no room either
	   side of a full-width card on a phone, and display:none left no way to reach
	   the other story at all. Same reflow the home carousel uses. */
	.se-stories__wrap { gap: 16px; max-width: 100%; flex-flow: row wrap; justify-content: center; }
	.se-stories__stage { order: 0; flex: 1 1 100%; }
	.se-stories__arrow {
		order: 1;
		/* Stronger than the desktop hairline so the buttons read against the
		   near-black section rather than disappearing into it. */
		border-color: rgba(255, 255, 255, 0.45);
		background: rgba(255, 255, 255, 0.08);
	}
	.se-stories__card { flex-direction: column; align-items: stretch; gap: 24px; padding: 20px; }
	.se-stories__art { width: 100%; }
	.se-stories__title { font-size: 24px; }

	/* 7. faq */
	.se-faq__card { padding: 0 20px; max-width: 100%; }
	.se-faq__q { padding: 24px 0; gap: 16px; }
	.se-faq__q-text { font-size: 16px; }

	/* 8. cta */
/* cover, not `100% 100%`: the mobile artwork is portrait (1059x1479) and the
	   panel is landscape, so stretching squashed it AND pulled the artwork's own
	   baked black corners (48px radius, filled black rather than transparent)
	   onto the panel corners — the black blocks reported at all four corners.
	   cover keeps the aspect and crops the baked corners out of frame. */
		.se-cta__banner { min-height: 0; padding: 48px 24px; border-radius: 20px;background: #0a1614 url("../img/se2/cta-bg-mobile.webp") center / cover no-repeat; }
	.se-cta__inner { gap: 36px; }
	.se-cta__title { font-size: 30px; line-height: 1.35; }
	.se-cta__sub { font-size: 16px; }
}

@media (max-width: 480px) {
	.se-hero__title { font-size: 30px; }
	.se-head__title { font-size: 22px; }
	.se-cta__title { font-size: 24px; }
}

/* =========================================================================
   FLUID DESKTOP BAND (901-1919) — see the long note in rewards-plus.css.
   Max = 1920 design value (1920+ byte-identical), min = this file's own <=900
   value, coefficient = design/19.2vw. Body copy and small UI stay fixed.

   .se-modules' 220px TOP padding is NOT scaled — it is the clearance for the
   core-glow band painted at the section's top edge.
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero */
	.se-hero { padding-block: clamp(48px, 4.167vw, 80px) clamp(56px, 6.25vw, 120px); }
	.se-hero__title { font-size: clamp(34px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.se-hero__lede { font-size: clamp(18px, 1.458vw, 28px); }
	.se-hero__copy { gap: clamp(32px, 2.5vw, 48px); }

	/* Dotted section heads */
	.se-head { padding-block: clamp(40px, 4.167vw, 80px) clamp(28px, 2.5vw, 48px); }
	.se-head__title { font-size: clamp(26px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.se-head__sub { font-size: clamp(17px, 1.25vw, 24px); }

	/* Section rhythm */
	.se-flow { padding-block: clamp(56px, 5.208vw, 100px) 0; }
	.se-life,
	.se-faq,
	.se-cta { padding-block: clamp(56px, 5.208vw, 100px); }

	/* Flow cards */
	.se-flow__card-title { font-size: clamp(22px, 1.458vw, 28px); }
	.se-flow__card-num { font-size: clamp(22px, 1.354vw, 26px); }
	.se-flow__layer-wrap { margin-top: clamp(56px, 5.208vw, 100px); }

	/* Lifecycle */
	.se-life__body { gap: clamp(28px, 3.75vw, 72px); }
	/* the strip has to hold five labels, so it scales with the band like the
	   panel does rather than sitting at its 1920 size all the way down.
	   No padding on the strip itself: the end cells must stay flush with its
	   left and right borders or the active underline, which is the full width
	   of its cell, stops short of the border and reads as misaligned. */
	.se-life__tab {
		gap: clamp(6px, 0.729vw, 14px);
		padding: clamp(14px, 1.146vw, 22px) clamp(8px, 1.042vw, 20px);
		font-size: clamp(14px, 0.99vw, 19px);
	}
	.se-life__tab svg,
	.se-life__tab-ic { width: clamp(16px, 1.25vw, 24px); height: clamp(16px, 1.25vw, 24px); }
	.se-life__panel-title { font-size: clamp(20px, 1.458vw, 28px); }
	.se-life__stat-num { font-size: clamp(26px, 1.875vw, 36px); letter-spacing: -0.02em; }

	/* Stories */
	.se-stories__card { gap: clamp(24px, 2.083vw, 40px); }
	.se-stories__title { font-size: clamp(24px, 1.562vw, 30px); letter-spacing: -0.02em; }

	/* Closing CTA */
	.se-cta__inner { gap: clamp(36px, 3.542vw, 68px); }
	.se-cta__title { font-size: clamp(30px, 3.073vw, 59px); }
}

/* =========================================================================
   Flow cards: align every row ACROSS the four cards.

   The cards were independent flex columns, so each block sat wherever its own
   preceding content ended: a 3-line title pushed its chip down while a 2-line
   title left its chip high (measured 29px of chip drift at 1200 and 37px at
   1920 — it was never aligned, at any width). Same for the descriptions and
   the coloured list rows underneath.

   Fixed with subgrid: .se-flow__cards owns one set of row tracks and every
   card opts into them, so each track is as tall as the tallest card's content
   and every row starts on the same line in all four. Track 3 is the 1fr slack
   row, which keeps the body bottom-anchored exactly as justify-content:
   space-between used to — the leftover space collects there instead of being
   spread between the rows.

   Row map: 1 title | 2 chip | 3 slack | 4 desc | 5-7 the three list rows.

   Desktop only: below 901 the cards stack full-width and already align.
   Wrapped in @supports so that without subgrid the original flex layout
   simply remains rather than collapsing.
   ========================================================================= */
@media (min-width: 901px) {
	@supports (grid-template-rows: subgrid) {
		.se-flow__cards {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			grid-template-rows: auto auto 1fr auto auto auto auto;
			column-gap: 20px;
			/* 8px was .se-flow__card-body's own gap; it now spaces every row. */
			row-gap: 8px;
			/* the card's old min-height, so the slack row still has space to take */
			min-height: 380px;
		}
		.se-flow__card {
			grid-row: 1 / span 7;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: minmax(0, 1fr);
		}
		.se-flow__card-top {
			grid-row: 1 / span 2;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: minmax(0, 1fr);
		}
		.se-flow__card-body {
			grid-row: 4 / span 4;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: minmax(0, 1fr);
			/* row spacing now comes from the shared row-gap */
			gap: 0;
		}
		/* 8px here + the 8px row-gap reproduces the original 16px title->chip
		   step. justify-self keeps the chip hugging its text: blockified as a
		   grid item it would otherwise stretch the full column and its teal
		   fill would run edge to edge. */
		.se-flow__chip { margin-top: 8px; justify-self: start; }
		.se-flow__card-desc { margin-bottom: 4px; }
	}
}

/* =========================================================================
   Inset the capability strip from the frame rails.

   home-v2.css lists .se-engine__feats among the full-bleed bands that get
   pulled back out to the rails (margin-inline: -1 * --hv-rail-inset). That
   suits the dotted heading bands in that list, whose hairline top/bottom rules
   are meant to touch the rails — but this strip is bordered on all four sides,
   so meeting them put its left and right borders on top of the rails and the
   two read as one merged frame.

   Cancelling it here rather than editing the shared list in home-v2.css, so the
   override stays with the page it belongs to. Same specificity and the same
   1024px bound as the rule it counters, and smart-engage.css loads after
   home-v2.css, so this wins. Restores the shell's normal content inset — the
   gap the rest of the section already uses.
   ========================================================================= */
@media (min-width: 1024px) {
	main > section > .hv-shell > .se-engine__feats {
		margin-inline: 0;
		width: 100%;
		max-width: min(1600px, 100%);
	}
}