/**
 * Sully Knows Financing — main stylesheet.
 *
 * Direction taken from the ad creatives in /Ads, which are a far more
 * developed brand than the old site: deep navy ground, gold accent, heavy
 * condensed caps, white type. See BRAND-NOTES.md.
 *
 * Gold over lime: gold carries the two most polished pieces and reads more
 * financial. Lime and red stay as campaign variants, swappable at --accent
 * without touching a component.
 *
 * The audience reads this in a truck cab on bad LTE, so weight and contrast
 * do the work, not effects.
 *
 * Fonts are self-hosted woff2 subsets — ~34KB total, against the 107KB font
 * stylesheet alone on the old stack.
 */

/* ---------- tokens ---------- */
:root {
	--navy: #0A1428;
	--navy-2: #12294D;
	--gold: #F5B517;
	--gold-deep: #8A6100;   /* Gold is unreadable as text on white; this is the
	                            accessible text/link equivalent. */
	--steel: #5C7391;
	--paper: #FFFFFF;
	--paper-2: #EFF3F7;
	--rule: #D3DCE6;
	--text: #0A1428;
	--text-dim: #46566E;
	--go: #1F7A52;

	/* Campaign accent. Swap to --lime #7AC943 or --red #C8202E to match a
	   running ad flight; every component reads through this. */
	--accent: var(--gold);
	--accent-text: var(--gold-deep);
	--on-accent: var(--navy);

	--measure: 62ch;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--radius: 3px;

	--font-display: 'SullyDisplay', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'SullyBody', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
	letter-spacing: .005em;
}
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-text); }
a:focus-visible, summary:focus-visible, .btn:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.eyebrow {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--steel);
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.6rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: #FFC53D; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.cta-row--center { justify-content: center; }
.reassure { margin-top: .9rem; font-size: .88rem; color: var(--steel); }

/* ---------- skip link ----------
   Accessibility: lets keyboard/screen-reader users jump past the nav to the
   content. Off-screen until it receives keyboard focus, then it appears. */
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--gold);
	color: var(--navy);
	padding: .7rem 1.1rem;
	font-family: var(--font-display);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
	background: var(--navy);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 3px solid var(--accent);
}
.site-header__inner {
	max-width: 76rem;
	margin: 0 auto;
	padding: .85rem var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.brand {
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	line-height: 1;
}
.brand span { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 1.4rem; }
/* The links live in their own wrapper, so the gap on .nav only spaces the
   wrapper from the Apply button — the links inside need their own gap. */
.nav__links { display: flex; align-items: center; gap: 1.6rem; }

/* Hamburger — injected by main.js, shown only on mobile (see media query). */
.nav-toggle { display: none; flex-direction: column; gap: 4px; width: 2.2rem; height: 2.2rem;
	padding: 0; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 1.4rem; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }

.nav a {
	color: #fff;
	text-decoration: none;
	font-size: .92rem;
	font-weight: 600;
}
.nav a:hover { color: var(--accent); }
.nav .btn { padding: .6rem 1.1rem; font-size: .9rem; }

/* ---------- breadcrumbs ---------- */
.crumbs {
	max-width: 76rem;
	margin: 0 auto;
	padding: 1rem var(--gutter) 0;
	font-size: .82rem;
	color: var(--text-dim);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: var(--rule); }
.crumbs a { color: var(--text-dim); }

/* ---------- hero ---------- */
.hero {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.hero h1 {
	font-size: clamp(2.5rem, 6.5vw, 4.25rem);
	margin: .6rem 0 0;
}
.hero .lede {
	font-size: 1.15rem;
	color: var(--text-dim);
	max-width: var(--measure);
	margin-top: 1rem;
}
.hero__media img {
	width: 100%;
	border-radius: var(--radius);
	/* Reserve the box so the image cannot shift layout as it decodes. */
	aspect-ratio: 62 / 42;
	object-fit: cover;
}

/* ---------- terms strip ---------- */
.terms { background: var(--navy); color: #fff; }
.terms dl {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
}
.terms__cell { padding: 1.5rem .5rem; }
.terms dt {
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
}
.terms dd {
	margin: .35rem 0 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* ---------- detail ---------- */
.detail {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
	display: grid;
	grid-template-columns: 1fr 20rem;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
.detail h2 { font-size: 1.85rem; margin-bottom: 1rem; }
.detail h2:not(:first-child) { margin-top: 2.5rem; }
.detail p { max-width: var(--measure); }
.detail p + p { margin-top: 1rem; }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.checks li { padding-left: 1.9rem; position: relative; max-width: var(--measure); }
.checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: 1.1rem;
	height: .55rem;
	border-left: 3px solid var(--go);
	border-bottom: 3px solid var(--go);
	transform: rotate(-45deg);
}

.card {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 1.5rem;
	position: sticky;
	top: 5.5rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.card h3 { font-size: 1.3rem; }
.card p { font-size: .95rem; color: var(--text-dim); }

/* ---------- faq ---------- */
.faq {
	background: var(--paper-2);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.faq > h2 {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 1.5rem;
	font-size: 1.85rem;
}
.faq__list {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
}
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
	cursor: pointer;
	padding: 1.15rem 2.5rem 1.15rem 0;
	font-weight: 700;
	font-size: 1.05rem;
	list-style: none;
	position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '';
	position: absolute;
	right: .5rem;
	top: 1.55rem;
	width: .6rem;
	height: .6rem;
	border-right: 2.5px solid var(--accent-text);
	border-bottom: 2.5px solid var(--accent-text);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq details p { padding: 0 2rem 1.3rem 0; max-width: var(--measure); color: var(--text-dim); }

/* ---------- closer ---------- */
.closer {
	background: var(--navy);
	color: #fff;
	text-align: center;
	padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
}
.closer h2 { font-size: clamp(2rem, 5vw, 2.9rem); }
.closer p { color: #9DB0CC; margin-top: .75rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-2); color: #9DB0CC; font-size: .9rem; }
.site-footer__inner {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3rem) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
}
.site-footer h4 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: #fff;
	font-size: 1rem;
	margin: 0 0 .75rem;
}
.site-footer a { color: #9DB0CC; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.site-footer__address { font-style: normal; margin-top: .75rem; line-height: 1.5; opacity: .85; }
.legal {
	border-top: 1px solid #20365C;
	padding: 1.25rem var(--gutter);
	text-align: center;
	font-size: .82rem;
	color: #6E82A0;
}

/* ---------- sticky mobile call bar ---------- */
.callbar { display: none; }

@media (max-width: 60rem) {
	.hero { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.detail { grid-template-columns: 1fr; }
	.card { position: static; }
}

@media (max-width: 44rem) {
	/* Collapse the link list into a dropdown behind the hamburger. */
	.nav-toggle { display: flex; }
	.nav__links {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		flex-direction: column;
		gap: 0;
		background: var(--navy);
		border-top: 1px solid rgba(255, 255, 255, .1);
		padding: .5rem 0;
	}
	.nav-open .nav__links { display: flex; }
	.nav__links a { padding: .85rem var(--gutter); }
	.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* Half this audience is in a vehicle. Keep the phone one thumb away. */
	.callbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 60;
		border-top: 2px solid var(--accent);
	}
	.callbar a {
		padding: .95rem;
		text-align: center;
		font-family: var(--font-display);
		text-transform: uppercase;
		text-decoration: none;
		font-size: 1rem;
	}
	.callbar__call { background: var(--navy); color: #fff; }
	.callbar__apply { background: var(--accent); color: var(--navy); }
	body { padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- claims bar ----------
   The six promises from the ad creatives. These are what the ad spend is
   already buying attention for, so the landing page must repeat them above
   the fold or the click feels like it landed somewhere else. */
.claims {
	background: var(--navy-2);
	color: #fff;
	border-top: 1px solid rgba(255,255,255,.09);
}
.claims ul {
	max-width: 76rem;
	margin: 0 auto;
	padding: 1.1rem var(--gutter);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1rem 1.5rem;
}
.claims li { display: flex; gap: .6rem; align-items: flex-start; }
.claims li::before {
	content: '';
	flex: none;
	margin-top: .3em;
	width: .85rem;
	height: .45rem;
	border-left: 2.5px solid var(--accent);
	border-bottom: 2.5px solid var(--accent);
	transform: rotate(-45deg);
}
.claims b {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1rem;
	color: var(--accent);
	line-height: 1.1;
}
.claims span { font-size: .82rem; color: #9DB0CC; }

/* ---------- brand strap ---------- */
.strap {
	background: var(--navy);
	color: #fff;
	text-align: center;
	padding: .7rem var(--gutter);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .82rem;
	border-bottom: 1px solid rgba(255,255,255,.09);
}
.strap b { color: var(--accent); }

/* ---------- disclaimers ----------
   Carried on every ad; they belong here for the same reason. The
   impersonation warning is a trust signal, not fine print, so it is not
   styled away to nothing. */
.disclaim {
	background: var(--navy);
	border-top: 1px solid #20365C;
	padding: 1rem var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	justify-content: center;
	text-align: center;
	font-size: .8rem;
	color: #9DB0CC;
}
.disclaim__warn { color: var(--accent); font-weight: 700; }

/* ---------- home hero ---------- */
.hero--home h1 { font-size: clamp(3rem, 9vw, 5.5rem); }
.hero__accent { color: var(--accent-text); }

/* ---------- category grid ---------- */
.cats {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}
.cats__head { margin-bottom: 2rem; }
.cats__head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.cats__head p { color: var(--text-dim); margin-top: .5rem; }

.cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.25rem;
}
.cat {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cat:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
	box-shadow: 0 6px 18px rgba(10, 20, 40, .10);
}
.cat__media img {
	width: 100%;
	aspect-ratio: 17 / 10;
	object-fit: cover;
	/* Navy wash so wildly different stock photos read as one set. */
	background: var(--navy-2);
}
.cat__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.cat__body h3 { font-size: 1.25rem; }
.cat__body p { font-size: .9rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cat__go {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--accent-text);
	margin-top: .35rem;
}
.cats__more { margin-top: 1.5rem; color: var(--text-dim); }

/* ---------- split section ---------- */
.split {
	background: var(--paper-2);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}
.split__copy { max-width: var(--measure); margin-left: auto; padding-right: 1rem; }
.split__copy h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .4rem 0 1rem; }
.split__copy > p { color: var(--text-dim); margin-bottom: 1.25rem; }
.split__copy .checks { margin-bottom: 1.5rem; }
.split__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 13 / 10; object-fit: cover; }

/* ---------- proof ---------- */
.proof {
	max-width: 76rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
	text-align: center;
}
.proof > h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.proof__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.proof__cell b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	line-height: 1;
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
}
.proof__cell span { display: block; margin-top: .4rem; font-size: .9rem; color: var(--text-dim); }

.proof__quote { margin: 0; max-width: 34rem; margin-inline: auto; }
.proof__quote p {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	line-height: 1.15;
}
.proof__quote cite {
	display: block;
	margin-top: .75rem;
	font-style: normal;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--steel);
}

@media (max-width: 60rem) {
	.split { grid-template-columns: 1fr; }
	.split__media { order: -1; }
	.split__copy { margin-left: 0; padding-right: 0; }
}

/* ---------- contact page ---------- */
.hero--contact { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero--contact h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }

.contact {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.contact__form h2, .contact__info h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-field { display: flex; flex-direction: column; gap: .35rem; }
.contact-field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.contact-field label span { color: var(--oxide, #B23F32); }
.contact-form input, .contact-form textarea {
	font: inherit;
	padding: .7rem .8rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: #fff;
	color: inherit;
	width: 100%;
	box-sizing: border-box;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--navy);
}
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-error {
	background: #FDECEA; border-left: 4px solid var(--oxide, #B23F32);
	padding: .8rem 1rem; margin: 0; border-radius: var(--radius); font-size: .92rem;
}
.contact-fine { font-size: .8rem; color: var(--text-dim); text-align: center; margin: 0; }
.contact-field--turnstile { margin: .25rem 0 .25rem; }

.contact-form--done {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--go);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.contact-form--done h2 { margin: 0 0 .5rem; }

.contact__info {
	background: var(--navy);
	color: #E4EAF2;
	border-radius: var(--radius);
	padding: 1.75rem;
	border-top: 4px solid var(--accent);
}
.contact__info h2 { color: #fff; }
.contact__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact__list li { display: flex; flex-direction: column; gap: .15rem; }
.contact__k {
	font-family: var(--font-display); text-transform: uppercase; font-size: .72rem;
	letter-spacing: .12em; color: var(--accent);
}
.contact__list a, .contact__list span { color: #E4EAF2; text-decoration: none; font-size: 1.05rem; }
.contact__list a:hover { color: var(--accent); }
.contact__social { display: flex; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
.contact__social a { color: #9DB0CC; text-decoration: none; font-weight: 600; }
.contact__social a:hover { color: var(--accent); }
.contact__warn { margin-top: 1.25rem; font-size: .78rem; color: var(--accent); font-weight: 700; }

@media (max-width: 52rem) {
	.contact { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
	.contact-row { grid-template-columns: 1fr; }
}

/* ---------- legal pages (Privacy, Terms) ---------- */
.legal {
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
.legal > h1 {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	padding-bottom: var(--gutter);
	border-bottom: 3px solid var(--accent);
	margin-bottom: 2rem;
}
/* Termly injects its own markup; keep it readable and on-brand. */
.legal__body { font-size: 1rem; line-height: 1.7; color: var(--text); }
.legal__body h2, .legal__body h3 { text-transform: none; margin: 1.75rem 0 .6rem; line-height: 1.2; }
.legal__body h2 { font-size: 1.4rem; }
.legal__body h3 { font-size: 1.15rem; }
.legal__body p, .legal__body li { max-width: var(--measure); }
.legal__body a { color: var(--accent-text); }
.legal__body ul, .legal__body ol { padding-left: 1.4rem; }

.legal__pending {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.legal__pending p { margin: 0 0 .5rem; }
.legal__pending p:last-child { margin-bottom: 0; }

/* ---------- application pages ---------- */
.apply {
	max-width: 60rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
.apply > h1 {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	padding-bottom: var(--gutter);
	border-bottom: 3px solid var(--accent);
	margin-bottom: 1.5rem;
}
.apply__intro { color: var(--text-dim); max-width: var(--measure); margin-bottom: 2rem; font-size: 1.15rem; }
.apply__down {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--oxide, #B23F32);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.apply__down p { margin: 0 0 .5rem; }
.apply__down p:last-child { margin-bottom: 0; }