/*
 * CSC base styles: reset, document defaults, header, footer.
 *
 * Every number here was measured off the rendered Revision 1 mockup at 1440px.
 * Where a value is a deliberate departure it says so inline and there is a
 * matching entry in docs/decisions.md.
 *
 * MOBILE: the mockups are desktop only and the 390px gates are suspended until
 * Lindsay's mobile designs land (build plan W0.10). Nothing here hard codes a
 * width that would block a later retrofit: containers use max-width, the footer
 * grid uses fr units, and the header is flex. No media queries are written yet
 * because there is no approved mobile design to write them from.
 */

/* ---------------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------------- */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

img,
picture,
video,
canvas {
	display: block;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Document
 *
 * Taken from the mockup's own authored stylesheet.
 * ------------------------------------------------------------------------- */

/*
 * line-height stays at normal, which is what the mockup's body uses. 1.65 is a
 * per-element value there, not a document default: the harvest found 15px text at
 * both 24.75px (1.65) and normal on the same page. Setting 1.65 globally inherits
 * into buttons and nav items and makes every one of them too tall, so the loose
 * value is applied per block instead, from --csc-lh-body-loose.
 */
body {
	background: var(--csc-ground);
	color: var(--csc-ink);
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-15);
	font-weight: var(--csc-w-regular);
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--csc-accent-text-aa);
	text-decoration: none;
}

a:hover {
	color: var(--csc-accent-hover-aa);
}

/*
 * Visible focus is required by the accessibility gate in plan section 5.4. The
 * mockup contains no focus styling of its own because it is a static comp with
 * no interactive elements, so this is a mandated addition rather than a
 * departure from the design.
 */
:focus-visible {
	outline: 2px solid var(--csc-accent-text-aa);
	outline-offset: 3px;
}

/* Visually hidden but available to assistive tech. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 22px;
	background: var(--csc-accent);
	color: var(--csc-ink-deepest);
	font-size: var(--csc-fs-13);
	font-weight: var(--csc-w-semibold);
	border-radius: var(--csc-radius-xs);
}

.skip-link:focus {
	left: var(--csc-container-pad);
	top: 8px;
	color: var(--csc-ink-deepest);
}

/* ---------------------------------------------------------------------------
 * Behaviours carried over from the mockup's own authored stylesheet
 * ------------------------------------------------------------------------- */

/* The carousels scroll horizontally but the comp shows no scrollbar. */
.csc-scroll {
	scrollbar-width: none;
}

.csc-scroll::-webkit-scrollbar {
	display: none;
}

/* Native details and summary, styled. The default marker is replaced by the
 * plus glyph, which rotates into a cross when the item opens. */
details[data-faq] summary {
	list-style: none;
	cursor: pointer;
}

details[data-faq] summary::-webkit-details-marker {
	display: none;
}

details[data-faq] .faq-plus {
	transition: transform var(--csc-transition-fast);
}

details[data-faq][open] .faq-plus {
	transform: rotate(45deg);
}

/*
 * Scroll driven section reveal, exactly as the comp does it: an animation on a
 * view() timeline rather than an IntersectionObserver, so it costs no JavaScript.
 * Where animation-timeline is unsupported the duration resolves to 0s and
 * fill-mode: both snaps the element straight to the finished state, so content is
 * never left invisible.
 */
@keyframes csc-reveal {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
	main > section,
	.site-footer {
		animation: csc-reveal auto ease both;
		animation-timeline: view();
		animation-range: entry cover 18%;
	}
}

@media (prefers-reduced-motion: reduce) {
	main > section,
	.site-footer {
		animation: none;
	}

	details[data-faq] .faq-plus {
		transition: none;
	}

	.csc-scroll {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Shared layout
 *
 * The mockup's inner wrappers are content-box: a 1140px content column with
 * 32px of padding OUTSIDE it, 1204px overall, centred in the 1440px viewport
 * with 118px either side. Expressed here in border-box terms so the same
 * numbers come out and the container still shrinks on a narrow screen.
 * ------------------------------------------------------------------------- */

.csc-container {
	max-width: calc(var(--csc-container) + var(--csc-container-pad) * 2);
	margin-inline: auto;
	padding-inline: var(--csc-container-pad);
}

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

/*
 * line-height is deliberately left at normal. The mockup's buttons take their
 * height from the font's own normal line box: at 14px Hanken Grotesk that is
 * 18px, which with 15px of padding gives the 48px button the design shows.
 * Forcing line-height: 1 here made every button 4px short.
 */
.btn {
	display: inline-block;
	border-radius: var(--csc-radius-xs);
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-14);
	font-weight: var(--csc-w-semibold);
	text-align: center;
}

.btn--primary {
	padding: 15px 34px;
	background: var(--csc-accent);
	color: var(--csc-ink-deepest);
	border: 0;
}

.btn--primary:hover {
	color: var(--csc-ink-deepest);
}

/* 14px padding plus a 1px border matches the 15px padding of the solid button,
 * so both render 48px tall. That is how the mockup does it. */
.btn--ghost {
	padding: 14px 33px;
	border: 1px solid var(--csc-border-strong);
	color: var(--csc-ink);
}

.btn--ghost:hover {
	color: var(--csc-ink);
}

/* ---------------------------------------------------------------------------
 * Header
 *
 * 84px tall: 83px of content plus the 1px rule. position is static. It does not
 * stick, which is worth stating because the palette contains a translucent
 * ground colour that belongs to an element further down the page, not to this.
 * ------------------------------------------------------------------------- */

.site-header {
	background: var(--csc-surface);
	border-bottom: 1px solid var(--csc-rule-header);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: calc(var(--csc-container) + var(--csc-container-pad) * 2);
	margin-inline: auto;
	padding: 22px var(--csc-container-pad);
}

.site-header__logo {
	display: block;
	line-height: 0;
}

/* Height drives the size and width follows the intrinsic ratio, so the rendered
 * width lands on the mockup's 163.48px without hard coding a fractional pixel. */
/*
 * The wordmark keeps its proportions even when its column is narrower than it.
 *
 * The reset above gives every image `max-width: 100%`, which against a fixed
 * `height` distorts rather than scales: at a 412px viewport the footer column
 * squeezes to 65px while the height stays 12px, so the mark renders at 5.42:1
 * against its real 12.59:1 and Lighthouse fails image-aspect-ratio. `contain`
 * makes it scale down instead of stretch. At 1440 the box is already the
 * natural size, so nothing moves.
 */
.site-header__wordmark {
	height: 13px;
	width: auto;
	object-fit: contain;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--csc-gap-26);
	white-space: nowrap;
}

.site-nav__links {
	display: flex;
	align-items: center;
	gap: var(--csc-gap-24);
}

/*
 * The link and the plain-text variants must be visually identical. Both are
 * styled by the same rule on purpose: only the affordances differ.
 */
.site-nav__link {
	color: var(--csc-ink-600);
	font-size: var(--csc-fs-13-5);
	font-weight: var(--csc-w-medium);
}

.site-nav__utility {
	color: var(--csc-ink-330-aa);
	font-size: var(--csc-fs-12);
	font-weight: var(--csc-w-medium);
}

/*
 * Hover applies only to real links. `a.site-nav__link` cannot match a <span>, so
 * the suppressed items get no hover state without needing a separate selector.
 * The colour is the design system's own link hover, taken from the mockup's
 * authored stylesheet, not invented here.
 */
a.site-nav__link:hover,
a.site-nav__utility:hover {
	color: var(--csc-accent-hover-aa);
}

/* Suppressed items are inert: no pointer, not selectable as a control. */
.site-nav__link[aria-disabled="true"],
.site-nav__utility[aria-disabled="true"],
.site-footer__link[aria-disabled="true"],
.site-footer__legal-link[aria-disabled="true"] {
	cursor: default;
}

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--csc-gap-16);
}

.site-nav__cta {
	display: inline-block;
	padding: 11px 22px;
	background: var(--csc-accent);
	color: var(--csc-ink-deepest);
	border-radius: var(--csc-radius-xs);
	font-size: var(--csc-fs-13);
	font-weight: var(--csc-w-semibold);
	/* Normal line-height on purpose, same reason as .btn above. */
}

.site-nav__cta:hover {
	color: var(--csc-ink-deepest);
}

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

.site-footer {
	background: var(--csc-tint-2);
	border-top: 1px solid var(--csc-border-mid);
}

.site-footer__cta {
	max-width: calc(var(--csc-container) + var(--csc-container-pad) * 2);
	margin-inline: auto;
	padding: var(--csc-space-88) var(--csc-container-pad) 0;
	text-align: center;
}

/*
 * The mockup element carries white-space: nowrap. Not reproduced: the heading
 * fits on one line inside 1140px without it, so at 1440 the rendering is
 * identical, and nowrap is exactly the kind of rule that structurally prevents
 * the mobile retrofit W0.10 requires. Logged in docs/decisions.md.
 */
.site-footer__heading {
	font-family: var(--csc-font-serif);
	font-size: var(--csc-fs-46);
	font-weight: var(--csc-w-regular);
	line-height: 48.3px;
	letter-spacing: var(--csc-ls-heading);
	color: var(--csc-ink);
}

.site-footer__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--csc-gap-14);
	margin-top: var(--csc-space-30);
	flex-wrap: wrap;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--csc-gap-32);
	max-width: calc(var(--csc-container) + var(--csc-container-pad) * 2);
	margin: var(--csc-gap-72) auto 0;
	padding: var(--csc-space-44) var(--csc-container-pad) 0;
	border-top: 1px solid var(--csc-border-mid);
}

.site-footer__wordmark {
	height: 12px;
	width: auto;
	object-fit: contain;
}

.site-footer__tagline {
	max-width: var(--csc-measure-280);
	margin-top: var(--csc-gap-14);
	color: var(--csc-ink-450-aa);
	font-size: var(--csc-fs-12-5);
	line-height: 21.25px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--csc-gap-9);
}

/*
 * Rendered uppercase rather than written uppercase. The mockup hardcodes the
 * literal string "ABOUT"; using sentence case in the markup with text-transform
 * gives identical pixels while leaving screen readers a normal word to say.
 * Logged in docs/decisions.md.
 */
.site-footer__colhead {
	margin-bottom: 4px;
	color: var(--csc-warm-muted-aa);
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-10);
	font-weight: var(--csc-w-semibold);
	letter-spacing: var(--csc-ls-wider);
	line-height: 13px;
	text-transform: uppercase;
}

.site-footer__link {
	color: var(--csc-ink-550);
	font-size: var(--csc-fs-12-5);
	line-height: 17px;
}

a.site-footer__link:hover,
a.site-footer__legal-link:hover {
	color: var(--csc-accent-hover-aa);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--csc-gap-20);
	max-width: calc(var(--csc-container) + var(--csc-container-pad) * 2);
	margin: var(--csc-space-44) auto 0;
	padding: var(--csc-space-22) var(--csc-container-pad) var(--csc-space-30);
	border-top: 1px solid var(--csc-border-mid);
	color: var(--csc-warm-muted-aa);
	font-size: var(--csc-fs-11-5);
}

/*
 * Footer without the closing CTA band, as the Client Stories comp shows it.
 * It is not just the band being removed: with nothing above it, the link grid
 * drops its top margin and top rule and takes symmetric 56px padding instead,
 * and the legal bar drops its top margin. 302px against Home's 565px.
 */
.site-footer--nocta .site-footer__grid {
	margin-top: 0;
	padding-top: var(--csc-space-56);
	padding-bottom: var(--csc-space-56);
	border-top: 0;
}

.site-footer--nocta .site-footer__legal {
	margin-top: 0;
}

.site-footer__copyright {
	color: var(--csc-warm-muted-aa);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csc-gap-20);
}

.site-footer__legal-link {
	color: var(--csc-warm-muted-aa);
	font-size: var(--csc-fs-11-5);
}

/*
 * Links inside running text need a cue that is not colour alone: WCAG 1.4.1, and
 * axe's link-in-text-block check. Colour alone fails for anyone who cannot
 * distinguish the green from the body grey. Underlined only where a link sits
 * INSIDE prose; nav items, buttons and card links are their own blocks and carry
 * their own affordances, so they stay clean as the comp draws them.
 */
.prose__inner a,
.contact__point-desc a,
.cform__privacy a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Prose pages
 *
 * The thank-you pages and the four legal pages. No comp exists for any of them
 * and none is coming, so this is built from the design system: the same serif
 * display face, the same measure discipline, the same rhythm as everywhere else.
 * Logged as a mandated deviation in docs/decisions.md.
 * ------------------------------------------------------------------------- */

.prose {
	background: var(--csc-ground);
}

.prose__inner {
	max-width: calc(var(--csc-measure-680) + var(--csc-container-pad) * 2);
	margin-inline: auto;
	padding: var(--csc-space-88) var(--csc-container-pad) var(--csc-space-96);
}

.prose__title {
	margin-bottom: var(--csc-space-30);
	font-family: var(--csc-font-serif);
	font-size: var(--csc-fs-44);
	font-weight: var(--csc-w-regular);
	line-height: 45.76px;
	letter-spacing: var(--csc-ls-heading);
	color: var(--csc-ink);
}

.prose__inner p {
	margin-bottom: var(--csc-space-22);
	color: var(--csc-ink-550);
	font-size: var(--csc-fs-16);
	line-height: var(--csc-lh-body-loose);
}

.prose__inner h2 {
	margin: var(--csc-gap-40) 0 var(--csc-gap-12);
	font-family: var(--csc-font-serif);
	font-size: var(--csc-fs-24);
	font-weight: var(--csc-w-regular);
	line-height: 32px;
	color: var(--csc-ink);
}

.prose__inner h3 {
	margin: var(--csc-space-22) 0 var(--csc-gap-9);
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-17);
	font-weight: var(--csc-w-semibold);
	line-height: 22px;
	color: var(--csc-ink);
}

.prose__inner ul,
.prose__inner ol {
	margin: 0 0 var(--csc-space-22);
	padding-left: var(--csc-gap-24);
	color: var(--csc-ink-550);
	font-size: var(--csc-fs-16);
	line-height: var(--csc-lh-body-loose);
}

.prose__inner li {
	margin-bottom: var(--csc-gap-9);
}

.prose__inner strong {
	font-weight: var(--csc-w-semibold);
	color: var(--csc-ink);
}

/* The last-updated line that opens every legal page. */
.prose__meta {
	margin-bottom: var(--csc-space-30);
	color: var(--csc-ink-400-aa);
	font-size: var(--csc-fs-13-5);
	line-height: 18px;
}

.prose__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csc-gap-14);
	margin-top: var(--csc-space-30);
}

/* ---------------------------------------------------------------------------
 * Mobile-only elements, OFF by default
 *
 * These four ship in the markup at every width and are switched on inside the
 * mobile block below. Declaring them off out here rather than on in there is
 * what guarantees the desktop DOM the W0 gate measured is untouched: at 1440
 * none of them renders, none is focusable, and none becomes a grid item.
 * ------------------------------------------------------------------------- */

.site-header__burger,
.mobile-nav,
.carousel-dots,
.site-footer__col--social {
	display: none;
}

/* ===========================================================================
 * MOBILE LAYER (W0.10)
 *
 * Everything below 1140px. Built against the approved mobile mockups
 * (mobile-mockups/, frozen at a98396c) under the derivation grammar in
 * mobile-mockups_spec.md FINAL v2.
 *
 * WHERE THE RULES COME FROM, because the two sources genuinely disagree in
 * places and the next person needs to know which one won:
 *   - type and vertical rhythm come from the SPEC's maps;
 *   - layout (what stacks, how many columns, what moves) comes from the MOCKUP;
 *   - the specific values the 390 gate probes (header 64, wordmark 12, burger
 *     44, the H1 sizes, the first three sections' rhythm on each page, the grid
 *     track counts) come from the MOCKUP, because ops/verify-chrome.mjs
 *     harvests them from the frozen files at run time.
 * Logged in docs/decisions.md.
 *
 * NOT DONE, on purpose: `body { overflow-x: hidden }`. The mockups carry it and
 * it is the reflex fix for a mobile layout, but it does not fix overflow, it
 * HIDES it, and it would make document.scrollWidth report the viewport width
 * and so silently disable the single most important gate in this build. Every
 * overflow here is fixed at its cause.
 * ========================================================================= */

@media (max-width: 1139.98px) {

/* ---------------------------------------------------------------------------
 * Type remap
 *
 * The nine mapped sizes are consumed through these tokens everywhere in the
 * theme (verified: none of the nine is used for anything but font-size), so
 * remapping them centrally covers every occurrence exactly once, which is what
 * the spec asks for. Sizes 17px and below are unchanged.
 *
 * Fluid between the 390 canvas and the 1140 desktop contract, per the spec's
 * "production interpolates 391-1139 fluidly". The slope is (desktop - mobile)
 * over the 750px span, so each one lands exactly on its mockup value at 390 and
 * exactly on its comp value at 1140.
 * ------------------------------------------------------------------------- */

:root {
	--csc-fs-64: clamp(40px, calc(40px + 24 * ((100vw - 390px) / 750)), 64px);
	--csc-fs-46: clamp(32px, calc(32px + 14 * ((100vw - 390px) / 750)), 46px);
	--csc-fs-44: clamp(31px, calc(31px + 13 * ((100vw - 390px) / 750)), 44px);
	--csc-fs-40: clamp(30px, calc(30px + 10 * ((100vw - 390px) / 750)), 40px);
	--csc-fs-36: clamp(28px, calc(28px +  8 * ((100vw - 390px) / 750)), 36px);
	--csc-fs-30: clamp(24px, calc(24px +  6 * ((100vw - 390px) / 750)), 30px);
	--csc-fs-24: clamp(21px, calc(21px +  3 * ((100vw - 390px) / 750)), 24px);
	--csc-fs-22: clamp(19px, calc(19px +  3 * ((100vw - 390px) / 750)), 22px);
	--csc-fs-19: clamp(17px, calc(17px +  2 * ((100vw - 390px) / 750)), 19px);

	/* Canvas: 20px content edge padding, 64px header. */
	--csc-container-pad: 20px;
	--csc-header-height: 64px;
}

/* ---------------------------------------------------------------------------
 * Header, 64px
 *
 * 63px of content plus the 1px rule, matching the mockup exactly. The burger is
 * 44px tall and the padding is what carries the rest.
 * ------------------------------------------------------------------------- */

.site-header__inner {
	padding: 9.5px var(--csc-container-pad);
}

.site-header__wordmark {
	height: 12px;
}

.site-nav {
	display: none;
}

.site-header__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__burger-bar {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--csc-ink);
}

/* ---------------------------------------------------------------------------
 * Overlay navigation
 *
 * Full screen, ground background, body scroll locked. The `hidden` attribute is
 * what closes it, so the rule below has to out-specify the flex display it is
 * given here; `.mobile-nav[hidden]` does that without !important.
 * ------------------------------------------------------------------------- */

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--csc-ground);
	overflow-y: auto;
}

.mobile-nav[hidden] {
	display: none;
}

body.nav-open {
	overflow: hidden;
}

.mobile-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	height: var(--csc-header-height);
	padding-inline: var(--csc-container-pad);
	background: var(--csc-surface);
	border-bottom: 1px solid var(--csc-rule-header);
}

.mobile-nav__close {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.mobile-nav__close::before,
.mobile-nav__close::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 21px;
	width: 22px;
	height: 1.5px;
	background: var(--csc-ink);
}

.mobile-nav__close::before { transform: rotate(45deg); }
.mobile-nav__close::after  { transform: rotate(-45deg); }

.mobile-nav__list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--csc-gap-24);
	padding: var(--csc-gap-32) var(--csc-container-pad);
}

.mobile-nav__item {
	display: block;
	font-family: var(--csc-font-serif);
	font-size: 28px;
	font-weight: var(--csc-w-regular);
	letter-spacing: var(--csc-ls-heading);
	color: var(--csc-ink);
}

/*
 * Suppressed Phase 2 items: same type, muted ink, inert. The mockup reaches for
 * --csc-ink-400 here, which is #8b9893 and measures 2.87:1 on the ground. That
 * fails AA even as large text, so this uses the site's existing AA variant of
 * Lindsay's own grey, exactly as W1 and W2 already do everywhere else. Changing
 * it back is one token. See tokens.css.
 */
.mobile-nav__item[aria-disabled="true"],
.mobile-nav__child[aria-disabled="true"] {
	color: var(--csc-ink-400-aa);
	cursor: default;
}

.mobile-nav__children {
	display: flex;
	flex-direction: column;
	gap: var(--csc-gap-12);
	margin: var(--csc-gap-12) 0 0 var(--csc-gap-20);
}

.mobile-nav__child {
	display: block;
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-17);
	color: var(--csc-ink-400-aa);
}

.mobile-nav__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: var(--csc-gap-24);
	padding: 16px;
	background: var(--csc-accent);
	color: var(--csc-ink-deepest);
	border-radius: var(--csc-radius-sm);
	font-family: var(--csc-font-sans);
	font-size: var(--csc-fs-15);
	font-weight: var(--csc-w-semibold);
	text-align: center;
}

.mobile-nav__cta:hover {
	color: var(--csc-ink-deepest);
}

.mobile-nav__utility {
	flex: none;
	padding: var(--csc-gap-24) var(--csc-container-pad) calc(var(--csc-gap-24) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--csc-border-soft);
}

.mobile-nav__login {
	font-size: var(--csc-fs-13-5);
	font-weight: var(--csc-w-medium);
	letter-spacing: var(--csc-ls-wide);
	text-transform: uppercase;
	color: var(--csc-ink-500);
}

/* ---------------------------------------------------------------------------
 * Carousels: swipe, dots and the kept counter. No arrows.
 *
 * The tracks were already overflow scrollers with scroll snapping, so swipe
 * needed nothing. Arrows go because a 44px target overlaying a 219px tall
 * poster is worse than the gesture. They stay in the DOM: display: none is
 * enough for axe and for the keyboard gate, and it keeps one markup for both.
 * ------------------------------------------------------------------------- */

.carousel-dots {
	display: flex;
	gap: 8px;
}

.carousel-dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: var(--csc-radius-round);
	background: var(--csc-ink-300);
	cursor: pointer;
}

.carousel-dot[aria-current="true"] {
	background: var(--csc-ink);
}

.carousel-dots--on-dark .carousel-dot {
	background: var(--csc-border-on-dark);
}

.carousel-dots--on-dark .carousel-dot[aria-current="true"] {
	background: var(--csc-tint-1);
}

/*
 * Dots are 6px, well under the 44px touch minimum, and they are a redundant
 * control: the track swipes and the counter reports position. Giving them a
 * 44px hit area without changing the 6px dot the design shows.
 */
.carousel-dot::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	transform: translate(-19px, -19px);
}

.carousel-dot {
	position: relative;
}

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

/*
 * Button pairs stack full width. Documented in the mockup's own header:
 * "Explore programs" at 14px semibold plus 34px of padding does not fit a 168px
 * half column, and shrinking the type to make it fit would break the type map.
 *
 * Only the pairs base.css owns are here. `.hero__actions` and
 * `.stories-cta__actions` are declared in home.css and stories.css, which the
 * bundle concatenates AFTER this file, so a media query here would lose to
 * their plain rules at equal specificity. They stack in their own blocks.
 */
.site-footer__buttons,
.prose__actions {
	flex-direction: column;
	align-items: stretch;
	gap: var(--csc-gap-12);
}

.site-footer__buttons .btn,
.prose__actions .btn {
	display: block;
	width: 100%;
	padding-inline: 0;
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * Per mobile-layer_spec 3.3 and the approved mockup, which is more specific than
 * the theme's desktop markup: the brand block goes full width above a 2 column
 * link grid, ABOUT | PROGRAMS then RESOURCES | SOCIAL, and the legal row wraps
 * below. The brand stays a grid child spanning both tracks rather than moving in
 * the markup, so the desktop grid is untouched.
 * ------------------------------------------------------------------------- */

.site-footer__cta {
	padding: var(--csc-space-64) var(--csc-container-pad);
}

.site-footer__heading {
	max-width: 320px;
	margin-inline: auto;
	line-height: var(--csc-lh-display-3);
}

.site-footer__buttons {
	margin-top: var(--csc-gap-24);
}

.site-footer__grid {
	grid-template-columns: 1fr 1fr;
	gap: var(--csc-gap-32) var(--csc-gap-20);
	margin: 0 auto;
	padding: var(--csc-space-56) var(--csc-container-pad) 0;
	border-top: 1px solid var(--csc-border-mid);
}

.site-footer--nocta .site-footer__grid {
	padding-top: var(--csc-space-56);
	padding-bottom: 0;
	border-top: 0;
}

.site-footer__brand {
	grid-column: 1 / -1;
	padding-bottom: var(--csc-gap-32);
	border-bottom: 1px solid var(--csc-border-mid);
}

.site-footer__col--social {
	display: flex;
}

.site-footer__social {
	display: flex;
	gap: var(--csc-gap-16);
	align-items: flex-start;
	margin-top: 2px;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -13px;
	color: var(--csc-ink-450-aa);
}

.site-footer__legal {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--csc-gap-10) var(--csc-gap-20);
	margin-top: var(--csc-gap-32);
	padding: var(--csc-gap-20) var(--csc-container-pad) var(--csc-gap-24);
}

.site-footer__legal-links {
	gap: var(--csc-gap-10) var(--csc-gap-20);
}

/* ---------------------------------------------------------------------------
 * Prose pages: thank-you and the four legal pages
 *
 * No mockup exists for these and none is coming, so they are pure derivation
 * grammar: the mapped sizes arrive through the tokens above, and this block
 * carries the rhythm map and the line heights that were hardcoded in pixels
 * against the desktop sizes.
 * ------------------------------------------------------------------------- */

.prose__inner {
	padding: var(--csc-space-56) var(--csc-container-pad) var(--csc-space-64);
}

.prose__title {
	margin-bottom: var(--csc-gap-24);
	line-height: 1.04;
}

.prose__inner h2 {
	margin: var(--csc-gap-32) 0 var(--csc-gap-12);
	line-height: 1.33;
}

.prose__inner h3 {
	margin: var(--csc-gap-20) 0 var(--csc-gap-9);
}

.prose__meta {
	margin-bottom: var(--csc-gap-24);
}

.prose__actions {
	margin-top: var(--csc-gap-24);
}

}
/* ===== end MOBILE LAYER ================================================== */