/**
 * OneIntel V2 — pre-launch hub page.
 *
 * Every selector is namespaced .oi2-, so this file cannot affect the live page
 * at /offerings/oneintel/ even though both templates share the theme.
 *
 * This file deliberately holds NO buttons, section headers or card chrome of
 * its own. Those come from the theme: .explore and .offering-card-btn for
 * calls to action, .collab-header / .eyebrow for section headers, and the
 * card idiom below is the same white / #e0e0e0 / radius-20 / fill-to-blue-1
 * pattern the rest of the site uses. What is left here is only the things
 * this page genuinely introduces - the orbit, the bank wall and the clock.
 *
 * House vocabulary this file sticks to:
 *   colour   blue-1 #0A40A1, blue-2 #1D6DD0, sky #EDFAFF, white #FEFEFE,
 *            hairline #e0e0e0. The site otherwise carries no red - this page
 *            uses ONE deliberate maroon as its single accent (--oi2-maroon),
 *            reserved for hover/interaction states only: bank tiles, the
 *            product cards and the clock cells. It is always a flat colour,
 *            never a gradient, and it is the only place on the page red
 *            appears outside the OneIntel wordmark itself.
 *   radius   cards 20px, icon tiles / nested panels 12px, logo tiles 16px,
 *            pills and tags 24px, circles 50%.
 *   icons    24x24 line art, fill none, stroke-width 1.6, in a flat 44x44
 *            radius-12 tile. No gradients, no shadows, no borders on tiles.
 *   shadow   the house uses almost none. The single token is
 *            0 8px 40px rgba(10, 36, 99, .25), for a genuine lift only.
 *
 * Loaded only for page-oneintel-v2.php.
 */

.oi2-hero,
.oi2-cohort,
.oi2-about,
.oi2-flow,
.oi2-countdown,
.oi2-final {
	--oi2-blue-1: #0A40A1;
	--oi2-blue-2: #1D6DD0;
	--oi2-sky: #EDFAFF;
	--oi2-white: #FEFEFE;
	--oi2-line: #e0e0e0;

	/* The OneIntel wordmark. */
	--oi2-mark-red: #E90F15;

	/* This page's one accent, for hover states only - see the note above. */
	--oi2-maroon: #7A1F2B;

	/* The live seconds digit and the launch date, matched to the page's maroon
	   accent rather than a brighter red. */
	--oi2-live-red: var(--oi2-maroon);

	/* The theme's one shadow token. */
	--oi2-shadow: 0 8px 40px rgba(10, 36, 99, .25);
}

/* ── shared bits ──────────────────────────────────────────────────────── */

.oi2-center {
	text-align: center;
}

/* The wordmark. Red "One" plus blue-1 "Intel" is the product logo set as
   text, which is why red is allowed here and nowhere else on the page. */
.oi2-wordmark-one {
	color: var(--oi2-mark-red);
}

.oi2-wordmark-intel {
	color: var(--oi2-blue-1);
}

/* The house tag: blue-2 fill, white label, 12px/700, radius 24. Same shape as
   .oneintel-programme-tag in style.css. */
.oi2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--oi2-blue-2);
	color: var(--oi2-white);
	border-radius: 24px;
	padding: 4px 18px;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.oi2-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--oi2-white);
}

.oi2-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--oi2-blue-2);
	flex: 0 0 auto;
}

/* The house buttons are used directly, so only the states the theme does not
   already define are set here. */
.explore:disabled,
.offering-card-btn:disabled {
	opacity: .6;
	cursor: default;
}

/* ── section rule beside the eyebrow ──────────────────────────────────────
   Restated here rather than relied on from style.css, for two reasons.

   First, header.php prints style.css AFTER wp_head(), so it loads last and
   wins the cascade against anything this file sets at equal specificity -
   scoping each rule under the page's own section class raises specificity to
   (0,2,0) so these win regardless of load order.

   Second, it makes the page's headers self-contained. The house rule fixes a
   real bug (the original .eyebrow::after is `height: .1ch` - sub-pixel, so
   whether it paints comes down to rounding, which is why the line appeared on
   some sections and not others). If style.css on a given environment is
   behind, that bug comes back on exactly the sections that lack it. Owning
   the rule here means these headers render identically everywhere. */
.oi2-cohort .oneintel-eyebrow-row,
.oi2-about .oneintel-eyebrow-row,
.oi2-flow .oneintel-eyebrow-row,
.oi2-countdown .oneintel-eyebrow-row,
.oi2-final .oneintel-eyebrow-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* Suppress the house sub-pixel pseudo-element - the span below replaces it. */
.oi2-cohort .oneintel-eyebrow-no-line::after,
.oi2-about .oneintel-eyebrow-no-line::after,
.oi2-flow .oneintel-eyebrow-no-line::after,
.oi2-countdown .oneintel-eyebrow-no-line::after,
.oi2-final .oneintel-eyebrow-no-line::after {
	display: none !important;
}

/* flex-basis is 40px rather than 0 so the line can never collapse to nothing
   however the header is laid out; the negative margin lets it bleed to the
   viewport edge, which the section's overflow:hidden clips. */
.oi2-cohort .oneintel-eyebrow-fill-line,
.oi2-about .oneintel-eyebrow-fill-line,
.oi2-flow .oneintel-eyebrow-fill-line,
.oi2-countdown .oneintel-eyebrow-fill-line,
.oi2-final .oneintel-eyebrow-fill-line {
	flex: 1 0 40px;
	min-width: 40px;
	height: 1px;
	background: var(--oi2-blue-1);
	margin-right: -100vw;
}

/* On the blue-1 band the rule and its eyebrow invert. Must stay after the
   block above, which sets the blue background at the same specificity. */
.oi2-countdown .oneintel-eyebrow-fill-line,
.oi2-fill-line-white {
	background: var(--oi2-white);
}

/* ── hero ─────────────────────────────────────────────────────────────── */

/* Despite the name this is not a full-bleed hero - it opens straight into
   content on a light ground, so it has to clear the fixed navbar rather than
   sit under it. Without this the "Coming Soon" pill renders behind the bar.
   var() with a fallback so the section still clears the bar if global.css is
   ever loaded after this file. */
.oi2-hero {
	position: relative;
	padding: var(--ibdic-nav-clearance, 120px) 0 80px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--oi2-white) 0%, var(--oi2-sky) 100%);
}

/* Faint graph paper, drawn as two 1px gradients rather than an image so it
   stays crisp and costs no request. */
.oi2-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(10, 64, 161, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 64, 161, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 75% 45%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse at 75% 45%, #000 0%, transparent 72%);
	pointer-events: none;
}

.oi2-hero-dots {
	position: absolute;
	inset: 0 0 auto auto;
	width: 56%;
	height: 100%;
	background-image: radial-gradient(circle, rgba(29, 109, 208, .16) 1.4px, transparent 1.5px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse at 68% 40%, #000 0%, transparent 66%);
	mask-image: radial-gradient(ellipse at 68% 40%, #000 0%, transparent 66%);
	pointer-events: none;
}

.oi2-hero .container {
	position: relative;
	z-index: 1;
}

.oi2-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.oi2-wordmark {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -1.5px;
	margin: 0 0 16px;
	font-weight: 700;
}

.oi2-hero-line {
	color: var(--oi2-blue-1);
	font-size: 32px;
	line-height: 44px;
	font-weight: 500;
	margin: 0 0 24px;
}

.oi2-hero-body {
	color: var(--oi2-blue-2);
	font-size: 20px;
	line-height: 38px;
	max-width: 420px;
	margin: 0 0 20px;
}

/* House inline-list icons: 18px line art, no tile. Matches .features-list
   li img.icon and the tick bullets in collab.css. */
.oi2-hero-points {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oi2-hero-points li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--oi2-blue-2);
	font-size: 16px;
	line-height: 26px;
}

.oi2-hero-point-icon {
	display: flex;
	flex: 0 0 auto;
}

.oi2-hero-point-icon svg {
	width: 18px;
	height: 18px;
}

/* The artwork sits on a flat blue-1 panel at the house card radius - the same
   treatment as .oneintel-step-panel and .oneintel-filled-card. Going dark here
   is what separates the card from the page; it is not a gradient effect. */
.oi2-hero-art {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 40px 32px 32px;
	background: var(--oi2-blue-1);
	border-radius: 20px;
	overflow: hidden;
}

/* A faint field of points across the whole panel - a network rather than a
   literal map, since the theme has no world-map asset to draw from. Two
   layers at different scales keep it from reading as a uniform grid. */
.oi2-hero-network {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.3px),
		radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.1px);
	background-size: 34px 34px, 17px 17px;
	background-position: 0 0, 8px 8px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 80%);
	mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 80%);
	pointer-events: none;
}

.oi2-orbit {
	position: relative;
	z-index: 1;
	width: min(100%, 320px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

/* A soft field of light behind the core, so the middle of the panel is the
   brightest point and the eye lands there first. */
.oi2-orbit-glow {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 46%, transparent 70%);
	filter: blur(16px);
}

/* Three concentric tracks, each revolving on its own. Different periods and
   alternating direction mean the nodes never settle into one rotating
   pattern the eye can lock onto. The core sits outside the tracks as a
   sibling, so it stays upright while everything orbits it.

   Radii: inset X gives a radius of (50 - X), so the tracks sit at 50 / 37 /
   24 against a core edge at 19 (the core is 38% wide) - every track clears
   the core and each other. */
.oi2-orbit-track {
	position: absolute;
	border-radius: 50%;
}

.oi2-orbit-track-1 {
	inset: 0;
	animation: oi2-spin 90s linear infinite;
}

.oi2-orbit-track-2 {
	inset: 13%;
	animation: oi2-spin 70s linear infinite reverse;
}

.oi2-orbit-track-3 {
	inset: 26%;
	animation: oi2-spin 52s linear infinite;
}

/* rgba(255,255,255,.45)/(.22) are the theme's hairline-on-blue values. The
   outer track is the brightest, the inner two step back, so the rings read as
   depth rather than three equal circles. */
.oi2-orbit-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
}

.oi2-orbit-track-1 .oi2-orbit-ring {
	border-color: rgba(255, 255, 255, .45);
}

.oi2-orbit-track-3 .oi2-orbit-ring {
	border-color: rgba(255, 255, 255, .22);
}

@keyframes oi2-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Twelve nodes, six white and six red, four to a track. Positioned by the
   template from the circle equation - see page-oneintel-v2.php - so each one
   sits exactly on its track's ring. The translate keeps the node centred on
   that point rather than hanging off it. */
.oi2-orbit-node {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	/* Base centring, so a node sits on its ring even before the pulse starts
	   or if the animation never runs. */
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
	animation: oi2-dot-pulse 3.6s ease-in-out infinite;
}

.oi2-orbit-node-red {
	background: var(--oi2-mark-red);
	box-shadow: 0 0 0 3px rgba(233, 15, 21, .22);
}

/* The translate must be repeated in every frame - a transform in a keyframe
   replaces the base one outright rather than adding to it, so omitting it
   here would snap all twelve nodes off their rings as soon as the pulse
   started. */
@keyframes oi2-dot-pulse {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: .72;
	}

	50% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 1;
	}
}

/* The nodes keep their base translate from the rule above, so stopping the
   pulse leaves them centred on their rings rather than offset. */
@media (prefers-reduced-motion: reduce) {

	.oi2-orbit-track,
	.oi2-orbit-node {
		animation: none;
	}
}

/* 38% wide gives a radius of 19, clearing the innermost track at 24. */
.oi2-orbit-core {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--oi2-white);
}

.oi2-orbit-mark {
	font-size: clamp(20px, 4.6vw, 30px);
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1;
	white-space: nowrap;
}

.oi2-hero-tagline {
	position: relative;
	z-index: 1;
	color: var(--oi2-white);
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	text-align: center;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .45);
	width: 100%;
}

/* ── first cohort ─────────────────────────────────────────────────────── */

/* overflow:hidden clips the eyebrow rule's -100vw bleed. The house sets this
   on every `section` in global.css, but it is stated here too so the rule
   cannot start overflowing the page if that ever changes. */
.oi2-cohort {
	background: var(--oi2-white);
	padding: 60px 0;
	overflow: hidden;
}

/* The grid sits inside a sky panel so eight loose logos read as one cohort
   rather than eight unrelated marks. */
/* Blue-2 border, the same treatment the product cards and the closing card
   carry - so the three panels on the page read as one family. The maroon on
   the tiles inside stays this page's one accent. */
/* The bank wall is not styled here. Both this page and the live hub render the
   oneintel-bank-wall part, which uses .oneintel-adoption-* from style.css -
   one implementation, so the same logos cannot be presented two ways again.
   The responsive rules for it live alongside it there too. */

.oi2-meta-wrap {
	text-align: center;
}

.oi2-meta-strip {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px auto 0;
	padding: 8px 24px;
	background: var(--oi2-white);
	border: 1px solid var(--oi2-line);
	border-radius: 24px;
	color: var(--oi2-blue-1);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
}

/* ── about oneintel ───────────────────────────────────────────────────── */

.oi2-about {
	position: relative;
	background: var(--oi2-sky);
	padding: 60px 0;
	overflow: hidden;
}

.oi2-about-glow {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(10, 64, 161, .04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 64, 161, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 80%);
	mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 80%);
	pointer-events: none;
}

.oi2-about .container {
	position: relative;
	z-index: 1;
}

/* Problem on the left, answer on the right. The rule between them is the pivot
   the copy actually turns on ("but that expertise is fragmented"). */
.oi2-about-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	margin-bottom: 48px;
}

.oi2-about-problem,
.oi2-about-answer {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.oi2-about-problem p,
.oi2-about-answer p {
	color: var(--oi2-blue-2);
	font-size: 16px;
	line-height: 26px;
	margin: 0;
	max-width: none;
}

.oi2-about-problem p.oi2-about-lead {
	color: var(--oi2-blue-1);
	font-size: 20px;
	line-height: 34px;
	font-weight: 500;
}

.oi2-about-answer {
	position: relative;
	padding-left: 40px;
	/* blue-2, matching the Join Us card's divider. At 12% blue-1 this was a
	   barely-there hairline, so the two columns read as one block of text
	   rather than a problem set against its answer. */
	border-left: 1px solid var(--oi2-blue-2);
}

.oi2-about-answer strong {
	color: var(--oi2-blue-1);
	font-weight: 600;
}

/* No .oi2-pillar-* rules here on purpose - the About cards now use the
   live page's own .oneintel-pillars / .oneintel-pillar-card / .has-bg
   component directly (style.css), so there is nothing left for this file to
   style. See page-oneintel-v2.php for the markup. */

/* ── data → oneintel → intelligence ───────────────────────────────────── */

.oi2-flow {
	background: var(--oi2-white);
	padding: 60px 0;
	overflow: hidden;
}

/* Diagram only now - the narrative copy that used to share this grid moved up
   into the section's own .collab-header, so the panel has one job. */
.oi2-flow-grid {
	display: flex;
	justify-content: center;
	background: var(--oi2-sky);
	border-radius: 20px;
	padding: 40px;
}

.oi2-flow-diagram {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
}

.oi2-flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

/* Base size shared by all three nodes. Data and Intelligence take the house's
   own .oneintel-flow-circle treatment - solid blue-1, white 24px icon -
   reused here rather than restyled, so this diagram matches the flow circles
   used elsewhere on the site instead of inventing its own icon language. */
.oi2-flow-mark {
	width: 106px;
	height: 106px;
	display: grid;
	place-items: center;
	border-radius: 50%;
}

.oi2-flow-mark-data,
.oi2-flow-mark-intel {
	background: var(--oi2-blue-1);
	animation: oi2-flow-glow 5.2s ease-in-out infinite;
}

/* Offset so the two circles breathe out of phase with each other, rather than
   both pulsing on the same beat. */
.oi2-flow-mark-intel {
	animation-delay: 2.6s;
}

@keyframes oi2-flow-glow {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(10, 64, 161, 0);
	}

	50% {
		box-shadow: 0 0 0 8px rgba(10, 64, 161, .10);
	}
}

@media (prefers-reduced-motion: reduce) {

	.oi2-flow-mark-data,
	.oi2-flow-mark-intel {
		animation: none;
	}
}

.oi2-flow-mark-data svg,
.oi2-flow-mark-intel svg {
	width: 30px;
	height: 30px;
}

/* The core node stays visually distinct - white, bordered, the wordmark - to
   mark it as the one thing in this diagram that isn't a generic concept. */
.oi2-flow-mark-core {
	background: var(--oi2-white);
	border: 1px solid var(--oi2-blue-2);
}

.oi2-flow-mark-word {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1;
}

.oi2-flow-label {
	color: var(--oi2-blue-1);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 16px;
}

.oi2-flow-label-core {
	color: var(--oi2-blue-2);
}

.oi2-flow-caption {
	color: var(--oi2-blue-2);
	font-size: 12.5px;
	line-height: 19px;
	text-align: center;
	max-width: 130px;
	margin: 0;
}

/* The house step connector: a dashed rule with a rotated-square chevron at its
   end, as used between the steps on the live OneIntel page. */
.oi2-flow-arrow {
	position: relative;
	flex: 1 1 auto;
	min-width: 42px;
	max-width: 84px;
	height: 1px;
	margin-top: 53px;
	border-top: 1px dashed var(--oi2-blue-2);
}

.oi2-flow-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid var(--oi2-blue-2);
	border-right: 1px solid var(--oi2-blue-2);
	transform: rotate(45deg);
}

/* A small dot travels the length of each dashed rule on a loop - data moving
   from the raw node, through OneIntel, out to the applied one. The second
   arrow's dot is offset so the two do not move in lockstep. */
.oi2-flow-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--oi2-blue-2);
	box-shadow: 0 0 6px rgba(29, 109, 208, .6);
	animation: oi2-flow-travel 2.6s ease-in-out infinite;
}

.oi2-flow-arrow-2::before {
	animation-delay: 1.3s;
}

@keyframes oi2-flow-travel {

	0%,
	8% {
		left: 0;
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	82% {
		opacity: 1;
	}

	92%,
	100% {
		left: 100%;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oi2-flow-arrow::before {
		animation: none;
		display: none;
	}
}

/* ── countdown ────────────────────────────────────────────────────────── */

/* The page's one blue-1 section. The house uses filled blue-1 panels heavily
   (.oneintel-step-panel, .oneintel-filled-card); this is that idiom taken
   full-bleed, which gives the page a tonal range without inventing a colour. */
.oi2-countdown {
	position: relative;
	background: var(--oi2-blue-1);
	padding: 60px 0;
	overflow: hidden;
}

.oi2-countdown-wave {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 78%);
	pointer-events: none;
}

.oi2-countdown .container {
	position: relative;
	z-index: 1;
}

.oi2-clock {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

/* Translucent white on blue-1 with a .45 hairline - the same treatment as
   .oneintel-step-number, at panel scale. */
.oi2-clock-cell {
	position: relative;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 12px;
	padding: 22px 16px 16px;
	min-width: 116px;
	text-align: center;
	overflow: hidden;
}

/* This page's one accent, flat rather than the red-to-navy gradient cap an
   earlier pass used. */
.oi2-clock-cell::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--oi2-maroon);
}

.oi2-clock-num {
	display: block;
	color: var(--oi2-white);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1px;
	/* Tabular figures stop the box twitching as digits change each second. */
	font-variant-numeric: tabular-nums;
}

.oi2-clock-unit {
	display: block;
	margin-top: 12px;
	color: rgba(255, 255, 255, .75);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 16px;
}

/* ── The live cell ──────────────────────────────────────────────────────────
   Seconds is the only figure actually moving, so it is the one that says the
   clock is running rather than a rendered picture of a clock. It gets a
   brighter panel, a thicker cap and the pulsing dot; days/hours/minutes stay
   quiet, which is what makes the difference read.

   The glow is white rather than the maroon accent: on a blue-1 ground a maroon
   halo goes muddy, while white is what the house already uses to say "live" -
   .oneintel-soon-dot in style.css uses exactly this pulse. The maroon cap the
   cells already share is kept and thickened, so the accent colour is carried
   forward rather than a new one introduced. */
.oi2-clock-cell.is-live {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .65);
}

/* Red only on the cell that moves. The three static figures stay white, so the
   colour marks which one is counting rather than decorating the whole clock. */
.oi2-clock-cell.is-live .oi2-clock-num {
	color: var(--oi2-live-red);
}

.oi2-clock-cell.is-live::before {
	height: 4px;
	background: var(--oi2-live-red);
	box-shadow: 0 0 14px 1px rgba(255, 77, 79, .7);
}

/* One pulse per tick, re-triggered from the script each second.

   Held under a second so it has finished before the next digit lands - an
   animation longer than the interval would be cut off mid-way every time and
   read as a stutter rather than a beat. The cell has overflow:hidden and the
   digits are tabular, so scaling moves nothing around it. */
@keyframes oi2-tick {
	0% { transform: scale(1); text-shadow: none; }
	20% { transform: scale(1.08); text-shadow: 0 0 18px rgba(255, 77, 79, .95); }
	100% { transform: scale(1); text-shadow: none; }
}

.oi2-clock-num.is-tick {
	animation: oi2-tick .85s ease-out;
}

/* The clock still counts and still updates; it just stops drawing attention
   to itself for anyone who has asked the OS for less movement. */
@media (prefers-reduced-motion: reduce) {

	.oi2-clock-num.is-tick {
		animation: none;
	}
}

.oi2-clock-sep {
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, .45);
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
}

.oi2-clock-caption {
	text-align: center;
	color: var(--oi2-white);
	font-size: 16px;
	line-height: 26px;
	margin: 0 0 32px;
	opacity: .85;
}

.oi2-clock-caption strong {
	opacity: 1;
	font-weight: 600;
	color: var(--oi2-maroon);
}

/* ── closing call to action ───────────────────────────────────────────── */

.oi2-final {
	background: var(--oi2-sky);
	padding: 60px 0;
	overflow: hidden;
}

.oi2-final-grid {
	display: grid;
	/* The copy column takes the spare width so the icon and copy sit hard
	   against the card's left edge, and the brand block holds the right. The
	   gap between them is closed by the wordmark being large enough to fill
	   that side, not by centring the row - centring left the whole group
	   floating with margins on both sides. */
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	background: var(--oi2-white);
	border: 1px solid var(--oi2-blue-2);
	border-radius: 20px;
	padding: 40px;
}

/* Circle marker at the house size for a flow node's smaller cousin. */
.oi2-final-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--oi2-sky);
	display: grid;
	place-items: center;
}

.oi2-final-icon svg {
	width: 28px;
	height: 28px;
}

.oi2-final-label {
	color: var(--oi2-blue-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
	margin: 0 0 4px;
}

.oi2-final-ask {
	color: var(--oi2-blue-1);
	font-size: 28px;
	font-weight: 600;
	line-height: 38px;
	/* 24, not 12: this now sits directly above the button, where the moved
	   paragraph used to provide the separation. */
	margin: 0 0 24px;
}

.oi2-final-brand {
	text-align: center;
	padding-left: 24px;
	/* blue-2, matching the card's own border, rather than the --oi2-line
	   hairline - at 1px of #e0e0e0 on white the separator was barely there. */
	border-left: 1px solid var(--oi2-blue-2);
}

.oi2-final-wordmark {
	/* Large enough to hold the right-hand side on its own. At 44 the brand
	   block was narrower than the space it had to fill, which read as a gap
	   between the copy and the divider. */
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1;
	margin: 0 0 12px;
}

/* The tagline runs on white here, not on the blue panel it uses in the hero. */
.oi2-final-brand .oi2-hero-tagline {
	color: var(--oi2-blue-1);
	border-top: 0;
	padding-top: 0;
}

/* ── pre-registration ─────────────────────────────────────────────────── */

/* Part of the closing card, not a panel of its own: it spans the card's full
   width and is separated by a hairline, so opening it extends the card the
   button sits in rather than dropping a second box underneath. */
/* Centred rather than left-aligned under the card's own left column - at the
   card's full width a 620px field pinned to the left edge left the right half
   empty. Centring puts the leftover space on both sides instead of one. */
.oi2-prereg {
	grid-column: 1 / -1;
	margin: 32px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--oi2-line);
	text-align: center;
}

.oi2-prereg[hidden] {
	display: none;
}

.oi2-prereg-label {
	display: block;
	color: var(--oi2-blue-1);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.oi2-prereg-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 560px;
	margin: 0 auto;
}

.oi2-prereg-row input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	border: 1px solid var(--oi2-line);
	border-radius: 32px;
	padding: 14px 24px;
	font-size: 14px;
	font-family: inherit;
	color: var(--oi2-blue-1);
	background: var(--oi2-white);
	transition: border-color .2s ease;
}

.oi2-prereg-row input[type="email"]::placeholder {
	color: #9AA9BF;
}

.oi2-prereg-row input[type="email"]:focus {
	outline: none;
	border-color: var(--oi2-blue-2);
}

/* [hidden] is display:none in the UA sheet, but the rules above set flex and
   block on these two and win. Without this the field survives a successful
   registration, which reads as a form that failed. */
.oi2-prereg-row[hidden],
.oi2-prereg-label[hidden] {
	display: none;
}

.oi2-prereg-msg {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 24px;
}

.oi2-prereg-msg[hidden] {
	display: none;
}

.oi2-prereg-msg.is-ok {
	color: #1A7F4B;
}

.oi2-prereg-msg.is-error {
	color: #C0392B;
}

/* Once the row is gone the message is the only thing left in the block, so it
   takes over the space the field had rather than sitting under an empty gap. */
.oi2-prereg-row[hidden] + .oi2-prereg-msg {
	margin-top: 0;
	font-size: 16px;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.oi2-wordmark {
		font-size: 52px;
	}

	.oi2-hero-line {
		font-size: 26px;
		line-height: 36px;
	}

	.oi2-final-grid {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.oi2-final-brand {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-top: 24px;
		border-left: 0;
		border-top: 1px solid var(--oi2-blue-2);
	}
}

@media (max-width: 860px) {
	.oi2-hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.oi2-hero-dots {
		width: 100%;
	}

	/* .oneintel-pillars collapses to one column on its own at 768px - see
	   style.css - so there is nothing to override here. */

	/* The two halves stack, so the pivot rule moves from the side of the answer
	   to above it - a divider between problem and answer rather than beside it. */
	.oi2-about-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.oi2-about-answer {
		padding-left: 0;
		padding-top: 28px;
		border-left: 0;
		border-top: 1px solid rgba(10, 64, 161, .12);
	}

	.oi2-clock-cell {
		min-width: 96px;
		padding: 18px 10px 14px;
	}

	.oi2-clock-num {
		font-size: 34px;
	}

	.oi2-final-ask {
		font-size: 24px;
		line-height: 32px;
	}
}

@media (max-width: 768px) {
	.oi2-cohort,
	.oi2-about,
	.oi2-flow,
	.oi2-countdown,
	.oi2-final {
		padding: 50px 0;
	}

	/* The hero is listed separately because it must keep its navbar clearance
	   at every width - folding it into the group above reset the top padding
	   to 50px and put the content back under the bar on mobile. */
	.oi2-hero {
		padding: var(--ibdic-nav-clearance, 100px) 0 50px;
	}
}

@media (max-width: 560px) {
	.oi2-wordmark {
		font-size: 44px;
	}

	.oi2-hero-line {
		font-size: 23px;
		line-height: 32px;
	}

	.oi2-hero-body {
		font-size: 17px;
		line-height: 30px;
	}

	.oi2-hero-art {
		padding: 28px 20px 24px;
	}

	/* The nodes shrink rather than disappear at this width - twelve 6px dots
	   on a ~250px orbit still read cleanly, and dropping them would lose the
	   motion that makes this panel worth having on mobile at all. */
	.oi2-orbit-node {
		width: 5px;
		height: 5px;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
	}

	.oi2-orbit-node-red {
		box-shadow: 0 0 0 2px rgba(233, 15, 21, .22);
	}

	/* No core override here on purpose. It used to widen to 52% when there
	   were only two rings and the inner one sat at radius 35; against the
	   innermost track's radius of 24 that would now overlap it. The base 38%
	   (radius 19) still clears, and the wordmark fits it at this width. */

	.oi2-flow-grid,
	.oi2-final-grid {
		padding: 24px 20px;
	}

	.oi2-about-problem p.oi2-about-lead {
		font-size: 18px;
		line-height: 30px;
	}

	/* The clock wraps to two rows rather than shrinking to unreadable digits,
	   so the separators would land in the wrong places. */
	.oi2-clock {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.oi2-clock-sep {
		display: none;
	}

	.oi2-clock-cell {
		min-width: 0;
	}

	.oi2-flow-diagram {
		flex-direction: column;
		align-items: center;
	}

	/* Stacked, the connector runs vertically and the chevron points down. */
	.oi2-flow-arrow {
		width: 1px;
		height: 32px;
		min-width: 0;
		max-width: none;
		margin: 0;
		border-top: 0;
		border-left: 1px dashed var(--oi2-blue-2);
	}

	.oi2-flow-arrow::after {
		right: 50%;
		top: auto;
		bottom: 0;
		margin-top: 0;
		transform: translateX(50%) rotate(135deg);
	}

	/* The travelling dot follows the connector - top-to-bottom here, rather
	   than left-to-right. */
	.oi2-flow-arrow::before {
		left: 50%;
		top: 0;
		margin-top: 0;
		margin-left: -2.5px;
		animation-name: oi2-flow-travel-vertical;
	}

	@keyframes oi2-flow-travel-vertical {

		0%,
		8% {
			top: 0;
			opacity: 0;
		}

		18% {
			opacity: 1;
		}

		82% {
			opacity: 1;
		}

		92%,
		100% {
			top: 100%;
			opacity: 0;
		}
	}

	.oi2-final-grid {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	/* The card centres its contents at this width, so the form follows suit -
	   a left-aligned block inside a centred card reads as misaligned. */
	.oi2-prereg {
		width: 100%;
		text-align: center;
	}

	.oi2-prereg-row {
		max-width: none;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   HOUSE RULES THIS PAGE DEPENDS ON

   Copied verbatim from style.css on the uat branch, where they were added with
   the OneIntel pages in August. Production's style.css predates that work, so
   without them this page renders unstyled section headers, pillar cards and a
   bank wall.

   They live here rather than in style.css deliberately: this stylesheet loads
   only for page-oneintel-v2.php, so nothing else on production can be affected
   by them. That is the whole point - the pre-launch page ships as a
   self-contained unit, not as a partial merge of a branch that is 254 commits
   ahead.

   When the rest of that work is eventually merged, style.css will carry these
   again and this block should be deleted rather than left to diverge.
   ══════════════════════════════════════════════════════════════════════════ */

.oneintel-pillars-section {
	padding-bottom: 40px;
}

.oneintel-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Same treatment as the Who Should Take This cards: light --ibdic-sky panel
   that fills blue-1 on hover, with the icon swapping to its white variant.
   Replaces a white card with a translateY lift, which nothing else on the
   site does. */
.oneintel-pillar-card {
	background: var(--ibdic-sky);
	border: 1px solid var(--ibdic-blue-2);
	border-radius: 20px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	transition: background .4s ease, border-color .4s ease;
}

.oneintel-pillar-card:hover {
	background: var(--ibdic-blue-1);
	border-color: var(--ibdic-blue-1);
}

/* Optional background photo behind a near-opaque scrim, same treatment as the
   Academy benefit cards - enough to give the card texture without touching
   legibility. */
.oneintel-pillar-card.has-bg {
	background-image: linear-gradient(rgba(237, 250, 255, .93), rgba(237, 250, 255, .93)), var(--card-bg);
	background-size: cover;
	background-position: center;
	transition: background-image .4s ease, border-color .4s ease;
}

.oneintel-pillar-card.has-bg:hover {
	background-image: linear-gradient(rgba(10, 64, 161, .93), rgba(10, 64, 161, .93)), var(--card-bg);
}

/* Contained blue panel rather than a full-bleed band - the section itself
   stays on the page background, only the panel is blue. */
.oneintel-adoption-panel {
	background: var(--ibdic-blue-1);
	border-radius: 20px;
	padding: 44px 40px;
}

/* Flex (not grid) so an incomplete final row centres itself. With 11 adopters
   the last row is short at every breakpoint (3-up -> 2 left, 4-up -> 3 left);
   justify-content keeps those centred instead of hugging the left edge. */
.oneintel-adoption-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	align-items: center;
}

.oneintel-adoption-logo {
	flex: 0 0 calc(25% - 18px); /* 4 per row: (100% - 3*24px gap) / 4 */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ibdic-white);
	border-radius: 16px;
	padding: 20px 24px;
	min-height: 96px;
}

/* Axis supplies its mark as white on burgundy, so the ground goes behind the
   MARK, not on the card. Painting the whole card turned the tile into a plain
   burgundy rectangle butted against its neighbours; keeping the card white and
   giving the image its own inset ground reads as Axis's logo tile sitting
   inside the same white card every other bank gets.

   Square corners deliberately - it is Axis's logo block, not another rounded
   card inside a rounded card. The hex is sampled from their own artwork. */
.oneintel-adoption-logo.is-tile-burgundy img {
	background: #9A104C;
	padding: 8px 14px;
	border-radius: 0;
	/* Its own cap, because box-sizing is border-box site-wide: the shared 46px
	   would be measured to the OUTSIDE of the burgundy block, so the padding
	   came out of the artwork and left only 26px of mark against everyone
	   else's 46. 56 is the tallest the card's content box allows without the
	   row growing (96px min-height less 40px of card padding), and takes the
	   mark inside back to 40px. */
	max-height: 56px;
}

/* Bounded on both axes: the bank marks have very different proportions, so
   matching on height alone would leave the wider ones dominating the row. */
.oneintel-adoption-logo img {
	max-width: 100%;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Three height tiers, for marks that read wrong at the shared cap.

   The cap matches the image box, but what the eye compares is the size of the
   bank NAME inside it - so a mark that is nearly all wordmark looks oversized
   at the same height as one carrying a tall emblem. These tiers correct for
   that, and are set per bank in ibdic_oneintel_banks(). */

/* SBI is cropped tight to its wordmark, so it read noticeably larger. */
.oneintel-adoption-logo img.is-small {
	max-height: 36px;
}

/* IOB's emblem sits beside the wordmark, leaving the name small. */
.oneintel-adoption-logo img.is-big {
	max-height: 60px;
}

/* Bank of India's emblem sits ABOVE its name, so it needs to go further than
   the 'big' tier. Its own tier rather than raising 'big', which would drag IOB
   up with it when IOB already reads correctly. */
.oneintel-adoption-logo img.is-xl {
	max-height: 76px;
}

.oneintel-pillar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	border-radius: 12px;
	background: var(--ibdic-white);
	transition: background .4s ease;
}

.oneintel-pillar-card:hover .oneintel-pillar-icon {
	background: rgba(255, 255, 255, .14);
}

.oneintel-pillar-icon .icon-hover,
.oneintel-pillar-card:hover .oneintel-pillar-icon .icon-default {
	display: none;
}

.oneintel-pillar-card:hover .oneintel-pillar-icon .icon-hover {
	display: flex;
}

.oneintel-pillar-segment {
	color: var(--ibdic-blue-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
	transition: color .4s ease;
}

.oneintel-pillar-card h3 {
	color: var(--ibdic-blue-1);
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
	margin: 4px 0 6px;
	transition: color .4s ease;
}

.oneintel-pillar-tagline {
	font-weight: 600;
}

.oneintel-pillar-card p {
	color: var(--ibdic-blue-2);
	font-size: 14px;
	line-height: 24px;
	margin: 0 0 10px;
	transition: color .4s ease;
}

.oneintel-pillar-card:hover .oneintel-pillar-segment,
.oneintel-pillar-card:hover h3,
.oneintel-pillar-card:hover p {
	color: var(--ibdic-white);
}

.oneintel-pillar-card:hover .oneintel-pillar-cta .explore {
	background: var(--ibdic-white);
	color: var(--ibdic-blue-1);
}

/* Section rule beside the eyebrow.
   The house version is an ::after at `height: .1ch` - about 0.8px at 16px,
   i.e. sub-pixel, so whether it paints at all comes down to how the browser
   rounds it at that position on the page. That is why it showed up on some
   sections and not others. Every OneIntel header therefore draws the rule as
   a real 1px element instead, and suppresses the house pseudo-element, so
   all of them render identically.

   flex-basis is 40px rather than 0 so the line can never collapse to nothing
   however the header is laid out; the negative margin lets it bleed to the
   viewport edge, which the section's overflow:hidden clips. */
.oneintel-eyebrow-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.oneintel-eyebrow-no-line::after {
	display: none !important;
}

.oneintel-eyebrow-fill-line {
	flex: 1 0 40px;
	min-width: 40px;
	height: 1px;
	background: var(--ibdic-blue-1);
	margin-right: -100vw;
}

/* Optional background photo. It sits under a near-opaque scrim rather than
   showing at full strength, so the existing blue-on-light text stays legible
   and the four cards still read as a set. The scrim flips to blue-1 on hover,
   matching the plain cards. */
.oneintel-audience-card.has-bg {
	background-image: linear-gradient(rgba(255, 255, 255, .90), rgba(255, 255, 255, .90)), var(--card-bg);
	background-size: cover;
	background-position: center;
	transition: background-image .4s ease, border-color .4s ease;
}

.oneintel-audience-card.has-bg:hover {
	background-image: linear-gradient(rgba(10, 64, 161, .92), rgba(10, 64, 161, .92)), var(--card-bg);
}

.oneintel-audience-icon .icon-hover,
.oneintel-audience-card:hover .oneintel-audience-icon .icon-default {
	display: none;
}

.oneintel-audience-card:hover .oneintel-audience-icon .icon-hover {
	display: flex;
}

.oneintel-audience-reveal-inner li .icon-hover,
.oneintel-audience-card:hover .oneintel-audience-reveal-inner li .icon-default {
	display: none;
}

.oneintel-audience-card:hover .oneintel-audience-reveal-inner li .icon-hover {
	display: flex;
}

.oneintel-outline-card-icon .icon-hover,
.oneintel-outline-card:hover .oneintel-outline-card-icon .icon-default {
	display: none;
}

.oneintel-outline-card:hover .oneintel-outline-card-icon .icon-hover {
	display: flex;
}

@media (max-width: 900px) {
	.oneintel-adoption-logo {
			flex-basis: calc(33.333% - 16px); /* 3 per row: (100% - 2*24px gap) / 3 */
		}
}

@media (max-width: 600px) {
	/* 40px of side padding costs a third of a phone screen, so the panel gives
	   it back to the logos. Carried over from the pre-launch page's own panel,
	   which had this before the two were merged into one component. */
	.oneintel-adoption-panel {
			padding: 24px 18px;
		}
	.oneintel-adoption-grid {
			gap: 18px 14px;
		}
	.oneintel-adoption-logo {
			flex-basis: calc(50% - 7px); /* 2 per row: (100% - 14px column gap) / 2 */
		}
}

@media (max-width: 768px) {
	.oneintel-pillars {
			grid-template-columns: 1fr;
		}
}