/* ==========================================================================
   AIR2BEE LANDING — "The Rider's Passbook"

   Visual world and durable rules: /DESIGN.md
   Owns the `a2b-` prefix. Never leak these rules into mms/ or corp/.

   The page is one physical object: a Malaysian buku akaun belonging to a Bee
   Rider. Cover-black board, pale security paper, printed columns, struck ink.
   Every element is a part the object already has — columns are columns, stamps
   are stamps, and the running balance column is the argument.
   ========================================================================== */

/* --- Fonts (self-hosted, no CDN) ---------------------------------------- */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 100% 125%;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 100% 125%;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Azeret Mono';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/azeretmono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Azeret Mono';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/azeretmono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
	/* Board + ink */
	--a2b-cover: #0E0F12;
	--a2b-cover-raised: #17191E;
	--a2b-ink: #14161A;
	--a2b-ink-soft: #3A3F45;

	/* Security paper */
	--a2b-paper: #EFF1EB;
	--a2b-leaf: #F7F8F4;
	--a2b-rule: #C6CCBF;
	--a2b-rule-soft: #DDE1D6;

	/* Brand amber (brief-pinned #F5B800) */
	--a2b-honey: #F5B800;
	--a2b-honey-deep: #C99700;
	--a2b-honey-foil: #FFD34D;

	/* Ledger convention */
	--a2b-kredit: #1F7A4C;
	--a2b-debit: #B3341F;

	/* Zones (from the brief's own zone colours) */
	--a2b-zone-east: #2F6BE0;
	--a2b-zone-north: #1F9D5B;
	--a2b-zone-south: #E8532E;
	--a2b-zone-central: #F5B800;

	/* Text on cover-black */
	--a2b-on-cover: #EFF1EB;
	--a2b-on-cover-soft: #9AA0A6;

	/* Shape */
	--a2b-r-sm: 2px;
	--a2b-r-md: 4px;
	--a2b-r-lg: 8px;
	--a2b-r-book: 3px;

	/* Rhythm */
	--a2b-fold: 41%;
	--a2b-row: 34px;
	--a2b-shell: 1180px;
	--a2b-gutter: 20px;
	--a2b-section: clamp(72px, 9vw, 128px);

	/* Depth — paper and board only. Ink never casts a shadow. */
	--a2b-sh-book: 0 2px 4px rgba(0, 0, 0, .28), 0 24px 60px rgba(0, 0, 0, .45);
	--a2b-sh-leaf: 0 1px 2px rgba(20, 22, 26, .06), 0 6px 18px rgba(20, 22, 26, .10);
	--a2b-sh-press: inset 0 1px 2px rgba(20, 22, 26, .14);

	--a2b-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.a2b-body {
	margin: 0;
	/*
	 * Every section declares its own explicit background (`.a2b-paper` or
	 * `.a2b-cover-section`), so this is only a fallback — but the floating
	 * header now exposes it in its own gutters and the strip above it. Paper,
	 * not board, keeps that fallback consistent with the page opening light.
	 */
	background: var(--a2b-paper);
	color: var(--a2b-ink);
	font-family: 'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	font-weight: 700;
	letter-spacing: -.02em;
	text-wrap: balance;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--a2b-ink);
	outline-offset: 2px;
	border-radius: var(--a2b-r-sm);
}

.a2b-on-cover :focus-visible,
.a2b-header :focus-visible,
.a2b-footer :focus-visible {
	outline-color: var(--a2b-honey);
}

.a2b-shell {
	width: 100%;
	max-width: var(--a2b-shell);
	margin: 0 auto;
	padding: 0 var(--a2b-gutter);
}

.a2b-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 14px 20px;
	background: var(--a2b-honey);
	color: var(--a2b-ink);
	font-weight: 700;
	text-decoration: none;
}

.a2b-skip:focus {
	left: 12px;
	top: 12px;
}

.a2b-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Type roles --------------------------------------------------------- */

.a2b-display {
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: .98;
	letter-spacing: -.03em;
}

.a2b-headline {
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.022em;
}

.a2b-title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.a2b-lede {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	line-height: 1.6;
	color: var(--a2b-ink-soft);
}

/* A named reference in running prose — ink, not amber, with a printed underline. */
.a2b-text-link {
	color: var(--a2b-ink);
	text-decoration: underline;
	text-decoration-color: var(--a2b-rule);
	text-underline-offset: .18em;
	white-space: nowrap;
}

.a2b-text-link:hover {
	text-decoration-color: var(--a2b-ink);
}

.a2b-prose {
	max-width: 66ch;
	line-height: 1.65;
	color: var(--a2b-ink-soft);
}

/* The eligibility checklist's self-playing demo, naming itself as one. */
.a2b-demo-note {
	margin-top: 10px;
	font-size: .8125rem;
	font-style: italic;
	color: var(--a2b-ink-soft);
}

/*
 * Printed labels only. Permitted where the object itself prints one — a column
 * header, a field caption, stamp text, the branch block. Never a section eyebrow.
 */
.a2b-label {
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
}

.a2b-label-bm {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--a2b-ink-soft);
	opacity: .72;
}

/* Every figure that sits in a column. Aligns by digit. */
.a2b-num {
	font-family: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: .01em;
}

/* --- Sections ----------------------------------------------------------- */

.a2b-section {
	padding: var(--a2b-section) 0;
}

/* Clear the sticky header so an anchored section never lands underneath it. */
[id] {
	scroll-margin-top: 84px;
}

.a2b-paper {
	position: relative;
	background-color: var(--a2b-paper);
	/* Faint security tint — the stock's own pattern, not decoration. */
	background-image:
		repeating-linear-gradient(90deg, rgba(198, 204, 191, .16) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, rgba(198, 204, 191, .10) 0 1px, transparent 1px 7px);
}

/*
 * Honeycomb ground: a hairline hex lattice drawn on canvas, replacing
 * .a2b-paper's own fine security-tint pattern on hosts that carry it — the
 * honeycomb is the only background texture here, not a second layer on
 * top of the first. .a2b-paper.a2b-hex-host beats .a2b-paper alone on
 * specificity regardless of source order, so this is a safe override.
 */
.a2b-paper.a2b-hex-host {
	background-image: none;
}

/*
 * The canvas is a positioned z-index:0 layer, which paints ABOVE plain
 * in-flow content per CSS stacking order — so the shell needs its own
 * stacking context above it, same fix the hero already needed for
 * .a2b-hero-inner.
 */
.a2b-hex-host > .a2b-shell {
	position: relative;
	z-index: 1;
}

.a2b-hex-field {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.a2b-cover-section {
	background: var(--a2b-cover);
	color: var(--a2b-on-cover);
}

.a2b-section-head {
	margin-bottom: 44px;
}

/* More space above a heading than below it. */
.a2b-section-head h2 {
	margin-bottom: 20px;
}

.a2b-section-head .a2b-lede {
	margin-top: 0;
}

/* --- Buttons ------------------------------------------------------------ */

/*
 * The stamp. A struck amber block that overprints the ruling beneath it and
 * ignores the grid. Exactly one per screen — it is the primary action.
 */
.a2b-stamp {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 28px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-honey);
	color: var(--a2b-ink);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transform: rotate(-1.8deg);
	transition: transform .32s var(--a2b-ease), background-color .2s ease;
}

/* The misregistered second impression — the object's own printing error. */
.a2b-stamp::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	transform: translate(3px, 2px);
	opacity: .16;
	pointer-events: none;
}

.a2b-stamp:hover,
.a2b-stamp:focus-visible {
	background: var(--a2b-honey-foil);
	transform: rotate(-.5deg);
	text-decoration: none;
	color: var(--a2b-ink);
}

.a2b-stamp:active {
	transform: rotate(0deg);
	box-shadow: var(--a2b-sh-press);
}

.a2b-stamp[disabled],
.a2b-stamp.is-disabled {
	background: var(--a2b-rule);
	border-color: var(--a2b-ink-soft);
	color: var(--a2b-ink-soft);
	cursor: not-allowed;
	transform: rotate(0deg);
	opacity: .8;
}

.a2b-stamp[disabled]::after,
.a2b-stamp.is-disabled::after {
	display: none;
}

.a2b-stamp-sm {
	padding: 12px 20px;
	font-size: .72rem;
}

/*
 * Chrome is not a screen. The grid-break belongs to the one primary action in
 * the content; a rotated stamp in a sticky header or the pinned flap reads as a
 * misalignment bug rather than a struck mark, so chrome stamps sit square.
 */
.a2b-header .a2b-stamp,
.a2b-header .a2b-stamp:hover,
.a2b-mobile-nav .a2b-stamp,
.a2b-mobile-nav .a2b-stamp:hover,
.a2b-flap .a2b-stamp,
.a2b-flap .a2b-stamp:hover {
	transform: none;
}

.a2b-header .a2b-stamp::after,
.a2b-mobile-nav .a2b-stamp::after,
.a2b-flap .a2b-stamp::after {
	display: none;
}

/* Secondary. Obeys the grid — only the primary breaks it. */
.a2b-ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 24px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	background: transparent;
	color: var(--a2b-ink);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.a2b-ghost:hover {
	border-color: var(--a2b-ink);
	background: rgba(20, 22, 26, .04);
	text-decoration: none;
	color: var(--a2b-ink);
}

.a2b-on-cover .a2b-ghost,
.a2b-footer .a2b-ghost {
	border-color: rgba(239, 241, 235, .28);
	color: var(--a2b-on-cover);
}

.a2b-on-cover .a2b-ghost:hover,
.a2b-footer .a2b-ghost:hover {
	border-color: var(--a2b-on-cover);
	background: rgba(239, 241, 235, .08);
	color: var(--a2b-on-cover);
}

/* --- Header ------------------------------------------------------------- */

/*
 * Paper, not board — the header opens the page on the same material family as
 * the hero, so it never reads as a dark bar dropped onto a light page. The
 * footer stays cover-black (it closes the book, not opens it), so every rule
 * below that the footer also depends on is scoped to `.a2b-header` rather than
 * changed at its shared base selector.
 *
 * Floats as a raised leaf — Paper Leaf, not Security Paper, the token this
 * system already reserves for "a leaf lying on top of the spread" (the
 * calculator body uses the same material) — with the object's own Leaf
 * shadow. No blur: the separation is a real object lifted off a real page,
 * not glass, which this system explicitly refuses as a category default.
 */
.a2b-header {
	position: sticky;
	top: 14px;
	z-index: 60;
	/* Caps at the same shell width as the page content beneath it, rather than
	   stretching edge-to-edge on wide viewports — the floating card lines up
	   with the hero and sections it sits above. */
	width: calc(100% - 2 * var(--a2b-gutter));
	max-width: var(--a2b-shell);
	margin: 14px auto 0;
	background: var(--a2b-leaf);
	color: var(--a2b-ink);
	border: 1px solid var(--a2b-rule-soft);
	border-radius: var(--a2b-r-md);
	box-shadow: var(--a2b-sh-leaf);
	/* Clips the mobile nav (an in-flow block, not an overlay) to the same
	   rounded corners when it opens, instead of squaring off past them. */
	overflow: hidden;
}

.a2b-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	/* The floating card is itself the constrained, margined element now; a second
	   max-width centered inside it would pad the two sides unevenly on wide
	   viewports instead of matching the card's own edges. */
	padding: 10px 22px;
}

.a2b-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--a2b-on-cover);
	text-decoration: none;
	flex-shrink: 0;
}

.a2b-logo:hover {
	color: var(--a2b-on-cover);
	text-decoration: none;
}

.a2b-header .a2b-logo,
.a2b-header .a2b-logo:hover {
	color: var(--a2b-ink);
}

.a2b-logo-lockup {
	display: block;
	width: auto;
	flex-shrink: 0;
}

.a2b-logo-lockup {
	height: 44px;
}

.a2b-footer .a2b-logo-lockup {
	height: 48px;
}

/* Footer links are on-cover-soft; the logo is an <a> so it would inherit that
   muted grey. On cover-black the name needs the paper token, and Bee Rider
   may be amber — the No-Amber-Text rule allows it on board, not on paper. */
.a2b-footer .a2b-logo,
.a2b-footer .a2b-logo:hover {
	color: var(--a2b-on-cover);
	text-decoration: none;
}

.a2b-footer .a2b-logo-sub {
	margin-top: 0;
	color: var(--a2b-honey-foil);
}

.a2b-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.a2b-logo-name {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.a2b-logo-sub {
	margin-top: 3px;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--a2b-honey);
}

/* No-Amber-Text Rule: on the paper header, "Bee Rider" can't be amber text.
   Honey Deep still fails at 2.3:1 on paper at this size; ink-soft clears the
   4.5:1 floor with room (9.3:1). */
.a2b-header .a2b-logo-sub {
	margin-top: 0;
	color: var(--a2b-ink-soft);
}

.a2b-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
}

.a2b-nav a {
	font-size: .875rem;
	font-weight: 600;
	color: var(--a2b-ink-soft);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.a2b-nav a:hover {
	color: var(--a2b-ink);
	text-decoration: none;
}

.a2b-nav a.is-active {
	color: var(--a2b-ink);
	border-bottom-color: var(--a2b-honey-deep);
}

.a2b-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.a2b-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	background: transparent;
	color: var(--a2b-ink);
	cursor: pointer;
}

.a2b-burger svg {
	width: 20px;
	height: 20px;
}

/* Open/close state is driven by aria-expanded, so the icon can never disagree
   with what assistive technology is told. */
.a2b-burger .a2b-burger-close,
.a2b-burger[aria-expanded="true"] .a2b-burger-open {
	display: none;
}

.a2b-burger[aria-expanded="true"] .a2b-burger-close {
	display: block;
}

.a2b-mobile-nav {
	display: none;
	flex-direction: column;
	padding: 8px var(--a2b-gutter) 22px;
	border-top: 1px solid var(--a2b-rule-soft);
}

.a2b-mobile-nav.is-open {
	display: flex;
}

.a2b-mobile-nav a {
	padding: 14px 0;
	border-bottom: 1px solid var(--a2b-rule-soft);
	font-size: 1rem;
	font-weight: 600;
	color: var(--a2b-ink);
	text-decoration: none;
}

.a2b-mobile-nav .a2b-stamp {
	margin-top: 20px;
	align-self: flex-start;
}

/* --- The book ----------------------------------------------------------- */

/*
 * Paper, not board, for the first viewport: the passbook's own security-paper
 * tone rather than cover-black. Deliberately not `.a2b-on-cover` — that class
 * governs several elements (header, footer, flap) that stay on cover-black, and
 * the hero's children (kicker, lede, note, ghost button) need their own ink-on-
 * paper treatment below rather than inheriting cover-black's light-on-dark set.
 */
.a2b-hero {
	position: relative;
	/* Bottom is 0 so the rider's wheels sit on the section edge, not on a strip of paper. */
	padding: clamp(48px, 6vw, 84px) 0 0;
	background: var(--a2b-paper);
	color: var(--a2b-ink);
	overflow: hidden;
}

/* A single warm pool of light on the counter the book is lying on. */
.a2b-hero::before {
	content: "";
	position: absolute;
	top: -22%;
	left: 50%;
	width: min(1200px, 130%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(245, 184, 0, .16), transparent 62%);
	opacity: .7;
	pointer-events: none;
}

.a2b-hero-inner {
	position: relative;
	/* Lifts the book and the copy clear of the Swarm crossing behind them. */
	z-index: 1;
	display: grid;
	/*
	 * Copy is a fixed measure so the headline never rewraps when the rider
	 * grows. He takes the rest of the row; column-gap is 0 because the cutout
	 * already carries empty space on its left — a grid gap on top of that
	 * was the dead band in the middle of the hero.
	 */
	grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
	column-gap: 0;
	align-items: start;
}

/*
 * The Swarm — flight traces crossing the board behind the book. Each lane owns its
 * own crossing time (--d), phase offset (--o) and bob period (--b), so the field
 * never settles into a visible cycle. Transform-only, so the whole field stays on
 * the compositor.
 *
 * The field clips itself rather than leaning on .a2b-hero's overflow: hidden — a
 * lane travelling past the edge would otherwise leave the hero a scrollable box.
 */
.a2b-flight {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.a2b-flight-lane {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--y);
	animation: a2bFlightCross calc(var(--d) * 1s) linear infinite;
	animation-delay: calc(var(--o) * -1s);
}

.a2b-flight-trace {
	display: block;
	position: relative;
	width: 3px;
	height: 3px;
	background: var(--a2b-honey);
	opacity: .55;
	animation: a2bFlightBob calc(var(--b) * 1s) ease-in-out infinite alternate;
}

/* The trace a flight leaves behind it on the plate. */
.a2b-flight-trace::after {
	content: "";
	position: absolute;
	top: 1px;
	right: 4px;
	width: 22px;
	height: 1px;
	background: linear-gradient(270deg, rgba(245, 184, 0, .5), rgba(245, 184, 0, 0));
}

@keyframes a2bFlightCross {
	from { transform: translateX(-8%); }
	to { transform: translateX(108%); }
}

@keyframes a2bFlightBob {
	from { transform: translateY(-14px); }
	to { transform: translateY(14px); }
}

/*
 * The hero headline is set below the global display maximum on purpose: at the
 * full 5.2rem it runs to five lines in this column and pushes the passbook —
 * the actual thesis — out of the first viewport.
 */
.a2b-hero-copy h1 {
	margin-bottom: 22px;
	font-size: clamp(2.35rem, 4.4vw, 3.9rem);
}

/*
 * The headline as a weighted progression: the setup sets small and muted, the
 * payoff carries the full display weight. Both spans need `display: block` —
 * inline by default — to stack as two lines in place of the old manual `<br>`.
 */
.a2b-hero-copy h1 .a2b-headline-lead {
	display: block;
	font-size: .58em;
	font-weight: 700;
	color: var(--a2b-ink-soft);
	letter-spacing: -.01em;
}

.a2b-hero-copy h1 .a2b-headline-pay {
	display: block;
}

.a2b-hero-copy .a2b-lede {
	color: var(--a2b-ink-soft);
	max-width: 46ch;
}

/*
 * The No-Amber-Text Rule: on paper, amber may only be a fill, a rule, or a
 * marker, never text. The label stays ink; the dot keeps its amber fill by
 * setting currentColor locally on the svg rather than inheriting the kicker's
 * (ink) text color.
 */
.a2b-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	padding: 7px 13px;
	border: 1px solid rgba(20, 22, 26, .22);
	border-radius: var(--a2b-r-sm);
	color: var(--a2b-ink);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.a2b-hero-kicker svg {
	width: 13px;
	height: 13px;
	color: var(--a2b-honey-deep);
}

.a2b-hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-top: 38px;
}

.a2b-hero-note {
	margin-top: 22px;
	font-size: .8125rem;
	color: var(--a2b-ink-soft);
}

/* A hairline edge keeps the book a distinct object: its own paper tone sits
   close enough to the hero's ground that the shadow alone loses definition at
   low zoom, and a printed line is this object's own language. */

/* The passbook object itself. */
/*
 * The rider — the hero's object, in the slot the passbook used to hold. A cutout
 * standing directly on the security paper: the page carries no photographic
 * frames, so he gets no border, no card and no shadow.
 *
 * Second column of .a2b-hero-inner. Copy keeps a fixed 36rem measure so sizing
 * him never rewraps the headline. align-self: end plus padding-bottom: 0 puts
 * his wheels on the section edge with no strip of paper beneath them.
 *
 * Painted as a background, not an <img>, because he is decorative — everything he
 * shows (jacket, box) is named in the starter-package slip.
 */
.a2b-hero-rider {
	position: relative;
	align-self: end;
	animation: a2bRiderArrive 5.0s var(--a2b-ease) .08s both;
	/*
	 * He lives in the shell, not on the viewport's right edge. Copy is in the
	 * shell; pinning him to the viewport was what opened the dead band between
	 * them on a wide screen.
	 *
	 * The cutout is empty ~36% in at CTA height and ~44% at the helmet, so the
	 * negative margin pulls that empty left under the copy. Copy paints above
	 * him (z-index) — the scooter reads as sitting against the type, not across
	 * a gap. Width is the rest of the shell plus that overlap plus the gutter,
	 * which lands his right edge on the header's.
	 */
	z-index: 0;
	margin-left: -26rem;
	width: calc(100% + 26rem + var(--a2b-gutter));
	max-width: none;
	aspect-ratio: 1436 / 1096;
	background: url("../img/rider-hero.webp?v=20260914f") no-repeat left bottom / contain;
	pointer-events: none;
}

@keyframes a2bRiderArrive {
	from {
		opacity: 0;
		transform: translate(28px, 14px) scale(.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.a2b-hero-copy {
	position: relative;
	z-index: 1;
}

/*
 * Earnings: the legend on the left, the passbook beside it on the right. The book
 * moved here from the hero so the running balance lands next to the three ways of
 * earning it is evidence for, instead of arguing on its own above them.
 *
 * align-items: start keeps the book's top edge on the legend's, so the two read as
 * a spread rather than two floating blocks.
 */
.a2b-earnings-grid {
	display: grid;
	/*
	 * The book takes the larger share for the same reason it did in the hero: its
	 * ledger leaf sets full transaction words ("Commission"), and the code column
	 * triggers the cell's ellipsis truncation without the extra room.
	 */
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

/*
 * The legend now sets in roughly a third of the width it had when it ran the full
 * shell, so its two columns are rebalanced and the frequency chip is allowed to
 * wrap. Left at nowrap it overflows its cell and runs under the book, which paints
 * over it — the text does not clip, it disappears.
 */
.a2b-earnings-grid .a2b-legend col.a2b-col-legend-name { width: 60%; }
.a2b-earnings-grid .a2b-legend col.a2b-col-legend-freq { width: 40%; }

.a2b-earnings-grid .a2b-freq {
	white-space: normal;
}

.a2b-book {
	position: relative;
	display: grid;
	/* The ledger leaf needs the width; the blank leaf does not. One variable drives
	   both the leaf split and the crease, so the fold can never drift off the seam. */
	grid-template-columns: var(--a2b-fold) minmax(0, 1fr);
	border-radius: var(--a2b-r-book);
	background: var(--a2b-paper);
	outline: 1px solid var(--a2b-rule);
	outline-offset: 0;
	/* Leaf edges stacked behind the open spread — the object has thickness. */
	box-shadow:
		7px 7px 0 -1px var(--a2b-leaf),
		7px 7px 0 0 rgba(20, 22, 26, .45),
		13px 13px 0 -1px var(--a2b-paper),
		13px 13px 0 0 rgba(20, 22, 26, .32),
		var(--a2b-sh-book);
	transform: rotate(.5deg);
	/* Clips the leaves to the board's corners; own box-shadows are unaffected. */
	overflow: hidden;
}

/* The spine — the crease the two leaves fold into, pinned to the actual seam. */
.a2b-book::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--a2b-fold);
	width: 26px;
	transform: translateX(-50%);
	background: linear-gradient(90deg,
		rgba(20, 22, 26, 0) 0%,
		rgba(20, 22, 26, .09) 38%,
		rgba(20, 22, 26, .16) 50%,
		rgba(20, 22, 26, .09) 62%,
		rgba(20, 22, 26, 0) 100%);
	pointer-events: none;
	z-index: 2;
}

.a2b-page {
	position: relative;
	padding: 22px 20px;
	background-color: var(--a2b-paper);
	background-image:
		repeating-linear-gradient(90deg, rgba(198, 204, 191, .18) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, rgba(198, 204, 191, .12) 0 1px, transparent 1px 7px);
	min-width: 0;
}

.a2b-page-left {
	border-right: 1px solid var(--a2b-rule-soft);
}

/* The account-holder block on the left leaf. */
.a2b-holder {
	display: grid;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--a2b-ink);
}

.a2b-holder-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3px;
}

.a2b-holder-value {
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--a2b-ink);
	font-variant-numeric: tabular-nums;
}

.a2b-holder-blank {
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--a2b-rule) 0 6px, transparent 6px 11px);
}

/* Empty ruled lines — the rider who hasn't started yet. */
.a2b-ruled-blank {
	display: grid;
	gap: 0;
}

.a2b-ruled-blank span {
	display: block;
	height: var(--a2b-row);
	border-bottom: 1px solid var(--a2b-rule-soft);
}

.a2b-page-note {
	margin-top: 14px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
	opacity: .8;
}

.a2b-page-note span {
	display: block;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .06em;
	opacity: .75;
}

/* --- Ledger ------------------------------------------------------------- */

.a2b-ledger {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	color: var(--a2b-ink);
}

.a2b-ledger caption {
	padding-bottom: 10px;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
	text-align: left;
}

.a2b-ledger th {
	padding: 0 8px 8px;
	border-bottom: 2px solid var(--a2b-ink);
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
	text-align: left;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Scoped to the table, not to `th`: the English gloss is also used in tfoot. */
.a2b-ledger .a2b-th-en {
	display: block;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: .58rem;
	font-weight: 600;
	opacity: .7;
	letter-spacing: .06em;
}

.a2b-ledger th.a2b-r,
.a2b-ledger td.a2b-r {
	text-align: right;
}

.a2b-ledger td {
	height: var(--a2b-row);
	padding: 0 8px;
	border-bottom: 1px solid var(--a2b-rule-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * The columns are printed, not implied. A ledger's vertical rules are the reason
 * a figure belongs to a column at all; leaving them to whitespace makes the table
 * a web layout wearing a ledger's clothes.
 */
.a2b-ledger th + th,
.a2b-ledger td + td {
	border-left: 1px solid var(--a2b-rule);
}

.a2b-ledger tbody tr:nth-child(even) {
	background: rgba(198, 204, 191, .18);
}

.a2b-ledger .a2b-code {
	font-weight: 700;
	letter-spacing: .04em;
}

/*
 * The hero passbook's transaction column now sets full words ("Commission"),
 * not four-letter codes — the bold monospace .a2b-code style below was tuned
 * for a 4-character cell and clips a real word at this column's width. Its
 * own proportional, unbolded type needs roughly half the room.
 */
.a2b-ledger-hero .a2b-cell-code {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: normal;
}

.a2b-ledger .a2b-desc {
	white-space: normal;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: .8125rem;
}

.a2b-ledger .a2b-kredit {
	color: var(--a2b-kredit);
	font-weight: 600;
}

.a2b-ledger .a2b-debit {
	color: var(--a2b-debit);
	font-weight: 600;
}

.a2b-ledger .a2b-baki {
	font-weight: 700;
	color: var(--a2b-ink);
}

/*
 * The latest balance carries the amber underscore. Targeted by class rather than
 * :last-child — the last row in the body is not always the row holding a balance.
 */
.a2b-ledger .a2b-baki-latest {
	box-shadow: inset 0 -3px 0 var(--a2b-honey);
}

.a2b-ledger .a2b-repeat td {
	color: var(--a2b-ink-soft);
}

.a2b-ledger-foot td {
	height: 42px;
	border-bottom: none;
	border-top: 2px solid var(--a2b-ink);
	font-weight: 700;
}

/* Progressive print — only when JS opts in and motion is allowed. */
.a2b-ledger.is-printing tbody tr {
	opacity: 0;
	transform: translateY(-4px);
}

.a2b-ledger.is-printing tbody tr.is-struck {
	opacity: 1;
	transform: none;
	transition: opacity .18s ease-out, transform .3s var(--a2b-ease);
}

/*
 * Inside the book the ledger must fit the leaf, never define its width.
 * `table-layout: fixed` stops the longest cell from forcing the table wider
 * than its page and clipping the BAKI column — which is the whole argument.
 */
.a2b-book .a2b-ledger {
	table-layout: fixed;
	font-size: .8125rem;
}

.a2b-book .a2b-ledger caption {
	white-space: normal;
	font-size: .62rem;
	line-height: 1.45;
	padding-bottom: 8px;
}

.a2b-book .a2b-ledger th,
.a2b-book .a2b-ledger td {
	padding: 0 5px;
}

.a2b-book .a2b-ledger th {
	font-size: .58rem;
	letter-spacing: .06em;
}

.a2b-book .a2b-ledger th .a2b-th-en {
	font-size: .58rem;
}

/*
 * Column boundaries are declared once here and reused by both the table's
 * colgroup and the ruling that continues under the blank rows below it, so the
 * printed rules can never drift out of register with the entries.
 */
.a2b-page {
	/* Code column widened for full transaction words ("Commission") rather
	   than four-letter codes; borrowed from the date column, which has room. */
	--a2b-c1: 24%;
	--a2b-c2: 52%;
	--a2b-c3: 74%;
}

.a2b-book .a2b-ledger col.a2b-col-date { width: var(--a2b-c1); }
.a2b-book .a2b-ledger col.a2b-col-code { width: calc(var(--a2b-c2) - var(--a2b-c1)); }
.a2b-book .a2b-ledger col.a2b-col-in { width: calc(var(--a2b-c3) - var(--a2b-c2)); }
.a2b-book .a2b-ledger col.a2b-col-baki { width: calc(100% - var(--a2b-c3)); }

/* The ruling runs the full height of the leaf, not only the occupied rows. */
.a2b-page > .a2b-ruled-blank {
	background-image:
		linear-gradient(90deg,
			transparent 0 var(--a2b-c1),
			var(--a2b-rule) var(--a2b-c1) calc(var(--a2b-c1) + 1px),
			transparent calc(var(--a2b-c1) + 1px) var(--a2b-c2),
			var(--a2b-rule) var(--a2b-c2) calc(var(--a2b-c2) + 1px),
			transparent calc(var(--a2b-c2) + 1px) var(--a2b-c3),
			var(--a2b-rule) var(--a2b-c3) calc(var(--a2b-c3) + 1px),
			transparent calc(var(--a2b-c3) + 1px));
}

/* The blank leaf has no columns to continue. */
.a2b-page-left > .a2b-ruled-blank {
	background-image: none;
}

.a2b-book .a2b-ledger-foot td {
	font-size: .68rem;
	white-space: normal;
	line-height: 1.35;
}

/* --- Transaction-code legend -------------------------------------------- */

.a2b-legend {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	table-layout: fixed;
}

/* Keeps the frequency chip beside what it qualifies instead of stranded at the
   far right of an over-wide description column. */
.a2b-legend col.a2b-col-legend-name { width: 70%; }
.a2b-legend col.a2b-col-legend-freq { width: 30%; }

.a2b-legend-caption {
	padding-bottom: 14px;
	font-size: .8125rem;
	color: var(--a2b-ink-soft);
	text-align: left;
	caption-side: top;
}

.a2b-legend th {
	padding: 0 14px 12px;
	border-bottom: 2px solid var(--a2b-ink);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
	white-space: nowrap;
}

.a2b-legend td {
	padding: 20px 14px;
	border-bottom: 1px solid var(--a2b-rule);
	vertical-align: top;
}

.a2b-legend tr:last-child td {
	border-bottom: none;
}

.a2b-legend-name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.a2b-legend-bm {
	display: block;
	margin-top: 2px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
}

.a2b-legend-desc {
	margin-top: 8px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--a2b-ink-soft);
	max-width: 46ch;
}

/*
 * The frequency column is the argument: only one of the four is recurring.
 * That single word is why a rider chooses Air2Bee over a per-trip platform.
 */
.a2b-freq {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	white-space: nowrap;
	color: var(--a2b-ink-soft);
}

.a2b-freq-recurring {
	border-color: var(--a2b-ink);
	background: var(--a2b-honey);
	color: var(--a2b-ink);
	font-weight: 700;
}

/* --- Calculator --------------------------------------------------------- */

.a2b-calc {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 0;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-lg);
	background: var(--a2b-leaf);
	box-shadow: var(--a2b-sh-leaf);
	overflow: hidden;
}

.a2b-calc-controls {
	padding: 30px 28px;
	border-right: 1px solid var(--a2b-rule);
	background: var(--a2b-paper);
}

.a2b-calc-out {
	padding: 30px 28px;
	min-width: 0;
}

.a2b-field {
	margin-bottom: 30px;
}

.a2b-field:last-child {
	margin-bottom: 0;
}

.a2b-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

/*
 * Control readouts are not ledger columns, so they take Archivo. In Azeret Mono
 * the comma occupies a full monospace cell and "RM1,000" reads as "RM1 , 000".
 * Tabular figures are kept so the value does not jitter as the slider moves.
 */
.a2b-field-value {
	font-size: 1.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: var(--a2b-ink);
}

/* Range control, restyled as a ruled scale. */
.a2b-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 26px;
	background: transparent;
	cursor: pointer;
}

.a2b-range::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--a2b-rule);
	border-radius: 0;
}

.a2b-range::-moz-range-track {
	height: 4px;
	background: var(--a2b-rule);
	border-radius: 0;
}

.a2b-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 26px;
	margin-top: -11px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-honey);
}

.a2b-range::-moz-range-thumb {
	width: 18px;
	height: 26px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-honey);
}

.a2b-range-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .68rem;
	color: var(--a2b-ink-soft);
}

.a2b-segmented {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* A label wrapping a visually-hidden radio: native single-select and native
   arrow-key navigation, styled as a struck segment. */
.a2b-seg {
	flex: 1 1 auto;
	display: block;
	position: relative;
	padding: 12px 10px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-leaf);
	font-size: .875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--a2b-ink-soft);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.a2b-seg input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.a2b-seg:hover {
	border-color: var(--a2b-ink);
	color: var(--a2b-ink);
}

.a2b-seg.is-on {
	border-color: var(--a2b-ink);
	background: var(--a2b-honey);
	color: var(--a2b-ink);
}

/*
 * The hidden input takes the focus, so the visible segment carries its ring.
 * :focus-within is the floor (it also fires on mouse, which is safe but noisy);
 * where :has() is supported the ring narrows to keyboard focus only.
 */
.a2b-seg:focus-within {
	outline: 2px solid var(--a2b-ink);
	outline-offset: 2px;
}

@supports selector(:has(*)) {
	.a2b-seg:focus-within {
		outline: none;
	}

	.a2b-seg:has(input:focus-visible) {
		outline: 2px solid var(--a2b-ink);
		outline-offset: 2px;
	}
}

.a2b-calc-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 14px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 2px solid var(--a2b-ink);
}

.a2b-calc-figure {
	font-size: clamp(2.2rem, 5.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
	color: var(--a2b-ink);
	/*
	 * A marker stroke laid over the figure, the way someone highlights the line
	 * that matters in their own book. Painted as a background band rather than an
	 * inset shadow stripe, which renders as a card tab.
	 */
	background: linear-gradient(to top,
		rgba(245, 184, 0, .55) 0 .26em,
		transparent .26em);
}

.a2b-calc-figure-unit {
	font-size: 1rem;
	font-weight: 600;
	color: var(--a2b-ink-soft);
	padding-bottom: 6px;
}

.a2b-calc-note {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--a2b-ink-soft);
}

/* Working, not a column — Archivo, per the Tabular Rule. */
.a2b-calc-working {
	margin-top: 14px;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
	color: var(--a2b-ink-soft);
}

/* --- The single debit: starter package ---------------------------------- */

.a2b-debit-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.a2b-slip {
	position: relative;
	padding: 28px 26px 30px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-md);
	background: var(--a2b-leaf);
	box-shadow: var(--a2b-sh-leaf);
}

/* A real tear line, not a decorative dashed border. */
.a2b-slip::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 6px;
	background: repeating-linear-gradient(90deg,
		var(--a2b-paper) 0 7px, transparent 7px 14px);
}

.a2b-slip-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--a2b-ink);
}

/* Standalone display figure, not a ruled column — see the comma/period note above. */
.a2b-slip-amount {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--a2b-debit);
}

.a2b-slip-total-amount {
	font-size: 1.0625rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/*
 * A struck one-time mark. Square on purpose: the rotated grid-break belongs to
 * the primary action alone, and a second tilted element would cancel it out.
 */
/* Ink, not red: the One Debit Rule reserves red for the −200.00 alone, and both
   sit in the same viewport. */
.a2b-once-stamp {
	display: inline-block;
	margin-top: 32px;
	padding: 16px 22px;
	border: 3px double var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	color: var(--a2b-ink);
}

.a2b-once-stamp b {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.1;
}

.a2b-once-stamp span {
	display: block;
	margin-top: 3px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .8;
}

.a2b-slip-list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	padding: 11px 0;
	border-bottom: 1px solid var(--a2b-rule-soft);
	font-size: .9375rem;
	line-height: 1.5;
}

.a2b-slip-list li:last-child {
	border-bottom: none;
}

.a2b-slip-list svg {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--a2b-ink);
	flex-shrink: 0;
}

.a2b-slip-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 2px solid var(--a2b-ink);
	font-weight: 700;
}

/* --- Eligibility -------------------------------------------------------- */

.a2b-eligible {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.a2b-checks {
	display: grid;
	gap: 0;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-md);
	background: var(--a2b-leaf);
	box-shadow: var(--a2b-sh-leaf);
	overflow: hidden;
}

.a2b-check {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--a2b-rule-soft);
	background: transparent;
	border-left: none;
	border-right: none;
	border-top: none;
	width: 100%;
	text-align: left;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--a2b-ink);
	cursor: pointer;
	transition: background-color .16s ease;
}

.a2b-check:last-child {
	border-bottom: none;
}

.a2b-check:hover {
	background: rgba(198, 204, 191, .22);
}

.a2b-check-box {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-paper);
	flex-shrink: 0;
}

.a2b-check-box svg {
	position: absolute;
	inset: -3px -2px;
	width: 26px;
	height: 26px;
	color: var(--a2b-ink);
	opacity: 0;
	transform: scale(.7) rotate(-8deg);
	transition: opacity .14s ease-out, transform .26s var(--a2b-ease);
}

.a2b-check.is-on .a2b-check-box svg {
	opacity: 1;
	transform: scale(1) rotate(-4deg);
}

.a2b-check.is-on {
	background: rgba(245, 184, 0, .12);
}

.a2b-verdict {
	margin-top: 22px;
	padding: 22px 24px;
	border: 2px dashed var(--a2b-rule);
	border-radius: var(--a2b-r-md);
	text-align: center;
	color: var(--a2b-ink-soft);
	font-size: .9375rem;
}

.a2b-verdict.is-eligible {
	border-style: solid;
	border-color: var(--a2b-ink);
	background: var(--a2b-honey);
	color: var(--a2b-ink);
}

/* Sits on the amber verdict panel, so it inverts to ink rather than amber-on-amber. */
.a2b-verdict-cta {
	margin-top: 18px;
	background: var(--a2b-ink);
	border-color: var(--a2b-ink);
	color: var(--a2b-honey);
}

.a2b-verdict-cta:hover,
.a2b-verdict-cta:focus-visible {
	background: var(--a2b-cover);
	color: var(--a2b-honey-foil);
}

.a2b-verdict-stamp {
	display: block;
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --- Coverage / branch block -------------------------------------------- */

.a2b-zones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.a2b-zone {
	padding: 22px 20px 24px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-md);
	background: var(--a2b-leaf);
}

/*
 * Zone identity is a printed colour key — a solid swatch beside the code, the
 * way a branch index is marked. A thick coloured top border on a rounded card
 * is the generic card tell and belongs to no part of this object.
 */
.a2b-zone-code {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	/* Two-line reserve keeps all four zone titles on one baseline when a longer
	   zone label ("North & Northwest") wraps. */
	min-height: 2.1rem;
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .1em;
	color: var(--a2b-ink-soft);
}

.a2b-zone-code::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-top: .1rem;
	flex-shrink: 0;
	background: var(--a2b-zone);
	border: 1px solid rgba(20, 22, 26, .28);
}

.a2b-zone-name {
	margin: 6px 0 14px;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.a2b-zone-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.a2b-zone-areas li {
	padding: 5px 9px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	font-size: .8125rem;
	color: var(--a2b-ink-soft);
	background: var(--a2b-paper);
}

/* --- Swarm / signatory block -------------------------------------------- */

.a2b-swarm {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border: 1px solid rgba(239, 241, 235, .18);
	border-radius: var(--a2b-r-md);
	overflow: hidden;
}

.a2b-swarm-tier {
	position: relative;
	padding: 28px 24px 30px;
	border-right: 1px solid rgba(239, 241, 235, .18);
}

.a2b-swarm-tier:last-child {
	border-right: none;
}

.a2b-swarm-tier.is-you {
	background: rgba(245, 184, 0, .1);
}

.a2b-swarm-rank {
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--a2b-honey);
}

.a2b-swarm-name {
	margin: 10px 0 10px;
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--a2b-on-cover);
}

.a2b-swarm-desc {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--a2b-on-cover-soft);
}

.a2b-swarm-ratio {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 10px;
	border: 1px solid rgba(239, 241, 235, .28);
	border-radius: var(--a2b-r-sm);
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .72rem;
	color: var(--a2b-on-cover);
}

.a2b-support {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 26px 32px;
	margin-top: 44px;
	padding-top: 40px;
	border-top: 1px solid rgba(239, 241, 235, .18);
}

.a2b-support-item svg {
	width: 26px;
	height: 26px;
	margin-bottom: 12px;
	color: var(--a2b-honey);
}

.a2b-support-item h3 {
	margin-bottom: 7px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--a2b-on-cover);
}

.a2b-support-item p {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--a2b-on-cover-soft);
}

/* --- Sign-up form ------------------------------------------------------- */

.a2b-signup {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.a2b-steps {
	counter-reset: a2b-step;
	margin-top: 30px;
}

.a2b-steps li {
	position: relative;
	counter-increment: a2b-step;
	padding: 0 0 26px 46px;
	border-left: 1px solid var(--a2b-rule);
	margin-left: 13px;
}

.a2b-steps li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.a2b-steps li::before {
	content: counter(a2b-step);
	position: absolute;
	left: -14px;
	top: -2px;
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-honey);
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--a2b-ink);
}

.a2b-step-name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.a2b-step-desc {
	margin-top: 5px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--a2b-ink-soft);
}

.a2b-form {
	padding: 30px 28px 32px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-md);
	background: var(--a2b-leaf);
	box-shadow: var(--a2b-sh-leaf);
}

.a2b-form-head {
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--a2b-ink);
}

.a2b-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.a2b-form-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.a2b-form-field.is-wide {
	grid-column: 1 / -1;
}

.a2b-form-field label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a2b-ink-soft);
}

.a2b-input,
.a2b-select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--a2b-rule);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-paper);
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--a2b-ink);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.a2b-input::placeholder {
	color: #656A72;
}

/*
 * Suppress the ring only for pointer focus. A blanket `outline: none` on :focus
 * out-specifies the global :focus-visible rule and strips the keyboard ring from
 * every control on the form.
 */
.a2b-input:focus:not(:focus-visible),
.a2b-select:focus:not(:focus-visible) {
	outline: none;
}

.a2b-input:focus,
.a2b-select:focus {
	border-color: var(--a2b-ink);
	box-shadow: var(--a2b-sh-press);
}

.a2b-select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2314161A' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

.a2b-input.is-invalid,
.a2b-select.is-invalid {
	border-color: var(--a2b-debit);
	border-width: 2px;
}

.a2b-error {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--a2b-debit);
}

.a2b-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--a2b-rule);
}

.a2b-form-fineprint {
	flex: 1 1 200px;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--a2b-ink-soft);
}

/* Submission is not wired yet — this notice is the honest state. */
.a2b-form-notice {
	margin-top: 22px;
	padding: 16px 18px;
	border: 2px solid var(--a2b-ink);
	border-radius: var(--a2b-r-sm);
	background: var(--a2b-honey);
	color: var(--a2b-ink);
	font-size: .9375rem;
	line-height: 1.55;
}

.a2b-form-notice strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 800;
}

/* --- FAQ / back-cover terms --------------------------------------------- */

.a2b-faq {
	max-width: 820px;
	border-top: 2px solid var(--a2b-ink);
}

.a2b-faq-item {
	border-bottom: 1px solid var(--a2b-rule);
}

.a2b-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 0;
	border: none;
	background: transparent;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: left;
	color: var(--a2b-ink);
	cursor: pointer;
}

.a2b-faq-q svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform .3s var(--a2b-ease);
}

.a2b-faq-item.is-open .a2b-faq-q svg {
	transform: rotate(45deg);
}

.a2b-faq-a {
	display: none;
	padding: 0 0 24px;
	max-width: 66ch;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--a2b-ink-soft);
}

.a2b-faq-item.is-open .a2b-faq-a {
	display: block;
}

.a2b-tbc {
	display: inline-block;
	padding: 2px 7px;
	border: 1px dashed var(--a2b-debit);
	border-radius: var(--a2b-r-sm);
	font-family: 'Azeret Mono', ui-monospace, monospace;
	font-size: .72rem;
	font-weight: 600;
	color: var(--a2b-debit);
	background: rgba(179, 52, 31, .06);
}

/* Debit red is unreadable on cover-black (3.1:1). On the board, the marker is
   amber — still unmistakably "unfinished", and legible at 10.7:1. */
.a2b-footer .a2b-tbc,
.a2b-cover-section .a2b-tbc {
	border-color: var(--a2b-honey);
	color: var(--a2b-honey);
	background: rgba(245, 184, 0, .08);
}

/* --- Closing ------------------------------------------------------------ */

.a2b-close {
	text-align: center;
}

.a2b-close h2 {
	margin: 0 auto 20px;
	max-width: 18ch;
	color: var(--a2b-on-cover);
}

.a2b-close .a2b-lede {
	margin: 0 auto;
	color: var(--a2b-on-cover-soft);
	max-width: 52ch;
}

.a2b-close-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 20px;
	margin-top: 40px;
}

/* --- Footer ------------------------------------------------------------- */

.a2b-footer {
	padding: clamp(56px, 6vw, 84px) 0 0;
	background: var(--a2b-cover);
	color: var(--a2b-on-cover-soft);
	border-top: 1px solid rgba(239, 241, 235, .14);
}

.a2b-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 36px;
	padding-bottom: 44px;
}

.a2b-footer h3 {
	margin-bottom: 14px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a2b-on-cover);
}

.a2b-footer li {
	margin-bottom: 9px;
	font-size: .9375rem;
}

.a2b-footer a {
	color: var(--a2b-on-cover-soft);
	text-decoration: none;
}

.a2b-footer a:hover {
	color: var(--a2b-on-cover);
	text-decoration: underline;
}

.a2b-footer-note {
	margin-top: 14px;
	max-width: 34ch;
	font-size: .875rem;
	line-height: 1.6;
}

.a2b-footer-bar {
	padding: 20px 0;
	border-top: 1px solid rgba(239, 241, 235, .14);
	font-size: .8125rem;
}

.a2b-footer-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* --- Sticky mobile action bar (the back-cover flap) --------------------- */

.a2b-flap {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--a2b-cover);
	border-top: 1px solid rgba(239, 241, 235, .18);
	color: var(--a2b-on-cover);
}

.a2b-flap-figure {
	font-size: 1.0625rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	color: var(--a2b-honey);
}

.a2b-flap-figure small {
	font-size: .68rem;
	font-weight: 700;
	opacity: .8;
}

.a2b-flap-label {
	display: block;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a2b-on-cover-soft);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
	.a2b-hero {
		padding-bottom: clamp(24px, 4vw, 48px);
	}

	.a2b-hero-inner {
		grid-template-columns: 1fr;
		gap: 48px;
		align-items: start;
	}

	.a2b-earnings-grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Stacked, the rider would stretch to the full shell — 1436px, the source
	 * width. Capped and centred he stays above 2x, and a full-bleed rider on a
	 * tablet was too much anyway.
	 */
	.a2b-hero-rider {
		position: static;
		align-self: center;
		width: 100%;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
	}

	.a2b-book {
		transform: rotate(0deg);
	}

	.a2b-calc {
		grid-template-columns: 1fr;
	}

	.a2b-calc-controls {
		border-right: none;
		border-bottom: 1px solid var(--a2b-rule);
	}
}

@media (max-width: 900px) {
	.a2b-nav {
		display: none;
	}

	.a2b-header-actions .a2b-stamp {
		display: none;
	}

	.a2b-burger {
		display: inline-flex;
	}

	.a2b-header-actions {
		margin-left: auto;
	}

	/*
	 * The book folds to a single leaf, and the blank leaf is dropped entirely.
	 * On a phone it would put ~380px of empty ruled lines between the headline
	 * and the ledger — burying the argument behind its own setup.
	 */
	.a2b-book {
		grid-template-columns: 1fr;
	}

	.a2b-book::after {
		display: none;
	}

	.a2b-page-left {
		display: none;
	}

	.a2b-debit-block,
	.a2b-eligible,
	.a2b-signup {
		grid-template-columns: 1fr;
	}

	.a2b-swarm {
		grid-template-columns: 1fr;
	}

	.a2b-swarm-tier {
		border-right: none;
		border-bottom: 1px solid rgba(239, 241, 235, .18);
	}

	.a2b-swarm-tier:last-child {
		border-bottom: none;
	}

	.a2b-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.a2b-flap {
		display: flex;
	}

	/* Clear the pinned flap so it never covers the last row of content. */
	body.a2b-body {
		padding-bottom: 78px;
	}
}

@media (max-width: 720px) {
	/*
	 * Ledger tables never scroll sideways on a phone. Each row becomes a
	 * two-line entry, and the balance column keeps its alignment because the
	 * balance is the argument.
	 */
	.a2b-ledger,
	.a2b-ledger tbody,
	.a2b-ledger tr,
	.a2b-ledger td {
		display: block;
		width: 100%;
	}

	.a2b-ledger thead {
		display: none;
	}

	/*
	 * A `table-caption` box inside a block-ified table collapses toward its
	 * shrink-to-fit width and breaks one word per line. Make it a real block.
	 */
	.a2b-ledger caption {
		display: block;
		width: 100%;
	}

	.a2b-ledger tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 12px;
		padding: 11px 10px;
		border-bottom: 1px solid var(--a2b-rule-soft);
	}

	.a2b-ledger tbody td {
		height: auto;
		padding: 0;
		border-bottom: none;
		white-space: normal;
	}

	/*
	 * Placement is per-table, not shared: the two ledgers carry different cells
	 * (the hero has a date and a balance, the calculator has a description), and
	 * one shared rule set leaves empty grid cells in whichever table lacks one.
	 */
	.a2b-ledger-hero .a2b-cell-code {
		grid-column: 1;
		grid-row: 1;
		font-weight: 700;
	}

	.a2b-ledger-hero .a2b-cell-amount {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		font-weight: 600;
	}

	.a2b-ledger-hero .a2b-cell-date {
		grid-column: 1;
		grid-row: 2;
		font-size: .68rem;
		color: var(--a2b-ink-soft);
	}

	.a2b-ledger-hero .a2b-cell-baki {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
		font-size: .72rem;
		font-weight: 600;
		color: var(--a2b-ink-soft);
	}

	.a2b-ledger-hero .a2b-cell-baki::before {
		content: "Baki ";
		font-family: 'Archivo', system-ui, sans-serif;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
	}

	.a2b-ledger-compact .a2b-cell-code {
		grid-column: 1;
		grid-row: 1;
		font-weight: 700;
	}

	.a2b-ledger-compact .a2b-cell-amount {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		font-weight: 600;
	}

	.a2b-ledger-compact .a2b-cell-desc {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: .875rem;
		line-height: 1.45;
		color: var(--a2b-ink-soft);
	}

	/* The debit and credit columns share one slot on a phone; only one is ever
	   filled per row, so the empty cell is simply removed from the flow. */
	.a2b-ledger-compact td:empty {
		display: none;
	}

	/* The running balance closes each stacked entry, on its own ruled line. */
	.a2b-ledger-compact .a2b-cell-baki {
		grid-column: 1 / -1;
		grid-row: 3;
		display: flex;
		justify-content: space-between;
		gap: 10px;
		margin-top: 5px;
		padding-top: 6px;
		border-top: 1px dotted var(--a2b-rule);
		font-weight: 700;
	}

	.a2b-ledger-compact .a2b-cell-baki::before {
		content: "Baki / Balance";
		font-family: 'Archivo', system-ui, sans-serif;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
		color: var(--a2b-ink-soft);
	}

	/* Footer labels wrap rather than truncate — tbody's rule does not reach them. */
	.a2b-ledger tfoot td {
		white-space: normal;
	}

	/* Vertical rules are a table-layout device; once rows become stacked blocks
	   they would draw arbitrary lines through the middle of an entry. */
	.a2b-ledger th + th,
	.a2b-ledger td + td {
		border-left: none;
	}

	.a2b-ledger tfoot tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 12px;
		padding: 12px 10px;
	}

	.a2b-ledger-foot td {
		height: auto;
		padding: 0;
	}

	/* Legend table folds to stacked entries. */
	.a2b-legend,
	.a2b-legend tbody,
	.a2b-legend tr,
	.a2b-legend td {
		display: block;
		width: 100%;
	}

	.a2b-legend thead {
		display: none;
	}

	/*
	 * A `table-caption` box inside a block-ified table collapses toward its
	 * shrink-to-fit width and breaks one word per line. Make it a real block —
	 * same fix `.a2b-ledger caption` already needed above.
	 */
	.a2b-legend caption {
		display: block;
		width: 100%;
	}

	.a2b-legend tr {
		padding: 20px 0;
		border-bottom: 1px solid var(--a2b-rule);
	}

	.a2b-legend td {
		padding: 0 0 10px;
		border-bottom: none;
	}

	.a2b-legend td:last-child {
		padding-bottom: 0;
	}

	.a2b-form-grid {
		grid-template-columns: 1fr;
	}

	.a2b-footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 560px) {
	/* Long Malay strings must not break the format. */
	.a2b-display {
		font-stretch: 100%;
		letter-spacing: -.025em;
	}

	.a2b-hero-cta .a2b-stamp,
	.a2b-hero-cta .a2b-ghost,
	.a2b-close-cta .a2b-stamp,
	.a2b-close-cta .a2b-ghost {
		width: 100%;
		justify-content: center;
	}
}

/* --- Legal documents ---------------------------------------------------- */

.a2b-legal-body {
	background-color: var(--a2b-paper);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 33px,
		rgba(198, 204, 191, .36) 34px
	);
}

.a2b-legal-main {
	padding-top: 112px;
}

.a2b-legal-hero {
	border-top: 1px solid var(--a2b-rule);
	border-bottom: 1px solid var(--a2b-ink);
	background: var(--a2b-leaf);
}

.a2b-legal-hero-inner {
	padding-top: clamp(52px, 7vw, 88px);
	padding-bottom: clamp(42px, 6vw, 72px);
}

.a2b-legal-kicker,
.a2b-legal-meta {
	font-family: 'Azeret Mono', monospace;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.a2b-legal-kicker {
	margin-bottom: 16px;
	color: var(--a2b-kredit);
}

.a2b-legal-hero h1 {
	max-width: 850px;
	font-size: clamp(2.6rem, 7vw, 6rem);
	font-stretch: 112%;
	line-height: .95;
}

.a2b-legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 28px;
	color: var(--a2b-ink-soft);
}

.a2b-legal-layout {
	display: grid;
	grid-template-columns: minmax(220px, 300px) minmax(0, 720px);
	gap: clamp(36px, 7vw, 96px);
	align-items: start;
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: clamp(80px, 10vw, 140px);
}

.a2b-legal-notice {
	position: sticky;
	top: 132px;
	padding: 24px;
	border: 2px solid var(--a2b-debit);
	background: var(--a2b-leaf);
	box-shadow: var(--a2b-sh-leaf);
}

.a2b-legal-notice strong {
	display: block;
	margin-bottom: 10px;
	font-family: 'Azeret Mono', monospace;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a2b-debit);
}

.a2b-legal-notice p,
.a2b-legal-document p {
	color: var(--a2b-ink-soft);
}

.a2b-legal-document {
	min-width: 0;
}

.a2b-legal-intro {
	padding-bottom: 36px;
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	line-height: 1.5;
}

.a2b-legal-document section {
	padding: 34px 0 38px;
	border-top: 1px solid var(--a2b-rule);
	scroll-margin-top: 130px;
}

.a2b-legal-document h2 {
	margin-bottom: 14px;
	font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

@media (max-width: 720px) {
	.a2b-legal-main {
		padding-top: 88px;
	}

	.a2b-legal-layout {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.a2b-legal-notice {
		position: static;
	}
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	/* The book arrives fully printed and still. */
	.a2b-ledger.is-printing tbody tr {
		opacity: 1;
		transform: none;
	}

	.a2b-stamp {
		transform: rotate(-1.8deg);
	}

	/*
	 * The Swarm settles. With animation killed every lane would land on its start
	 * frame and clump against the left edge, so the lanes are scattered across the
	 * board by their own phase offset instead and the field reads as still, not broken.
	 */
	.a2b-flight {
		opacity: .5;
	}

	.a2b-flight-lane {
		left: calc(var(--o) * 3.4%);
		right: auto;
	}
}

@media print {
	.a2b-header,
	.a2b-flap,
	.a2b-mobile-nav {
		display: none;
	}

	body.a2b-body {
		background: #fff;
		color: #000;
		padding-bottom: 0;
	}
}