/**
 * About — `/about/`.
 *
 * Ported from the Claude Design artboard `About.dc.html`. Only what that
 * artboard does and the shared layer does not; every band ground, head,
 * button, card and grid comes from `product.css` behind the `zp-product`
 * handle this depends on.
 *
 * Four compositions are this page's own: the hero's headline/photo pair with
 * the stat rule under it, the Zipify Plus panel cutting across the app shelf,
 * the drawn Academy thumbnails, and the video facade.
 */

/* ==========================================================================
   §1 HERO — headline, photo, stat rule, story
   One band, not three. The stat rules stop at the 1180px measure because the
   row lives inside the hero's own wrap, which is what the artboard draws.
   ========================================================================== */

.zpa-open .zpx-wrap { padding-block:104px; }

.zpa-open__lead {
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:56px; align-items:center; margin-bottom:56px;
}
.zpa-open__head { margin:0; }
.zpa-open__head .zpx-h2 {
	font-size:clamp(34px,3.8vw,62px); font-weight:900;
	letter-spacing:-0.028em; line-height:1.02;
}

.zpa-open__shot {
	border-radius:24px; overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.zpa-open__img { display:block; width:100%; height:auto; }

/* The two hairlines the artboard rules the stat row with. */
.zpa-stats {
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	margin:0; padding:44px 0;
	border-top:1px solid rgba(255,255,255,.14);
	border-bottom:1px solid rgba(255,255,255,.14);
}
/* `column-reverse` puts the figure above its label without moving the `dt`
   ahead of its `dd` in the DOM — see the note in `01-hero.php`. */
.zpa-stat {
	display:flex; flex-direction:column-reverse; gap:10px;
	text-align:center; padding:0 16px;
}
.zpa-stats .zpa-stat + .zpa-stat { border-left:1px solid rgba(255,255,255,.14); }
.zpa-stat__value {
	margin:0; font-weight:900; line-height:1;
	font-size:clamp(34px,3.6vw,48px); letter-spacing:-0.028em;
	color:var(--zip-yellow);
}
.zpa-stat__value--sm { font-size:34px; letter-spacing:-0.024em; }
.zpa-stat__label {
	font-size:12px; font-weight:700; line-height:1.4;
	letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
	color:rgba(255,255,255,.6);
}

.zpa-story { padding-top:72px; display:grid; gap:20px; max-width:64ch; margin-inline:auto; }
.zpa-story__h { margin:0 0 4px; font-size:clamp(26px,2.6vw,34px); letter-spacing:-0.022em; line-height:1.12; }
.zpa-story p { margin:0; font-size:19px; line-height:1.65; color:rgba(255,255,255,.76); }
.zpa-story strong { font-weight:700; }

/* ==========================================================================
   §2 THE APP SHELF
   ========================================================================== */

.zpa-shelf .zpx-wrap { padding-block:112px; display:grid; gap:20px; }
.zpa-shelf .zpx-head { margin-bottom:28px; }

.zpa-app { display:flex; flex-direction:column; padding:28px 28px 24px; }
.zpa-app__tile {
	display:block; flex:0 0 auto; align-self:flex-start;
	width:50px; height:50px; margin-bottom:20px;
	border-radius:14px; background-color:var(--blue-900);
	background-repeat:no-repeat; background-position:center; background-size:24px auto;
}
.zpa-app__stage {
	margin:0 0 8px; font-size:11px; font-weight:800;
	letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-500);
}
.zpa-app__h { margin:0 0 12px; font-size:23px; letter-spacing:-0.02em; }
.zpa-app__body { margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--ink-600); }
.zpa-app__cta { margin-top:auto; align-self:flex-start; }

/* The Zipify Plus panel. Dark on a light band, so it sets its own copy
   palette rather than borrowing `.zpx-on-dark` from a section. */
.zpa-plus {
	display:grid; grid-template-columns:1.4fr .9fr; gap:40px; align-items:center;
	padding:44px; border-radius:24px; overflow:hidden;
	background:var(--grad-zipify); color:#f9f9f9;
}
.zpa-plus__rule {
	display:block; width:64px; height:4px; margin-bottom:22px;
	border-radius:var(--r-pill);
	background:var(--grad-plus);
}
.zpa-plus .zpx-eyebrow { margin:0 0 12px; }
.zpa-plus__h { margin:0 0 14px; font-size:clamp(26px,2.8vw,36px); letter-spacing:-0.022em; line-height:1.08; color:#fff; }
.zpa-plus__body { margin:0 0 26px; max-width:60ch; font-size:17px; line-height:1.6; color:rgba(255,255,255,.74); }
.zpa-plus__cta { display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.zpa-plus__link {
	font-size:14px; font-weight:700; color:var(--zip-yellow);
	border-bottom:1px solid rgba(255,215,72,.34); padding-bottom:2px;
}
.zpa-plus__link:hover { color:var(--zip-yellow); border-color:var(--zip-yellow); }

.zpa-plus__stats {
	display:grid; gap:22px; margin:0;
	padding-left:40px; border-left:1px solid rgba(255,255,255,.14);
}
.zpa-plus__stats .zpa-stat { text-align:left; padding:0; gap:8px; }

/* ==========================================================================
   §3 THE TALK — click-to-play facade
   ========================================================================== */

.zpa-talk .zpx-wrap { padding-block:104px; }
.zpa-talk .zpx-head { margin-bottom:44px; }

.zpa-video {
	position:relative; aspect-ratio:16/9; max-width:100%;
	border-radius:24px; overflow:hidden;
	border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
	box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.zpa-video__play { position:absolute; inset:0; display:block; }
.zpa-video__poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zpa-video__scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,28,.12),rgba(6,12,28,.55)); }
.zpa-video__glyph {
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	display:flex; align-items:center; justify-content:center;
	width:84px; height:84px; padding-left:6px;
	border-radius:var(--r-pill);
	background:rgba(255,215,72,.94); color:#0b1020;
	box-shadow:0 18px 44px rgba(0,0,0,.4);
	transition:transform 220ms var(--ease-out), filter 220ms var(--ease-out);
}
.zpa-video__play:hover .zpa-video__glyph { transform:translate(-50%,-50%) scale(1.06); filter:brightness(1.05); }
.zpa-video__play:focus-visible { outline:3px solid var(--zip-yellow); outline-offset:3px; }

/* The iframe `product.js` swaps in for the link. */
.zpx-video__frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ==========================================================================
   §4 ACADEMY — drawn thumbnails
   The card heads are painted, not exported: same ground, wash and glow the
   dark bands use, so three images never have to load or stay sharp.
   ========================================================================== */

.zpa-academy .zpx-wrap { padding-block:112px; }
.zpa-academy .zpx-head { margin-bottom:44px; }

.zpa-train { display:flex; flex-direction:column; overflow:hidden; }
.zpa-train:hover { color:var(--ink-900); }

.zpa-train__head {
	position:relative; display:block; width:100%; aspect-ratio:16/9;
	overflow:hidden; background:var(--grad-zipify);
}
.zpa-train__head::before,
.zpa-train__head::after { content:""; position:absolute; inset:0; pointer-events:none; }
.zpa-train__head::before { background:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 7px); }
.zpa-train__head::after  { background:radial-gradient(420px 240px at 78% 14%,rgba(45,107,228,.34),transparent 70%); }

.zpa-train__kicker {
	position:absolute; left:22px; top:20px; z-index:1;
	font-size:10px; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase; color:rgba(255,255,255,.5);
}
.zpa-train__short {
	position:absolute; left:22px; right:86px; bottom:20px; z-index:1;
	font-size:19px; font-weight:900; letter-spacing:-0.015em; line-height:1.15; color:#fff;
}
.zpa-train__glyph {
	position:absolute; right:22px; bottom:20px; z-index:1;
	display:flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:var(--r-pill);
	background:var(--zip-yellow); color:var(--ink-900);
	box-shadow:0 8px 20px rgba(0,0,0,.3);
}

.zpa-train__body { display:flex; flex-direction:column; gap:12px; flex:1 1 auto; padding:24px; }
.zpa-train__title { font-size:19px; font-weight:800; letter-spacing:-0.015em; line-height:1.3; color:var(--ink-900); }
.zpa-train__cta {
	margin-top:auto; font-size:13px; font-weight:800;
	letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zip-royal);
}

.zpa-academy__cta { display:flex; justify-content:center; margin-top:44px; }

/* ==========================================================================
   §5 CLOSING BAND
   ========================================================================== */

.zpa-close .zpx-wrap { padding-block:112px; text-align:center; }

.zpa-subscribe {
	display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
	max-width:520px; margin:34px auto 0;
}
/* The label, the inverted border and the focus ring all come from
   `.zpx-field__*` in `product.css`; only the row geometry is this band's. */
.zpa-subscribe__input { flex:1 1 240px; min-width:0; padding:15px 18px; border-radius:10px; }
.zpa-subscribe__submit { flex:0 0 auto; }

.zpa-close__link { margin:26px 0 0; }
.zpa-close__link a {
	font-size:14px; font-weight:800; letter-spacing:var(--ls-eyebrow);
	text-transform:uppercase; color:rgba(255,255,255,.82);
	border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:3px;
}
.zpa-close__link a:hover { color:#fff; border-color:#fff; }

/* ==========================================================================
   RESPONSIVE
   Every grid on this page is two- or three-up at desktop and one-up below the
   shared breakpoint; the stat rules swap from vertical to horizontal so three
   stacked figures are still ruled apart.
   ========================================================================== */

@media (max-width:980px) {
	.zpa-open__lead { grid-template-columns:1fr; gap:36px; }
	.zpa-plus { grid-template-columns:1fr; gap:28px; padding:32px; }
	.zpa-plus__stats { padding-left:0; padding-top:28px; border-left:0; border-top:1px solid rgba(255,255,255,.14); }
}

@media (max-width:760px) {
	.zpa-open .zpx-wrap,
	.zpa-talk .zpx-wrap { padding-block:72px; }
	.zpa-shelf .zpx-wrap,
	.zpa-academy .zpx-wrap,
	.zpa-close .zpx-wrap { padding-block:72px; }

	.zpa-stats { grid-template-columns:1fr; padding:28px 0; }
	.zpa-stat { text-align:left; padding:0; }
	.zpa-stats .zpa-stat + .zpa-stat {
		border-left:0; border-top:1px solid rgba(255,255,255,.14);
		margin-top:24px; padding-top:24px;
	}
	.zpa-story { padding-top:48px; }
	.zpa-story p { font-size:17px; }
}