/* Shared helpers for Plaidly content pages (legal, blog, support, status).
   Builds on platform-kit tokens (colors_and_type.css + theme.css). */

.p-fbottom a {
	color: var(--tx-3);
	text-decoration: none;
	transition: color 140ms;
}
.p-fbottom a:hover {
	color: var(--tx-1);
}

/* page shell */
.page-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 56px 28px 80px;
}
.page-narrow {
	max-width: 760px;
}
.page-head {
	margin-bottom: 36px;
}
.page-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tx-3);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}
.page-eyebrow::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--plaid-cyan);
	opacity: 0.7;
}
.page-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--tx-1);
	margin: 0 0 12px;
}
.page-sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tx-2);
	max-width: 640px;
	margin: 0;
}

/* readable long-form prose for legal + blog posts */
.prose {
	color: var(--tx-2);
	font-size: 16px;
	line-height: 1.75;
}
.prose h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: var(--tx-1);
	margin: 40px 0 14px;
}
.prose h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--tx-1);
	margin: 28px 0 10px;
}
.prose p {
	margin: 0 0 16px;
}
.prose a {
	color: var(--plaid-cyan);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--plaid-cyan) 35%, transparent);
}
.prose a:hover {
	border-bottom-color: var(--plaid-cyan);
}
.prose ul,
.prose ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.prose li {
	margin: 0 0 8px;
}
.prose code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--raise);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 6px;
}
.prose hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 36px 0;
}
.prose strong {
	color: var(--tx-1);
}

/* search modal (Pagefind UI mounts here) */
.search-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 20px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
}
.search-modal.open {
	display: flex;
}
.search-box {
	width: 100%;
	max-width: 580px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

/* ── Accessibility ───────────────────────────────────────── */
.skip-link {
	position: fixed;
	top: -60px;
	left: 16px;
	z-index: 300;
	padding: 10px 16px;
	background: var(--plaid-cyan, #89fafe);
	color: #030b1d;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	border-radius: 9px;
	text-decoration: none;
	transition: top 160ms ease;
}
.skip-link:focus {
	top: 16px;
	outline: none;
}
#main:focus {
	outline: none;
}

/* Keyboard focus rings (mouse clicks stay clean via :focus-visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--plaid-cyan, #89fafe);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}