/* ==========================================================================
   Cerebra V2 — product page (.cbv-*)
   Depends on home-v2.css for .hv2, .hv-shell, .hv-nav, @font-face.
   Figma: Cerebra-Product-page (desktop 207:34627 / mobile 259:31405)
   ========================================================================== */

.cbv2 {
	background: #0a0a0a;
	/* One token for the page's monospace runs. Every use needs !important:
	   home-v2.css pins `.hv2 *` to Uncut Sans with !important, so a plain
	   font-family declaration here never takes effect. */
	--cbv-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

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

.cbv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #2ad9c4;
	color: #05201c;
	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;
}
.cbv-btn:hover { background: #24c3b0; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.cbv-hero { background: #0a0a0a; padding: 120px 0; overflow: hidden; }
.cbv-hero__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.cbv-hero__copy { width: 46%; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* Type from the Cerebra Product page file (lbzx…, desktop 207:34647): the hero
   was still on the older website-file scale — 60px/1.1 title and a 20px/1.5
   lede capped at 520px. The new design is a 64px title and a notably larger
   28px lede, both on a 1.4 line-height and -0.02em tracking. The 24px rhythm
   between tag, title and lede comes from .cbv-hero__copy's gap, so the title's
   old 8px top margin is dropped. */
.cbv-hero__title {
	margin: 0;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #fff;
}
.cbv-hero__lede {
	margin: 0;
	max-width: 767px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.6);
}
.cbv-hero__copy .cbv-btn { margin-top: 16px; }
.cbv-hero__visual { flex: 1 1 0; min-width: 0; position: relative; }
/* No border-radius: the old asset was a bare graph panel, so the rounding was
   faked here. The Figma export (253:9503) is the whole window — its own
   rounded frame, the traffic-light tab at top-left, and a soft drop shadow
   that bleeds to the edges of the file. Clipping that to a 16px radius cut
   the shadow corners off square. */
.cbv-hero__visual img { width: 100%; max-width: min(860px, 100%); height: auto; display: block; }

/* reusable section header */
.cbv-head {
	position: relative;
	text-align: center;
	padding: 80px 0 56px;
	overflow: hidden;
}
.cbv-head--dots { border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cbv-head > * { position: relative; z-index: 1; }
/* Section head, per the Cerebra Product page file (253:8744 desktop /
   259:31649 mobile). The eyebrow was 13px with +2px tracking at 50% white; the
   design has it larger, tighter and brighter, and 24px clear of the title. */
.cbv-head__eyebrow {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.cbv-head__title {
	margin: 0 auto;
	max-width: min(896px, 100%);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #fff;
}

/* ==========================================================================
   2. THE PROBLEM
   ========================================================================== */
.cbv-problem { background: #0a0a0a; padding: 0 0 100px; }
.cbv-problem__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: min(1720px, 100%);
	margin: 80px auto 0;
	/* the design gives the panel a translucent fill over the page, not a bare
	   outline: rgba(255,255,255,0.03) behind a 5.5px backdrop blur */
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(5.5px);
	backdrop-filter: blur(5.5px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.cbv-problem__card { position: relative; padding: 24px; }
.cbv-problem__card + .cbv-problem__card { border-left: 1px solid rgba(255, 255, 255, 0.2); }
/* Corner squares — 4 outer corners plus a pair on each divider (8 in total),
   the same marker treatment the other product pages use. Each card supplies the
   pair on its own left edge; the grid supplies the pair on the right edge. */
.cbv-problem__grid::before,
.cbv-problem__grid::after,
.cbv-problem__card::before,
.cbv-problem__card::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #2a2a2b;
	border: 2px solid #414141;
	border-radius: 1px;
	z-index: 2;
	pointer-events: none;
}
.cbv-problem__card::before { top: -7px; left: -7px; }
.cbv-problem__card::after { bottom: -7px; left: -7px; }
.cbv-problem__grid::before { top: -7px; right: -7px; }
.cbv-problem__grid::after { bottom: -7px; right: -7px; }
.cbv-problem__num {
	display: block;
	margin-bottom: 12px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #2ad9c4;
}
.cbv-problem__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
}
/* full-strength white in the design, not the muted 55% it had */
.cbv-problem__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
}

/* ==========================================================================
   3. HOW IT WORKS
   ========================================================================== */
.cbv-how { background: #0a0a0a; padding: 0 0 100px; }
.cbv-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: min(1720px, 100%);
	margin: 80px auto 0;
}
.cbv-how__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Card geometry from 253:8745 (212:5315): the card is 506.67x611 and the
	   description sits at x=24, y=471, 459 wide. That gives 40px of head room,
	   24px sides and a 20px foot -- not the 40px sides this had, which cut the
	   text column to 417px and wrapped the Author copy onto a fifth line. With
	   all three descriptions bottom-aligned, that one extra line pushed its
	   first line 30px above the other two. 80px separates title/viz/desc. */
	gap: 80px;
	padding: 40px 24px 20px;
	min-height: 611px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	/* Sampled off the design (253:8745): the glow is a LINEAR bottom fade, near
	   uniform across the card width, nil until ~74% of the height and reaching
	   ~0.55 alpha at the base. The old radial peaked at 0.09 — barely visible,
	   which is why the descriptions sat on flat black instead of on teal. The
	   intermediate stops follow the measured ease-in rather than a straight ramp. */
	background:
		linear-gradient(
			to bottom,
			rgba(42, 217, 196, 0) 74%,
			rgba(42, 217, 196, 0.09) 85%,
			rgba(42, 217, 196, 0.26) 92%,
			rgba(42, 217, 196, 0.55) 100%
		) no-repeat border-box,
		#0e0e0e;
	overflow: hidden;
}
.cbv-how__title { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: #fff; }
.cbv-how__viz { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 226px; font-family: var(--cbv-mono) !important; }
/* full white at 20px in the design, not 15px at 60% */
.cbv-how__desc { margin: 0; align-self: stretch; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: #fff; }

/* Author viz */
.cbv-author__chip {
	align-self: center;
	padding: 12px 16px;
	border: 1px solid rgba(42, 217, 196, 0.4);
	background: rgba(42, 217, 196, 0.08);
	color: #2ad9c4;
	font-size: 14px;
}
.cbv-author__stem { width: 1px; height: 20px; border-left: 1px dashed rgba(255, 255, 255, 0.3); }
.cbv-author__table { width: 100%; max-width: 380px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.02); }
.cbv-author__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.cbv-author__row + .cbv-author__row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cbv-author__row em { font-style: italic; color: #2ad9c4; }

/* Publish viz */
.cbv-how__viz .cbv-pub__row {
	width: 100%;
	max-width: 400px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
}
.cbv-pub__row + .cbv-pub__row { margin-top: 10px; }
.cbv-pub__row--live { border-color: rgba(42, 217, 196, 0.4); background: rgba(42, 217, 196, 0.06); }
.cbv-pub__v { color: #fff; }
.cbv-pub__h { flex: 1; color: rgba(255, 255, 255, 0.4); }
.cbv-pub__tag { padding: 3px 8px; font-size: 11px; letter-spacing: 0.05em; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); }
.cbv-pub__tag--live { background: #2ad9c4; color: #05201c; border-color: #2ad9c4; font-weight: 600; }

/* Evaluate viz */
.cbv-eval__metric { width: 100%; max-width: 400px; }
.cbv-eval__metric + .cbv-eval__metric { margin-top: 20px; }
.cbv-eval__bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cbv-eval__bar span { display: block; height: 100%; background: #2ad9c4; border-radius: 2px; }
.cbv-eval__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 14px; }
.cbv-eval__k { color: rgba(255, 255, 255, 0.7); }
.cbv-eval__val { color: #2ad9c4; }

/* ==========================================================================
   4. THE LANDSCAPE (comparison table)
   ========================================================================== */
.cbv-cmp-sec { background: #0a0a0a; padding: 0 0 100px; }
.cbv-cmp__scroll { max-width: min(1720px, 100%); margin: 56px auto 0; }
.cbv-cmp {
	display: grid;
	grid-template-columns: 1.1fr 1.35fr 1.1fr 1.1fr 1.1fr;
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.cbv-cmp__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 22px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
}
.cbv-cmp__cell:nth-child(5n+1) { border-left: 0; justify-content: flex-start; text-align: left; color: rgba(255, 255, 255, 0.55); }
.cbv-cmp__cell--head { border-top: 0; padding: 26px 24px; font-family: var(--cbv-mono) !important; font-size: 18px; color: #fff; }
.cbv-cmp__cell--head a, .cbv-cmp__cell--head span { color: rgba(255, 255, 255, 0.85); font-family: inherit; }
.cbv-cmp__cell--head a { text-decoration: underline; text-underline-offset: 4px; }
.cbv-cmp__cell--hl { background: rgba(255, 255, 255, 0.03); color: #2ad9c4; }
.cbv-cmp__cell--head.cbv-cmp__cell--hl { color: #fff; box-shadow: inset 0 -2px 0 #2ad9c4; }

/* light-section header variant */
.cbv-light { background: #f6f6f6; color: #0a0a0a; }
/* The light section head (arch / ships / wild / pricing are one component in
   the file): 80px of air on both sides, and the title runs the full rail
   rather than the 896px the dark heads cap at -- capped, every one of these
   single-line titles wrapped. */
.cbv-head--dots-dk { position: relative; text-align: center; padding: 80px 0; overflow: hidden; border-top: 1px solid rgba(17,17,17,0.2); border-bottom: 1px solid rgba(17,17,17,0.2); }
.cbv-head--dots-dk > * { position: relative; z-index: 1; }
.cbv-light .cbv-head__eyebrow { color: rgba(17,17,17,0.7); }
.cbv-light .cbv-head__title { max-width: none; line-height: 1.4; color: #111; }

/* ==========================================================================
   4b. BUILT FOR REGULATED WORKLOADS (dark, copy + audit log)
   ========================================================================== */
.cbv-reg { background: #0a0a0a; padding: 40px 0 100px; }
/* Design splits the content row 700 : 780 with a 40px gutter (1600 frame). */
.cbv-reg__row {
	display: grid;
	grid-template-columns: minmax(0, 700fr) minmax(0, 780fr);
	gap: 40px;
	align-items: start;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.cbv-reg__copy { min-width: 0; }
.cbv-reg__eyebrow { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: #2ad9c4; }
.cbv-reg__title { margin: 0 0 12px; font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: #fff; }
.cbv-reg__lede { margin: 0 0 51px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.cbv-reg__list { margin: 0; padding-right: 20px; }
.cbv-reg__list > div { display: grid; grid-template-columns: minmax(0, 269fr) minmax(0, 411fr); align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.2); }
.cbv-reg__list dt { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.cbv-reg__list dd { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.cbv-reg__viz { min-width: 0; }
/* The export bakes in the section glow; its black point is remapped to #0a0a0a
   so the artwork edges dissolve into the section background. */
.cbv-reg__viz img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   5. ARCHITECTURE (light, 6 cards)
   ========================================================================== */
.cbv-arch {
	padding: 0 0 100px;
	/* Desktop (386px card) and mobile (353px card) carry identical internals --
	   only the chip drops 14->12. So these are keyed to the CARD's width, not
	   the viewport: cqw runs off the card's 305px content box on mobile, so each
	   ramp caps out at the design value there and only shrinks below it. That
	   keeps the 2-up and 3-up bands looking the same. */
	--arch-tile: clamp(64px, 25.9cqw, 79px);
	--arch-top-gap: clamp(16px, 7.87cqw, 24px);
	--arch-col-gap: clamp(24px, 2.656vw, 51px);
}
/* 3 x 386 on a 51px gutter, centred -- the card block is inset well inside the
   page rails in the design, so it is capped rather than filling the shell. */
.cbv-arch__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--arch-col-gap);
	row-gap: 24px;
	max-width: min(1260px, 100%);
	margin: 56px auto 0;
}
.cbv-arch__card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 16px; padding: 24px; container-type: inline-size; }
.cbv-arch__top { display: flex; align-items: flex-start; gap: var(--arch-top-gap); }
.cbv-arch__ic {
	width: var(--arch-tile);
	height: var(--arch-tile);
	flex: none;
	display: grid;
	place-items: center;
	background: #09413e;
	border: 1px solid rgba(42, 217, 196, 0.2);
	overflow: hidden;
}
.cbv-arch__ic img { width: 63.3%; height: auto; display: block; }
.cbv-arch__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
/* Chip with an 8px marker square in each corner, same language as
   .cbv-problem. Four gradient layers rather than pseudo-elements, since a
   single element only has two of those and the chip needs four. */
.cbv-arch__tag {
	padding: 8px 12px;
	border-radius: 1px;
	color: #1d403c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	background-color: rgba(42, 217, 196, 0.2);
	background-image:
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0);
	background-size: 8px 8px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}
.cbv-arch__title { margin: 0; font-size: clamp(21px, 9.18cqw, 28px); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: #111; }
.cbv-arch__desc { margin: 0; font-size: clamp(16px, 6.557cqw, 20px); line-height: 1.5; letter-spacing: -0.01em; color: #111; }
.cbv-arch__desc code { font-family: var(--cbv-mono) !important; font-size: 1em; background: rgba(0,0,0,0.06); padding: 0 4px; border-radius: 4px; }
/* Dashed rail threading the row: in the design one long line runs behind all
   three cards, so it only ever shows in the two gutters. 12/12 dashes. */
.cbv-arch__card::after {
	content: "";
	position: absolute;
	top: calc(24px + var(--arch-tile) + 17px);
	left: 100%;
	width: var(--arch-col-gap);
	height: 1px;
	background-image: repeating-linear-gradient(to right, #2ad9c4 0 12px, transparent 12px 24px);
}
.cbv-arch__card:nth-child(3n)::after { content: none; }
/* 2-up below 1440, where a third column would drop the card under the 353px the
   phone card proves is enough; the rail then breaks after every second card. */
@media (max-width: 1439px) {
	.cbv-arch__grid { grid-template-columns: repeat(2, 1fr); max-width: min(823px, 100%); }
	.cbv-arch__card:nth-child(3n)::after { content: ""; }
	.cbv-arch__card:nth-child(2n)::after { content: none; }
}

/* ==========================================================================
   6. WHERE IT SHIPS (light, tabbed)
   ========================================================================== */
.cbv-ships { padding: 0 0 100px; }
.cbv-head__sub { margin: 24px auto 0; max-width: min(1276px, 100%); font-size: 24px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(0,0,0,0.7); }
/* Segmented tab strip: a 1px rgba(17,17,17,0.2) frame around eight equal
   cells divided by #c8c8c8 hairlines. Inactive labels are the same #111 at
   30% rather than a separate grey. The active cell is boxed on all four sides
   and carries a 4px teal underline inside its own border. */
.cbv-ships__tabs {
	display: flex;
	max-width: min(1720px, 100%);
	margin: 56px auto 0;
	border: 1px solid rgba(17, 17, 17, 0.2);
}
.cbv-ships__tab {
	flex: 1 0 0;
	min-width: 0;
	height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 32px in the design, but our strip is 30px narrower than the 1600 it was
	   drawn at, and at 32px "Public sector" would wrap. */
	padding: 0 12px;
	background: none;
	border: 0;
	border-right: 1px solid #c8c8c8;
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	color: #111;
	opacity: 0.3;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.cbv-ships__tab:last-child { border-right: 0; }
.cbv-ships__tab:hover { opacity: 0.6; }
.cbv-ships__tab.is-active {
	opacity: 1;
	border: 1px solid #c8c8c8;
	box-shadow: inset 0 -4px 0 #2ad9c4;
}

.cbv-ships__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 343fr) minmax(0, 1133fr);
	gap: 44px;
	max-width: min(1720px, 100%);
	margin: 56px auto 0;
	padding: 40px;
	background: #fff;
	border: 1px solid rgba(17, 17, 17, 0.2);
}
/* Four 10.6px teal squares straddling the panel corners. One overhanging
   pseudo-element with four gradient layers -- the panel's own background is
   clipped to its border box, so the squares cannot live on it directly. */
.cbv-ships__panel::before {
	content: "";
	position: absolute;
	inset: -5.3px;
	pointer-events: none;
	background-image:
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0);
	background-size: 10.63px 10.63px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}
.cbv-ships__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cbv-ships__h { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: #111; }
.cbv-ships__p { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: #111; }
.cbv-ships__stats { display: flex; gap: 32px; padding-top: 16px; }
/* These are spans, so `.hv2 span` (0,1,1) out-specifies a lone class even with
   !important -- the mono has to be set from the parent to match it. */
.cbv-ships__stats .cbv-ships__stat-k,
.cbv-ships__stats .cbv-ships__stat-v { font-family: var(--cbv-mono) !important; }
.cbv-ships__stat-k { display: block; margin-bottom: 3px; font-size: 10px; line-height: 1.55; letter-spacing: 0.6px; text-transform: uppercase; color: #000; }
.cbv-ships__stat-v { font-size: 22px; letter-spacing: -0.01em; color: #10132e; white-space: nowrap; }
.cbv-ships__stat-v em { font-style: normal; font-size: 12px; }

.cbv-ships__grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; }
.cbv-ships__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px 16px 36px;
	background: #fff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
	/* cells butt against each other; halve the shared hairline */
	margin: -0.5px;
}
.cbv-ships__card.is-flagship { background: #c2fff8; }
/* the flagship marker -- a 10px teal square pinned to the cell's top right */
.cbv-ships__card.is-flagship::after {
	content: "";
	position: absolute;
	top: 15px;
	right: 15px;
	width: 10px;
	height: 10px;
	border-radius: 1px;
	background: #2ad9c4;
}
/* same cornered chip as .cbv-arch__tag */
.cbv-ships__tag {
	padding: 8px 12px;
	border-radius: 1px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(29, 64, 60, 0.5);
	background-color: rgba(42, 217, 196, 0.2);
	background-image:
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0);
	background-size: 8px 8px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}
.cbv-ships__card.is-flagship .cbv-ships__tag { color: #1d403c; }
.cbv-ships__card-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: #10cbba; }
.cbv-ships__card.is-flagship .cbv-ships__card-title { color: #111; }
.cbv-ships__card-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: #000; }

.cbv-ships__legend { display: flex; flex-wrap: wrap; gap: 36px; max-width: min(1720px, 100%); margin: 36px auto 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(0,0,0,0.7); }
.cbv-ships__legend span { display: inline-flex; align-items: center; gap: 8px; }
.cbv-ships__key { width: 10px; height: 10px; flex: none; border-radius: 1px; }
.cbv-ships__key--flag { background: #2ad9c4; }
.cbv-ships__key--sup { background: #fff; border: 0.5px solid #000; }
.cbv-ships__key--na { width: 12px; height: 0; border-radius: 0; border-top: 1px solid #000; align-self: center; }

/* ==========================================================================
   7. IN THE WILD (light, 3 stat cards)
   ========================================================================== */
/* deeper foot than the other sections: the corner markers sit outside the
   card box, so the usual 100px reads tight against the next head */
.cbv-wild { padding: 0 0 160px; }
/* 3 x 420 on an 80px gutter, centred. */
.cbv-wild__grid { --wild-gap: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wild-gap); max-width: min(1420px, 100%); margin: 56px auto 0; }
.cbv-wild__card {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: #fff;
	border: 1px solid rgba(29, 64, 60, 0.1);
	padding: 40px;
}
/* four 10.6px teal squares straddling the card corners, on one overhanging
   pseudo-element -- see .cbv-ships__panel for the same trick */
.cbv-wild__card::before {
	content: "";
	position: absolute;
	inset: -5.3px;
	pointer-events: none;
	background-image:
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0),
		linear-gradient(#2ad9c4 0 0);
	background-size: 10.63px 10.63px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}
.cbv-wild__top { display: flex; align-items: center; gap: 20px; }
.cbv-wild__ic {
	width: 75px;
	height: 75px;
	flex: none;
	display: grid;
	place-items: center;
	background: #09413e;
	border: 1px solid rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.cbv-wild__ic img { width: 66.7%; height: auto; display: block; }
.cbv-wild__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
/* same cornered chip as .cbv-arch__tag / .cbv-ships__tag */
.cbv-wild__tag {
	padding: 8px 12px;
	border-radius: 1px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #1d403c;
	background-color: rgba(42, 217, 196, 0.2);
	background-image:
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0),
		linear-gradient(rgba(29, 64, 60, 0.2) 0 0);
	background-size: 8px 8px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}
.cbv-wild__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: #111; }
.cbv-wild__desc { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: #111; }
/* pinned to the foot so all three rows of figures line up whatever the
   description length */
.cbv-wild__stats {
	display: grid;
	/* min-content floors rather than hard thirds: the design widens the third
	   column on the insurance card so "Underwriting" stays on one line. */
	grid-template-columns: repeat(3, minmax(min-content, 1fr));
	column-gap: 12px;
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid rgba(0, 0, 0, 0.09);
}
.cbv-wild__stats .cbv-wild__k { display: block; margin-bottom: 2px; font-family: var(--cbv-mono) !important; font-size: 10px; line-height: 1.55; letter-spacing: 0.6px; text-transform: uppercase; color: #000; }
.cbv-wild__v {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #111;
}
/* ==========================================================================
   8. DEVELOPER EXPERIENCE (light, copy + code)
   ========================================================================== */
.cbv-dx { padding: 0 0 100px; }
/* copy 854 : code 626 on a 40px gutter (1520 content in the design) */
.cbv-dx__row {
	display: grid;
	grid-template-columns: minmax(0, 854fr) minmax(0, 626fr);
	gap: 40px;
	align-items: start;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.cbv-dx__copy { min-width: 0; }
.cbv-dx__eyebrow { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: #2ad9c4; }
.cbv-dx__title { margin: 0 0 12px; font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: #111; }
.cbv-dx__lede { margin: 0 0 110px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: #111; }
.cbv-dx__list { margin: 0; max-width: 560px; padding-right: 20px; }
.cbv-dx__list > div { display: grid; grid-template-columns: minmax(0, 122fr) minmax(0, 418fr); align-items: center; padding: 18px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.cbv-dx__list > div:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
/* !important because home-v2.css pins .hv2 * to Uncut Sans with !important --
   without it these mono declarations never take effect. */
.cbv-dx__list dt { font-family: var(--cbv-mono) !important; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #000; }
.cbv-dx__list dd { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: #666; }
.cbv-dx__list code { font-family: var(--cbv-mono) !important; font-size: 1em; background: rgba(218, 218, 218, 0.25); border: 0.5px solid #868686; border-radius: 5px; padding: 3px 10px; }
.cbv-dx__code { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.cbv-term {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 2px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.6);
}
.cbv-term__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px 11px;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}
.cbv-term__dot {
	width: 10px;
	height: 10px;
	flex: none;
	border: 1px solid #d1d5db;
	border-radius: 5px;
	background: rgba(17, 24, 39, 0.2);
}
.cbv-term__title {
	padding-left: 8px;
	font-family: var(--cbv-mono) !important;
	font-size: 11.5px;
	line-height: 17.83px;
	color: #111827;
	white-space: nowrap;
}
.cbv-term__tail {
	margin-left: auto;
	font-family: var(--cbv-mono) !important;
	font-size: 12px;
	line-height: 18.6px;
	letter-spacing: -0.12px;
	color: #6b7280;
	white-space: nowrap;
}

/* !important is required: home-v2.css forces Uncut Sans on `.hv2 *`
   with !important, which otherwise beats this. Monospace is not
   cosmetic here — the payload columns only line up in a fixed pitch. */
.cbv-term__code {
	margin: 0;
	padding: 15px 18px 18px;
	overflow-x: auto;
	font-family: var(--cbv-mono) !important;
	font-size: 12.5px;
	line-height: 20.63px;
	color: #111827;
	white-space: pre;
	tab-size: 2;
}
.cbv-term__code code,
.cbv-term__line,
.cbv-tok {
	font-family: var(--cbv-mono) !important;
}
.cbv-term__code code { font-size: inherit; line-height: inherit; color: inherit; background: none; padding: 0; }
.cbv-term__line { display: block; }

.cbv-tok--p { color: #111827; }   /* prompt / punctuation */
.cbv-tok--f { color: #0f766e; }   /* flag: -X POST */
.cbv-tok--g { color: #16a34a; }   /* string / header value */
.cbv-tok--k { color: #7c3aed; }   /* JSON key */
.cbv-tok--s { color: #d97706; }   /* JSON string value */
.cbv-tok--n { color: #b45309; }   /* JSON number */

/* ==========================================================================
   9. PRICING (light, 3 plans)
   ========================================================================== */
.cbv-pricing { padding: 0 0 100px; }
.cbv-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: min(1720px, 100%); margin: 56px auto 0; }
.cbv-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; padding: 32px; }
.cbv-plan.is-featured { border-color: #16b39c; box-shadow: 0 8px 40px rgba(22,179,156,0.14); }
.cbv-plan__badge { position: absolute; top: -8px; left: -1px; padding: 4px 10px; background: #2ad9c4; color: #05201c; font-size: 12px; font-weight: 600; line-height: 16px; border-radius: 0 6px 0 0; }
.cbv-plan__name { margin: 0 0 8px; font-size: 24px; font-weight: 500; color: #0a0a0a; }
.cbv-plan__for { margin: 0 0 24px; min-height: 42px; font-size: 14px; line-height: 1.5; color: rgba(0,0,0,0.55); }
.cbv-plan__price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.cbv-plan__amount { font-size: 44px; font-weight: 600; letter-spacing: -1px; color: #0a0a0a; }
/* 0.5 blended to #808080 on white — 3.94:1, under the 4.5:1 AA minimum for
   14px text. 0.58 lands on ~#6b6b6b for 4.9:1. */
.cbv-plan__per { font-size: 14px; color: rgba(0,0,0,0.58); }
.cbv-plan__cta { display: block; margin: 24px 0; padding: 13px; text-align: center; border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; font-size: 15px; font-weight: 500; color: #0a0a0a; text-decoration: none; transition: background 0.15s ease; }
.cbv-plan__cta:hover { background: rgba(0,0,0,0.04); }
.cbv-plan.is-featured .cbv-plan__cta { background: #2ad9c4; border-color: #2ad9c4; color: #05201c; }
.cbv-plan.is-featured .cbv-plan__cta:hover { background: #24c3b0; }
.cbv-plan__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cbv-plan__feats li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; color: rgba(0,0,0,0.7); }
.cbv-plan__feats li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 2px; background: #16b39c; }
/* Same 4.5:1 correction as .cbv-plan__per, against the section's #f6f6f6. */
.cbv-pricing__note { max-width: min(1720px, 100%); margin: 32px auto 0; text-align: center; font-size: 14px; color: rgba(0,0,0,0.6); }

/* ==========================================================================
   10. FAQ (dark accordion)
   ========================================================================== */
.cbv-faq { background: #0a0a0a; padding: 0 0 100px; }
.cbv-faq__list { max-width: min(1234px, 100%); margin: 56px auto 0; border-top: 1px solid rgba(255,255,255,0.12); }
.cbv-faq__item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.cbv-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; color: #fff; }
.cbv-faq__q::-webkit-details-marker { display: none; }
.cbv-faq__chev { width: 22px; height: 22px; flex: none; color: rgba(255,255,255,0.6); transition: transform 0.25s ease; }
.cbv-faq__item[open] .cbv-faq__chev { transform: rotate(180deg); }
/* 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. */
.cbv-faq__item { interpolate-size: allow-keywords; }
.cbv-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.cbv-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.cbv-faq__item::details-content { transition: none; }
}
.cbv-faq__a { margin: 0 4px 26px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.cbv-faq__a code { font-family: var(--cbv-mono) !important; font-size: 14px; background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 3px; color: #7ff0df; }

/* ==========================================================================
   11. CLOSING CTA
   ========================================================================== */
.cbv-cta { background: #0a0a0a; padding: 0 0 100px; }
.cbv-cta__banner {
	position: relative;
	overflow: hidden;
	max-width: min(1720px, 100%);
	margin: 0 auto;
	padding: 96px 40px;
	border-radius: 20px;
	text-align: center;
	background:
		radial-gradient(70% 120% at 12% 90%, rgba(42,217,196,0.35), transparent 60%),
		radial-gradient(60% 120% at 92% 20%, rgba(42,217,196,0.28), transparent 55%),
		#0d1413;
}
.cbv-cta__title { margin: 0 auto; max-width: min(900px, 100%); font-size: 46px; font-weight: 500; line-height: 1.2; letter-spacing: -0.92px; color: rgba(255,255,255,0.75); }
.cbv-cta__title em { font-style: normal; color: #2ad9c4; }
.cbv-cta__sub { margin: 20px auto 0; max-width: 640px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.cbv-cta__btns { display: flex; gap: 12px; justify-content: center; margin-top: 36px; }
.cbv-cta__btn { padding: 13px 26px; border-radius: 4px; font-size: 15px; font-weight: 500; text-decoration: none; }
.cbv-cta__btn--primary { background: #fff; color: #05201c; }
.cbv-cta__btn--ghost { border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.cbv-cta__note { margin: 28px 0 0; font-size: 14px; color: rgba(255,255,255,0.5); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.cbv-hero { padding: 40px 0 64px; }
	.cbv-hero__inner { flex-direction: column; align-items: stretch; gap: 40px; max-width: 100%; }
	.cbv-hero__copy { width: 100%; gap: 20px; }
	/* mobile 259:31419 — 40px title / 16px lede, both 1.4 and -0.02em */
	.cbv-hero__title { font-size: 40px; letter-spacing: -0.02em; }
	.cbv-hero__lede { font-size: 16px; line-height: 1.4; max-width: 100%; }
	.cbv-hero__visual img { max-width: 100%; }

	.cbv-head { padding: 48px 16px 36px; }
	.cbv-head__eyebrow { margin-bottom: 20px; font-size: 12px; letter-spacing: -0.02em; }
	.cbv-head__title { font-size: 24px; letter-spacing: -0.02em; }
	.cbv-problem { padding: 0 0 56px; }
	.cbv-problem__grid { grid-template-columns: 1fr; margin-top: 32px; }
	/* 74px block padding is what the mobile design resolves to (264:32636):
	   fixed ~399px cards with the content centred, i.e. (399-251)/2. Applied as
	   padding rather than a fixed height so a longer card grows instead of
	   overflowing — the three real cards have different copy lengths, unlike
	   the design file where card 1 is repeated three times. */
	.cbv-problem__card { padding: 74px 24px; }
	.cbv-problem__card + .cbv-problem__card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
	/* stacked: each card takes the pair across its own top edge, the grid the
	   pair across the bottom — 8 again, matching 264:32654-32661 */
	.cbv-problem__card::after { top: -7px; bottom: auto; left: auto; right: -7px; }
	.cbv-problem__grid::before { top: auto; bottom: -7px; left: -7px; right: auto; }

	.cbv-how { padding: 0 0 56px; }
	.cbv-how__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	/* The 611px floor is the desktop card's drawn height; stacked and full
	   width the content is shorter, and holding it would just stretch the
	   visual into empty space. */
	.cbv-how__card { padding: 32px 24px 36px; gap: 24px; min-height: 0; }
	/* mobile card type steps down and the copy centres (265:79970 / 265:79981) */
	.cbv-how__title { font-size: 20px; }
	.cbv-how__desc { font-size: 16px; text-align: center; }

	.cbv-cmp-sec { padding: 0 0 56px; }
	.cbv-cmp__scroll { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cbv-cmp { min-width: 760px; }
	.cbv-cmp__cell { padding: 16px; font-size: 14px; }
	.cbv-cmp__cell--head { font-size: 15px; padding: 18px 16px; }

	.cbv-reg { padding: 24px 0 56px; }
	.cbv-reg__row { grid-template-columns: 1fr; gap: 32px; }
	.cbv-reg__eyebrow { font-size: 16px; }
	.cbv-reg__title { font-size: 26px; }
	.cbv-reg__title br { display: none; }
	.cbv-reg__lede { margin-bottom: 32px; font-size: 18px; }
	.cbv-reg__list { padding-right: 0; }
	.cbv-reg__list > div { grid-template-columns: 1fr; align-items: start; gap: 8px; padding: 16px 0; }
	.cbv-reg__list dt { font-size: 20px; }

	/* 20px of air, not 48/36 -- every light head in the mobile file is tight. */
	.cbv-head--dots-dk { padding: 20px 24px; }
	.cbv-head--dots-dk .cbv-head__eyebrow { margin-bottom: 20px; }
	.cbv-head--dots-dk .cbv-head__title { line-height: 1.5; }
	.cbv-arch { padding: 0 0 56px; }
	/* Card is identical to desktop apart from a 12px chip; only the grid stacks. */
	.cbv-arch__grid { grid-template-columns: 1fr; row-gap: 24px; margin-top: 40px; }
	.cbv-arch__card::after { content: none; }
	.cbv-arch__tag { font-size: 12px; }

	.cbv-ships { padding: 0 0 56px; }
	.cbv-head__sub { margin-top: 20px; font-size: 16px; }
	/* Same strip, scrolled: the design keeps it 1600 wide and lets it run off
	   the right edge, so the cells stop stretching and size to their labels. */
	.cbv-ships__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 40px; }
	.cbv-ships__tab { flex: 0 0 auto; height: 82px; padding: 0 24px; font-size: 20px; }
	.cbv-ships__panel { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; padding: 40px 20px; }
	.cbv-ships__p { font-size: 16px; }
	.cbv-ships__grid { grid-template-columns: repeat(2, 1fr); padding: 0; }
	.cbv-ships__card { padding: 16px 16px 24px; }
	.cbv-ships__tag { font-size: 12px; }
	.cbv-ships__card-title { font-size: 18px; }
	.cbv-ships__legend { gap: 12px 24px; margin-top: 32px; font-size: 12px; }

	.cbv-wild { padding: 0 0 88px; }
	/* Card internals are identical to desktop; only the column count and the
	   card's own padding change. */
	.cbv-wild__grid { --wild-gap: 32px; grid-template-columns: 1fr; margin-top: 40px; }
	.cbv-wild__card { padding: 20px; }
	.cbv-dx { padding: 0 0 56px; }
	/* Stacked, but the code panels come BETWEEN the lede and the term list in
	   the mobile file -- display:contents lifts the copy's children into the
	   grid so the three blocks can be ordered. Spacing moves to margins because
	   a row-gap would also open up the 12px eyebrow/title/lede rhythm. */
	.cbv-dx__row { grid-template-columns: 1fr; gap: 0; }
	.cbv-dx__copy { display: contents; }
	.cbv-dx__code { order: 1; margin-bottom: 40px; }
	.cbv-dx__list { order: 2; max-width: none; padding-right: 0; }
	.cbv-dx__eyebrow { font-size: 12px; }
	.cbv-dx__title { font-size: 24px; }
	.cbv-dx__lede { margin-bottom: 40px; font-size: 18px; }
	.cbv-dx__list > div { grid-template-columns: minmax(0, 116fr) minmax(0, 214fr); }
	.cbv-dx__list dt { font-size: 16px; }
	.cbv-term__code { padding: 12px 14px 14px; font-size: 11px; line-height: 18px; }
	/* the trace id is in the mobile design and does fit at 10px -- it was only
	   hidden because it collided at the old 12px */
	.cbv-term__tail { font-size: 10px; line-height: 1.5; }
	.cbv-term__title { font-size: 10.5px; }

	.cbv-pricing { padding: 0 0 56px; }
	.cbv-pricing__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.cbv-plan { padding: 28px 24px; }

	.cbv-faq { padding: 0 0 56px; }
	.cbv-faq__list { margin-top: 32px; }
	.cbv-faq__q { font-size: 17px; padding: 22px 4px; }
	.cbv-cta { padding: 0 0 56px; }
	.cbv-cta__banner { padding: 56px 24px; border-radius: 16px; }
	.cbv-cta__title { font-size: 30px; letter-spacing: -0.5px; }
	.cbv-cta__sub { font-size: 16px; }
	.cbv-cta__btns { flex-direction: column; }
}

/* Small phones. cerebra-v2 had a single 900px breakpoint whose type is tuned
   for ~390; on a 320-360 screen the hero and pricing figures ran large next to
   the rest of the page. Same 480px step every other product page already
   uses (credit-pro, rewards-plus, embed-next, onboard-iq, smart-engage). */
@media (max-width: 480px) {
	.cbv-reg__title { font-size: 23px; }
	.cbv-reg__lede { font-size: 16px; }
	.cbv-reg__list dt { font-size: 18px; }
	/* 44px pricing figures crowd a 280px card interior. */
	.cbv-plan__amount { font-size: 34px; letter-spacing: -0.7px; }
	.cbv-cta__title { font-size: 26px; letter-spacing: -0.44px; }
	.cbv-faq__q { font-size: 17px; padding: 22px 4px; }
	.cbv-faq__a { font-size: 15px; }
}

/* =========================================================================
   FLUID DESKTOP BAND (901-1919) — see the long note in rewards-plus.css.
   Max = 1920 design value (1920+ byte-identical), min = the file's own <=900
   value, coefficient = design/19.2vw. Body copy and small UI stay fixed.
   No .hv-section-glow arcs on this page, so every section foot is scalable.
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero */
	.cbv-hero { padding-block: clamp(48px, 6.25vw, 120px); }
	.cbv-hero__title { font-size: clamp(40px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.cbv-hero__lede { font-size: clamp(16px, 1.458vw, 28px); letter-spacing: -0.02em; }

	/* Dotted section heads */
	.cbv-head { padding-block: clamp(48px, 4.167vw, 80px) clamp(36px, 2.917vw, 56px); }
	.cbv-head--dots-dk { padding-block: clamp(20px, 4.167vw, 80px); }
	.cbv-head__title { font-size: clamp(24px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.cbv-head__sub { font-size: clamp(16px, 1.25vw, 24px); }

	/* Section rhythm — these all carry their space on the foot. */
	.cbv-problem,
	.cbv-how,
	.cbv-cmp-sec,
	.cbv-arch,
	.cbv-ships,
	.cbv-dx,
	.cbv-pricing,
	.cbv-faq,
	.cbv-cta { padding-block: 0 clamp(56px, 5.208vw, 100px); }
	.cbv-reg { padding-block: clamp(24px, 2.083vw, 40px) clamp(56px, 5.208vw, 100px); }
	.cbv-wild { padding-block: 0 clamp(88px, 8.333vw, 160px); }

	/* Body type + gaps */
	.cbv-plan__name { font-size: clamp(18px, 1.25vw, 24px); }
	.cbv-how__title { font-size: clamp(20px, 1.667vw, 32px); }
	.cbv-how__desc { font-size: clamp(16px, 1.042vw, 20px); }
	/* The panel is drawn at a 1520px content width; below that the 343fr copy
	   column and the three cells both lose room, so type and padding ramp down
	   together rather than the layout breaking. */
	.cbv-ships__tab { font-size: clamp(16px, 1.25vw, 24px); padding-inline: clamp(6px, 0.625vw, 12px); }
	.cbv-ships__panel { gap: clamp(24px, 2.292vw, 44px); padding: clamp(24px, 2.083vw, 40px); }
	.cbv-ships__h { font-size: clamp(24px, 1.667vw, 32px); }
	.cbv-ships__p { font-size: clamp(16px, 1.042vw, 20px); }
	.cbv-ships__card { padding-bottom: clamp(24px, 1.875vw, 36px); }
	.cbv-ships__tag { font-size: clamp(12px, 0.729vw, 14px); }
	.cbv-ships__card-title { font-size: clamp(16px, 1.042vw, 20px); }
	.cbv-wild__grid { --wild-gap: clamp(24px, 4.167vw, 80px); }
	.cbv-wild__card { padding: clamp(20px, 2.083vw, 40px); }
	.cbv-wild__ic { width: clamp(56px, 3.906vw, 75px); height: clamp(56px, 3.906vw, 75px); }
	.cbv-wild__top { gap: clamp(14px, 1.042vw, 20px); }
	.cbv-wild__tag { font-size: clamp(12px, 0.729vw, 14px); }
	.cbv-wild__title { font-size: clamp(18px, 1.25vw, 24px); }
	.cbv-wild__desc { font-size: clamp(16px, 1.042vw, 20px); }
	/* floor at 16, not 18: the three stat columns are floored at min-content so
	   the design's one-line "Underwriting" survives, and at 18px those floors
	   add up to more than a 252px card can hold. */
	.cbv-wild__v { font-size: clamp(16px, 1.25vw, 24px); }
	.cbv-wild__stats { column-gap: clamp(8px, 0.625vw, 12px); }
	.cbv-dx__row { gap: clamp(24px, 2.083vw, 40px); }
	.cbv-dx__eyebrow { font-size: clamp(12px, 1.042vw, 20px); }
	.cbv-dx__lede { margin-bottom: clamp(40px, 5.729vw, 110px); font-size: clamp(18px, 1.25vw, 24px); }
	.cbv-dx__list dt { font-size: clamp(16px, 1.042vw, 20px); }
	.cbv-reg__row { gap: clamp(24px, 2.083vw, 40px); }
	.cbv-reg__eyebrow { font-size: clamp(16px, 1.042vw, 20px); }
	.cbv-reg__title { font-size: clamp(26px, 1.875vw, 36px); }
	.cbv-reg__lede { margin-bottom: clamp(32px, 2.656vw, 51px); font-size: clamp(18px, 1.25vw, 24px); }
	.cbv-reg__list { padding-right: clamp(0px, 1.042vw, 20px); }
	.cbv-reg__list > div { padding-block: clamp(14px, 0.938vw, 18px); }
	.cbv-reg__list dt { font-size: clamp(20px, 1.25vw, 24px); }
	.cbv-reg__list dd { font-size: clamp(14px, 0.833vw, 16px); }
	.cbv-dx__title { font-size: clamp(24px, 1.875vw, 36px); }
	/* 3-up pricing columns are ~280px wide at 901, so the figure starts lower
	   than its <=900 stacked-card size rather than tracking it. */
	.cbv-plan__amount { font-size: clamp(32px, 2.292vw, 44px); letter-spacing: -0.0227em; }

	/* Closing CTA */
	.cbv-cta__banner { padding-block: clamp(56px, 5vw, 96px); }
	.cbv-cta__title { font-size: clamp(30px, 2.396vw, 46px); letter-spacing: -0.02em; }
}

/* =========================================================================
   Keep the vertical frame rails unbroken.

   The rails are drawn per `main > section` (::before/::after spanning each
   section's own box, home-v2.css). These sections have `padding: 0 0 100px`,
   so the 64px top margin on their `cbv-head--dots` first child collapses OUT
   through the section — the box starts 64px lower, that strip belongs to no
   section, and the rail breaks there. It showed as four cuts down the page.

   The LIGHT sections never had the bug: they also carry `cbv-light`, so
   home-v2.css's `main > section[class*="-light"] { display: flow-root }`
   already contains their margin. This is the same fix for the dark ones.

   Verified visually neutral: the strip already renders #0a0a0a (the body
   colour showing through), which is exactly these sections' own background.
   ========================================================================= */
.cbv-problem,
.cbv-how,
.cbv-cmp-sec,
.cbv-faq,
/* not currently broken — its first child carries no margin — but structurally
   identical, so include it rather than leave the trap for the next edit */
.cbv-cta {
	display: flow-root;
}