/* Page-level layouts: heroes, blog, marketing detail, legal, contact, and errors. */

.page-hero {
	position: relative;
	padding-block: clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}

.page-hero--dark {
	background: var(--gradient-hero);
	color: var(--color-white);
}

.page-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.8) 1px, transparent 0);
	background-size: 38px 38px;
	opacity: 0.08;
}

.page-hero__inner { position: relative; max-width: 58rem; }
.page-hero--centered .page-hero__inner,
.blog-index__hero .page-hero__inner,
.blog-archive__hero .page-hero__inner { text-align: center; }
/* V2 stamp chip: light chip with red under-shadow on the dark page heroes. */
.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1rem;
	padding: 0.4rem 1rem;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-sm);
	background: var(--color-tint);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: var(--shadow-stamp-chip);
}

.page-hero__eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1.15em;
	background: url("../img/logo-mark-color.webp") center / contain no-repeat;
}

/* Light page heroes take the white chip; the base rule above is the tint chip
   for the dark heroes. Both keep the mark bare — see layout.css. No light hero
   passes an eyebrow today, so this only sets the behaviour for when one does. */
.page-hero--light .page-hero__eyebrow {
	background: var(--color-white);
	color: var(--color-dark);
}
.page-hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.page-hero__inner > p:last-child,
.page-hero__lede { max-width: 48rem; margin-top: 1.2rem; color: var(--color-body-muted); font-size: var(--text-xl); }
.page-hero--centered .page-hero__lede,
.page-hero--centered .page-hero__inner > p:last-child,
.blog-index__hero .page-hero__inner > p:last-child,
.blog-archive__hero .page-hero__inner > p:last-child { margin-inline: auto; }
.page-hero--dark .page-hero__lede,
.page-hero--dark .page-hero__inner > p:last-child { color: var(--color-on-dark-muted); }
.page-hero:not(.page-hero--dark) { background: linear-gradient(180deg, var(--color-tint), var(--color-white)); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Blog index and archives */
.category-pills { margin-bottom: 2.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.category-pills__list { display: flex; justify-content: center; gap: 0.65rem; min-width: max-content; }
/* Same stamp chip as the integration filters and the benefits sub-nav. */
.category-pill { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.45rem 0.95rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-dark); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: 0 3px 0 rgba(26, 13, 13, 0.55); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition); }
.category-pill:hover,
.category-pill:focus-visible { transform: translateY(-1px); border-color: rgba(196, 28, 28, 0.45); box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7); color: var(--color-primary); }
.category-pill.is-active,
.category-pill[aria-pressed="true"] { border-color: rgba(0, 0, 0, 0.10); background: var(--color-primary); color: var(--color-white); box-shadow: 0 3px 0 var(--color-dark); }
/* Selected pill: declared after :hover/:focus-visible at equal specificity, so
   its 3px shadow was winning while their -1px transform still applied and the
   outer edge lifted. Restate the 3->4 step in the pill's own dark ink. (:active
   below is fine — it is declared after this block, so it already wins.) */
.category-pill.is-active:hover,
.category-pill.is-active:focus-visible,
.category-pill[aria-pressed="true"]:hover,
.category-pill[aria-pressed="true"]:focus-visible { color: var(--color-white); box-shadow: 0 4px 0 var(--color-dark); }
.category-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(26, 13, 13, 0.55); transition-duration: var(--transition-press); }

.blog-post-list__featured { margin-bottom: 2rem; }
.blog-grid { display: grid; gap: 2rem; }

.blog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-stamp);
	/* Also a .reveal target — see the note on .card in components.css. */
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--reveal-duration) ease-out var(--reveal-delay, 0s), translate var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0s);
}

@media (hover: hover) {
	.blog-card:hover { transform: translate(-3px, -3px); border-color: rgba(196, 28, 28, 0.45); box-shadow: var(--shadow-stamp-hover); }
}
.blog-card[hidden] { display: none; }
.blog-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--color-dark), var(--color-primary)); }
/* --transition-slow, not a hardcoded 500ms ease. This was the only fully
   hardcoded duration+easing pair in the theme and the only use of plain `ease`
   anywhere, while --transition-slow was defined and used zero times — so one
   change retires both anomalies. 300ms still reads as a drift rather than a
   snap at a 1.035 scale. */
.blog-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
@media (hover: hover) {
	.blog-card:hover .blog-card__image { transform: scale(1.035); }
}
.blog-card__image-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-dark), var(--color-primary)); }
/* Static label, so it is a stamp chip — the rounded pill is reserved for the
   interactive category/filter controls. White chip + red under-shadow. */
.blog-card__featured-label { position: absolute; top: 1rem; left: 1rem; padding: 0.3rem 0.75rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.03em; box-shadow: var(--shadow-stamp-chip); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.5rem; }
.category-badge { display: inline-flex; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); background: rgba(196, 28, 28, 0.1); color: var(--color-primary); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.category-badge:hover { background: var(--color-primary); color: var(--color-white); }
.blog-card__title { margin-top: 0.8rem; font-size: var(--text-xl); }
.blog-card__title a { color: var(--color-dark); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { margin-top: 0.65rem; color: var(--color-body-muted); }
.blog-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: auto; padding-top: 1.25rem; }
.blog-card__read-more { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; text-decoration: none; }

.post-meta { display: flex; flex-wrap: wrap; gap: 0.8rem 1.25rem; color: var(--color-body-muted); font-size: var(--text-sm); }
.post-meta__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.post-meta__role { padding-left: 0.5rem; border-left: 1px solid var(--color-border); }
.post-meta--compact .post-meta__item { font-size: 0.8rem; }

.blog-empty { padding: 2rem; border-radius: var(--radius); background: var(--color-tint); text-align: center; color: var(--color-body-muted); }
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
/* Chip tier, matching .category-pill exactly — same size, same alpha steps. */
.page-numbers { display: inline-grid; place-items: center; min-width: 2.7rem; min-height: 2.7rem; padding: 0.45rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-dark); font-weight: 600; text-decoration: none; box-shadow: 0 3px 0 rgba(26, 13, 13, 0.55); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition); }
a.page-numbers:hover,
a.page-numbers:focus-visible { transform: translateY(-1px); border-color: rgba(196, 28, 28, 0.45); box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7); color: var(--color-primary); }
a.page-numbers:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(26, 13, 13, 0.55); transition-duration: var(--transition-press); }
.page-numbers.current { border-color: rgba(0, 0, 0, 0.10); background: var(--color-primary); color: var(--color-white); box-shadow: 0 3px 0 var(--color-dark); }

@media (min-width: 48rem) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.blog-card--featured .blog-card__media { aspect-ratio: auto; min-height: 23rem; }
	.blog-card--featured .blog-card__body { justify-content: center; padding: clamp(2rem, 5vw, 3.5rem); }
	.blog-card--featured .blog-card__title { font-size: var(--text-3xl); }
}

@media (min-width: 64rem) {
	.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Blog article */
.blog-single__hero { position: relative; display: grid; align-items: end; min-height: 26rem; background: var(--gradient-hero); color: var(--color-white); overflow: hidden; }
.blog-single__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 13, 13, 0.2), rgba(26, 13, 13, 0.94)); }
.blog-single__hero-media { position: absolute; inset: 0; }
.blog-single__hero-image { width: 100%; height: 100%; object-fit: cover; }
.blog-single__hero-content { position: relative; z-index: 2; width: 100%; padding-block: 4rem; }

/* Over the featured photo the translucent .category-badge pill was ~13px of red
   on whatever the image happened to be. Give it an opaque stamp-chip surface so
   it reads on any image, while staying a clear step below the h1. */
.blog-single__hero-content .category-badge { padding: 0.3rem 0.8rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.03em; box-shadow: var(--shadow-stamp-chip); }
.blog-single__hero-content .category-badge:hover,
.blog-single__hero-content .category-badge:focus-visible { background: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 0 var(--color-dark); }

/* The hero is a dark photo wash but carries neither .on-dark nor .section--dark. */
.blog-single__hero-content :focus-visible { outline-color: var(--color-white); }
.blog-single__hero h1 { max-width: 58rem; margin-top: 1rem; font-size: clamp(2.25rem, 6vw, 4rem); }
.blog-single__body { max-width: 54rem; padding-block: 3rem 5rem; }
.blog-single__back { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.5rem; font-weight: 800; text-decoration: none; }
.blog-single__body > .post-meta { padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.blog-single__lede { margin: 2rem 0; padding-left: 1.25rem; border-left: 4px solid var(--color-primary); color: var(--color-dark); font-size: var(--text-xl); font-weight: 600; }
.entry-content { font-size: 1.08rem; line-height: 1.78; }
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2 { margin-top: 2.5rem; color: var(--color-dark); font-size: var(--text-3xl); scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1rem); }
.entry-content h3 { margin-top: 2rem; color: var(--color-dark); font-size: var(--text-2xl); }
.entry-content ul,
.entry-content ol { padding-left: 1.5rem; }
.entry-content li + li { margin-top: 0.45rem; }
.entry-content a { font-weight: 650; }
.entry-content .callout { margin-block: 2rem; padding: 1.35rem 1.5rem; border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-tint); color: var(--color-dark); }
/* Stamped together with .post-navigation a below it — they stack directly on
   every post, so treating only one would leave the other the lone flat slab. */
.blog-author { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding: 1.5rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-tint); box-shadow: var(--shadow-stamp); }
/* Was an initials monogram on a --gradient-primary disc. Posts now carry the
   house byline, and a monogram of "RebelPSA" is a circle with an R in it, so the
   brand mark replaced it. That also retired the only place --gradient-primary
   carried text, which is where the muted-white-on-#D63A3A contrast problem
   lived. */
.blog-author__mark { flex: 0 0 auto; width: 2.75rem; height: auto; }
.blog-author__name { color: var(--color-dark); font-weight: 800; }
.blog-author__role { color: var(--color-body-muted); }
.post-navigation { display: grid; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.post-navigation a { display: flex; flex-direction: column; height: 100%; padding: 1rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); text-decoration: none; box-shadow: var(--shadow-stamp); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
/* Card-tier hover: shadow delta equals transform delta so the outer edge holds. */
.post-navigation a:hover,
.post-navigation a:focus-visible { transform: translate(-3px, -3px); border-color: rgba(196, 28, 28, 0.45); box-shadow: var(--shadow-stamp-hover); }
.post-navigation span { color: var(--color-body-muted); font-size: var(--text-sm); }
.post-navigation strong { color: var(--color-dark); }
.post-navigation__next { text-align: right; }
.related-posts { background: var(--surface-grain-light) repeat, var(--color-tint); }
.related-posts h2 { margin-bottom: 2rem; text-align: center; font-size: var(--text-3xl); }
/* Closes /features/, /blog/ and single posts. It used to chain into the footer's
   flat-dark top; the footer now opens on a light band, so this edge takes the
   footer's torn seam instead and the band is torn on both edges. */
.blog-cta { background: var(--gradient-dark); }
.blog-cta__inner { max-width: 48rem; text-align: center; }
.blog-cta h2 { font-size: var(--text-3xl); }
.blog-cta p { margin: 0.75rem 0 1.5rem; color: var(--color-on-dark-muted); }

@media (min-width: 40rem) {
	.post-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Generic editable page content */
.page-content { max-width: 54rem; }
.page-content > * + * { margin-top: 1rem; }
.page-content h1 { margin-bottom: 1.5rem; font-size: var(--text-4xl); }

/* Shared sticky in-page navigation — V2 stamp chip bar */
.sub-nav--horizontal {
	position: sticky;
	/* + --chrome-top: sticky offsets are measured from the scrollport, so this
	   has to know where the fixed header actually starts. With the admin bar
	   present the header sits 32px down and this rail was sticking straight
	   behind it. */
	top: calc(var(--nav-h) + var(--chrome-top));
	z-index: 40;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	/* Opaque, not 96% + blur. Its sticky containing block is <main>, which
	   includes the dark closing CTA band — that band was ghosting through the
	   rail as a grey-pink wash with its white headline legible between the chips.
	   Losing the blur also retires the last blurred shadow in the theme: the
	   0 4px 14px glow below contradicted the flat-fill language everywhere else,
	   and it sits on the one edge that meets a flat section. */
	background: var(--color-white);
	box-shadow: 0 3px 0 rgba(26, 13, 13, 0.10);
	/* Pin the height instead of letting the chip rows decide it. Eight chips sit
	   near their wrap point across the desktop range, and the fallback font is not
	   pixel-identical to Barlow, so at a viewport width that straddles that point
	   the rail can change row count at the font swap and shift everything below it.
	   The threshold moves with the label strings and the horizontal padding, so
	   chasing it is not a fix.
	   --subnav-h is already the rail's tallest state per breakpoint, so reserving it
	   makes a row-count change cost nothing, and it makes the token exact rather
	   than approximate for .benefit-category's anchor offset. */
	display: flex;
	align-items: center;
	min-height: var(--subnav-h);
}

/* Mobile/tablet: touch scroll with snap, hidden scrollbar, edge fades.
   Desktop (≥64rem): no scrolling at all — chips wrap and all stay visible. */
.sub-nav__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

/* Edge fade belongs to the horizontal scroller only. The legal TOC shares
   .sub-nav__scroll but stacks full-width chips in a column, where this mask was
   already fading both ends of every chip — and would now taper their offsets. */
.sub-nav--horizontal .sub-nav__scroll {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}

.sub-nav__scroll::-webkit-scrollbar { display: none; }

/* The padding here has never applied: base.css's `ul[class], ol[class]` reset is
   (0,1,1) and this selector is (0,1,0), so the bar has always been exactly chip
   height. That is why the chips looked cramped — their 3px stamp shadow spilled
   past the bar's border on desktop and was clipped off entirely on mobile, and
   the row touched the hero's torn seam above it. Two-part selector wins it back. */
.sub-nav__list { display: flex; gap: 0.4rem; min-width: max-content; list-style: none; }
/* Vertical only. Inline padding here narrows the row's content box, which near
   the eight chips' wrap point is enough to push them over it while the fallback
   font is still active — the bar then changes row count at the font swap and
   shifts everything below it. A knife-edge wrap, so it only appears at the
   straddling widths. The air the design calls for is vertical; leaving the
   horizontal budget exactly as it is keeps the wrap behaviour stable. */
.sub-nav .sub-nav__list { padding-block: 0.6rem; }
.sub-nav__item { scroll-snap-align: start; }

@media (min-width: 64rem) {
	.sub-nav__scroll {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sub-nav__list {
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.3rem;
	}
}

.sub-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem; /* 44px touch target on touch layouts */
	padding: 0.35rem 0.7rem;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-dark);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 3px 0 rgba(26, 13, 13, 0.55);
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition);
}

@media (min-width: 64rem) {
	.sub-nav__link { min-height: 2.5rem; padding: 0.3rem 0.55rem; }
}

.sub-nav__link:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(196, 28, 28, 0.45);
	box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7);
	color: var(--color-primary);
}

/* Hover half of the rule above, split out: these chips scroll in-page rather
   than navigating, so on touch a tapped chip stayed lifted in view. Keyboard
   focus keeps the full affordance unguarded. */
@media (hover: hover) {
	.sub-nav__link:hover {
		transform: translateY(-1px);
		border-color: rgba(196, 28, 28, 0.45);
		box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7);
		color: var(--color-primary);
	}
}

.sub-nav__link:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(26, 13, 13, 0.55); transition-duration: var(--transition-press); }

/* Current section: solid red stamp */
.sub-nav__link[aria-current="true"] {
	border-color: rgba(0, 0, 0, 0.10);
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 3px 0 var(--color-dark);
}

/* This rule sits after :hover/:focus-visible/:active at equal specificity
   (class + attribute vs class + pseudo-class, both 0,2,0), so its box-shadow
   was winning in every interactive state while those states' transforms still
   applied — the current chip lifted 1px with a 3px shadow and pressed 2px with
   a 3px shadow, moving the outer edge in both directions. Restate the 3->4 /
   3->1 invariant in the chip's own dark ink. */
.sub-nav__link[aria-current="true"]:focus-visible { box-shadow: 0 4px 0 var(--color-dark); }
@media (hover: hover) {
	.sub-nav__link[aria-current="true"]:hover { box-shadow: 0 4px 0 var(--color-dark); }
}
.sub-nav__link[aria-current="true"]:active { box-shadow: 0 1px 0 var(--color-dark); }

.sub-nav__link .sketch-icon { width: 18px; height: 18px; }
.sub-nav__link[aria-current="true"] .sketch-icon { filter: brightness(0) invert(1); }

/* Desktop: everything fits without scrolling — compact chips, one row. */
@media (min-width: 64rem) {
	.sub-nav__link { font-size: 0.8125rem; }
	.sub-nav__link .sketch-icon { width: 16px; height: 16px; }
}
/* Column gap has to clear the chip 3px offset — it would otherwise inherit
   0.3rem, leaving 1.8px between one chip shadow and the next chip border.
   0.5rem is the floor that still leaves 5px of air; the ToS list is 15 entries
   and every rem here is multiplied by 14 gaps. */
.sub-nav--legal .sub-nav__list { flex-direction: column; min-width: 0; gap: 0.5rem; }
.sub-nav--legal .sub-nav__link { width: 100%; }
.sub-nav__heading { margin-bottom: 0.5rem; color: var(--color-dark); font-weight: 800; }

/* Benefits detail */
.benefits-hero { background: var(--gradient-hero); }
.benefits-hero__copy { max-width: 58rem; text-align: center; margin-inline: auto; }
.benefits-hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.benefits-hero .page-hero__lede { margin-inline: auto; color: var(--color-on-dark-muted); }
.benefits-impact { margin-top: 3rem; padding: 0; list-style: none; }
/* Card tier on a dark gradient. White ink is load-bearing here, not stylistic:
   this is a 4-up row spanning the container, so an accent-red offset would render
   strong on the leftmost card and nearly absent on the rightmost as the gradient
   reaches #C41C1C. See the measured table in tokens.css. */
.benefits-impact__item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.25rem; border: 2px solid var(--color-border-dark); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.07); text-align: center; box-shadow: var(--shadow-stamp-dark); }
.benefits-impact__item .icon { color: var(--color-accent-on-dark); font-size: 1.45rem; }
.benefits-impact__stat { font-size: var(--text-3xl); }
.benefits-impact__label { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
/* Anchor offset, not visual spacing. The old flat 4rem double-counted: it cleared
   the rail and then the section's own --section-pad cleared it again, leaving
   ~119px of empty band between the stuck rail and the first ink. Naming the two
   things that actually occlude — the header and the rail — plus 1rem of air lands
   the section edge just below the rail instead.
   Deliberately does NOT subtract --section-pad to close the remaining gap: these
   sections are real focus targets (main.js focuses the anchor target on every
   in-page jump) and tucking their top edge under the rail would hide the top of
   the focus ring. */
.benefit-category { scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + var(--subnav-h) + 1rem); }
.benefit-category__header { max-width: 50rem; margin: 0 auto 2.5rem; text-align: center; }
.benefit-category__label-row { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.benefit-category__icon,
.benefit-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: var(--radius); background: rgba(196, 28, 28, 0.1); color: var(--color-primary); }
.benefit-category__icon--dark,
.benefit-card__icon--dark { background: var(--color-dark); color: var(--color-accent-on-dark); }
.benefit-category__eyebrow { color: var(--color-primary); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.benefit-category__header h2 { font-size: var(--text-4xl); color: var(--color-dark); }
.benefit-category__header > p:last-child { margin-top: 0.8rem; color: var(--color-body-muted); font-size: var(--text-lg); }
.benefit-category__grid { padding: 0; list-style: none; }
.benefit-category__grid .benefit-card h3 { margin-top: 1rem; }
/* Chained into the footer's flat-dark top before the footer's brand band went
   light; that edge now takes the footer's torn seam. */
.benefits-cta { background: var(--gradient-dark-sym); }
.benefits-cta__inner { max-width: 52rem; text-align: center; }
.benefits-cta h2 { font-size: var(--text-4xl); }
.benefits-cta p { margin: 0.8rem 0 1.5rem; color: var(--color-on-dark-muted); font-size: var(--text-lg); }
.benefits-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Pricing */
.pricing-page__content { background: linear-gradient(180deg, var(--color-white), var(--color-tint)); }
.pricing-page__inner { max-width: 62rem; }
.pricing-card { position: relative; padding: clamp(1.5rem, 5vw, 3rem); border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-stamp-lg); overflow: hidden; }
/* Same stamp-chip treatment as .blog-card__featured-label; the under-shadow
   goes dark rather than red because the chip's own fill is already red. */
.pricing-card__badge { display: inline-flex; padding: 0.3rem 0.85rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.03em; box-shadow: 0 4px 0 var(--color-dark); }
.pricing-card__header { margin-top: 1.25rem; }
.pricing-card__header h2 { font-size: var(--text-3xl); color: var(--color-dark); }
.pricing-card__header p { margin-top: 0.4rem; color: var(--color-body-muted); }
.pricing-card__price { margin-block: 1.75rem; padding-block: 1.5rem; border-block: 1px solid var(--color-border); }
.pricing-card__amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; }
.pricing-card__amounts s { color: var(--color-body-muted); font-size: var(--text-xl); }
.pricing-card__amounts strong { color: var(--color-primary); font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; }
.pricing-card__terms { margin-top: 0.4rem; color: var(--color-body-muted); }
.pricing-card__expiry { margin-top: 0.25rem; color: var(--color-primary-deep); font-weight: 800; }
.pricing-card__features { margin-block: 1.5rem; padding: 0; list-style: none; }
.pricing-card__features li,
.pricing-includes li { display: flex; align-items: flex-start; gap: 0.55rem; }
/* Optical alignment only — these are raster sketch icons, so their ink comes
   from the light/dark variant the template picks, never from `color`. */
.pricing-card__features .sketch-icon,
.pricing-includes .sketch-icon { margin-top: 0.15rem; }
.pricing-card__cta { align-self: flex-start; }
/* Dark-filled panel on a light page: near-black offset (it lands on the light
   wash), on-dark hairline (it composites over this box own dark fill). */
.pricing-includes { margin-top: 2rem; padding: 2rem; border: 2px solid var(--color-border-dark); border-radius: var(--radius-lg); background: var(--surface-grain-dark) repeat, var(--color-dark); color: var(--color-white); box-shadow: var(--shadow-stamp); }
.pricing-includes h2 { font-size: var(--text-2xl); }
.pricing-includes ul { display: grid; gap: 0.75rem; margin-top: 1rem; padding: 0; list-style: none; }

/* Contact */
.contact-channels { position: relative; z-index: 2; margin-top: -4.5rem; }

/* The -4.5rem lift is a deliberate desktop overlap of the hero's lower edge.
   Below 64rem the hero is far shorter, so the same lift dragged the first card
   on top of the lede and clipped it — pull the overlap back to a shallow one. */
@media (max-width: 63.99rem) {
	.contact-channels { margin-top: -2rem; }
}
.contact-channels__grid { display: grid; gap: 1rem; padding: 0; list-style: none; }
.contact-channel { padding: 1.35rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-stamp); text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--reveal-duration) ease-out var(--reveal-delay, 0s), translate var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0s); }
@media (hover: hover) {
	.contact-channel:hover { transform: translate(-3px, -3px); border-color: rgba(196, 28, 28, 0.45); box-shadow: var(--shadow-stamp-hover); }
}
.contact-channel__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 0.65rem; border-radius: 50%; background: rgba(196, 28, 28, 0.1); color: var(--color-primary); }
.contact-channel__label { color: var(--color-body-muted); font-size: var(--text-sm); font-weight: 700; }
.contact-channel a,
.contact-channel__value { display: block; color: var(--color-dark); font-weight: 800; text-decoration: none; }
.contact-channel__detail { font-size: var(--text-sm); font-weight: 500 !important; color: var(--color-primary) !important; }
.contact-page__form { background: linear-gradient(180deg, var(--color-white), var(--color-tint)); }
.contact-page__form-inner { max-width: 56rem; }
/* Carries id="contact-form" — the anchor target for /contact/#contact-form links
   from the integrations section — so it owns the fixed-header offset. It is on
   the card rather than the form so the anchor resolves in every state the card
   can be in. */
.contact-form-card { padding: clamp(1.25rem, 5vw, 2.5rem); border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-stamp-lg); scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1.5rem); }
.contact-form-card__header { margin-bottom: 1.5rem; text-align: center; }
.contact-form-card__header h2 { font-size: var(--text-3xl); color: var(--color-dark); }
.contact-form-card__header p { margin-top: 0.45rem; color: var(--color-body-muted); }
.contact-form { gap: 1.2rem; }
.contact-form-card > .form-status { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.25rem; }
.contact-form-card > .form-status h2 { font-size: var(--text-xl); }
.contact-type { display: block; padding: 0; border: 0; }
.contact-type legend { margin-bottom: 0.55rem; font-weight: 800; color: var(--color-dark); }
.contact-type__options { display: grid; gap: 0.75rem; }
.contact-type__option { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.contact-type__option:has(input:checked) { border-color: var(--color-primary); background: rgba(196, 28, 28, 0.06); }
.contact-type__option input { width: 1.1rem; min-height: auto; }
.contact-type__option span { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }

@media (min-width: 40rem) {
	.contact-type__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.contact-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pricing-includes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.contact-channels__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Legal */
.legal-layout { background: linear-gradient(180deg, var(--color-white), var(--color-tint)); }
.legal-layout__grid { display: grid; gap: 2.5rem; align-items: start; }
.legal-layout__sticky { padding: 1rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-stamp); }
/* Was a single <p> back when there were two legal documents pointing at each
   other. With seven it is a list, so the rail below the table of contents needs
   real row rhythm rather than one bold line. */
.legal-layout__sibling { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.legal-layout__sibling ul { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.legal-layout__sibling a { display: block; padding: 0.35rem 0; font-weight: 750; font-size: var(--text-sm); text-decoration: none; }
.legal-layout__sibling a:hover { text-decoration: underline; }
.legal-document { min-width: 0; padding: clamp(1.25rem, 4vw, 2.5rem); border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-stamp); }
.legal-document__intro { padding: 1.25rem; border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-tint); color: var(--color-dark); font-size: var(--text-lg); }
.legal-section { padding-block: 2rem; scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1rem); }
.legal-section + .legal-section { border-top: 1px solid var(--color-border); }
.legal-section__title { color: var(--color-dark); font-size: var(--text-2xl); }
.legal-section__body { color: var(--color-body-muted); }
.legal-section__body > * + * { margin-top: 0.9rem; }
.legal-section__body h3 { margin-top: 1.5rem; color: var(--color-dark); font-size: var(--text-xl); }
.legal-section__body ul,
.legal-section__body ol { padding-left: 1.4rem; }
.legal-section__body li + li { margin-top: 0.35rem; }
.legal-document__updated { margin-top: 1rem; padding: 1.25rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-on-dark-muted); box-shadow: var(--shadow-stamp); }
/* Flat --color-dark rather than a gradient, so the accent would have passed here
   at 11.23:1 — but this is a link, and links on dark are white and underlined
   everywhere else in the theme. Consistency is worth more than the
   colour. */
.legal-document__updated a { color: var(--color-link-on-dark); text-decoration: underline; text-underline-offset: 0.15em; }
/* Dark block without .on-dark / .section--dark, so base.css leaves the focus
   ring red against #1A0D0D. */
.legal-document__updated :focus-visible { outline-color: var(--color-white); }
.legal-contact-card { margin-top: 1.25rem; padding: 1.25rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-tint); color: var(--color-dark); font-style: normal; box-shadow: var(--shadow-stamp); }
.legal-contact-card a { font-weight: 700; }
.legal-uppercase { font-size: var(--text-sm); font-weight: 650; letter-spacing: 0.015em; text-transform: uppercase; }

@media (min-width: 64rem) {
	.legal-layout__grid { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); }

	/* Sticky has to sit on the GRID ITEM, not on the card inside it. A sticky
	   element travels within its containing block, and the aside is shrink-to-fit
	   (the grid is align-items: start), so it was exactly as tall as the card it
	   held — 714px in both — leaving zero room to move. The rule was there and did
	   nothing; the card scrolled straight off the top. The aside's containing block
	   is its grid area, which spans the full document height, so the travel range
	   is the whole page. */
	.legal-layout__sidebar {
		position: sticky;
		top: calc(var(--nav-h) + var(--chrome-top) + 1rem);
	}

	/* The cap stops the tail of the list pinning off-screen where it could never
	   be reached; the internal scroll only engages when the list genuinely does
	   not fit. Sized against the longer of the two documents: ToS has 15 entries
	   to Privacy's 12, so it is the one that decides these numbers. At 859px it
	   was overflowing on any window under ~1030px tall.

	   1.5rem of bottom breathing room rather than 2.5rem, and the chips below run
	   a little shorter, which together bring the 15-entry list to ~777px — inside
	   the 796px a 900px-tall window leaves under the fixed header. Anything much
	   shorter than that still scrolls, and should: fifteen legible rows do not fit
	   in 700px. */
	.legal-layout__sticky {
		max-height: calc(100vh - var(--nav-h) - 1.5rem);
		overflow-y: auto;
	}

	/* Pointer-only context here, so these can sit under the 2.5rem the horizontal
	   bar uses without hurting the hit target — 36px still clears the 24px WCAG
	   2.5.8 minimum comfortably. Scoped to the legal variant so the benefits bar
	   keeps its own sizing. */
	.sub-nav--legal .sub-nav__link { min-height: 2.25rem; }
}

/* ===== /demo landing page ===== */
.demo-page { background: linear-gradient(180deg, var(--color-white), var(--color-tint)); }

/* fit-content + auto margins centre the row as a block, so the leading check
   icons stay in one column when the three bullets stack on a phone. */
.demo-page__trust { display: grid; gap: 0.75rem; width: fit-content; margin: 1.5rem auto 0; padding: 0; list-style: none; }

.demo-page__trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-body-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.demo-page__trust .sketch-icon { width: 18px; height: 18px; }

/* Inherits the surface it lands on — the demo form sits on a dark panel. */
.section--dark .demo-page__trust li,
.on-dark .demo-page__trust li,
.demo-card .demo-page__trust li { color: var(--color-on-dark-muted); }

@media (min-width: 40rem) {
	.demo-page__trust { grid-auto-flow: column; gap: 1.75rem; }
}

/* Default and 404 */
.default-page .entry-content { max-width: 54rem; }
.error-404 { display: grid; place-items: center; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); background: radial-gradient(circle at 50% 35%, var(--color-tint), var(--color-white) 65%); }
.error-404__inner { width: 100%; padding-block: 5rem; }
.error-404__content { max-width: 40rem; margin-inline: auto; text-align: center; }
.error-404 h1 { color: var(--color-primary); font-size: clamp(6rem, 22vw, 12rem); line-height: 0.85; }
.error-404 h2 { margin-top: 1rem; color: var(--color-dark); font-size: var(--text-4xl); }
.error-404 p { margin-top: 0.8rem; color: var(--color-body-muted); font-size: var(--text-lg); }
.error-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }

/* ===== Company ===== */
/* A reading column, not a grid: the page is three prose sections and a facts
   strip, and prose that runs the full 80rem container is unreadable. 54rem is
   the same cap .default-page .entry-content uses for the same reason. */
.company-story__inner { max-width: 54rem; }
.company-story__title { font-size: var(--text-3xl); color: var(--color-dark); }
.company-story__body { margin-top: 0.9rem; color: var(--color-body); font-size: var(--text-lg); }

/* Light-surface sibling of the .benefits-impact__item / .trust-strip__grid stat
   tile family — same 2px hairline, same --radius-lg, same stamp — rather than a
   third tile treatment. It differs only where it has to: this band is tint, so
   the border and shadow are the light-surface tokens. */
.company-facts__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.company-facts__item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.5rem 1.25rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-lg); background: var(--color-white); text-align: center; box-shadow: var(--shadow-stamp); }
.company-facts__item dt { color: var(--color-body-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.company-facts__item dd { margin: 0; color: var(--color-dark); font-family: var(--font-heading); font-size: var(--text-xl); }
.company-facts__item dd a { color: inherit; }

@media (min-width: 40rem) {
	.company-facts__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
	.company-facts__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* ===== Coming soon =====
   The holding state for a page whose content exists but is not published yet.
   One centred stamped panel, deliberately calm — it is not an error and it should
   not look like one. */
/* A stamped panel, not bare centred text. Same card language as .message-panel —
   2px hairline, --radius-lg, --shadow-stamp — because a holding state still has
   to look like a deliberate object rather than a page that failed to load. Capped
   and centred so it does not stretch to the 80rem container on a wide screen. */
.coming-soon__panel {
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3rem);
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-stamp-lg);
	text-align: center;
}

/* display:flex + margin-inline:auto, NOT inline-flex — an inline-level plate sat
   on the same line as the text that followed it instead of above it. */
.coming-soon__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	margin: 0 auto 1.25rem;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	background: var(--color-tint);
	box-shadow: var(--shadow-stamp);
}
.coming-soon__title { font-size: var(--text-3xl); color: var(--color-dark); }
.coming-soon__lede { margin-top: 0.8rem; color: var(--color-body); font-size: var(--text-lg); }
.coming-soon__note { margin-top: 1rem; color: var(--color-body-muted); font-size: var(--text-sm); }
.coming-soon__note a { font-weight: 700; }

/* ===== Resources ===== */
/* The card itself is the shared .card stamp from components.css — only the
   contents differ, so nothing here re-declares padding, border or shadow. */
.resource-card { display: flex; flex-direction: column; align-items: flex-start; }
/* Not optional, and not defensive. The shared filter in main.js hides a card with
   `card.hidden = true`, which relies on the USER-AGENT rule [hidden]{display:none}
   — and that is a normal declaration in the UA origin, so the author-origin
   `display: flex` above beats it outright. Without this line the filter sets the
   attribute, flips aria-pressed, announces "Showing 2 resources" into the live
   region, and every card stays on screen: the announcement and the page disagree.
   .blog-card carries the identical pairing at :109 and .integration-card at
   components.css:426. Any new card that declares `display` and is filterable owes
   itself this rule. */
.resource-card[hidden] { display: none; }
.resource-card__types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.resource-card__type { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); background: rgba(196, 28, 28, 0.10); color: var(--color-primary-deep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.resource-card__title { margin-top: 0.7rem; font-size: var(--text-xl); }
.resource-card__title a { color: var(--color-dark); text-decoration: none; }
.resource-card__title a:hover { color: var(--color-primary); }
.resource-card__excerpt { margin-top: 0.5rem; color: var(--color-body-muted); font-size: var(--text-sm); }
/* margin-top:auto pins the link to the card's foot so a grid row of cards with
   uneven excerpt lengths still lines its calls-to-action up. */
.resource-card__more { margin-top: auto; padding-top: 1rem; font-weight: 700; }
.resource-card__more a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-primary); text-decoration: none; }
.resource-card__more a:hover { text-decoration: underline; }

.resources-empty { max-width: 42rem; margin-inline: auto; text-align: center; color: var(--color-body-muted); font-size: var(--text-lg); }
.resources-back { margin-top: 2rem; }
.resources-back a,
.resource-document__back a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 700; text-decoration: none; }
.resources-back a:hover,
.resource-document__back a:hover { text-decoration: underline; }

.resource-document__inner { max-width: 54rem; }
.resource-document__back { max-width: 54rem; margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
	.blog-card:hover,
	.contact-channel:hover,
	.sub-nav__link:hover,
	.sub-nav__link:focus-visible,
	.category-pill:hover,
	.category-pill:focus-visible,
	.category-pill:active,
	.post-navigation a:hover,
	.post-navigation a:focus-visible,
	.sub-nav__link:active,
	a.page-numbers:hover,
	a.page-numbers:focus-visible,
	a.page-numbers:active,
	.blog-card:hover .blog-card__image { transform: none; }
}