/**
 * Component: How It Works — styles
 * Scoped to .how-it-works (BEM root). Tokens from style.css.
 *
 * Comp (1440, page y; Figma SVG export v3): H2 line box 2591.3 · lead 2675.2
 * · step illustrations at 2817 / 3412 / 4017 / 4612, badges 600 apart. Copy
 * column starts at x=220 (odd) and x=820 (even); illustrations are 515×510 at
 * x=705 (odd) and 500×520 at x=220 (even) — i.e. both flush to the 1000px
 * band's outer edge.
 */

.how-it-works {
	padding: 173px var(--gutter) 132px;
	scroll-margin-top: 24px;
}

.how-it-works__inner {
	max-width: var(--content-w);
	margin: 0 auto;
}

.how-it-works__head {
	text-align: center;
}

.how-it-works__lead {
	max-width: 480px; /* breaks after "finances," */
	margin: 24px auto 0;
}

/* ── Steps ────────────────────────────────────────────────────── */
.how-it-works__steps {
	display: flex;
	flex-direction: column;
	gap: 85px;
	margin: 90px 0 0;
	padding: 0;
	list-style: none;
}

.how-it-works__step {
	display: grid;
	align-items: center;
	margin: 0;
}

.how-it-works__step--copy-left {
	grid-template-columns: minmax(0, 1fr) 515px;
}

.how-it-works__step--copy-right {
	grid-template-columns: 500px minmax(0, 1fr);
}

/* Even rows mirror: image in column 1, copy in column 2, 100px in. */
.how-it-works__step--copy-right .how-it-works__media {
	grid-column: 1;
	grid-row: 1;
}

.how-it-works__step--copy-right .how-it-works__copy {
	grid-column: 2;
	grid-row: 1;
	padding-left: 100px;
}

.how-it-works__copy {
	max-width: 360px; /* body breaks after "to get a" */
}

.how-it-works__step--copy-right .how-it-works__copy {
	max-width: none;
}

.how-it-works__step--copy-right .how-it-works__body {
	max-width: 360px;
}

/* ── Number badge ─────────────────────────────────────────────── */
/* A blurred teal square with a crisp numeral on top; the glow breathes. */
.how-it-works__badge {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	font-family: var(--font-title);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-step-num);
}

.how-it-works__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	background: linear-gradient(225deg, var(--color-bg) 12%, var(--color-teal-glow) 100%);
	filter: blur(6px);
	animation: how-it-works-glow 4.5s ease-in-out infinite;
}

.how-it-works__step:nth-child(2) .how-it-works__badge::before { animation-delay: -1.5s; }
.how-it-works__step:nth-child(3) .how-it-works__badge::before { animation-delay: -3s; }
.how-it-works__step:nth-child(4) .how-it-works__badge::before { animation-delay: -0.75s; }

@keyframes how-it-works-glow {
	0%, 100% { opacity: 0.8; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── Copy ─────────────────────────────────────────────────────── */
.how-it-works__title {
	margin: 22px 0 0;
	font-family: var(--font-title);
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: 1.222; /* 44 */
	letter-spacing: var(--tracking-h3);
	color: var(--color-text);
}

.how-it-works__body {
	margin: 24px 0 0;
	font-size: var(--text-body-lg);
	line-height: 1.778; /* 32 */
	color: var(--color-text-muted);
}

/* ── Media: the layered app illustration ──────────────────────── */
/*
 * The box keeps the old flattened composite's footprint (515×510 in odd rows,
 * 500×520 in the even one) so the grid doesn't move. Every layer inside is
 * placed from the comp's PAGE coordinates at 1440: --bx/--by/--bw/--bh are the
 * box, --x/--y/--w a layer's top-left and width, converted to % below — so the
 * whole group scales as one when the box shrinks on tablet and mobile.
 *
 * Each --by is where the grid puts that row, so the layers land on the comp's
 * page positions. (The comp's even-row phones sit 40px into their box, the
 * odd ones 35px — as drawn.)
 */
.how-it-works__media {
	--bx: 705;
	--by: 2817;
	--bw: 515;
	--bh: 510;
	position: relative;
	min-width: 0;
	aspect-ratio: var(--bw) / var(--bh);
	container-type: inline-size; /* the cards size themselves in cqw of this box */
}

.how-it-works__step--copy-right .how-it-works__media {
	--bx: 220;
	--bw: 500;
	--bh: 520;
}

.how-it-works__media--2 { --by: 3412; }
.how-it-works__media--3 { --by: 4017; }
.how-it-works__media--4 { --by: 4612; }

.how-it-works__line,
.how-it-works__phone,
.how-it-works__float {
	position: absolute;
	left: calc((var(--x) - var(--bx)) / var(--bw) * 100%);
	top: calc((var(--y) - var(--by)) / var(--bh) * 100%);
}

.how-it-works__line,
.how-it-works__phone {
	width: calc(var(--w) / var(--bw) * 100%);
}

/* Line shapes: boxes from inc/line-shapes-data.php. Behind the phone. */
.how-it-works__media--1 .how-it-works__line--loop { --x: 711;     --y: 2901;    --w: 218.87; }
.how-it-works__media--1 .how-it-works__line--ring { --x: 996.75;  --y: 2813.75; --w: 146.5; }
.how-it-works__media--2 .how-it-works__line--loop { --x: 254;     --y: 3722;    --w: 218.87; }
.how-it-works__media--2 .how-it-works__line--ring { --x: 527.623; --y: 3413.75; --w: 126.5; }
.how-it-works__media--3 .how-it-works__line--loop { --x: 976;     --y: 4322;    --w: 218.87; }
.how-it-works__media--3 .how-it-works__line--ring { --x: 794.75;  --y: 4274.75; --w: 126.5; }
.how-it-works__media--4 .how-it-works__line--loop { --x: 211;     --y: 4701;    --w: 218.87; }
.how-it-works__media--4 .how-it-works__line--ring { --x: 496.75;  --y: 4993.75; --w: 146.5; }

/*
 * Phone + cards float together on the phone's period; each card then drifts
 * on its own float inside that, so the layers move apart slightly. Nesting
 * matters: each card hides the matching element of the phone's own screen
 * (the in-app total, list rows, net-worth card) by only a few px, and a card
 * floating independently of the phone would uncover it. Relative to the
 * phone each card only drifts the way it has room for.
 */
.how-it-works__group {
	position: absolute;
	inset: 0;
	animation: apt-float 9s ease-in-out infinite;
}

.how-it-works__media--2 .how-it-works__group { animation-delay: -3s; }
.how-it-works__media--3 .how-it-works__group { animation-delay: -6s; }
.how-it-works__media--4 .how-it-works__group { animation-delay: -7.5s; }

.how-it-works__phone {
	display: block;
	max-width: none;
	height: auto;
}

.how-it-works__media--1 .how-it-works__phone { --x: 860; --y: 2852; --w: 222; }
.how-it-works__media--2 .how-it-works__phone { --x: 360; --y: 3452; --w: 221; }
.how-it-works__media--3 .how-it-works__phone { --x: 860; --y: 4052; --w: 221; }
.how-it-works__media--4 .how-it-works__phone { --x: 360; --y: 4652; --w: 222; }

/* The float wrapper drifts; the card inside it does the entrance. Two
   elements, so the two transforms never fight. */
.how-it-works__float {
	animation: apt-float 7s ease-in-out infinite;
}

/* x/y are the card art's own box in the comp (its image, not the clip rect). */
.how-it-works__float--assets {
	--x: 820;
	--y: 3198.76;
	/* Its bottom edge covers the phone's in-app total by ~2px, so it drifts
	   down (away from it), never up. */
	animation-name: how-it-works-sink;
	animation-duration: 6.5s;
	animation-delay: -1.6s;
}

.how-it-works__float--budget {
	--x: 331;
	--y: 3555;
	animation-duration: 6.8s;
	animation-delay: -2.7s;
}

.how-it-works__float--income {
	--x: 788.13;
	--y: 4145;
	animation-duration: 6.4s;
	animation-delay: -2.2s;
}

.how-it-works__float--transfer {
	--x: 849.13;
	--y: 4267;
	animation-duration: 7.4s;
	animation-delay: -4.9s;
}

.how-it-works__float--net-worth {
	--x: 380;
	--y: 4765.85;
	animation-duration: 7.2s;
	animation-delay: -3.3s;
}

@keyframes how-it-works-sink {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(8px); }
}

/* ── App cards ────────────────────────────────────────────────── */
/*
 * Built to the app's own 343px-wide cards (the art embedded in the comp is
 * those cards at 2x), then scaled like the comp does: --s is comp px per app
 * px, --u one app px in this box. Every size below is `n × --u`, n read off
 * the art at 1x, so a card scales with its box. Colours are sampled from the
 * same art.
 */
.how-it-works__card {
	--u: calc(var(--s) * 1px);
	--c: calc(var(--u) / var(--s)); /* one comp px in this box */
	--tint: #22272C;                /* the art's card colour… */
	--frost: rgba(37, 42, 47, 0.9); /* …as a 90% tint that lands on it over the page */
	--spill-x: 9;
	position: relative;
	box-sizing: border-box;
	width: calc(343 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--tint);
	/* The comp softens each card's far edge, the one hanging off the phone,
	   into a blur that spills past it (a Figma progressive blur). A shadow in
	   the card's own colour, thrown toward that edge, stands in for it. */
	box-shadow: calc(var(--spill-x) * var(--c)) calc(4 * var(--c)) calc(12 * var(--c)) calc(-2 * var(--c)) var(--tint);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	text-align: left;
}

@supports (width: 1cqw) {
	.how-it-works__card {
		--u: calc(var(--s) / var(--bw) * 100cqw);
	}
}

/* Frosted: a touch of the phone shows through, blurred. Without
   backdrop-filter the card stays solid in the art's colour. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.how-it-works__card {
		background: var(--frost);
		-webkit-backdrop-filter: blur(calc(12 * var(--u)));
		backdrop-filter: blur(calc(12 * var(--u)));
	}
}

.how-it-works__card svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Entrance: lifts off the phone — from smaller and further back, with a soft
   overshoot. Replaces the reveal system's rise for cards only. */
.how-it-works__card[data-reveal].is-revealed {
	animation-name: how-it-works-lift;
	animation-duration: 900ms;
	animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1);
}

@keyframes how-it-works-lift {
	0%   { opacity: 0; transform: translateY(calc(18 * var(--u))) scale(0.9); }
	55%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

/* Card 1 — Total Assets (step 1). Art: 343×76 at 300/343. */
.how-it-works__card--assets {
	--s: calc(300 / 343);
	display: flex;
	flex-direction: column;
	height: calc(76 * var(--u));
	padding: calc(18.21 * var(--u)) 0 0 calc(16 * var(--u));
}

.how-it-works__card--assets .how-it-works__card-label {
	line-height: calc(16 * var(--u));
	color: var(--color-text-muted);
}

.how-it-works__card--assets .how-it-works__card-total {
	font-family: var(--font-title);
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: calc(27 * var(--u));
}

.how-it-works__card-button {
	position: absolute;
	top: calc(18 * var(--u));
	right: calc(24 * var(--u));
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: calc(101 * var(--u));
	height: calc(40 * var(--u));
	border: calc(1 * var(--u)) solid var(--color-text-muted);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-accent);
	font-weight: 700;
}

/* Card 2 — Total Spent This Month (step 2). Art: 343×120 at 280/343. The
   comp draws this one crisp: no soft far edge. */
.how-it-works__card--budget {
	--s: calc(280 / 343);
	height: calc(120 * var(--u));
	padding: calc(19.8 * var(--u)) calc(16 * var(--u)) 0;
	box-shadow: none;
}

.how-it-works__card--budget .how-it-works__card-label {
	display: block;
	font-size: calc(12 * var(--u));
	font-weight: 600;
	line-height: calc(16 * var(--u));
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.how-it-works__card-edit {
	position: absolute;
	top: calc(18.8 * var(--u));
	right: calc(16 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 600;
	line-height: calc(20 * var(--u));
	color: var(--color-accent);
}

.how-it-works__card-spent {
	display: flex;
	align-items: baseline;
	gap: calc(3.5 * var(--u));
	margin-top: calc(18 * var(--u));
	font-family: var(--font-title);
	font-size: calc(32 * var(--u));
	font-weight: 700;
	line-height: calc(36 * var(--u));
}

.how-it-works__card-of {
	color: var(--color-text-muted);
}

/* Card 4's base bar rule comes later in this file, hence the extra class. */
.how-it-works__card--budget .how-it-works__card-bar {
	width: calc(var(--fill) * 311 * var(--u));
	margin-top: calc(5.3 * var(--u));
	background: #106177;
}

/* Cards 3a/3b — a transaction row (step 3). Art: 343×84 at 69/84. */
.how-it-works__card--txn {
	--s: calc(69 / 84);
	display: flex;
	align-items: flex-start;
	height: calc(84 * var(--u));
	padding: 0 calc(16 * var(--u)) 0 calc(24 * var(--u));
}

.how-it-works__card-icon {
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	margin-top: calc(30 * var(--u));
	color: var(--color-text);
}

.how-it-works__card-txn {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	margin-left: calc(16 * var(--u));
	padding-top: calc(11.1 * var(--u));
}

.how-it-works__card-title {
	font-size: calc(16 * var(--u));
	line-height: calc(24.76 * var(--u));
}

.how-it-works__card-meta {
	font-size: calc(12 * var(--u));
	line-height: calc(16 * var(--u));
	color: var(--color-text-muted);
}

.how-it-works__card-amount {
	margin-top: calc(29.48 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: calc(24 * var(--u));
	color: #39D780;
}

.how-it-works__card--transfer .how-it-works__card-amount {
	color: #6AD5FF;
}

/* This one hangs off the phone's LEFT edge, so its soft side is the left. */
.how-it-works__card--income {
	--spill-x: -9;
}

/* Card 4 — Your Total Net Worth (step 4). Art: 343×244 at 238/343. */
.how-it-works__card--net-worth {
	--s: calc(238 / 343);
	display: flex;
	flex-direction: column;
	height: calc(244 * var(--u));
	--tint: #224857;
	--frost: rgba(37, 78, 95, 0.9);
	padding: calc(22.17 * var(--u)) calc(24 * var(--u)) 0;
	border-radius: calc(32 * var(--u));
}

.how-it-works__card--net-worth .how-it-works__card-label {
	line-height: calc(20 * var(--u));
}

.how-it-works__card--net-worth .how-it-works__card-total {
	font-family: var(--font-title);
	font-size: calc(40 * var(--u));
	font-weight: 700;
	line-height: calc(44 * var(--u));
}

.how-it-works__card-change {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	height: calc(24 * var(--u));
	margin-top: calc(5.8 * var(--u));
	font-weight: 700;
}

.how-it-works__card-up {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	border-radius: calc(8 * var(--u));
	background: #082140;
	color: #39D780;
}

.how-it-works__card-up svg {
	width: calc(16 * var(--u));
	height: calc(16 * var(--u));
}

/* Green for assets, red for liabilities, split in proportion (--split). */
.how-it-works__card-bar {
	display: block;
	height: calc(8 * var(--u));
	margin-top: calc(16 * var(--u));
	border-radius: var(--radius-pill);
	background: linear-gradient(to right, #39D780 calc(var(--split) * 100%), #F10021 0);
	transform-origin: left center;
}

.how-it-works__card-legend {
	display: flex;
	justify-content: space-between;
	margin-top: calc(7.9 * var(--u));
	font-size: calc(12 * var(--u));
	line-height: calc(16 * var(--u));
}

.how-it-works__card-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: calc(24 * var(--u));
	margin-top: calc(23.1 * var(--u));
	padding-top: calc(16 * var(--u));
	border-top: calc(1 * var(--u)) solid var(--color-text-muted);
	box-sizing: content-box;
	font-weight: 700;
}

.how-it-works__card-chevron {
	flex: none;
	width: calc(14.5 * var(--u));
	height: calc(14.5 * var(--u));
	margin-right: calc(4.75 * var(--u));
}

/* The bar fills from nothing once its card has landed. */
.how-it-works__card.is-revealed .how-it-works__card-bar {
	animation: how-it-works-fill 1.3s var(--ease-out) backwards;
	animation-delay: calc(var(--reveal-delay, 0ms) + 450ms);
}

@keyframes how-it-works-fill {
	from { transform: scaleX(0); }
}

/* ── Tablet ≤900px ────────────────────────────────────────────── */
/* One column: copy (centred) above its image, same order for every row. */
@media (max-width: 900px) {
	.how-it-works {
		padding-top: 96px;
		padding-bottom: 72px;
	}

	.how-it-works__steps {
		gap: 72px;
		margin-top: 56px;
	}

	.how-it-works__step--copy-left,
	.how-it-works__step--copy-right {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 32px;
		text-align: center;
	}

	.how-it-works__step--copy-right .how-it-works__media,
	.how-it-works__step--copy-right .how-it-works__copy {
		grid-column: auto;
		grid-row: auto;
		padding-left: 0;
	}

	.how-it-works__copy,
	.how-it-works__step--copy-right .how-it-works__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 480px;
	}

	.how-it-works__step--copy-right .how-it-works__body {
		max-width: none;
	}

	.how-it-works__media {
		width: min(460px, 100%);
	}

	.how-it-works__title {
		margin-top: 18px;
	}

	.how-it-works__body {
		margin-top: 14px;
		font-size: var(--text-body);
		line-height: 1.6;
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.how-it-works {
		padding-top: 72px;
		padding-bottom: 56px;
	}

	.how-it-works__lead {
		margin-top: 16px;
	}

	.how-it-works__steps {
		gap: 56px;
		margin-top: 40px;
	}

	.how-it-works__badge {
		width: 64px;
		height: 64px;
		font-size: 30px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
/* Static final state: no float, no lift-off, no bar fill. (The count-ups and
   the phone's rise stand down in apt-animations.js / style.css.) */
@media (prefers-reduced-motion: reduce) {
	.how-it-works__badge::before,
	.how-it-works__group,
	.how-it-works__float,
	.how-it-works__card[data-reveal].is-revealed,
	.how-it-works__card.is-revealed .how-it-works__card-bar {
		animation: none;
	}
}