/* ==========================================================================
   Credit Pro V2  —  page-specific styles (.cp-*)
   Depends on home-v2.css for @font-face, .hv2, .hv-shell.
   All values sourced from Figma 18:17711 (desktop) / 18:19277 (mobile).
   ========================================================================== */

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

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

/* reusable centered section header */
.cp-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 80px 0 48px;
	overflow: hidden;
}
.cp-head--bordered {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.cp-light .cp-head--bordered { border-color: rgba(17, 17, 17, 0.2); }
.cp-head > * { position: relative; z-index: 1; }
.cp-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);
}
.cp-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;
}
.cp-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);
}
.cp-light .cp-head__eyebrow { color: rgba(0, 0, 0, 0.7); }
.cp-light .cp-head__title { color: #111; }
.cp-light .cp-head__sub { color: rgba(0, 0, 0, 0.7); }

/* ==========================================================================
   1. HERO  (Figma 18:17712)
   ========================================================================== */
.cp-hero {
	background: #0e0e0e;
	/* Desktop only -- the <=900 block keeps its own 48px top. */
	padding: 120px 0 0;
}
.cp-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.cp-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 72px;
	/* Figma splits the hero row 753 copy / 850 visual. Held at a fixed 753 with
	   flex:none, the copy kept its full width at every viewport and the visual
	   absorbed the entire shortfall — it fell to 218px by 1280, a quarter of the
	   animation's natural 847. Both sides now carry their Figma width as a basis
	   and shrink together. Same fix as .rp-hero__copy. */
	flex: 1 1 753px;
	min-width: 0;
}
.cp-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cp-hero__title {
	margin: 0;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.28px;
	color: #fff;
}
.cp-hero__lede {
	margin: 0;
	max-width: 663px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: rgba(255, 255, 255, 0.6);
}
.cp-hero__visual { flex: 1 1 850px; min-width: 0; max-width: 850px; }
.cp-hero__visual img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   2. COMPREHENSIVE CREDIT ENGINE  (Figma 18:17837, dark bento)
   ========================================================================== */
.cp-engine {
	background: #0e0e0e;
	padding: 100px 0 0;
}
.cp-engine__bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: min(1720px, 100%);
	margin: 56px auto 0;
}
.cp-engine__card {
	border-radius: 24px;
	overflow: hidden;
}
.cp-engine__card img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   3. STACK THAT POWERS INNOVATION  (Figma 18:18433, dark)
   ========================================================================== */
.cp-stack {
	position: relative;
	overflow: hidden;
	background: #0e0e0e;
	padding: 100px 0 280px;
}
.cp-stack > * { position: relative; z-index: 1; }
.cp-stack .hv-section-glow { position: absolute; z-index: 0; }
.cp-stack__diagram {
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.cp-stack__diagram img { width: 100%; height: auto; display: block; }
.cp-stack__feats {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: min(1600px, 100%);
	margin: 40px auto 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.cp-stack__feat {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}
.cp-stack__feat + .cp-stack__feat { border-left: 1px solid rgba(255, 255, 255, 0.15); }

/* corner / divider square markers (Figma 18:18906+) */
.cp-stack__feats::before,
.cp-stack__feats::after,
.cp-stack__feat::before,
.cp-stack__feat::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #2a2a2b;
	border: 2px solid #414141;
	border-radius: 1px;
	z-index: 2;
	pointer-events: none;
}
/* top & bottom squares on each column's left edge (box-left + 3 dividers) */
.cp-stack__feat::before { top: -6px; left: -6px; }
.cp-stack__feat::after { bottom: -6px; left: -6px; }
/* top & bottom squares on the box's right edge */
.cp-stack__feats::before { top: -6px; right: -6px; }
.cp-stack__feats::after { bottom: -6px; right: -6px; }
/* Now a Figma SVG export rather than an inline glyph, so `color` no longer
   drives it — the asset carries its own #2AD9C4 stroke. object-fit keeps the
   non-square ones (22.75x25.08) from being stretched into the 28px box. */
.cp-stack__feat-ic { width: 28px; height: 28px; object-fit: contain; display: block; margin-bottom: 4px; }
.cp-stack__feat-title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.2px;
	color: #fff;
}
.cp-stack__feat-desc {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   4. PARTNER ECOSYSTEM  (Figma 18:18916, light)
   ========================================================================== */
/* 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). */
.cp-partners {
	background: #f6f6f6;
	padding: 0;
}
.cp-partners__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: min(1600px, 100%);
	margin: 0 auto;
}
.cp-partners__copy { display: flex; flex-direction: column; gap: 24px; flex: none; max-width: 460px; }
.cp-partners__eyebrow {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.7);
}
.cp-partners__title {
	margin: 0;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.72px;
	color: #111;
}
.cp-partners__desc {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.7);
}
.cp-partners__visual { flex: 1 1 0; min-width: 0; max-width: min(1032px, 100%); }
.cp-partners__visual img { width: 100%; height: auto; display: block; }

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

/* ==========================================================================
   6. CTA BANNER  (Figma 18:19124)
   ========================================================================== */
.cp-cta { background: #0e0e0e; padding: 100px 0; }
.cp-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/cp-v2/cta-bg.webp") center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
}
.cp-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;
}
.cp-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.cp-cta__title { margin: 0; font-size: 59px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.cp-cta__title em { font-style: normal; color: #2ad9c4; }
.cp-cta__sub { margin: 0; font-size: 27px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.cp-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;
}
.cp-cta__btn:hover { opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE  (mobile ref: Figma 18:19277)
   ========================================================================== */
.cp-only-mobile { display: none; }

@media (max-width: 1200px) {
	.cp-partners__copy { max-width: 40%; }
}

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

	.cp-only-desktop { display: none; }
	.cp-only-mobile { display: block; }

	/* rhythm */
	.cp-hero { padding: 48px 0 56px; }
	.cp-engine, .cp-stack, .cp-partners, .cp-faq, .cp-cta { padding: 56px 0; }
	.cp-stack { padding-bottom: 56px; }
	.cp-head { padding: 40px 0 28px; }
	.cp-faq .cp-head { padding: 40px 0 28px; }

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

	/* 1. hero — stack */
	.cp-hero__inner { flex-direction: column; align-items: stretch; gap: 32px; max-width: 100%; }
	.cp-hero__copy { flex: 0 1 auto; width: 100%; gap: 28px; }
	.cp-hero__title { font-size: 34px; letter-spacing: -0.68px; }
	.cp-hero__lede { font-size: 18px; letter-spacing: -0.36px; }
	.cp-hero__visual { flex: 0 1 auto; max-width: 100%; }

	/* 2. engine bento — 1 column */
	.cp-engine__bento { grid-template-columns: 1fr; max-width: 100%; }

	/* 3. stack — mobile diagram + stacked feature row */
	.cp-stack__feats { flex-direction: column; max-width: 100%; }
	.cp-stack__feat { flex: none; }
	.cp-stack__feat + .cp-stack__feat { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.15); }
	/* Corner squares: four outer corners only, as the mobile design has them.
	   The desktop rule puts a pair on EVERY card's left edge, which is right
	   when the cards are columns (the pairs land on the dividers) but wrong
	   once they stack — it produced a column of squares down the left with
	   only the strip's pair on the right, so the strip looked lopsided.
	   The first card supplies the top two, the strip itself the bottom two. */
	.cp-stack__feat::before,
	.cp-stack__feat::after { display: none; }
	.cp-stack__feat:first-child::before { display: block; top: -6px; left: -6px; right: auto; }
	.cp-stack__feat:first-child::after { display: block; top: -6px; bottom: auto; left: auto; right: -6px; }
	.cp-stack__feats::before { top: auto; bottom: -6px; left: -6px; right: auto; }
	.cp-stack__feats::after { top: auto; bottom: -6px; left: auto; right: -6px; }
	.cp-stack__feat-title { font-size: 18px; }

	/* 4. partners — stack */
	.cp-partners__row { flex-direction: column; align-items: stretch; gap: 28px; max-width: 100%; }
	/* Centred once the row stacks: the copy sits above the diagram rather than
	   beside it, so left-aligned text read as off-centre against the centred
	   artwork. align-items too, because .cp-partners__copy is a flex column —
	   text-align alone would leave the block itself left-packed. */
	.cp-partners__copy { max-width: 100%; gap: 16px; text-align: center; align-items: center; }
	.cp-partners__title { font-size: 26px; letter-spacing: -0.5px; }
	.cp-partners__desc { font-size: 17px; }
	.cp-partners__visual { max-width: 100%; }
	/* s4-partners-mobile.png is 1075x728 but its diagram ends at row 613 —
	   114px, i.e. 15.7% of the image, is empty. On top of the section's own
	   56px that read as a large blank gap under the diagram. The negative
	   margin pulls it back; a PERCENTAGE resolves against the container
	   width, and the image is width:100% with height:auto, so this tracks the
	   image at every size: 114/728 of a height that is itself 0.677 x width. */
	.cp-partners__visual img { margin-bottom: -10.6%; }

	/* 5. faq */
	.cp-faq__card { padding: 0 20px; max-width: 100%; }
	.cp-faq__q { padding: 24px 0; gap: 16px; }
	.cp-faq__q-text { font-size: 16px; }
	.cp-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. */
		.cp-cta__banner { min-height: 0; padding: 48px 24px; border-radius: 20px;background: #0a1614 url("../img/cp-v2/cta-bg-mobile.webp") center / cover no-repeat; }
	.cp-cta__title { font-size: 30px; line-height: 1.35; }
}

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

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

   .cp-stack's 280px foot is NOT scaled: it is the clearance for the
   .hv-section-glow arc, and home-v2.css records that closing that gap pushed
   the arc up behind the copy at 1.9-3.1:1 contrast. Its top padding is safe.
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero */
	.cp-hero { padding-top: clamp(64px, 6.25vw, 120px); }
	.cp-hero__title { font-size: clamp(34px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.cp-hero__lede { font-size: clamp(18px, 1.458vw, 28px); }
	.cp-hero__copy { gap: clamp(28px, 3.75vw, 72px); }

	/* Section rhythm */
	.cp-engine { padding-block: clamp(56px, 5.208vw, 100px) 0; }
	.cp-stack { padding-block: clamp(56px, 5.208vw, 100px) 280px; }
	.cp-faq,
	.cp-cta { padding-block: clamp(56px, 5.208vw, 100px); }
	.cp-faq .cp-head { padding-block: clamp(40px, 4.167vw, 80px); }

	/* Dotted section heads */
	.cp-head__title { font-size: clamp(22px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.cp-head__sub { font-size: clamp(17px, 1.25vw, 24px); }

	/* Partner ecosystem */
	.cp-partners__row { gap: clamp(24px, 2.083vw, 40px); }
	.cp-partners__title { font-size: clamp(26px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.cp-partners__desc { font-size: clamp(17px, 1.25vw, 24px); }

	/* Closing CTA */
	.cp-cta__title { font-size: clamp(30px, 3.073vw, 59px); }
	.cp-cta__sub { font-size: clamp(18px, 1.406vw, 27px); }
}

/* =========================================================================
   Keep the capability strip inside the content column.

   home-v2.css lists .cp-stack__feats among the full-bleed bands and pulls it
   back out to the frame rails (margin-inline: -1 * --hv-rail-inset). Figma has
   it at 1600 wide — the content column — i.e. inset 60px from the 1720 rails,
   the same gap the rest of the section's content uses. Flush to the rails it
   was 120px wider than the design and its corner squares sat on the rails.

   Cancelled here rather than in the shared list, so the override lives with
   the page. Same specificity and the same 1024px bound as the rule it counters,
   and credit-pro.css loads after home-v2.css, so this wins.
   ========================================================================= */
@media (min-width: 1024px) {
	main > section > .hv-shell > .cp-stack__feats {
		margin-inline: 0;
		width: 100%;
		max-width: min(1600px, 100%);
	}
}

/* s4-partners.png carries the same baked blank as its mobile twin: 2221x1414
   with the diagram ending at row 1196, so the bottom 217px (15.3%) is empty and
   showed as dead space under the artwork. Same percentage-of-width correction —
   the image is width:100%/height:auto, so 217/1414 of a height that is 0.637 x
   width works out at 9.8% of the width. */
@media (min-width: 901px) {
	.cp-partners__visual img { margin-bottom: -9.8%; }
}