/* =========================================================================
   About Us (v2)  —  layered on top of home-v2.css (Uncut Sans, .hv-shell,
   the dark #0e0e0e page frame and the vertical frame rails).

   Values taken from Figma "About Page [Web] / [Mobile]".
   Desktop anchors at 1920 (1720 content column, 100px gutters); mobile at 390.
   Type/spacing interpolate with clamp() between those two anchors.
   ========================================================================= */

.au {
	--au-ink: #111111;
	--au-ink-70: rgba(17, 17, 17, 0.7);
	--au-teal: #2ad9c4;
	--au-teal-deep: #1d403c;
	--au-teal-darker: #09413e;
	--au-teal-20: rgba(42, 217, 196, 0.2);
	--au-surface: #f6f6f6;
	--au-line: rgba(17, 17, 17, 0.2);
	--au-dot: rgba(17, 17, 17, 0.14);
	--au-content: 1600px;      /* text column inside the 1720 frame */
}

/* Light sections sit on the surface colour; the dark page frame shows only
   behind the hero. */
.au-sec-light {
	background: var(--au-surface);
	color: var(--au-ink);
}

/* Shared inner max width so section content lines up with the Figma 160px inset
   while the .hv-shell keeps the 100px frame gutters/rails. */
.au-hero .hv-shell,
.au-story .hv-shell,
.au-team .hv-shell,
.au-logos .hv-shell,
.au-ctas .hv-shell,
.au-scale .hv-shell {
	position: relative;
	z-index: 1;
}
.au-story__grid,
.au-founders,
.au-leaders,
.au-logos__title,
.au-marquee,
.au-ctas__grid,
.au-scale__panel {
	max-width: var(--au-content);
	margin-inline: auto;
}
/* Stats bar and the leadership dotted band span the full 1720 frame width so
   they touch the vertical frame rails (Figma). */

/* -------------------------------------------------------------------------
   HERO  (dark, on the page frame)
   ------------------------------------------------------------------------- */
.au-hero {
	background: #0e0e0e;
	color: #fff;
}
.au-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	padding-block: clamp(48px, 8vw, 120px);
}
.au-hero__title {
	margin: 0;
	max-width: min(922px, 100%);
	font-weight: 500;
	font-size: clamp(36px, 3.6vw, 64px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Pill / tag ("Company") */
.au-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-transform: capitalize;
	color: #fff;
}
.au-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: var(--au-teal);
}

/* -------------------------------------------------------------------------
   STORY + STATS
   ------------------------------------------------------------------------- */
.au-story {
	padding-block: clamp(40px, 5vw, 100px);
}
.au-story__grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 5vw, 80px);
}
.au-story__copy {
	flex: 1 1 auto;
	max-width: 830px;
	letter-spacing: -0.02em;
	color: var(--au-ink);
}
.au-story__lead {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 48px);
	line-height: 1.4;
	/* Restated here rather than inherited from .au-story__copy: an em
	   letter-spacing resolves against the font-size of the element it is
	   declared on and is then inherited as that fixed px value, so the copy
	   block's -0.02em was arriving here as -0.32px instead of the -0.96px the
	   48px lead is specified at. */
	letter-spacing: -0.02em;
}
.au-story__body {
	font-weight: 400;
	font-size: clamp(16px, 1.2vw, 20px);
	line-height: 1.5;
}
.au-story__body p {
	margin: 0;
}
.au-story__body p + p {
	margin-top: 0.6em;
}
.au-story__lead + .au-story__body {
	margin-top: 24px;
}
.au-story__body :first-child {
	margin-top: 0;
}
.au-story__art {
	flex: 0 0 auto;
	/* Between the 640px the pale 647-wide swoosh used to fill and the symbol's
	   own 396px: a solid mark reads much heavier than that swoosh did, so it
	   does not want the full slot, but 400px left it looking undersized next to
	   the copy. */
	width: clamp(220px, 29vw, 500px);
}
.au-story__art img {
	display: block;
	width: 100%;
	height: auto;
	/* Knocked back so the mark reads as supporting artwork beside the copy
	   rather than competing with it -- the pale swoosh it replaced sat at
	   roughly this weight. */
	opacity: 0.2;
}

/* Stats bar — bordered strip, 3 cells split by vertical dividers */
.au-stats {
	position: relative;
	list-style: none;
	margin: clamp(40px, 5vw, 80px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--au-line);
	border-radius: 0;
	background-color: var(--au-surface);
}
.au-stats__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: clamp(24px, 3vw, 40px);
	color: var(--au-ink);
}
.au-stats__cell + .au-stats__cell {
	border-left: 1px solid var(--au-line);
}
.au-stats__value {
	font-weight: 500;
	font-size: clamp(32px, 3.3vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.au-stats__label {
	font-weight: 500;
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.4;
	letter-spacing: -0.02em;
}
/* Corner ticks — 16px squares centred on the strip's corners */
.au-stats__tick {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #d3d3d3;
	border: 2px solid #d0d0d0;
	border-radius: 1px;
}
.au-stats__tick--tl { top: -8px;  left: -8px; }
.au-stats__tick--tr { top: -8px;  right: -8px; }
.au-stats__tick--bl { bottom: -8px; left: -8px; }
.au-stats__tick--br { bottom: -8px; right: -8px; }

/* -------------------------------------------------------------------------
   LEADERSHIP
   ------------------------------------------------------------------------- */
.au-team {
	padding-block: clamp(40px, 5vw, 100px);
}
/* Dotted heading band — same technique as the other v2 pages
   (cf. .cbv-head--dots / .se-head--dots): dark dot texture on the light
   surface, framed with a hairline top & bottom border, full frame width. */
.au-team__head {
	position: relative;
	text-align: center;
	/* This band carries a single heading with nothing under it, so the 80/56
	   split used where these bands have a subtitle left the title sitting low.
	   Halving the same total keeps the band height identical at every width
	   and centres the heading between the two rules. */
	padding-block: calc((clamp(40px, 5vw, 80px) + clamp(28px, 4vw, 56px)) / 2);
	padding-inline: 0;
	margin-bottom: clamp(32px, 4vw, 64px);
	overflow: hidden;
	border-top: 1px solid rgba(17, 17, 17, 0.12);
	border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}
.au-team__title {
	position: relative;
	z-index: 1;
	margin: 0;
	text-align: center;
	font-weight: 500;
	font-size: clamp(28px, 3vw, 48px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--au-ink);
}

/* Founder cards (2-up). Cards are a fixed 745px in Figma, laid out with
   space-between inside the 1600 content column (~110px gap). */
.au-founders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 745px));
	justify-content: space-between;
	gap: clamp(24px, 3vw, 40px);
	margin-bottom: clamp(24px, 3vw, 40px);
}
.au-fcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 24px;
	border: 1px solid var(--au-line);
	background: #fff;
}
/* Teal 16px corner ticks around each card (Figma) */
.au-fcard__tick {
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--au-teal);
	border-radius: 1px;
	z-index: 2;
	pointer-events: none;
}
.au-fcard__tick--tl { top: -8px;  left: -8px; }
.au-fcard__tick--tr { top: -8px;  right: -8px; }
.au-fcard__tick--bl { bottom: -8px; left: -8px; }
.au-fcard__tick--br { bottom: -8px; right: -8px; }
.au-fcard__photo {
	padding: 40px 40px 24px;
}
/* Show the whole photo — the container height follows the image. */
.au-fcard__photo img {
	display: block;
	width: 100%;
	height: auto;
}
.au-fcard__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-inline: 40px;
}
.au-fcard__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.au-fcard__bio {
	margin: 0;
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 24px);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--au-ink);
}

/* Person name / role / linkedin (shared by founder + leader) */
.au-person__name {
	margin: 0;
	font-weight: 500;
	font-size: clamp(20px, 2vw, 32px);
	line-height: 1.25;
	color: var(--au-ink);
}
.au-person__name--sm {
	font-size: clamp(16px, 1.4vw, 32px);
}
.au-person__role {
	margin: 4px 0 0;
	font-weight: 600;
	font-size: clamp(16px, 1.5vw, 24px);
	color: var(--au-teal);
}
.au-person__role--sm {
	font-size: clamp(12px, 1.2vw, 24px);
}
.au-person__linkedin {
	flex: 0 0 auto;
	display: block;
	width: 50px;
	height: 50px;
}
.au-person__linkedin--sm {
	width: 40px;
	height: 40px;
}
.au-person__linkedin img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Tagline chip with 4 corner squares */
.au-tag {
	position: relative;
	align-self: flex-start;
	padding: 8px 12px;
	background: var(--au-teal-20);
	border-radius: 1px;
	font-weight: 500;
	font-size: clamp(14px, 1.25vw, 20px);
	line-height: 1.2;
	color: var(--au-teal-deep);
}
.au-tag__c {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: rgba(29, 64, 60, 0.2);
}
.au-tag__c--tl { top: -4px;  left: -4px; }
.au-tag__c--tr { top: -4px;  right: -4px; }
.au-tag__c--bl { bottom: -4px; left: -4px; }
.au-tag__c--br { bottom: -4px; right: -4px; }

/* Leader cards (4-up) */
.au-leaders {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.3vw, 37px);
}
.au-lcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--au-line);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}
.au-lcard__photo {
	aspect-ratio: 372 / 411;
	overflow: hidden;
}
.au-lcard__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
.au-lcard__photo.is-empty {
	background: linear-gradient(160deg, #eef2f1 0%, #dfece9 100%);
}
.au-lcard__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
}

/* -------------------------------------------------------------------------
   PARTNERS + INVESTORS  (logo marquees)
   ------------------------------------------------------------------------- */
/* The flex column that used to be here never took effect: home-v2.css sets
   `main > section[class*="-light"] { display: flow-root }` and this section is
   .au-sec-light, so at (0,1,2) that rule outranks this one and the element
   computes to flow-root — its `gap` was silently dead and the titles ended up
   flush against the marquee's hairline rules. (The flex children were the wrong
   level anyway: .au-logos holds a single .hv-shell, and the titles/marquees are
   inside that.) Spacing now lives on the titles themselves, below. */
.au-logos {
	padding-block: clamp(40px, 5vw, 100px);
}
.au-logos__title {
	/* 60px clear of the marquee rule above and below, per Figma 124:13376 —
	   measured there as ~60px from the title's line box to the rule, against 0
	   here. design/19.2vw is the page's fluid ramp, so it holds from 1920 down. */
	margin: 0 0 clamp(24px, 3.125vw, 60px);
	text-align: center;
	font-weight: 600;
	font-size: clamp(24px, 2.4vw, 40px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--au-ink);
}
/* second title: the same clearance above it, off the first marquee's rule */
.au-logos__title ~ .au-logos__title {
	margin-top: clamp(24px, 3.125vw, 60px);
}
.au-marquee {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--au-line);
	border-bottom: 1px solid var(--au-line);
}
/* edge fade masks */
.au-marquee::before,
.au-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(60px, 12vw, 200px);
	z-index: 2;
	pointer-events: none;
}
.au-marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--au-surface), rgba(246, 246, 246, 0));
}
.au-marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--au-surface), rgba(246, 246, 246, 0));
}
.au-marquee__track {
	display: flex;
	align-items: center;
	/* Held in a variable because the keyframe below has to know it. */
	--au-gap: clamp(40px, 5vw, 80px);
	gap: var(--au-gap);
	width: max-content;
	padding-block: clamp(40px, 5vw, 55px);
	/* --au-dur is set per row from its logo count, so both rows move at the same
	   speed and adding a logo never speeds the row up. */
	animation: au-marquee var(--au-dur, 40s) linear infinite;
	/* Keep the track on its own compositor layer. The two edge-fade overlays sit
	   above it with z-index 2, and without this the overlap can pull the
	   transform back onto the main thread, where it competes with paint. */
	will-change: transform;
}
.au-marquee__track--rev {
	align-items: flex-end;
	animation-direction: reverse;
}
.au-marquee:hover .au-marquee__track {
	animation-play-state: paused;
}
.au-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
/* The row's band height. Each <img> takes `height: calc(this * itsOwnRatio)`,
   where the ratio is its Figma height over the 52.09px Figma band — so every
   logo keeps the size relationship the design gives it, at one shared scale.
   56px on a 1920 canvas (56/19.2 = 2.9167vw), floored at 28px on mobile.

   This is a LENGTH, not a number: a unitless scale would have to be built with
   something like calc(0.035vw + 0.4), and adding a number to a length is
   invalid CSS — the declaration is dropped and height silently falls back to
   auto. Length x number is valid, which is why the multiply happens per <img>. */
.au-marquee {
	--au-logo-band: clamp(28px, 2.9167vw, 56px);
}
.au-marquee__item img {
	display: block;
	/* height comes from the element's own style attribute (Figma height x scale) */
	width: auto;
	/* No max-width. It capped the BOX, and object-fit: contain then letterboxed
	   the artwork inside it — IndusInd (434x40) came out 240x22, rendering at
	   22px against everyone else's 56. Width now simply follows the aspect. */
	object-fit: contain;
}
/* One full set is N items + N gaps, but -50% of the track is only
   N items + (N - 0.5) gaps, because the track has 2N-1 gaps rather than 2N.
   The loop therefore fell half a gap short and visibly jumped on every repeat.
   Adding that half gap back makes the repeat seamless. */
@keyframes au-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - var(--au-gap) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
	.au-marquee__track { animation: none; }
}

/* -------------------------------------------------------------------------
   CTA DUO  (Customer Stories + Careers)
   ------------------------------------------------------------------------- */
.au-ctas {
	padding-block: clamp(40px, 5vw, 100px);
}
.au-ctas__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 40px);
}
.au-cta-card {
	position: relative;
	background: #fff;
	border-radius: 32px;
	overflow: hidden;
	/* The Figma card is 780x488 inside the 1600 column, i.e. 25.4vw tall at the
	   1920 anchor. That was expressed as `aspect-ratio`, which pins the height —
	   but the copy doesn't shrink with the card, so below ~1920 the content
	   outgrew the box and spilled out of the bottom. That overflow, not the
	   alignment rules, is what put the two buttons at different heights
	   (TQ-3135). As a min-height the proportion still holds where it fits, and
	   the card grows when the copy needs it. Both cards share a grid row, so
	   they stay the same height as each other. */
	min-height: min(488px, 25.4vw);
}
/* soft radial glow standing in for the shared decorative vector */
.au-cta-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(110% 65% at 50% 100%, rgba(42, 217, 196, 0.45), rgba(42, 217, 196, 0.12) 45%, rgba(42, 217, 196, 0) 72%),
		radial-gradient(120% 55% at 50% 0%, rgba(42, 217, 196, 0.10), rgba(42, 217, 196, 0) 60%);
	pointer-events: none;
}
.au-cta-card__inner {
	position: relative;
	z-index: 1;
	/* min-height, not height: pinned to 100% the inner could never exceed the
	   card, so tall copy overflowed instead of pushing the card taller. */
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Each card used to centre its own stack, so copy of different lengths put
	   the two buttons at different heights (TQ-3135). Anchoring the button to
	   the bottom instead makes them line up whatever the copy does — and the
	   card is only a few px taller than its content, so this reads virtually
	   the same as the centred version. */
	justify-content: flex-start;
	gap: 24px;
	text-align: center;
	padding: clamp(24px, 4vw, 63px);
}
.au-cta-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 12px;
	border-radius: 2px;
}
.au-cta-card__icon--stories { background: var(--au-teal-darker); }
.au-cta-card__icon--careers { background: var(--au-teal-deep); }
.au-cta-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.au-cta-card__title {
	margin: 0;
	font-weight: 600;
	font-size: clamp(28px, 3vw, 48px);
	line-height: 1.5;
	color: var(--au-ink);
}
.au-cta-card__text {
	/* Auto bottom margin pushes the button to the foot of the card, so both
	   cards' buttons sit at the same height regardless of how many lines the
	   copy wraps to (TQ-3135). */
	margin: 0 0 auto;
	max-width: 654px;
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 24px);
	line-height: 1.5;
	color: var(--au-ink-70);
}

/* Buttons */
.au-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.au-btn:hover { filter: brightness(0.95); }
.au-btn:active { transform: translateY(1px); }
.au-btn--teal  { background: var(--au-teal); color: var(--au-ink); }
.au-btn--light { background: #fff; color: #0a0a0a; }

/* -------------------------------------------------------------------------
   READY TO SCALE
   ------------------------------------------------------------------------- */
.au-scale {
	padding-block: clamp(40px, 5vw, 100px);
}
.au-scale__panel {
	position: relative;
	/* Shared CTA swirl background — same image the other pages' CTA banners use */
	background: #0a1614 url("../img/about-us-v2/cta-bg.webp") center / cover no-repeat;
	border-radius: 32px;
	overflow: hidden;
	aspect-ratio: 1600 / 619;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Custom art/globe replaced by the shared background image */
.au-scale__art,
.au-scale__globe {
	display: none;
}
.au-scale__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	text-align: center;
	padding: clamp(32px, 5vw, 80px);
}
.au-scale__title {
	margin: 0;
	max-width: min(974px, 100%);
	font-weight: 500;
	font-size: clamp(32px, 4.5vw, 65px);
	line-height: 1.3;
	color: #fff;
}
.au-scale__title span { color: var(--au-teal); }

/* =========================================================================
   MOBILE  (<= 900px)  —  stacks per "About Page [Mobile]" (390px anchor)
   ========================================================================= */
@media (max-width: 900px) {
	.au-story__grid {
		flex-direction: column;
		align-items: stretch;
	}
	.au-story__art {
		order: -1;
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}
	.au-stats {
		grid-template-columns: 1fr;
	}
	.au-stats__cell + .au-stats__cell {
		border-left: none;
		border-top: 1px solid var(--au-line);
	}
	.au-stats__tick { background: var(--au-teal); border-color: var(--au-teal); }

	.au-founders {
		grid-template-columns: 1fr;
	}
	.au-fcard__photo { padding: 20px 20px 0; }
	.au-fcard__body  { padding-inline: 20px; }

	.au-leaders {
		grid-template-columns: 1fr;
	}

	.au-ctas__grid {
		grid-template-columns: 1fr;
	}
	/* let the CTA cards grow to fit their content instead of clipping the button */
	.au-cta-card { aspect-ratio: auto; min-height: 260px; }
	.au-cta-card__inner { padding: 40px 24px; gap: 20px; }

	/* Marquee logos: cap width too, so wide wordmark logos (e.g. IndusInd) don't
	   blow out to the full screen — height alone left them huge on mobile. */
	.au-marquee__track { --au-gap: 40px; padding-block: 32px; }

	/* Mobile "Ready to scale" CTA uses the shared portrait swirl frame
	   (Figma "Frame 2147238938"), matching rewards-plus / onboard-iq. */
	.au-scale__panel {
		aspect-ratio: 353 / 493;
/* 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. */
			background: #0a1614 url("../img/about-us-v2/cta-bg-mobile.webp") center / cover no-repeat;
	}
	.au-scale__art,
	.au-scale__globe { display: none; }

	/* Founder LinkedIn icon is small on mobile (Figma ~24px, not the 50px desktop) */
	.au-fcard .au-person__linkedin { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
	.au-leaders { grid-template-columns: 1fr; }
}