/* ==========================================================================
   Onboard IQ V2  —  page-specific styles (.oiq-*)
   Depends on home-v2.css for @font-face, .hv2, .hv-shell.
   All values sourced from Figma 15:14407 (desktop) / 15:16017 (mobile).
   ========================================================================== */

/* ---- shared bits ---------------------------------------------------------- */
.oiq-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;
}
.oiq-tag__dot { width: 8px; height: 8px; border-radius: 1px; background: #2ad9c4; flex: none; }
.oiq-tag__label { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; color: #fff; }

.oiq-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;
}
.oiq-btn:hover { background: #24c3b0; }

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

/* ==========================================================================
   1. HERO  (Figma 15:14408)
   ========================================================================== */
.oiq-hero {
	/* Glow as a background layer so ::before stays the frame rail. */
	background:
		radial-gradient(50% 50% at 50% 50%, rgba(42, 217, 196, 0.10) 0%, rgba(42, 217, 196, 0) 70%)
			center -200px / 1400px 900px no-repeat,
		#0e0e0e;
	padding: 100px 0 120px;
}
.oiq-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.oiq-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 72px;
	flex: 1 1 742px;
	min-width: 0;
}
.oiq-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.oiq-hero__title {
	margin: 0;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.28px;
	color: #fff;
}
.oiq-hero__lede {
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: rgba(255, 255, 255, 0.6);
}
.oiq-hero__visual {
	flex: 1 1 858px;
	min-width: 0;
	max-width: min(885px, 100%);
	/* Tracks the artwork so the box is exactly as tall as what it draws. Now
	   1039x800: the hero is a Lottie animation (components/oiq/HeroLottie)
	   rather than the old 885x806 SVG. */
	aspect-ratio: 1039 / 800;
}
.oiq-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* ==========================================================================
   2. BUILT FOR EVERY STEP  (Figma 15:14664, dark tabs)
   ========================================================================== */
.oiq-steps {
	position: relative;
	background: #0e0e0e;
	overflow: hidden;
	padding-bottom: 280px;
}
.oiq-steps > * { position: relative; z-index: 1; }
.oiq-steps .hv-section-glow { position: absolute; z-index: 0; }
.oiq-steps__tabs {
	display: flex;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	/* Segmented control, same as .rp-orch__tabs (Figma 13:10991): a 1px frame
	   around the strip plus a divider between the cells. Only the bottom rule
	   was here, so the outline and the dividers were missing. */
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.oiq-steps__tab {
	flex: 1;
	padding: 24px 32px;
	background: none;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid transparent;
	/* the active underline sits on the strip's own bottom edge */
	margin-bottom: -1px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.oiq-steps__tab:last-child { border-right: 0; }
.oiq-steps__tab:hover { color: rgba(255, 255, 255, 0.85); }
.oiq-steps__tab.is-active { color: #2ad9c4; border-bottom-color: #2ad9c4; }
.oiq-steps__panel { display: none; }
.oiq-steps__panel.is-active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	padding-top: 64px;
}

/* --- Desktop tab switching: a real crossfade -----------------------------
   Toggling display:none/flex cannot be transitioned, so the first attempt just
   fade-animated the incoming panel. That still read as abrupt, because the
   OUTGOING panel was removed instantly — the eye catches the hard cut, not the
   fade. Both panels have to be on screen together to cross over.

   All four panels measure exactly 474px, so they can share a single grid cell:
   the box never changes height, nothing reflows, and there is no extra
   whitespace. Every panel stays laid out; opacity/visibility decide what is
   seen, and `visibility` (discretely animatable) keeps hidden panels out of the
   tab order and the a11y tree until the transition finishes.

   The incoming panel eases in a little slower than the outgoing one leaves,
   which is what stops the swap feeling like a flicker.

   Desktop only — below 901px this section is an accordion with every panel
   visible, so none of this applies.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.oiq-steps__panels {
		display: grid;
	}
	.oiq-steps__panel,
	.oiq-steps__panel.is-active {
		/* every panel keeps the active layout; only its visibility changes */
		grid-area: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 64px;
		max-width: min(1600px, 100%);
		margin: 0 auto;
		padding-top: 64px;
	}
	.oiq-steps__panel {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(8px) scale(0.995);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}
	.oiq-steps__panel.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition:
			opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
			visibility 0s;
	}
}
/* mobile accordion header — hidden on desktop (top tab bar is used instead) */
.oiq-steps__acc {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.oiq-steps__acc-label { flex: 1 1 auto; }
.oiq-steps__acc-chev { width: 20px; height: 20px; flex: none; color: rgba(255, 255, 255, 0.7); transition: transform 0.2s ease; }
.oiq-steps__text { flex: 0 1 700px; display: flex; flex-direction: column; gap: 24px; }
.oiq-steps__subeye {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.4px;
	color: #2ad9c4;
}
.oiq-steps__lead {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: #fff;
}
.oiq-steps__items { display: flex; flex-direction: column; gap: 20px; }
.oiq-steps__item { display: flex; flex-direction: column; gap: 8px; }
.oiq-steps__item-h { display: flex; align-items: center; gap: 12px; }
.oiq-steps__dot { width: 8px; height: 8px; border-radius: 1px; background: #2ad9c4; flex: none; }
.oiq-steps__item-title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.48px;
	color: #fff;
}
.oiq-steps__item-desc {
	margin: 0;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.32px;
	color: rgba(255, 255, 255, 0.6);
}
/* Shrinkable bases, not fixed widths — same defect as TQ-3131 on rewards-plus:
   `flex: none` held 700 + 64 + 716 = 1480px whatever the container offered, so
   between 1201px and ~1825px the visual crossed the right rail by up to 350px. */
.oiq-steps__visual {
	flex: 0 1 716px;
	min-width: 0;
	background: url("../img/rp-v2/s3-panel-bg.svg") center / 100% 100% no-repeat;
}
.oiq-steps__visual img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   3. FROM CONFIGURATION TO GO-LIVE  (Figma 15:15362, light steps)
   ========================================================================== */
/* The glow section above ends in the arc, and that arc IS the transition into
   this section — stacking a top padding on it as well read as one huge gap.
   Zeroed here (not in home-v2.css, which this sheet loads after). */
.oiq-flow {
	background: #f6f6f6;
	padding: 0;
}
.oiq-flow .oiq-head { padding: 80px 0; }
.oiq-flow__cards {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	/* Five cards in one row need ~190px each to keep their copy intact; below
	   that the descriptions overflowed their cards. Wrapping keeps the cards
	   readable instead of letting the text spill. */
	flex-wrap: wrap;
	gap: 3.1667%;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.oiq-flow__wire {
	position: absolute;
	top: 190px;
	left: 11.4375%;
	width: 77.125%;
	height: 2px;
	z-index: 0;
	overflow: visible;
}
.oiq-flow__wire path {
	vector-effect: non-scaling-stroke;
	animation: oiq-flow-dash 1.4s linear infinite;
}
@keyframes oiq-flow-dash {
	to { stroke-dashoffset: -24; }
}
@media (prefers-reduced-motion: reduce) {
	.oiq-flow__wire path { animation: none; }
	.oiq-steps__panel,
	.oiq-steps__panel.is-active { transition: none; transform: none; }
	.oiq-steps__acc,
	.oiq-steps__acc-chev { transition: none; }
	.oiq-steps__panel.is-active .oiq-steps__lead,
	.oiq-steps__panel.is-active .oiq-steps__visual,
	.oiq-steps__panel.is-active .oiq-steps__items { animation: none; }
}
.oiq-flow__card {
	position: relative;
	z-index: 1;
	/* Basis, not 0: with flex-wrap on, a 0 basis never wraps. */
	flex: 1 1 190px;
	min-width: 0;
	height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
}
.oiq-flow__top { display: flex; flex-direction: column; gap: 12px; }
.oiq-flow__head-row { display: flex; align-items: flex-start; gap: 10px; }
.oiq-flow__title {
	margin: 0;
	flex: 1;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.64px;
	color: #111;
}
.oiq-flow__num {
	margin: 0;
	width: 40px;
	flex: none;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: #1d403c;
}
.oiq-flow__chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: rgba(42, 217, 196, 0.2);
	border-radius: 1px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #1d403c;
}
.oiq-flow__chip::before,
.oiq-flow__chip::after,
.oiq-flow__chip > span::before,
.oiq-flow__chip > span::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: rgba(29, 64, 60, 0.2);
	border-radius: 1px;
}
.oiq-flow__chip::before { top: 0; left: 0; }
.oiq-flow__chip::after { top: 0; right: 0; }
.oiq-flow__chip > span::before { bottom: 0; left: 0; }
.oiq-flow__chip > span::after { bottom: 0; right: 0; }
.oiq-flow__desc {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.2px;
	color: #111;
}

/* ==========================================================================
   4. HANDLE EVERY SCENARIO  (Figma 15:15443, light cards)
   ========================================================================== */
.oiq-exc {
	background: #f6f6f6;
	padding: 100px 0 0;
}
.oiq-exc .oiq-head { padding: 80px 0; }
.oiq-exc__cards {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 80px;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
	/* 3 x 420 + 2 x 80 = 1420px of cards; 120px a side only exists when there is
	   room left over for it, otherwise the padding pushed the cards past the rail. */
	padding: 0 clamp(0px, calc((100% - 1420px) / 2), 120px);
}
.oiq-exc__card {
	position: relative;
	flex: 0 1 420px;
	min-width: 0;
	min-height: 450px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 40px;
	background: #fff;
	border: 1px solid rgba(29, 64, 60, 0.1);
}
.oiq-exc__card::before, .oiq-exc__card::after,
.oiq-exc__card > .oiq-exc__cn::before, .oiq-exc__card > .oiq-exc__cn::after {
	content: "";
	position: absolute;
	width: 10.6px;
	height: 10.6px;
	background: #2ad9c4;
	border-radius: 1px;
}
.oiq-exc__card::before { top: -1px; left: -1px; }
.oiq-exc__card::after { top: -1px; right: -1px; }
.oiq-exc__card > .oiq-exc__cn::before { bottom: -2px; left: -1px; }
.oiq-exc__card > .oiq-exc__cn::after { bottom: -2px; right: -1px; }
.oiq-exc__hd { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.oiq-exc__ic { width: 56px; height: 56px; display: block; }
.oiq-exc__title {
	margin: 0;
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: #111;
}
/* Reserve two lines for the title so every card's checklist begins on the same
   line. "Compliance & Verification Controls" wraps to two lines at every desktop
   width while its neighbours fit one, which pushed its list 27-36px lower than
   theirs — the icons and titles already lined up, the lists did not. Two lines is
   the measured maximum from 901 through 2560, and min-height can only grow, so a
   longer title can never be clipped. 3em == two lines at this rule's 1.5
   line-height, so it tracks the font size as the fluid band scales it.
   Desktop only: below 901 the cards stack full-width and there is nothing to
   align, so reserving the extra line would just add a gap. */
@media (min-width: 901px) {
	.oiq-exc__title { min-height: 3em; }
}
.oiq-exc__list { display: flex; flex-direction: column; gap: 12px; }
/* flex-start, not center: with `center` the icon was centred against the WHOLE
   label, so as soon as a row wrapped it drifted down the block — 13.2px on a
   two-line row, 25.8px on a three-line one ("Regulator-compliant KYC flows").
   Now it stays beside the first line however many lines the label takes. */
.oiq-exc__li { display: flex; align-items: flex-start; gap: 12px; }
/* Centres the 24px icon on the first 25.2px line box ((1.4 x 18px - 24) / 2),
   which flex-start alone would leave a touch high. The label is 18px and sits
   below the fluid band's 24px threshold, so this stays exact at every width. */
.oiq-exc__li > img,
.oiq-exc__li > svg { margin-top: 0.6px; }
/* Per-row icons are Figma SVG exports (assets/img/oiq-v2/exc), one per item, and
   they carry their own #2AD9C4 stroke — so no colour is set on them here. The
   svg selector stays for any inline glyph. */
.oiq-exc__li svg { flex: none; width: 24px; height: 24px; color: #1d403c; }
.oiq-exc__li img { flex: none; width: 24px; height: 24px; display: block; }
.oiq-exc__li span {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.36px;
	color: #111;
}

/* ==========================================================================
   5. FAQ  (Figma 15:15695, light)
   ========================================================================== */
.oiq-faq {
	background: #f6f6f6;
	padding: 100px 0;
}
.oiq-faq .oiq-head { padding: 80px 0; }
.oiq-faq__card {
	width: 100%;
	max-width: min(1234px, 100%);
	margin: 56px auto 0;
	border: 1px solid rgba(17, 17, 17, 0.2);
	padding: 0 40px;
}
.oiq-faq__item { border-bottom: 1px solid rgba(17, 17, 17, 0.2); }
.oiq-faq__item:last-child { border-bottom: none; }
.oiq-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 0;
	cursor: pointer;
	list-style: none;
}
.oiq-faq__q::-webkit-details-marker { display: none; }
.oiq-faq__q-text { font-size: 20px; font-weight: 400; line-height: 26px; color: #111; }
.oiq-faq__chev { flex: none; width: 24px; height: 24px; color: #111; transition: transform 0.2s ease; }
.oiq-faq__item[open] .oiq-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. */
.oiq-faq__item { interpolate-size: allow-keywords; }
.oiq-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.oiq-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.oiq-faq__item::details-content { transition: none; }
}
.oiq-faq__a {
	margin: 0;
	padding: 0 0 40px;
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	color: rgba(17, 17, 17, 0.6);
}

/* ==========================================================================
   6. CTA BANNER  (Figma 15:15737)
   ========================================================================== */
.oiq-cta { background: #0e0e0e; padding: 100px 0; }
.oiq-cta__banner {
	position: relative;
	width: 100%;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	min-height: 520px;
	border-radius: 32px;
	overflow: hidden;
	background: #0a1614 url("../img/oiq-v2/cta-bg.webp") center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
}
.oiq-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	max-width: min(1123px, 100%);
	text-align: center;
}
.oiq-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.oiq-cta__title { margin: 0; font-size: 59px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.oiq-cta__title em { font-style: normal; color: #2ad9c4; }
.oiq-cta__sub { margin: 0; font-size: 27px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.oiq-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 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;
}
.oiq-cta__btn:hover { opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE  (mobile ref: Figma 15:16017)
   ========================================================================== */
@media (max-width: 1200px) {
	.oiq-steps__text { flex: 1 1 48%; }
	.oiq-steps__visual { flex: 1 1 48%; }
	.oiq-exc__cards { gap: 32px; padding: 0; }
	.oiq-exc__card { width: auto; flex: 1 1 0; }
}

/* The fixed cards (3 x 420px + 2 x 80px gap = 1420px) only fit once the viewport
   reaches ~1420px; between 1201 and 1419 they pushed the page out by up to 55px.
   Reuse the flexible sizing from the block above across that band. */
@media (min-width: 1201px) and (max-width: 1419px) {
	.oiq-exc__cards { gap: 32px; padding: 0; }
	.oiq-exc__card { width: auto; flex: 1 1 0; min-width: 0; }
}

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

	/* section rhythm */
	.oiq-hero { padding: 48px 0 56px; }
	.oiq-steps { padding-bottom: 56px; }
	.oiq-flow, .oiq-exc, .oiq-faq, .oiq-cta { padding: 56px 0; }
	.oiq-head { padding: 40px 0 28px; }
	.oiq-flow .oiq-head, .oiq-exc .oiq-head, .oiq-faq .oiq-head { padding: 40px 0 28px; }

	/* shared type down-scale */
	.oiq-head__title { font-size: 26px; letter-spacing: -0.5px; }
	.oiq-head__sub { font-size: 17px; letter-spacing: -0.3px; }

	/* 1. hero — visual on top, copy below */
	.oiq-hero__inner { flex-direction: column; align-items: stretch; gap: 32px; max-width: 100%; }
	.oiq-hero__copy { flex: 1 1 auto; width: 100%; gap: 28px; }
	.oiq-hero__title { font-size: 36px; letter-spacing: -0.72px; }
	.oiq-hero__lede { font-size: 18px; letter-spacing: -0.36px; }
	.oiq-hero__visual { flex: 1 1 auto; max-width: 100%; }

	/* 2. steps — accordion (top tab bar hidden, each panel collapses) */
	.oiq-steps__tabs { display: none; }
	.oiq-steps__panel,
	.oiq-steps__panel.is-active {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		max-width: 100%;
		margin: 0;
		padding-top: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		/* no fade here: every panel is on screen as an accordion row, so the
		   desktop panel-in animation would re-fade a whole row on each tap */
		animation: none;
	}
	.oiq-steps__acc {
		display: flex;
		/* StepTabs scrolls this header into view when its row is opened; clears
		   the 65px sticky nav so the header is not left under it. */
		scroll-margin-top: 80px;
		transition: color 0.35s ease;
	}
	.oiq-steps__panel.is-active .oiq-steps__acc { color: #2ad9c4; }
	/* the chevron used to snap through 180deg */
	.oiq-steps__acc-chev { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease; }
	.oiq-steps__panel.is-active .oiq-steps__acc-chev { color: #2ad9c4; transform: rotate(180deg); }
	/* Reveal the opened row's body rather than having it appear instantly. Each
	   part comes in just after the one above it, which reads as the row opening
	   downwards. (The row's HEIGHT still changes in one step — that needs the
	   panel restructured around a single collapsible wrapper, which would also
	   change the desktop two-column layout, so it is deliberately not done here.) */
	.oiq-steps__panel.is-active .oiq-steps__lead,
	.oiq-steps__panel.is-active .oiq-steps__visual,
	.oiq-steps__panel.is-active .oiq-steps__items {
		animation: oiq-acc-reveal 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
	/* Wider stagger than the first pass (was 0.05/0.1): with each part only
	   50ms behind the one above, the three arrived almost together and the whole
	   reveal read as one quick flash. Now the row unfolds top to bottom. */
	.oiq-steps__panel.is-active .oiq-steps__visual { animation-delay: 0.1s; }
	.oiq-steps__panel.is-active .oiq-steps__items { animation-delay: 0.2s; }
	/* bodies collapsed until the row is opened */
	.oiq-steps__text { display: none; flex: 1 1 100%; width: 100%; }
	.oiq-steps__visual { display: none; flex: 1 1 100%; width: 100%; }
	.oiq-steps__subeye { display: none; }
	.oiq-steps__panel.is-active .oiq-steps__text { display: contents; }
	.oiq-steps__panel.is-active .oiq-steps__lead { order: 1; margin: 0 0 20px; font-size: 18px; }
	.oiq-steps__panel.is-active .oiq-steps__visual { display: block; order: 2; margin-bottom: 20px; }
	.oiq-steps__panel.is-active .oiq-steps__items { order: 3; margin-bottom: 24px; }
	.oiq-steps__item-title { font-size: 18px; }

	/* 3. flow cards — stack */
	.oiq-flow__cards { flex-direction: column; flex-wrap: nowrap; gap: 20px; max-width: 100%; }
	.oiq-flow__wire { display: none; }
	.oiq-flow__card { flex: none; width: 100%; height: auto; min-height: 0; gap: 20px; }
	.oiq-flow__title { font-size: 26px; }
	.oiq-flow__desc { font-size: 17px; }

	/* 4. exception cards — stack */
	.oiq-exc__cards { flex-direction: column; align-items: stretch; gap: 20px; }
	.oiq-exc__card { flex: none; width: 100%; min-height: 0; }

	/* 5. faq */
	.oiq-faq__card { padding: 0 20px; max-width: 100%; }
	.oiq-faq__q { padding: 24px 0; gap: 16px; }
	.oiq-faq__q-text { font-size: 16px; }
	.oiq-faq__a { font-size: 15px; padding-bottom: 28px; }

	/* 6. 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. */
		.oiq-cta__banner { min-height: 0; padding: 48px 24px; border-radius: 20px; background: #0a1614 url("../img/oiq-v2/cta-bg-mobile.webp") center / cover no-repeat; }
	.oiq-cta__title { font-size: 30px; line-height: 1.35; }
	.oiq-cta__sub { font-size: 18px; }
}

@media (max-width: 480px) {
	.oiq-hero__title { font-size: 30px; }
	.oiq-head__title { font-size: 22px; }
	.oiq-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 (continuous at the 900/901 boundary), coefficient = design/19.2vw.
   Body copy and small UI stay fixed on purpose.

   .oiq-steps' 280px foot is NOT scaled — it is the .hv-section-glow arc
   clearance (home-v2.css records 1.9-3.1:1 contrast when that gap closes).
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero */
	.oiq-hero { padding-block: clamp(48px, 5.208vw, 100px) clamp(56px, 6.25vw, 120px); }
	.oiq-hero__title { font-size: clamp(36px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.oiq-hero__lede { font-size: clamp(18px, 1.458vw, 28px); }
	.oiq-hero__copy { gap: clamp(28px, 3.75vw, 72px); }

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

	/* Steps (top padding only — see the note above) */
	.oiq-steps__tab,
	.oiq-steps__lead { font-size: clamp(17px, 1.25vw, 24px); }
	.oiq-steps__item-title { font-size: clamp(18px, 1.25vw, 24px); }
	.oiq-steps__panel.is-active { gap: clamp(32px, 3.333vw, 64px); }

	/* Flow + exceptions */
	.oiq-flow__title { font-size: clamp(26px, 1.667vw, 32px); letter-spacing: -0.02em; }
	.oiq-flow__num { font-size: clamp(20px, 1.458vw, 28px); }
	.oiq-exc { padding-block: clamp(56px, 5.208vw, 100px) 0; }
	.oiq-exc__cards { gap: clamp(20px, 4.167vw, 80px); }
	.oiq-exc__title { font-size: clamp(18px, 1.25vw, 24px); }

	/* FAQ + closing CTA */
	.oiq-faq,
	.oiq-cta { padding-block: clamp(56px, 5.208vw, 100px); }
	.oiq-cta__title { font-size: clamp(30px, 3.073vw, 59px); }
	.oiq-cta__sub { font-size: clamp(18px, 1.406vw, 27px); }
}

@keyframes oiq-acc-reveal {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: none; }
}