/* ─────────────────────────────────────────────────────────
   TERMS OF SALE PAGE · buyer contract · law-technical voice
   Reuses style.css + drop.css + faq.css for the brand frame.
   Adds the page-specific surfaces: hero, pills, sections,
   article body (.terms-art), withdrawal-form block,
   jurisdiction table, tailcard.
───────────────────────────────────────────────────────── */

.terms-body { background: var(--paper); color: var(--ink); }


/* ─── HERO ──────────────────────────────────────────────── */
.terms-hero {
	padding: 200px var(--frame) 80px;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.terms-head {
	max-width: 1100px;
	margin: 0 auto 64px;
	text-align: left;
}
.terms-eyebrow {
	color: var(--acid);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 32px;
}
.terms-h {
	font-family: var(--f-display);
	font-weight: 900;
	font-size: clamp(56px, 9vw, 168px);
	line-height: 0.88;
	letter-spacing: -0.045em;
	text-transform: lowercase;
	margin: 0 0 32px;
	color: var(--paper);
}
.terms-h em {
	font-style: normal;
	color: var(--acid);
}
.terms-lede {
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.4vw, 21px);
	line-height: 1.55;
	color: var(--bone);
	max-width: 64ch;
	margin: 0 0 28px;
}
.terms-lede strong { color: var(--paper); font-weight: 700; }
.terms-lede em { font-style: italic; color: var(--paper); }
.terms-recital {
	max-width: 72ch;
	color: var(--acid);
	letter-spacing: 0.04em;
	line-height: 1.7;
	padding: 18px 22px;
	border-left: 2px solid var(--acid);
	background: rgba(203, 242, 36, 0.05);
}
.terms-recital em { color: var(--paper); }


/* ─── SECTION NAVIGATION PILLS ──────────────────────────── */
.terms-pills {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0 var(--frame);
}
.terms-pills a {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 18px;
	border: 1px solid rgba(244, 239, 230, 0.30);
	border-radius: 999px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--paper);
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.terms-pills a:hover {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--acid);
	transform: translate(-2px, -3px);
}
.terms-pill-n {
	font-family: var(--f-mono);
	font-weight: 400;
	font-size: 10px;
	color: var(--acid);
	letter-spacing: 0.04em;
}
.terms-pills a:hover .terms-pill-n {
	color: var(--ink);
}


/* ─── SECTION GENERIC ───────────────────────────────────── */
.terms-section {
	padding: 120px var(--frame);
	border-bottom: 1px solid rgba(14, 13, 10, 0.12);
}
.terms-section--paper {
	background: var(--paper);
	color: var(--ink);
}
.terms-section--ink {
	background: var(--ink);
	color: var(--paper);
	border-top: 1px solid rgba(244, 239, 230, 0.12);
	border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.terms-section-head {
	max-width: 1000px;
	margin: 0 auto 56px;
	text-align: left;
}
.terms-section-head .mono {
	display: block;
	color: var(--acid-d);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.terms-section--ink .terms-section-head .mono { color: var(--acid); }
.terms-section-h {
	font-family: var(--f-display);
	font-weight: 900;
	font-size: clamp(48px, 7vw, 120px);
	line-height: 0.88;
	letter-spacing: -0.04em;
	text-transform: lowercase;
	margin: 0;
}
.terms-section-h em {
	font-style: normal;
	color: var(--acid-d);
}
.terms-section--ink .terms-section-h em { color: var(--acid); }


/* ─── ARTICLE BODY · the law-technical text ─────────────── */
.terms-art {
	max-width: 80ch;
	margin: 0 auto;
	font-family: var(--f-sans);
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.7;
}
.terms-art p {
	margin: 0 0 22px;
	color: inherit;
}
.terms-art p:last-child { margin-bottom: 0; }
.terms-art strong { font-weight: 700; }
.terms-art em { font-style: italic; }
.terms-art ul {
	margin: 0 0 22px;
	padding-left: 22px;
}
.terms-art li {
	margin-bottom: 10px;
	padding-left: 4px;
}
.terms-art li::marker {
	color: var(--acid-d);
}
.terms-section--ink .terms-art li::marker {
	color: var(--acid);
}
.terms-art a {
	color: var(--acid-d);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .2s ease;
}
.terms-section--ink .terms-art a {
	color: var(--acid);
}
.terms-art a:hover {
	color: var(--ink);
}
.terms-section--ink .terms-art a:hover {
	color: var(--paper);
}
.terms-art code {
	font-family: var(--f-mono);
	font-size: 0.92em;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(14, 13, 10, 0.06);
	color: inherit;
}
.terms-section--ink .terms-art code {
	background: rgba(244, 239, 230, 0.10);
}


/* ─── CLAUSE BLOCK · the heavier-anchored paragraphs ───── */
.terms-clause {
	padding: 18px 22px;
	margin: 8px 0 22px;
	border-left: 2px solid var(--acid-d);
	background: rgba(168, 204, 21, 0.07);
}
.terms-section--ink .terms-clause {
	border-left-color: var(--acid);
	background: rgba(203, 242, 36, 0.06);
}


/* ─── WITHDRAWAL-FORM PRE BLOCK ─────────────────────────── */
.terms-form {
	font-family: var(--f-mono);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	padding: 28px 24px;
	margin: 8px 0 28px;
	background: var(--ink);
	color: var(--paper);
	border-radius: 4px;
	overflow-x: auto;
	white-space: pre;
}
.terms-section--ink .terms-form {
	background: rgba(244, 239, 230, 0.06);
	color: var(--paper);
	border: 1px solid rgba(244, 239, 230, 0.18);
}


/* ─── JURISDICTION TABLE ────────────────────────────────── */
.terms-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 8px 0 28px;
	font-family: var(--f-sans);
	font-size: 14px;
	line-height: 1.5;
}
.terms-table thead th {
	font-family: var(--f-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 12px;
	border-bottom: 1px solid currentColor;
	color: var(--acid-d);
}
.terms-section--ink .terms-table thead th { color: var(--acid); }
.terms-table tbody td {
	padding: 12px;
	border-bottom: 1px solid rgba(14, 13, 10, 0.12);
	vertical-align: top;
}
.terms-section--ink .terms-table tbody td {
	border-bottom-color: rgba(244, 239, 230, 0.12);
}
.terms-table tbody td:first-child {
	font-weight: 600;
	white-space: nowrap;
}
.terms-table tbody td:last-child {
	font-family: var(--f-sans);
	font-size: 13px;
	color: var(--smoke);
}
.terms-section--ink .terms-table tbody td:last-child { color: var(--bone); }
.terms-table tbody td em { font-style: italic; }


/* ─── TAILCARD · last-updated + disclaimer ──────────────── */
.terms-tailcard {
	max-width: 1000px;
	margin: 80px auto 0;
	padding: 40px 36px;
	background: var(--bone);
	color: var(--ink);
	border-radius: 4px;
}
.terms-tailcard-eyebrow {
	display: block;
	color: var(--ink);
	opacity: 0.55;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.terms-tailcard-date {
	font-family: var(--f-display);
	font-weight: 900;
	font-size: clamp(28px, 3.5vw, 44px);
	letter-spacing: -0.02em;
	text-transform: lowercase;
	margin: 0 0 18px;
	color: var(--ink);
}
.terms-tailcard-note {
	font-family: var(--f-sans);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.6;
	color: var(--ink);
	margin: 0;
	max-width: 78ch;
}
.terms-tailcard-note a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.terms-tailcard-note em {
	font-style: italic;
}


/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
	.terms-hero { padding: 160px var(--frame) 56px; }
	.terms-section { padding: 88px var(--frame); }
	.terms-section-head { margin-bottom: 40px; }
	.terms-form { font-size: 12px; padding: 22px 18px; }
	.terms-table { font-size: 13px; }
	.terms-table tbody td { padding: 10px 8px; }
}
@media (max-width: 600px) {
	.terms-pills {
		gap: 8px;
		padding: 0 calc(var(--frame) * 0.7);
	}
	.terms-pills a {
		padding: 9px 14px;
		font-size: 10px;
	}
	.terms-art { font-size: 15px; }
	.terms-tailcard { padding: 28px 22px; }
	.terms-form { font-size: 11px; }
	.terms-table thead { display: none; }
	.terms-table tbody td {
		display: block;
		padding: 6px 0;
		border-bottom: none;
	}
	.terms-table tbody tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid rgba(14, 13, 10, 0.12);
	}
	.terms-section--ink .terms-table tbody tr {
		border-bottom-color: rgba(244, 239, 230, 0.12);
	}
	.terms-table tbody td:first-child {
		font-size: 15px;
		margin-bottom: 4px;
	}
	.terms-table tbody td:last-child { font-size: 12px; }
}