/*
 * Athlete Narrative — page-level layout.
 * style.css holds tokens, base typography and the shell (header/footer/buttons/
 * forms). This sheet holds the section patterns: hero, split rows, stat band,
 * cards, testimonials, FAQ, CTA band, pricing, blog and 404.
 *
 * All colours reference the custom properties declared in style.css. No hex
 * literals below except rgba() overlays built from the brand navy/ink.
 */

/* ==========================================================================
   1. HERO — full viewport, media first, copy short.
   An eyebrow, one oversized display headline, one sentence of value proposition
   and one lime CTA over a full-bleed image. Nothing else: the rating, the store
   badges and the patent notice are the strip below (§1a), because the hero has
   exactly as much vertical room as the resting nav bar leaves it and a fifth
   element does not fit — see the measurements in §1a and in style.css §1.

   SCRIM MATH (this is the number that must not be softened):
   the veil's lightest point is rgba(13,16,20,0.72). Composited over a pure
   white image that yields sRGB(80.8, 82.9, 85.8), relative luminance 0.0858,
   so white headline text measures (1.05)/(0.0858+0.05) = 7.7:1 — comfortably
   past the 4.5:1 body floor on the worst image anyone could upload, and past
   it by more on any real photograph. The bare AA pass point is alpha 0.585;
   0.72 is the floor used here so there is headroom. The lime eyebrow over the
   same ground measures 6.1:1.
   ========================================================================== */

.an-hero {
	position: relative;
	display: grid;
	align-content: end;
	min-height: 100vh;
	min-height: 100svh;
	/* A MAXIMUM, not a floor. The reservation is for the bar once it has pinned
	   over the hero, and while the hero is at its min-height the copy is
	   bottom-aligned anyway, so this padding is slack the composition never
	   sees. The moment it stops being slack is the moment it hurts: on a short
	   window the hero's content is what overflows 100svh, and 118px of unused
	   air at the top is 118px of the overflow. Capping it against the viewport's
	   own height gives that space back exactly where it is needed and changes
	   nothing anywhere else — measured identical at 1440x900 and above. */
	padding-top: min(calc(var(--an-header-h) + var(--an-s2)), 10vh);
	padding-top: min(calc(var(--an-header-h) + var(--an-s2)), 10svh);
	/* The nav bar rests along the foot of the screen over this hero (style.css
	   §7), so the hero reserves its footprint the same way the padding-top above
	   reserves the pinned bar's. Without it the hero's own bottom-aligned CTA
	   and the bar occupy the same band: on a 500x657 phone the wordmark landed
	   on top of the lime button — white on lime, 1.27:1, the one pairing this
	   theme bans outright. Only binding when the hero is at its min-height; when
	   the headline makes the hero taller than the viewport the hero simply grows
	   by the same amount and the copy does not move. */
	padding-bottom: calc(clamp(3.5rem, 9vh, 7rem) + var(--an-header-h) + var(--an-navbar-inset));
	background-color: var(--an-ink);
	overflow: hidden;
}

.an-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.an-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 55%;
	animation: an-kenburns 32s ease-in-out infinite alternate;
}

/* The moving hero, when one is set. Deliberately carries NO z-index: the veil
   below is .an-hero__media::after, generated as this wrapper's last child, so
   with every layer at z-index auto the paint order is simply tree order —
   image, video, veil. Give this a z-index and the veil goes under it and the
   scrim math above stops being true.

   No animation either. The footage is the motion; the Ken Burns zoom stays on
   the still image alone, where it exists to give a photograph something to do.

   No background colour, so a video that stalls, 404s or is refused by the codec
   shows the still image through it rather than a black plate. */
.an-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

/* See SCRIM MATH above. Darkest at the foot, where the headline sits. */
.an-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(13, 16, 20, 0.74) 0%,
		rgba(13, 16, 20, 0.72) 34%,
		rgba(13, 16, 20, 0.86) 76%,
		rgba(13, 16, 20, 0.95) 100%
	);
}

.an-hero__fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 15%, rgba(170, 251, 0, 0.1) 0%, transparent 55%),
		linear-gradient(160deg, var(--an-canvas) 0%, var(--an-ink) 70%);
}

.an-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* The value proposition, one sentence, directly under the headline.
   Measure is stated in ch against the BODY font, which is what sets here, so
   the line breaks into two on a laptop and three on a tablet rather than
   running the full 1340px of the wide container — a 1340px line of 16px type
   is 160 characters and nobody reads the second half of it.

   White, explicitly. The veil's shallowest stop is alpha 0.72, which over the
   worst image anyone could upload gives white 7.73:1 (see SCRIM MATH above), so
   this clears the 4.5:1 body floor by two thirds again at the hero's very worst
   point. --an-mute would NOT clear it: 2.82:1 on that same ground, which is why
   nothing in this hero is set in the muted tone. */
.an-hero__sub {
	max-width: 58ch;
	margin: clamp(16px, min(2.6vw, 3svh), var(--an-s2)) 0 0;
	color: var(--an-white);
	font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.an-hero .an-btn-row {
	margin-top: clamp(16px, min(3.2vw, 3.5svh), var(--an-s2));
}

/* HERO SPACING IS HEIGHT-AWARE, and that is the same constraint the display
   step in style.css §1 is under rather than a second opinion about air.

   The hero's copy block has to end above the line where the nav bar rests —
   100svh minus the bar's height and inset — and every gap inside the block
   spends part of the budget. Width-only clamps could not see that: at 1440x600
   a `clamp(24px, 3.2vw, 48px)` gap resolves to 46px because the window is WIDE,
   in a window with 442px of usable height, and four such gaps put the copy 109px
   past the bar. Adding a vh term to each gap costs nothing at a normal window —
   at 1440x900 the vw term is still the smaller of the two — and gives the space
   back exactly where it is needed. Measured at six sizes; see the table in
   style.css §1.

   The eyebrow's own margin is capped the same way, for the same reason. */
.an-hero .an-eyebrow--lg {
	margin-bottom: clamp(12px, min(2.2vw, 2svh), 30px);
}

/* Scroll cue — a hairline that travels down its own track.

   Anchored to the resting bar's top edge, not to the hero's foot. The two were
   the same thing only while the hero was exactly one viewport tall; the moment
   the headline made it taller the cue went with the foot, off the bottom of the
   screen, and what a visitor at 1440x900 actually saw of it was the word
   "SCROL" clipped by the fold. It now ends where the bar begins, which is both
   inside the viewport at every height and the only place a scroll cue makes
   sense — it points at the thing it is cueing. */
.an-hero__cue {
	position: absolute;
	right: var(--an-gutter);
	bottom: calc(var(--an-header-h) + var(--an-navbar-inset));
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.an-hero__cue-label {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--an-mute);
	writing-mode: vertical-rl;
}

.an-hero__cue-rule {
	position: relative;
	width: 1px;
	height: 76px;
	background-color: var(--an-line);
	overflow: hidden;
}

.an-hero__cue-rule::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 34px;
	background-color: var(--an-lime);
	animation: an-cue-travel 2.6s ease-in-out infinite;
}

@media (max-width: 767px) {
	.an-hero__cue {
		display: none;
	}
}

@keyframes an-kenburns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.14);
	}
}

@keyframes an-cue-travel {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(224%);
	}
}

/* ==========================================================================
   1a. TRUST STRIP — rating, store badges, patent notice.

   A thin band directly under the hero carrying three checkable things. It is a
   BAND rather than a row inside the hero, and that is a geometry decision with
   a number behind it: the front page's nav bar rests at 100svh minus its height
   and inset, so everything the hero's copy block contains has to fit above that
   line. Adding this row to a hero that already carries a headline, a subhead
   and a button put the block 140px past the bar at 375x667 and 21px past it at
   1440x600 — the bar sitting on the words. Below the hero it costs the hero
   nothing and is still the first thing a visitor meets on scrolling.

   Ink ground with a hairline foot, so it reads as its own register between the
   hero's photograph and the marquee's lime motif. Contrast on --an-ink, both
   pairings from the table in §1b: white 19.1:1, lime 15.0:1.

   Baseline-aligned, not centred: the badges are 56px tall and the two text
   items are one line, and centring them made the strip read as three unrelated
   objects floating at three heights.
   ========================================================================== */

.an-trustbar {
	background-color: var(--an-ink);
	border-bottom: 1px solid var(--an-line);
	padding-block: clamp(18px, 2.4vw, 30px);
}

.an-trustbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 1.8vw, 30px);
}

/* The badges carry their own top margin for the stacked contexts they usually
   appear in; in a single row it would push them out of line with the text. */
.an-trustbar .an-badges {
	margin-top: 0;
	gap: 12px;
}

.an-trustbar__rating {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	white-space: nowrap;
}

.an-trustbar__rating-value {
	font-family: var(--an-font-label);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--an-lime);
}

.an-trustbar__rating-label {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--an-white);
}

/* A claim with its evidence one click away. Underlined, because it is the only
   link in a row of things that are not links and lime alone does not say so —
   the badges beside it are lime-marked and are not underlined. */
.an-trustbar__patent {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--an-lime);
	text-decoration: underline;
	white-space: nowrap;
}

/* The media mention. Same type as the patent notice next to it and deliberately
   NOT underlined: the patent notice is a link to its own evidence, this is a
   statement with none on file (front-page.php §1a). White rather than lime, so
   the one lime item in the strip stays the one you can click — 19.1:1 on the
   bar's --an-ink ground, against the notice's 15.0:1. */
.an-trustbar__seen {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--an-white);
	white-space: nowrap;
}

/* The two badges alone are wider than a 390px phone's measure, so below 480 the
   strip becomes two lines: rating and patent notice, then the badges. */
@media (max-width: 479px) {
	.an-trustbar__inner {
		gap: 14px;
	}

	.an-trustbar .an-badges {
		flex-basis: 100%;
	}

	.an-trustbar__rating-value {
		font-size: 1.3rem;
	}
}

/* ==========================================================================
   1b. STATEMENT BANDS — oversized text on a solid ground.
   Nothing below the hero puts an image behind copy any more (owner directive,
   2026-08-15). That deletes the scrim contract these bands used to carry: with
   a flat brand dark underneath there is no compositing to reason about, and the
   contrast is fixed rather than dependent on whatever photograph got uploaded.
   Measured against both grounds:

     white #FFFFFF  on canvas #171A1D 17.5:1   on ink #0D1014 19.1:1
     grey  #9C9C9C  on canvas          6.4:1   on ink          6.9:1
     lime  #AAFB00  on canvas         13.7:1   on ink         15.0:1

   Every pairing clears the 4.5:1 body floor several times over.

   The two bands alternate their ground so the long scroll keeps visible
   structure without imagery. Ink is the default — the palette note in style.css
   §1 names it the "deep bands" tone — and .an-band--canvas lifts the second
   band, which also gives it a hard edge against the ink highlight wall that
   follows it.
   ========================================================================== */

.an-band {
	display: grid;
	align-content: end;
	min-height: clamp(520px, 88vh, 940px);
	padding-block: var(--an-s-editorial);
	background-color: var(--an-ink);
}

/* Copy at the top of the frame instead of the foot — alternates the rhythm. */
.an-band--top {
	align-content: start;
}

/* The lifted ground. See the alternation note above. */
.an-band--canvas {
	background-color: var(--an-canvas);
}

.an-band__inner {
	width: 100%;
}

.an-band__copy {
	max-width: 46ch;
	margin-top: clamp(var(--an-s1), 3vw, var(--an-s2));
}

.an-band__copy p {
	color: var(--an-white);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
}

/* --- .an-list — a short capability list, lime-ticked.

   Not a new component: the tick is the same lime check the pricing tiers draw
   (§10), lifted so that a statement band and a split row can use it too. It
   exists because several passages of the owner's copy are lists written as
   sentences — three capabilities inside one 28-word clause — and a reader
   scanning for "does it do X" has to parse the sentence to find out.

   Colour is stated per context rather than inherited: --an-mute (6.4:1 on the
   canvas, 6.9:1 on the ink) in a section, --an-white (17.5:1 / 19.1:1) inside a
   statement band, where the surrounding copy is white and a muted list would
   read as a footnote to it. */
.an-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--an-s1);
}

.an-list li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 28px;
	color: var(--an-mute);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.an-list li:last-child {
	margin-bottom: 0;
}

.an-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.5em;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--an-lime);
	border-bottom: 2px solid var(--an-lime);
	transform: rotate(45deg);
}

.an-band__copy .an-list {
	margin-bottom: var(--an-s1);
}

.an-band__copy .an-list li {
	color: var(--an-white);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
}

/* ==========================================================================
   1c. MARQUEE — a slow band of short phrases, lime `//` between them.
   Pure CSS. The track holds two identical groups and travels exactly half its
   width, so the loop is seamless without JavaScript measuring anything.
   ========================================================================== */

.an-marquee {
	overflow: hidden;
	background-color: var(--an-ink);
	border-block: 1px solid var(--an-line);
	padding-block: clamp(16px, 2.2vw, 30px);
}

/* A fixed duration is a fixed number of LOOPS, not a fixed speed: the same 42s
   moved this track 59px per second at 1440 and roughly 20 at 390, because the
   phrases set smaller and the distance shrank while the clock did not — so the
   band crawled on a phone and the two marquees ran at different speeds whenever
   their phrase lists differed in length. assets/js/reveal.js measures each
   track and sets the duration from its own width at a constant 60px per second,
   which is the pace this band has at 1440 today. The 42s here is the
   script-blocked fallback: the old behaviour, unchanged. */
.an-marquee__track {
	display: flex;
	width: max-content;
	animation: an-marquee-scroll var(--an-marquee-duration, 42s) linear infinite;
}

.an-marquee--reverse .an-marquee__track {
	animation-direction: reverse;
}

.an-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
}

.an-marquee__item,
.an-marquee__sep {
	font-family: var(--an-font-label);
	font-size: clamp(1.7rem, 4.6vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.an-marquee__item {
	color: var(--an-white);
}

.an-marquee__sep {
	color: var(--an-lime);
	margin-inline: clamp(20px, 2.8vw, 46px);
}

@keyframes an-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ==========================================================================
   1d. SCROLL REVEALS
   Scoped to .an-js, which assets/js/reveal.js sets on <html> before first
   paint. Script blocked or broken → nothing here applies and every section is
   simply visible.
   ========================================================================== */

.an-js [data-an-reveal] {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.an-js [data-an-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Headings wipe downward instead of drifting.

   The wipe is a MASK, and that is a correctness decision rather than a stylistic
   one. Chrome computes an element's IntersectionObserver rectangle AFTER
   applying that element's own clip-path, so the previous implementation — which
   clipped the heading to zero height as its RESTING state — reported an
   intersection ratio of exactly 0, permanently. The observer never fired,
   .is-in never landed, and every heading of this kind below the first screen
   stayed invisible to a real reader: six of them on the front page, including
   "The Parent Advantage" and "How It Works". Only the load-time sweep in
   reveal.js rescued the ones already on screen, because that reads
   getBoundingClientRect, which ignores clipping. Measured on this page, one
   element, one position: clip-path ratio 0, the identical mask ratio 1.

   A mask hides pixels at paint time without touching the geometry the observer
   measures, so the effect survives and the element is still seen. Keep it that
   way — anything that collapses this box (clip-path, height 0, scale 0,
   visibility) brings the bug straight back.

   Mechanics: the stencil is two element-heights tall, opaque on its top half,
   and slides a full height, so the hard edge travels top-to-bottom across the
   heading — the same motion the clip described. #000 here is an alpha stencil,
   not a colour; mask-image defaults to alpha mode, so opaque paints and
   transparent hides. No em overshoot is carried: these are uppercase display
   faces whose ink sits inside the border box, and a border-box mask measured
   pixel-identical to no mask at all (same SHA at 1440 and 390). */
.an-js [data-an-reveal="clip"] {
	opacity: 1;
	transform: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 50%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 50%);
	-webkit-mask-size: 100% 200%;
	mask-size: 100% 200%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 100%;
	mask-position: 0 100%;
	transition: -webkit-mask-position 1s cubic-bezier(0.2, 0.7, 0.2, 1),
		mask-position 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.an-js [data-an-reveal="clip"].is-in {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

/* ==========================================================================
   2. STAT / SOCIALS BAND
   ========================================================================== */

/* Numerals at display scale, labels deliberately tiny — the number is the
   whole point of the band. Bebas Neue is the brand's numeral voice. */

/* --an-bar-rule, not --an-line. The band moved up the page (front-page.php §2c)
   and now meets the ink WHY IT MATTERS band on its lower edge; --an-line is
   1.46:1 on ink, so that edge simply was not there and the two ink sections read
   as one very long one. --an-bar-rule is the derived mid tone this theme keeps
   for exactly that job — 3.32:1 on ink, 3.04:1 on canvas — so the band is closed
   on both sides whatever it ends up next to. */
.an-stats {
	background-color: var(--an-ink);
	border-block: 1px solid var(--an-bar-rule);
}

.an-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(var(--an-s1), 4vw, var(--an-s3));
	padding-block: var(--an-s-editorial);
	list-style: none;
	margin: 0;
}

/* The band lays out for the number of figures it actually has, not for four.
   Two substantiated stats in a fixed four-track grid put both numerals in the
   left half of the band at a quarter of the width each, with the right half
   empty — which reads as two figures that failed to load rather than as two
   figures the owner can stand behind. The template names the count; empty
   Customizer slots are not rendered at all (front-page.php §2c). */
.an-stats__grid--1 {
	grid-template-columns: 1fr;
}

.an-stats__grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.an-stats__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Values are owner-entered and can run to two lines ("3-4 min"). Each cell is a
   column with the label pushed to the foot, so the hairlines stay on one line
   across the band whatever lengths get typed in. */
.an-stats__grid li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.an-stat__value {
	display: block;
	font-family: var(--an-font-label);
	font-size: clamp(3.4rem, 9vw, 9rem);
	line-height: 0.86;
	letter-spacing: -0.01em;
	color: var(--an-lime);
	margin-bottom: clamp(12px, 1.6vw, 22px);
}

.an-stat__label {
	display: block;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--an-line);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--an-mute);
}

@media (max-width: 767px) {
	.an-stats__grid,
	.an-stats__grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.an-stats__grid,
	.an-stats__grid--2,
	.an-stats__grid--3 {
		grid-template-columns: 1fr;
	}

	/* Stacked, the cells need a rule between them or the labels and the next
	   numeral run together. The label already draws its own top hairline, so
	   the separation is there — it just needs the air. */
	.an-stats__grid li + li {
		margin-top: var(--an-s2);
	}
}

/* ==========================================================================
   2a. VIDEO FACADE — a still that becomes a player when asked.

   The box is a fixed 16/9 so nothing on the page moves when the iframe replaces
   the image: the figure holds its own height from first paint, and the swap is
   invisible in layout terms. See template-parts/video-embed.php for why the
   iframe is not there to begin with.

   Contrast: the play triangle is --an-on-lime (#141920) on --an-lime (#AAFB00),
   which is 12.6:1 — the same pair every solid button on this site uses. The
   caption is --an-mute on --an-canvas at 6.4:1.
   ========================================================================== */

.an-video {
	margin: 0;
	max-width: 720px;
}

.an-video__facade,
.an-video__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--an-radius);
}

.an-video__facade {
	position: relative;
	overflow: hidden;
	background-color: var(--an-ink);
}

.an-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A lime disc with a triangle cut into it by borders — no icon font, no SVG
   file, no extra request. Sized in px rather than em because it is a target
   before it is a glyph, and 64px clears the 44px minimum comfortably. */
.an-video__button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	background-color: var(--an-lime);
	border-radius: 50%;
	transition: transform 0.18s ease;
	/* Above the veil. Both are absolutely positioned and ::after is the last
	   child, so without this the veil paints over the disc and 28% of near-black
	   lands on the lime — measured at 10.9:1 against the triangle instead of
	   12.6:1, and visibly olive rather than lime. */
	z-index: 1;
}

.an-video__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--an-on-lime);
}

.an-video__facade:hover .an-video__button,
.an-video__facade:focus-visible .an-video__button {
	transform: translate(-50%, -50%) scale(1.08);
}

/* A veil, so a bright thumbnail cannot swallow the lime disc. */
.an-video__facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(13, 16, 20, 0.28);
	pointer-events: none;
}

.an-video__caption {
	margin-top: 12px;
	color: var(--an-mute);
	font-size: 0.85rem;
}

/* ==========================================================================
   2b. APP STORE REVIEWS — four real reviews, directly under the ratings band.

   The .an-card idiom in §4 with one thing removed: the hover state. .an-card
   lifts and lights its border because it is a teaser for a page you can open.
   A quotation goes nowhere, and a card that reacts to the cursor promises a
   click that never lands, so these are the same ink ground, the same hairline
   and the same radius, sitting still.

   Grounds and contrast, all on --an-ink (#0D1014), all measured:
     headline   #FFFFFF  19.1:1
     quote      #FFFFFF  19.1:1   (a quotation is the content, not supporting
                                   copy — it does not take the muted body grey)
     stars      #AAFB00  15.0:1
     handle     #FFFFFF  19.1:1
     "App Store review"  #9C9C9C   6.9:1
   Nothing new is introduced.
   ========================================================================== */

.an-reviews {
	display: grid;
	/* minmax(0, 1fr) for the reason §4c documents at length: a bare 1fr floors
	   each track at its own min-content, and one of these quotes contains
	   "kellibellifullmer", a 17-character unbreakable string. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--an-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The row states its own count so a shorter row sizes to itself instead of
   leaving a quarter-rail hole where a fourth card used to be. Emptying any
   field of a card removes it (front-page.php §2d), and this is what keeps that
   a safe edit rather than a layout break. */
.an-reviews--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.an-reviews--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}

.an-reviews--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
}

.an-review {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

.an-review__rating {
	margin: 0 0 14px;
}

/* Tracking, because five glyphs butted together read as one grey smear at this
   size. The row is aria-hidden and the rating is spoken in words beside it. */
.an-review__stars {
	color: var(--an-lime);
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	line-height: 1;
}

.an-review__quote {
	/* A <blockquote>, so it inherits the lime left rule from style.css §base.
	   That rule is right for a pull quote in an article and wrong here, where
	   the card border already frames the quotation and a second vertical rule
	   inside it reads as a nested box. */
	margin: 0;
	padding: 0;
	border-left: 0;
	flex: 1 1 auto;
}

.an-review__title {
	margin: 0 0 10px;
	color: var(--an-white);
	font-family: var(--an-font-display);
	/* Below .an-display--sm's floor on purpose. These headlines are the
	   reviewer's own, not ours, and several run long ("If you're serious about
	   being recruited get this app!"); at display scale one of them becomes the
	   card. Same face and weight, sized to a 255px column. */
	font-size: 1.02rem;
	line-height: 1.15;
	text-transform: uppercase;
}

.an-review__quote p {
	margin: 0;
	/* White, not the muted body grey. This is the evidence the section exists to
	   show; it is not a caption on something else. */
	color: var(--an-white);
	font-size: 0.92rem;
	line-height: 1.6;
}

.an-review__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: var(--an-s1) 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--an-line);
}

.an-review__author {
	color: var(--an-white);
	font-size: 0.85rem;
	font-weight: 600;
	/* Handles are unbreakable single tokens ("kellibellifullmer") and the column
	   is 255px at 1440. Break it rather than let it push the card wide. */
	overflow-wrap: anywhere;
}

.an-review__source {
	color: var(--an-mute);
	font-family: var(--an-font-label);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* THE VPs (spec v2 L5, 2026-11-03) — replaces the endorsement under the review
   row. The film in a centred 9:16 frame capped at 380px, the title and first
   names beside it; one column on phones. The names are a plain wrapping list
   with a lime dot between, so a fifth VP needs no CSS. */
.an-vps {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: var(--an-s2);
	align-items: center;
}

.an-vps__media {
	margin: 0;
	width: 100%;
	max-width: 380px;
	justify-self: center;
}

.an-vps__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	background-color: var(--an-ink);
}

.an-vps__lc {
	text-transform: none;
}

.an-vps__blurb {
	max-width: 60ch;
	margin: var(--an-s1) 0 0;
	color: var(--an-white);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.an-vps__names {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: var(--an-s1) 0 0;
	padding: 0;
	list-style: none;
	color: var(--an-white);
	font-family: var(--an-font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-variation-settings: "wdth" 110, "wght" 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.an-vps__names li + li::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--an-lime);
}

/* Stacks below 1024: at 768 the heading column beside a 380px film is too
   narrow for the display face (measured: the title clipped). */
@media (max-width: 1023px) {
	.an-vps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--an-s1);
	}

	/* Spec v3: video first on phones. */
	.an-vps__media {
		max-width: 320px;
	}
}

/* Two up from 1199 down, for the same reason the feature cards go two up: four
   255px columns hold a short quote, four 165px ones do not. */
@media (max-width: 1199px) {
	.an-reviews,
	.an-reviews--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.an-reviews,
	.an-reviews--2,
	.an-reviews--3 {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   3. SPLIT ROWS — media-led, alternating.
   Media takes 60 and the copy column 40, so the picture leads and the words
   stay a short column. The side swap is a CSS `order` change on one tree, not
   a second copy of the markup for mobile: one heading per section in the DOM.
   ========================================================================== */

.an-section--editorial {
	padding-block: var(--an-s-editorial);
}

/* style.css declares --flush-top first, so the editorial padding above would
   otherwise win. Restated here so a section can still sit tight against the
   one before it. */
.an-section--editorial.an-section--flush-top {
	padding-top: 0;
}

/* No max-width here. `ch` and `em` on this wrapper resolve against the body
   font, not the display font inside it, so any measure set here strangles the
   heading — the heading sizes itself against the container instead. */
.an-section-head--editorial {
	margin-bottom: clamp(var(--an-s2), 6vw, 6rem);
}

.an-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--an-s2), 6vw, 7rem);
	align-items: center;
}

/* Media 60 / copy 40. The copy is first in the DOM, so the media track is the
   second one — unless --reverse orders the media into the first track, which
   is why the pair of rules is not symmetrical. */
.an-split--wide-media {
	grid-template-columns: 2fr 3fr;
}

.an-split--wide-media.an-split--reverse {
	grid-template-columns: 3fr 2fr;
}

.an-split__copy p {
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
}

/* The `//` terminator stays inline on split headings too (spec v2 Y1,
   2026-11-03 — it used to drop to a line of its own from 1024 up, which the
   owner's review flagged). an_slash() binds it to the last word and the
   .an-display .an-slash rule keeps it from wrapping. .an-display carries
   margin: 0, so the heading needs its own air below it. */
.an-split__copy .an-display {
	margin-bottom: 0.8em;
}

.an-split + .an-split {
	margin-top: var(--an-s-editorial);
}

.an-split--reverse .an-split__media {
	order: -1;
}

.an-split__media img {
	width: 100%;
	border-radius: var(--an-radius);
}

/* Illustration rather than screen capture — the HOPE mascot on /features/.
   Held to its own 256px so it is never upscaled, centred in its half of the
   split, and with no corner radius: the artwork is transparent, so a radius
   would round a box nobody can see. */
.an-split__media--art {
	display: grid;
	place-items: center;
}

.an-split__media--art img {
	width: auto;
	max-width: min(100%, 256px);
	height: auto;
	border-radius: 0;
}

/* A phone capture, held to phone size — the same discipline as --art above, for
   the opposite reason. AN-App-Radar-profile.png is 701x1384, a 1:1.97 portrait,
   and `width: 100%` in the 60% media half of an .an-container--wide split paints
   it about 700px across and 1380px tall: one screenshot roughly the height of
   two laptop screens, which is what blew this section open. Capped at 320px it
   reads as a phone held next to the copy, and 320px is above the 519px "large"
   candidate's own scale so it is never upscaled either.

   Unlike --art it KEEPS the corner radius: this is an opaque rectangular capture
   with a visible edge, not transparent artwork, so the radius has a box to round. */
.an-split__media--phone {
	display: grid;
	place-items: center;
}

.an-split__media--phone img {
	width: auto;
	max-width: min(100%, 320px);
	height: auto;
}

.an-split__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-mute);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: var(--an-s1);
}

/* The split stacks at 1023, not at 767. Even halves were the wrong answer for
   768–1023: an iPad in portrait got a 336px copy column carrying display type
   sized against the viewport's WIDTH, so "Built for Athletes First" set at
   ~35px broke to four lines, the `//` fell to a fifth on its own, and the row
   ran past the fold with the image squeezed to a thumbnail beside it. There is
   no width in that band where two columns of this composition are better than
   one, and iPad portrait is not an edge case. One column from here down. */
@media (max-width: 1023px) {
	.an-split,
	.an-split--wide-media,
	.an-split--wide-media.an-split--reverse {
		grid-template-columns: 1fr;
		gap: var(--an-s2);
	}

	/* Image above text on every row, regardless of desktop side. */
	.an-split__media {
		order: -1;
	}

	/* Stacked rows are twice as tall, so they need the editorial gap between
	   them rather than the tighter one the two-column rhythm used. */
	.an-split + .an-split {
		margin-top: clamp(4rem, 14vw, 7rem);
	}
}

/* ==========================================================================
   4. STEP / FEATURE CARDS
   ========================================================================== */

.an-grid {
	display: grid;
	gap: var(--an-s1);
}

.an-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.an-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 768–1023px is handled explicitly — the gap the benchmark leaves unaddressed. */
@media (max-width: 1023px) {
	.an-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.an-grid--3,
	.an-grid--2 {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}
}

.an-card {
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 32px 28px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.an-card:hover,
.an-card:focus-within {
	border-color: var(--an-lime);
	transform: translateY(-4px);
}

.an-card h3 {
	margin-bottom: 12px;
}

.an-card h3 a {
	color: var(--an-white);
	text-decoration: none;
}

.an-card h3 a:hover,
.an-card h3 a:focus {
	color: var(--an-lime);
}

.an-card p:last-child {
	margin-bottom: 0;
}

.an-card__step {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: var(--an-radius);
	background-color: rgba(170, 251, 0, 0.12);
	color: var(--an-lime);
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 112, "wght" 800;
	font-size: 1.1rem;
}

/* ==========================================================================
   4b. EDITORIAL INDEX — hairline-ruled rows carrying an oversized lead
   (a step numeral or a date), a heading, and a short body.
   This is what replaced the 3-up card grid on the front page: same content,
   same reading order, but the page reads as an index rather than a brochure.
   ========================================================================== */

.an-index {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--an-line);
}

.an-index__row {
	display: grid;
	grid-template-columns: minmax(110px, 0.55fr) minmax(0, 1.2fr) minmax(0, 1.5fr);
	gap: clamp(var(--an-s1), 3.5vw, var(--an-s3));
	align-items: start;
	margin: 0;
	padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
	border-bottom: 1px solid var(--an-line);
}

/* Aligned on cap height, not on box top. The row is a grid with align-items:
   start, so the numeral's box and the heading's box begin on the same pixel —
   but a 96px Bebas numeral at line-height 0.82 puts its cap 0.3px ABOVE its box
   while 32px Archivo at line-height 1 puts its cap 4.5px below, and the two
   marks a reader actually sees started 4.8px apart. Typography aligns on the
   ink, not on the boxes. 0.05em of the numeral's own size is that gap expressed
   so it holds as both sizes scale: measured 4.8px needed / 4.8px applied at
   1440, 3.7 / 3.6 at 1024, 3.2 / 3.2 at 480. */
.an-index__lead {
	font-family: var(--an-font-label);
	font-size: clamp(2.8rem, 7vw, 6rem);
	line-height: 0.82;
	letter-spacing: -0.01em;
	color: var(--an-lime);
	padding-top: 0.05em;
}

.an-index__lead--date {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	font-size: 0.74rem;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding-top: 0.5em;
}

.an-index__head .an-eyebrow {
	margin: 14px 0 0;
}

.an-index__body p {
	color: var(--an-mute);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.an-index__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.an-index__row {
		grid-template-columns: minmax(90px, 0.5fr) minmax(0, 1fr);
	}

	.an-index__body {
		grid-column: 2;
	}
}

@media (max-width: 479px) {
	.an-index__row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.an-index__body {
		grid-column: 1;
	}
}

/* --- The step sequence, connected.

   Five rows of an index are five separate statements; a process is one thing
   with five parts, and the difference has to be visible or the section is just
   a list that happens to be numbered. A lime hairline runs down the numeral
   column from each numeral to the next, so the eye is handed from 01 to 05.

   Drawn on the ROW, and it has to cross the gap BETWEEN rows or it is not a
   connector, it is a tick. Stopping it at the row's own bottom border left a
   62px stub followed by 72px of nothing before the next numeral — which reads
   as five decorated rows rather than one sequence, the exact thing the line
   exists to fix. So the top starts below this row's numeral and the bottom
   reaches past this row's edge by the next row's top padding, landing where the
   next numeral's box begins.

   Both terms are the same clamps the row and the numeral are sized with, so the
   geometry holds at every width: `clamp(2.5rem, 5.5vw, 4.5rem)` is the row's
   own padding-block, and `clamp(2.8rem, 7vw, 6rem) * 0.87` is the numeral's
   height (line-height 0.82 plus its 0.05em cap-alignment padding).

   1px of lime on --an-canvas is 13.7:1, far past the 3:1 a non-text graphic
   needs. It is decoration either way and carries no meaning the numerals do not
   already carry, so nothing is lost to a reader who cannot see it — which is
   why it is a pseudo-element and not markup. */
.an-index--steps .an-index__row {
	position: relative;
}

.an-index--steps .an-index__row:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(clamp(2.5rem, 5.5vw, 4.5rem) + clamp(2.8rem, 7vw, 6rem) * 0.87 + 10px);
	bottom: calc(-1 * clamp(2.5rem, 5.5vw, 4.5rem));
	width: 1px;
	background-color: var(--an-lime);
	opacity: 0.55;
}

/* The lead column collapses to full width below 480 and the numerals sit above
   their own text rather than beside it, so a vertical line down the left edge
   would run past the copy instead of between the steps. */
@media (max-width: 479px) {
	.an-index--steps .an-index__row:not(:last-child)::before {
		display: none;
	}
}

/* ==========================================================================
   4c. FEATURE CARDS — the four things the app is, one sentence each.

   A variant of the .an-card idiom in §4 rather than a second card system: same
   ink ground, same hairline border, same lime border on hover, same radius.
   What it adds is a media slot at the top and a fixed footer, so four cards
   whose sentences differ in length still put their four Learn More buttons on
   one line.

   Grounds and contrast, all on --an-ink (#0D1014), all documented in §1b:
     heading   #FFFFFF  19.1:1
     body      #9C9C9C   6.9:1   (the .an-section p rule)
     button    #AAFB00  15.0:1
   Nothing new is introduced.
   ========================================================================== */

/* minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, so a track
   refuses to go narrower than its own min-content — and one of these four cards
   carries the word "ASSISTANT" set in 32px display type. Measured at 1440 with
   plain 1fr the four columns came out 224, 291, 268 and 253px wide: four cards
   that are meant to be a set, each a different size, because of one long word.
   With the floor at 0 the tracks are equal and the heading wraps instead. */
.an-feature-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--an-s1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.an-feature-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 22px 26px;
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.an-feature-card:hover,
.an-feature-card:focus-within {
	border-color: var(--an-lime);
	transform: translateY(-4px);
}

/* Portrait, because every screenshot of this app is a phone, and cropped from
   the TOP: these renders are a handset roughly 1:2, and the half a reader needs
   — the athlete's name, sport and stats — is all in the top third. `contain`
   inside a 3:4 box would letterbox that handset down to 144px wide with 35px of
   empty ground either side, which is a thumbnail of a phone rather than a look
   at the app.

   THE IMAGE IS ABSOLUTE, and that is not decoration. `height: 100%` on an
   in-flow child of a box whose height comes only from `aspect-ratio` does not
   resolve — the percentage has no definite height to be a percentage OF — so it
   fell back to `auto` and the image rendered 421px tall inside a 285px box,
   clipped by the overflow rather than fitted by the object-fit. Measured: box
   214x285, image box 214x421. Absolute positioning with `inset: 0` gives a
   definite containing block, and the fit is then the fit that was asked for.

   The box keeps its shape whether it holds an image or a placeholder, so the
   four cards align whatever the owner has supplied. */
.an-feature-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: var(--an-radius);
	background-color: var(--an-canvas);
}

.an-feature-card__media img,
.an-feature-card__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.an-feature-card__media img {
	object-fit: cover;
	object-position: 50% 0;
}

/* The honest empty state. A dashed hairline says "nothing here yet" in the same
   language the theme's other pending affordances use (.an-editor-hint,
   .an-badge-notice), rather than a grey rectangle that could be mistaken for a
   failed image. #9C9C9C on the canvas is 6.4:1. */
.an-feature-card__placeholder {
	display: grid;
	place-items: center;
	padding: var(--an-s1);
	border: 1px dashed var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-mute);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

/* .an-display--sm is the smallest step on the display scale and it is still
   32px at 1440 — sized for the index rows, which have a 300px column to run in.
   A card column here is 255px, where 32px display type set "AI RECRUITING
   ASSISTANT (HOPE)" over four lines and the heading became the card. Scaled to
   the card rather than given a new class, so it stays the same face, weight and
   width axis as every other display heading on the page. */
.an-feature-card h3 {
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
	line-height: 1.08;
	margin-bottom: 10px;
}

.an-feature-card p {
	font-size: 0.95rem;
	/* Pushes the button to the foot of the card whatever the sentence costs. */
	margin-bottom: var(--an-s1);
	flex: 1 1 auto;
}

.an-feature-card__link {
	align-self: flex-start;
}

/* Four 255px columns hold a phone thumbnail and a short sentence; two 545px
   ones hold them better than four 165px ones would, which is what 1024–1199
   would otherwise get. One column below 768, capped so a single card does not
   stretch to a 560px-wide phone render on a tablet held in portrait. */
@media (max-width: 1199px) {
	.an-feature-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.an-feature-cards {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}

	/* Stays 3/4 on phones (owner 2026-11-02): the cards now hold the store
	   screenshots, whose headline and handset fill the top three quarters. A
	   4/3 crop kept only the headline. Capped narrower so one card is not a
	   full screen. */
	.an-feature-cards {
		max-width: 360px;
	}
}

/* ==========================================================================
   4d. COMPARISON TABLE — Athlete Narrative against the alternative.

   A real <table> with real column headers, dark, hairline-ruled like every
   other list on this site. Two decisions worth keeping:

   1. THE WRAPPER SCROLLS, NOT THE PAGE. The table holds a min-width so its two
      columns never crush to a word per line; at 390 that is wider than the
      viewport, and without a scroll container of its own that width becomes
      horizontal overflow on <body> — the whole page sliding sideways, every
      section with it. overflow-x on the wrapper contains it: the table scrolls
      inside its box and nothing else moves. The wrapper is focusable and
      labelled, so a keyboard can reach the scroll a pointer can drag.

   2. THE LEFT COLUMN IS THE POINT. It carries a 5% lime tint and white copy;
      the right column is muted. Measured on the tinted ground, rgb(21, 28, 19):
        white #FFFFFF  17.1:1
        lime  #AAFB00  13.6:1
      and on the plain ink beside it, white 19.1:1 and --an-mute 6.9:1. Every
      pairing clears the 4.5:1 body floor several times over, and the tint is
      built from the brand lime already used this way in §4 (.an-card__step) —
      no new colour is introduced.
   ========================================================================== */

/* 3. THE CUT EDGE HAS TO LOOK CUT. A scroll container whose content ends flush
      against a hard border reads as a table that simply has two columns and
      stops — there is nothing on screen that says a third of it is off to the
      right, and on a phone the whole "Traditional Recruiting" column was the
      part nobody knew to look for. A soft edge is the oldest and quietest
      answer: the last few pixels of the box fade into its own ground, so the
      content is visibly running out of the frame rather than ending at it.

      Painted on the WRAPPER, because anything inside the scroller travels with
      the content and would slide off the edge it is describing. And it is a
      state, not a decoration: assets/js/reveal.js clears it the moment the last
      column is fully on screen, so once there is no more table the cue stops
      claiming there is. Both `is-` classes are added by that script, so with it
      blocked the fade never renders at all and the table is untouched.

      The fade is a still image and stays under prefers-reduced-motion; only its
      cross-fade is motion, and the reduced-motion block at the foot of this file
      already collapses transitions to an instant swap. */
.an-compare-wrap {
	position: relative;
}

.an-compare-wrap::after {
	content: "";
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: clamp(32px, 8vw, 64px);
	border-radius: 0 var(--an-radius) var(--an-radius) 0;
	/* `transparent` and not a zero-alpha copy of the ink: gradient stops are
	   interpolated in premultiplied alpha, so this reaches the same ink without
	   naming a colour value the theme's tokens do not own. */
	background-image: linear-gradient(to right, transparent, var(--an-ink) 88%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.an-compare-wrap.is-scrollable::after {
	opacity: 1;
}

.an-compare-wrap.is-scrollable.is-scroll-end::after {
	opacity: 0;
}

.an-compare {
	overflow-x: auto;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	background-color: var(--an-ink);
	-webkit-overflow-scrolling: touch;
}

.an-compare:focus-visible {
	outline: 3px solid var(--an-lime);
	outline-offset: 3px;
}

.an-compare__table {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border-collapse: collapse;
}

/* The base th/td rule in style.css §3 draws a full box around every cell, which
   on a two-column table is a grid of eight lines doing the work of five. Rows
   are ruled and the columns are told apart by their treatment instead. */
.an-compare__table th,
.an-compare__table td {
	border: 0;
	border-bottom: 1px solid var(--an-line);
	padding: 16px clamp(16px, 2vw, 28px);
	text-align: left;
}

.an-compare__table tr:last-child td {
	border-bottom: 0;
}

.an-compare__table thead th {
	background-color: var(--an-ink);
	border-bottom: 2px solid var(--an-lime);
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 110, "wght" 700;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--an-lime);
	white-space: nowrap;
}

.an-compare__table td {
	color: var(--an-mute);
	font-size: clamp(0.92rem, 1.1vw, 1rem);
}

.an-compare__us {
	background-color: rgba(170, 251, 0, 0.05);
}

.an-compare__table td.an-compare__us {
	color: var(--an-white);
}

/* The column the page is arguing for gets the weight, so the two sides are
   distinguishable at a glance rather than only on reading. */
.an-compare__table td.an-compare__us {
	font-weight: 600;
}

/* ==========================================================================
   5. PARTNER / COLLAGE BAND
   ========================================================================== */

.an-collage {
	padding-block: var(--an-s-editorial);
	background-color: var(--an-canvas);
}

/* The collage's heading is a section head by every other name, so it takes the
   editorial rail the same way one does (style.css §4) while the collage image
   below it keeps the full wide measure. */
.an-container--wide > .an-collage__label {
	max-width: calc(var(--an-container) - var(--an-gutter) * 2);
	margin-inline: auto;
}

.an-collage__label {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 105, "wght" 700;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--an-lime);
	margin: 0 0 clamp(var(--an-s2), 4vw, 3.5rem);
}

/* Forty partner logos, each in its own brand's colours, is forty things
   shouting on a page whose whole argument is restraint — the collage was the
   loudest surface on the site and it is not the point of any of it. Held back
   to grey at three-quarter strength it reads as what it is, a wall of proof,
   and the lime stays the only colour on the page that means something. Full
   colour is still there for anyone who goes looking: hover restores it, so the
   logos are legible on demand rather than never.

   The restore is a transition, so prefers-reduced-motion collapses it to an
   instant swap (§12 and style.css §11) — the colour still arrives, it just
   does not travel. */
.an-collage img {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	border-radius: var(--an-radius);
	filter: grayscale(1) opacity(0.75);
	transition: filter 0.45s ease;
}

.an-collage img:hover,
.an-collage img:focus-visible {
	filter: none;
}

/* ==========================================================================
   6. TESTIMONIALS
   ========================================================================== */

.an-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--an-s1);
}

@media (max-width: 1023px) {
	.an-testimonials__grid {
		grid-template-columns: 1fr;
		max-width: 620px;
		margin-inline: auto;
	}
}

.an-testimonial {
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 30px 28px;
	margin: 0;
}

.an-testimonial blockquote {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	color: var(--an-white);
	font-size: 1rem;
	line-height: 1.6;
}

.an-testimonial figcaption {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 108, "wght" 700;
	text-transform: uppercase;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--an-lime);
}

.an-testimonial__role {
	display: block;
	margin-top: 4px;
	font-family: var(--an-font-body);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.85rem;
	color: var(--an-mute);
}

/* ==========================================================================
   7. FAQ — native <details>, no JavaScript.
   ========================================================================== */

/* The list keeps its 860px measure but not its centring. Its section head is
   on the page's left rail like every other head (see template-parts/faq.php),
   and a centred list under a left-aligned head puts the question text 125px
   right of the heading that introduces it — two left edges in one section. */
.an-faq {
	max-width: 860px;
	margin-inline: 0;
}

.an-faq__item {
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	background-color: var(--an-ink);
	margin-bottom: 14px;
}

.an-faq__item[open] {
	border-color: var(--an-lime);
}

.an-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 110, "wght" 700;
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--an-white);
}

.an-faq__q::-webkit-details-marker {
	display: none;
}

.an-faq__q::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--an-lime);
	border-bottom: 2px solid var(--an-lime);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.an-faq__item[open] .an-faq__q::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.an-faq__a {
	padding: 0 24px 22px;
	color: var(--an-mute);
}

.an-faq__a p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   8. CTA BAND — lime ground. Text on lime is always the near-black token,
   never white (white on lime is 1.27:1 and is banned).
   ========================================================================== */

.an-cta {
	background-color: var(--an-lime);
	color: var(--an-on-lime);
	text-align: center;
	padding-block: var(--an-s-editorial);
	/* The band's first line must never be the line under the pinned bar. The
	   editorial padding is 158px at 1440 against a 70px bar, so it clears
	   already there; the floor is for the narrow end, where the clamp bottoms
	   out at 96px and the margin would otherwise be down to 26px. scroll-margin
	   is the same guarantee for an anchor jump, which lands the band's top edge
	   at the viewport's top, i.e. underneath the bar. */
	padding-block-start: max(var(--an-s-editorial), calc(var(--an-header-h) + var(--an-s2)));
	scroll-margin-top: var(--an-header-h);
}

.an-cta .an-btn-row,
.an-cta .an-badges {
	justify-content: center;
}

/* The lime band on the editorial rail. When the template gives this band a
   section head — eyebrow over display heading, the same block every other
   section leads with — the band stops being a centred poster and joins the
   column: heading, copy, buttons and badges all start on the same left edge as
   the section above it. Without a section head the band keeps its centred
   composition, which is what the system pages (404, search) want and get. */
.an-cta:has(.an-section-head) {
	text-align: left;
}

.an-cta:has(.an-section-head) p {
	margin-inline: 0;
}

.an-cta:has(.an-section-head) .an-btn-row,
.an-cta:has(.an-section-head) .an-badges {
	justify-content: flex-start;
}

.an-cta p {
	margin-top: clamp(var(--an-s1), 3vw, var(--an-s2));
	font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.an-cta h2,
.an-cta p,
.an-cta .an-eyebrow {
	color: var(--an-on-lime);
}

.an-cta p {
	max-width: 60ch;
	margin-inline: auto;
}

/* Solid, not smudged. At 40% the mark was a grey wash over lime — it read as a
   compression artefact, which is the one thing a deliberate typographic mark
   must not do. Full strength in the ink tone instead: 14.99:1 on lime against
   the heading's 13.88:1, so it is a shade heavier than the words beside it and
   still unmistakably part of the same line. */
.an-cta .an-slash {
	color: var(--an-ink);
	opacity: 1;
}

.an-cta .an-btn {
	background-color: var(--an-on-lime);
	border-color: var(--an-on-lime);
	color: var(--an-lime);
}

/* Hover DARKENS. The inversion the rest of the site uses — dark to lime — has
   nowhere to go on a lime ground: the button took a transparent fill and
   dissolved into the band, so the one thing the closing section exists to be
   clicked stopped looking clickable at exactly the moment the pointer was on
   it. Ink is the deeper of the two darks in the palette, so the pill gets
   heavier under the pointer and keeps its lime label at 14.99:1. */
.an-cta .an-btn:hover,
.an-cta .an-btn:focus {
	background-color: var(--an-ink);
	border-color: var(--an-on-lime);
	color: var(--an-lime);
}

/* A bare link on a lime ground has to go to the ink tone, never to lime — the
   generic rule in style.css §3 hovers everything towards lime, which on this
   band would be lime on lime. Buttons and badges are excluded: they state their
   own hover above, and inheriting this one would make their labels vanish into
   their own dark fill. */
.an-cta a:not(.an-btn):not(.an-badge):hover,
.an-cta a:not(.an-btn):not(.an-badge):focus {
	color: var(--an-ink);
}

.an-cta .an-badge {
	background-color: var(--an-on-lime);
	border-color: var(--an-on-lime);
	color: var(--an-white);
}

.an-cta .an-badge__kicker {
	color: var(--an-lime);
}

.an-cta :focus-visible {
	outline-color: var(--an-on-lime);
}

/* ==========================================================================
   9. PAGE HEADERS, PROSE PAGES, ARCHIVES
   ========================================================================== */

.an-page-header {
	padding-block: var(--an-s3) var(--an-s2);
	border-bottom: 1px solid var(--an-line);
	background-color: var(--an-ink);
}

.an-page-header p {
	color: var(--an-mute);
	margin-bottom: 0;
	max-width: 68ch;
}

.an-page-body {
	padding-block: var(--an-s3);
}

.an-entry__thumb {
	margin-bottom: var(--an-s2);
}

.an-entry__thumb img {
	width: 100%;
	border-radius: var(--an-radius);
}

.an-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: var(--an-s1);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--an-lime);
}

.an-meta a {
	color: var(--an-lime);
}

.an-postlist {
	display: grid;
	gap: var(--an-s2);
}

.an-postcard {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: var(--an-s2);
	align-items: center;
	padding-bottom: var(--an-s2);
	border-bottom: 1px solid var(--an-line);
}

.an-postcard:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.an-postcard__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--an-radius);
}

.an-postcard__title {
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	margin-bottom: 12px;
}

.an-postcard__title a {
	color: var(--an-white);
	text-decoration: none;
}

.an-postcard__title a:hover,
.an-postcard__title a:focus {
	color: var(--an-lime);
}

.an-postcard p {
	color: var(--an-mute);
}

@media (max-width: 767px) {
	.an-postcard {
		grid-template-columns: 1fr;
		gap: var(--an-s1);
	}
}

.an-pagination {
	margin-top: var(--an-s3);
}

.an-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.an-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-white);
	text-decoration: none;
	font-size: 0.9rem;
}

.an-pagination .page-numbers:hover,
.an-pagination .page-numbers:focus,
.an-pagination .page-numbers.current {
	border-color: var(--an-lime);
	color: var(--an-lime);
}

.an-post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--an-s1);
	flex-wrap: wrap;
	margin-top: var(--an-s3);
	padding-top: var(--an-s1);
	border-top: 1px solid var(--an-line);
	font-size: 0.9rem;
}

/* ==========================================================================
   9b. COMMENTS
   ========================================================================== */

.an-comments {
	margin-top: var(--an-s3);
	padding-top: var(--an-s2);
	border-top: 1px solid var(--an-line);
}

.an-comments__list,
.an-comments__list .children {
	list-style: none;
	padding-left: 0;
}

.an-comments__list .children {
	padding-left: var(--an-s1);
	border-left: 1px solid var(--an-line);
	margin-top: var(--an-s1);
}

.an-comments__list li article,
.an-comments__list .comment-body {
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 22px 24px;
	margin-bottom: var(--an-s1);
}

.an-comments .comment-meta,
.an-comments .comment-metadata {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--an-mute);
	margin-bottom: 10px;
}

.an-comments .comment-author img {
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.an-comments .comment-respond {
	margin-top: var(--an-s2);
}

.an-comments .comment-form p {
	margin-bottom: var(--an-s1);
}

/* ==========================================================================
   10. PRICING TEMPLATE
   Tiers are editable page content, never hardcoded here. Any block column,
   list or heading the owner writes in the editor is styled into a tier card.
   ========================================================================== */

.an-pricing__intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--an-s2);
}

.an-pricing-content .wp-block-columns {
	gap: var(--an-s1);
	align-items: stretch;
}

.an-pricing-content .wp-block-column {
	background-color: var(--an-ink);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 32px 28px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.an-pricing-content .wp-block-column:hover {
	border-color: var(--an-lime);
	transform: translateY(-4px);
}

.an-pricing-content .wp-block-column h2,
.an-pricing-content .wp-block-column h3 {
	font-size: 1.25rem;
	margin-bottom: 10px;
}

/* The tier price: whatever the owner types as the first paragraph after the
   tier heading. Presentation only — this theme states no amount of its own. */
.an-pricing-content .wp-block-column h2 + p,
.an-pricing-content .wp-block-column h3 + p {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 118, "wght" 800;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1;
	color: var(--an-lime);
	margin-bottom: 18px;
}

.an-pricing-content .wp-block-column ul {
	list-style: none;
	padding: 0;
	margin-bottom: var(--an-s1);
}

.an-pricing-content .wp-block-column li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	color: var(--an-mute);
	font-size: 0.92rem;
}

.an-pricing-content .wp-block-column li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--an-lime);
	border-bottom: 2px solid var(--an-lime);
	transform: rotate(45deg);
}

.an-pricing-content .wp-block-column .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.an-pricing__note {
	margin-top: var(--an-s2);
	text-align: center;
	color: var(--an-mute);
	font-size: 0.9rem;
}

.an-editor-hint {
	max-width: 760px;
	margin: var(--an-s2) auto 0;
	padding: 20px 24px;
	border: 1px dashed var(--an-lime);
	border-radius: var(--an-radius);
	background-color: var(--an-ink);
	color: var(--an-white);
	font-size: 0.9rem;
}

.an-editor-hint p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   11. 404 / SEARCH / EMPTY STATES
   ========================================================================== */

.an-empty {
	padding-block: var(--an-s4);
	text-align: center;
}

.an-empty__code {
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 122, "wght" 800;
	font-size: clamp(4rem, 16vw, 10rem);
	line-height: 0.9;
	color: var(--an-lime);
	margin-bottom: var(--an-s1);
}

.an-empty .an-search-form {
	margin-inline: auto;
	margin-top: var(--an-s2);
}

.an-empty ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: var(--an-s1);
}

/* ==========================================================================
   12. REDUCED MOTION
   style.css already collapses every transition and animation duration. That
   alone would leave a looping keyframe frozen on its LAST frame, so the three
   animations that actually move something are named and stopped here:
   the hero zoom and the scroll cue are switched off outright, and the marquee
   is paused where it stands. The hero video is not an animation at all, so
   nothing above touches it; it is removed here too.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.an-hero__media img {
		animation: none;
		transform: none;
	}

	/* Removed outright rather than paused. This query is answered when styles
	   are first computed, before anything paints, so not one frame of the video
	   can reach the screen — where a JS pause necessarily runs after first paint
	   and can flash motion at exactly the visitor who asked for none. With the
	   video gone the still beneath it, already stripped of its zoom above, is
	   the hero. Nothing else changes: the veil, the copy and the contrast are
	   identical either way. */
	.an-hero__video {
		display: none;
	}

	.an-hero__cue-rule::after {
		animation: none;
		transform: none;
	}

	.an-marquee__track {
		animation-play-state: paused;
	}

	/* The comparison table's cut-edge fade is a still image and stays — it is
	   information about where the table ends, not decoration. Only its crossfade
	   is motion, so the state changes outright. */
	.an-compare-wrap::after {
		transition: none;
	}

	/* Reveals land in their finished state with nothing to travel. The wipe is a
	   mask now (§1d), so it is the stencil that has to go — dropping it outright
	   rather than moving it to its open position, because an absent mask cannot
	   animate at all. */
	.an-js [data-an-reveal],
	.an-js [data-an-reveal="clip"] {
		opacity: 1;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* The nav bar's pin is CSS sticky, so it is instant by nature and there is
	   no motion to remove. The one eased thing is the bar's ground as it takes
	   over as the header; named here so it changes outright instead of
	   crossfading. Same specificity as the rule in style.css §7, and this sheet
	   is enqueued second, so this wins. */
	body.home .an-header {
		transition: none;
	}
}

/* Spec v2 Y1: the "//" mark never wraps alone (an_slash() also binds it to the
   last word with a no-break space). */
.an-display .an-slash {
	white-space: nowrap;
}

/* Spec v2 Y2: on the front page the "See all highlights" button sits on the
   editorial rail with the section head, not on the wide gallery's edge. Same
   identity as style.css "THE EDITORIAL RAIL". */
#highlights .an-hw-outro {
	max-width: calc(var(--an-container) - var(--an-gutter) * 2);
	margin-inline: auto;
}

/* Spec v3 N1: the home masthead. The full white logo across the top of the
   hero; it scrolls away with the hero and is never sticky. The hero reserves
   its height so a tall headline on a short window cannot run under it. The
   nav bar's own wordmark stays hidden until the bar pins (scoped to .an-js,
   so with the script blocked the wordmark simply shows). */
.an-masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding-block: 24px;
}

.an-masthead__logo {
	display: block;
	width: auto;
	height: 56px;
}

body.home .an-hero:has(.an-masthead) {
	padding-top: calc(56px + 24px * 2 + var(--an-s1));
}

.an-js body.home .an-header .an-brand {
	transition: opacity 0.3s ease, visibility 0s;
}

.an-js body.home .an-header:not(.is-pinned) .an-brand {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

@media (max-width: 767px) {
	.an-masthead {
		padding-block: 20px;
	}

	.an-masthead__logo {
		height: 40px;
	}

	body.home .an-hero:has(.an-masthead) {
		padding-top: calc(40px + 20px * 2 + var(--an-s1));
	}
}

/* Spec v3 N5: the Parent Advantage band. Copy and list left, the video right;
   one column below 768px with the copy first. The copy keeps its own measure. */
.an-parents__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin-top: clamp(var(--an-s1), 3vw, var(--an-s2));
}

.an-parents__grid .an-band__copy {
	margin-top: 0;
}

.an-parents__media .an-video {
	margin: 0;
}

@media (max-width: 767px) {
	.an-parents__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Spec v3 N2: the pricing header's tagline, under the subhead. */
.an-page-header .an-pricing__tagline {
	margin-top: 10px;
	color: var(--an-white);
	font-style: italic;
}

/* Spec v3 N3: the main statement at the top of /cancellations/. Brand lime,
   display face, sentence case. Doubled up with .an-prose so the prose
   paragraph colour does not win. */
.an-statement,
.an-prose .an-statement {
	margin: 0 0 var(--an-s2);
	color: var(--an-lime);
	font-family: var(--an-font-display);
	font-variation-settings: "wdth" 110, "wght" 800;
	font-size: clamp(32px, 6vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-wrap: balance;
	overflow-wrap: normal;
}

/* Spec v3 N2: the plan card's lines under the "14 days free" figure. */
.an-pricing-content .wp-block-column .an-plan__then {
	margin-bottom: 22px;
	color: var(--an-white);
	font-size: 1.1rem;
}

.an-pricing-content .wp-block-column .an-plan__fine {
	margin: 14px 0 0;
	color: var(--an-mute);
	font-size: 0.85rem;
}

/* Spec v3 N6 (mobile acceptance, measured 2026-11-03 at 360/390/430/768). */

/* Tap targets at least 44px. Inline links grow their box with padding and
   give it straight back with a negative margin, so nothing moves. */
.an-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.an-social a {
	width: 44px;
	height: 44px;
}

.an-trustbar__patent,
.an-footer__contact a,
.an-meta a,
.an-postcard__title a {
	display: inline-block;
	padding-block: 13px;
	margin-block: -13px;
}

.an-meta a {
	padding-inline: 10px;
	margin-inline: -10px;
}

/* Phones and tablets (the overlay-menu range). */
@media (max-width: 1023px) {
	/* The pinned bar is at most 64px (the toggle is 44px). */
	:root {
		--an-header-h: 60px;
	}

	/* Body copy at least 16px. */
	.an-feature-card p,
	.an-review__quote p,
	.an-index__body p,
	.an-split__copy p,
	.an-list li,
	.an-band__copy .an-list li,
	.an-pricing-content .wp-block-column .an-plan__fine {
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	/* Page titles scale down far enough that the title and its "//" fit a
	   300px column; a single word longer than the column hyphenates instead of
	   snapping mid-word with no hyphen. */
	.an-page-header h1 {
		font-size: clamp(1.9rem, 9vw, 2.6rem);
		hyphens: auto;
	}
}

h1 .an-slash,
h2 .an-slash {
	white-space: nowrap;
}