/* ─────────────────────────────────────────────────────────
   FAQ PAGE · single canonical knowledge hub for SQUIZITO
   Reuses style.css + drop.css for the brand frame.
   Adds only the page-specific surfaces.
───────────────────────────────────────────────────────── */

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


/* ─── HERO ──────────────────────────────────────────────── */
.faq-hero {
	padding: 200px var(--frame) 80px;
	background: var(--ink);
	color: var(--paper);
	border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.faq-head {
	max-width: 1100px;
	margin: 0 auto 64px;
	text-align: left;
}
.faq-eyebrow {
	color: var(--acid);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 32px;
}
.faq-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);
}
.faq-h em {
	font-style: normal;
	color: var(--acid);
}
.faq-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;
}


/* ─── SECTION NAVIGATION PILLS ──────────────────────────── */
.faq-pills {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0 var(--frame);
}
.faq-pills a {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 22px;
	border: 1px solid rgba(244, 239, 230, 0.30);
	border-radius: 999px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 13px;
	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;
}
.faq-pills a:hover {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--acid);
	transform: translate(-2px, -3px);
}
.faq-pill-n {
	font-family: var(--f-mono);
	font-weight: 400;
	font-size: 11px;
	color: var(--acid);
	letter-spacing: 0.04em;
}
.faq-pills a:hover .faq-pill-n {
	color: var(--ink);
}


/* ─── SECTION GENERIC ───────────────────────────────────── */
.faq-section {
	padding: 140px var(--frame);
	border-bottom: 1px solid rgba(14, 13, 10, 0.12);
}
.faq-section--paper {
	background: var(--paper);
	color: var(--ink);
}
.faq-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);
}
.faq-section-head {
	max-width: 980px;
	margin: 0 auto 72px;
	text-align: left;
}
.faq-section-head .mono {
	display: block;
	color: var(--acid-d);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.faq-section--ink .faq-section-head .mono { color: var(--acid); }
.faq-section-h {
	font-family: var(--f-display);
	font-weight: 900;
	font-size: clamp(56px, 8vw, 140px);
	line-height: 0.88;
	letter-spacing: -0.04em;
	text-transform: lowercase;
	margin: 0 0 28px;
}
.faq-section-h em {
	font-style: normal;
	color: var(--acid-d);
}
.faq-section--ink .faq-section-h em { color: var(--acid); }
.faq-section-lede {
	font-family: var(--f-sans);
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--smoke);
	max-width: 60ch;
	margin: 0;
}
.faq-section--ink .faq-section-lede { color: var(--bone); }


/* ─── Q&A LIST · accordion via <details> ───────────────── */
.faq-list {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	gap: 0;
}
.faq-q {
	border-top: 1px solid rgba(14, 13, 10, 0.18);
	padding: 0;
	transition: background-color .25s ease;
}
.faq-section--ink .faq-q {
	border-top-color: rgba(244, 239, 230, 0.18);
}
.faq-q:last-of-type {
	border-bottom: 1px solid rgba(14, 13, 10, 0.18);
}
.faq-section--ink .faq-q:last-of-type {
	border-bottom-color: rgba(244, 239, 230, 0.18);
}
.faq-q > summary {
	display: grid;
	grid-template-columns: 78px 1fr 38px;
	align-items: center;
	gap: 24px;
	padding: 28px 4px;
	cursor: pointer;
	list-style: none;
	transition: color .25s ease;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::marker { content: none; }
.faq-q:hover > summary { color: var(--acid-d); }
.faq-section--ink .faq-q:hover > summary { color: var(--acid); }
.faq-q-n {
	color: var(--smoke);
	letter-spacing: 0.12em;
	text-align: left;
}
.faq-section--ink .faq-q-n { color: var(--bone); }
.faq-q-text {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: inherit;
	text-transform: none;
}
.faq-q-text em {
	font-style: italic;
	font-weight: 700;
}
.faq-q-glyph {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-family: var(--f-mono);
	font-weight: 400;
	font-size: 16px;
	color: inherit;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease;
}
.faq-q[open] .faq-q-glyph {
	transform: rotate(45deg);
	background: var(--ink);
	color: var(--acid);
	border-color: var(--ink);
}
.faq-section--ink .faq-q[open] .faq-q-glyph {
	background: var(--acid);
	color: var(--ink);
	border-color: var(--acid);
}
.faq-a {
	padding: 4px 4px 32px 102px;
	max-width: 80ch;
	font-family: var(--f-sans);
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.65;
	color: inherit;
	opacity: 0.92;
	animation: faq-fade-in .35s ease;
}
.faq-a p { margin: 0 0 14px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul {
	margin: 0 0 14px;
	padding-left: 22px;
}
.faq-a li { margin-bottom: 6px; }
.faq-a strong { font-weight: 700; }
.faq-a em { font-style: italic; }
.faq-a a {
	color: var(--acid-d);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .2s ease;
}
.faq-section--ink .faq-a a {
	color: var(--acid);
}
.faq-a a:hover {
	color: var(--ink);
}
.faq-section--ink .faq-a a:hover {
	color: var(--paper);
}
.faq-a 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;
}
.faq-section--ink .faq-a code {
	background: rgba(244, 239, 230, 0.10);
}

@keyframes faq-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 0.92; transform: translateY(0); }
}


/* ─── §05 LEGAL · disclaimer footer ─────────────────────── */
.faq-disclaimer {
	max-width: 1000px;
	margin: 56px auto 0;
	padding: 18px 0;
	color: var(--smoke);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	border-top: 1px solid rgba(14, 13, 10, 0.18);
}
.faq-section--ink .faq-disclaimer {
	color: var(--bone);
	border-top-color: rgba(244, 239, 230, 0.18);
}


/* ─── §06 CONTACT · tailcard ────────────────────────────── */
.faq-tailcard {
	max-width: 1000px;
	margin: 80px auto 0;
	padding: 40px 36px;
	background: var(--bone);
	color: var(--ink);
	border-radius: 4px;
}
.faq-tailcard-eyebrow {
	display: block;
	color: var(--ink);
	opacity: 0.55;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.faq-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);
}
.faq-tailcard-note {
	font-family: var(--f-sans);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.6;
	color: var(--ink);
	margin: 0;
	max-width: 70ch;
}
.faq-tailcard-note a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
	.faq-hero { padding: 160px var(--frame) 56px; }
	.faq-section { padding: 96px var(--frame); }
	.faq-section-head { margin-bottom: 48px; }
	.faq-q > summary {
		grid-template-columns: 58px 1fr 32px;
		gap: 14px;
		padding: 22px 0;
	}
	.faq-a {
		padding: 4px 0 28px 72px;
	}
	.faq-q-glyph {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}
}
@media (max-width: 600px) {
	.faq-pills {
		gap: 10px;
		padding: 0 calc(var(--frame) * 0.7);
	}
	.faq-pills a {
		padding: 10px 16px;
		font-size: 11px;
	}
	.faq-q > summary {
		grid-template-columns: 1fr 28px;
		gap: 12px;
	}
	.faq-q-n {
		grid-column: 1 / -1;
		font-size: 10px;
		margin-bottom: -8px;
	}
	.faq-q-text { grid-column: 1; }
	.faq-q-glyph { grid-column: 2; grid-row: 2; }
	.faq-a {
		padding: 4px 0 24px 0;
	}
	.faq-tailcard { padding: 28px 22px; }
}