/*
 * PhoneClarity design system
 * ---------------------------------------------------------------------------
 * One stylesheet, no build step, no framework. Tokens first, then primitives,
 * then components, then templates. Every colour, space and radius resolves to a
 * custom property so the whole theme retunes from the :root block.
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
	/* Brand ---------------------------------------------------------------- */
	--pc-primary: #172033;
	--pc-primary-600: #1f2b45;
	--pc-primary-400: #33415c;
	--pc-accent: #2563eb;
	--pc-accent-hover: #1d4ed8;
	--pc-accent-soft: #eff4ff;
	--pc-accent-border: #c7d8fe;
	--pc-background: #f8fafc;
	--pc-surface: #ffffff;
	--pc-surface-sunken: #f1f5f9;
	--pc-text: #111827;
	--pc-muted: #64748b;
	--pc-success: #16a34a;
	--pc-success-soft: #f0fdf4;
	--pc-success-border: #bbf7d0;

	/* Callout hues. Deliberately desaturated: a warning should read as
	   information, not as an alarm. */
	--pc-warning: #b45309;
	--pc-warning-soft: #fffbeb;
	--pc-warning-border: #fde68a;
	--pc-danger: #b91c1c;
	--pc-danger-soft: #fef2f2;
	--pc-danger-border: #fecaca;

	/* Lines and edges ------------------------------------------------------ */
	--pc-border: #e2e8f0;
	--pc-border-strong: #cbd5e1;
	--pc-radius-sm: 6px;
	--pc-radius: 10px;
	--pc-radius-lg: 14px;
	--pc-radius-pill: 999px;

	/* Elevation. Used sparingly; borders carry most of the structure. */
	--pc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
	--pc-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--pc-shadow-lg: 0 10px 30px rgba(15, 23, 42, .08);
	--pc-ring: 0 0 0 3px rgba(37, 99, 235, .25);

	/* Type ----------------------------------------------------------------- */
	--pc-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--pc-text-xs: .75rem;
	--pc-text-sm: .875rem;
	--pc-text-base: 1rem;
	--pc-text-lg: 1.125rem;
	--pc-text-xl: 1.25rem;
	--pc-text-2xl: 1.5rem;
	--pc-text-3xl: 1.875rem;
	--pc-text-4xl: 2.25rem;

	--pc-leading-tight: 1.2;
	--pc-leading-snug: 1.4;
	--pc-leading: 1.65;
	--pc-leading-loose: 1.75;

	/* Space ---------------------------------------------------------------- */
	--pc-space-1: .25rem;
	--pc-space-2: .5rem;
	--pc-space-3: .75rem;
	--pc-space-4: 1rem;
	--pc-space-5: 1.5rem;
	--pc-space-6: 2rem;
	--pc-space-7: 2.5rem;
	--pc-space-8: 3rem;
	--pc-space-9: 4rem;
	--pc-space-10: 5rem;

	/* Layout --------------------------------------------------------------- */
	--pc-container: 1240px;
	--pc-container-narrow: 780px;
	--pc-gutter: 1.25rem;
	--pc-header-height: 64px;

	/* Motion --------------------------------------------------------------- */
	--pc-transition: 150ms cubic-bezier(.4, 0, .2, 1);
	--pc-transition-slow: 240ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
	:root {
		--pc-gutter: 2rem;
		--pc-header-height: 72px;
		--pc-text-3xl: 2rem;
		--pc-text-4xl: 2.75rem;
	}
}

/* =========================================================================
   2. RESET AND BASE
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-header-height) + 1rem);
}

body {
	margin: 0;
	background: var(--pc-background);
	color: var(--pc-text);
	font-family: var(--pc-font);
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pc-space-3);
	color: var(--pc-primary);
	font-weight: 700;
	line-height: var(--pc-leading-tight);
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1 { font-size: var(--pc-text-4xl); letter-spacing: -.025em; }
h2 { font-size: var(--pc-text-2xl); }
h3 { font-size: var(--pc-text-xl); }
h4 { font-size: var(--pc-text-lg); }
h5, h6 { font-size: var(--pc-text-base); }

p { margin: 0 0 var(--pc-space-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--pc-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--pc-transition);
}
a:hover { color: var(--pc-accent-hover); }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

ul, ol { margin: 0 0 var(--pc-space-4); padding-left: 1.35em; }
li { margin-bottom: var(--pc-space-2); }
li:last-child { margin-bottom: 0; }

hr {
	height: 1px;
	margin: var(--pc-space-7) 0;
	border: 0;
	background: var(--pc-border);
}

code, kbd, pre { font-family: var(--pc-font-mono); font-size: .9em; }

code {
	padding: .15em .4em;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-surface-sunken);
	color: var(--pc-primary);
}

pre {
	overflow-x: auto;
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface-sunken);
}
pre code { padding: 0; background: none; }

blockquote {
	margin: var(--pc-space-5) 0;
	padding-left: var(--pc-space-4);
	border-left: 3px solid var(--pc-accent-border);
	color: var(--pc-muted);
}

/* A visible focus ring on everything reachable by keyboard. Never removed. */
:focus-visible {
	outline: 2px solid var(--pc-accent);
	outline-offset: 2px;
	border-radius: var(--pc-radius-sm);
}

::selection { background: var(--pc-accent-soft); color: var(--pc-primary); }

/* =========================================================================
   3. UTILITIES
   ========================================================================= */

.pc-container {
	width: 100%;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-container--narrow { max-width: var(--pc-container-narrow); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--pc-space-4);
	top: -100px;
	z-index: 200;
	padding: var(--pc-space-3) var(--pc-space-4);
	border-radius: var(--pc-radius);
	background: var(--pc-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: top var(--pc-transition);
}
.skip-link:focus { top: var(--pc-space-4); color: #fff; }

.pc-section { padding-block: var(--pc-space-8); }
.pc-section--tight { padding-block: var(--pc-space-7); }
.pc-section--alt { background: var(--pc-surface); border-block: 1px solid var(--pc-border); }

@media (min-width: 768px) {
	.pc-section { padding-block: var(--pc-space-9); }
	.pc-section--tight { padding-block: var(--pc-space-8); }
}

.pc-section__head { margin-bottom: var(--pc-space-5); }

.pc-section__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--pc-space-2);
}

.pc-section__title h2 { margin: 0; }

.pc-section__lead {
	max-width: 60ch;
	margin: 0;
	color: var(--pc-muted);
}

.pc-link-more {
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.pc-link-more:hover { text-decoration: underline; }
.pc-link-more::after { content: " \2192"; }

.pc-eyebrow {
	display: block;
	margin-bottom: var(--pc-space-2);
	color: var(--pc-muted);
	font-size: var(--pc-text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* =========================================================================
   4. BUTTONS AND PILLS
   ========================================================================= */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-space-2);
	min-height: 44px;
	padding: var(--pc-space-3) var(--pc-space-5);
	border: 1px solid transparent;
	border-radius: var(--pc-radius);
	background: var(--pc-accent);
	color: #fff;
	font: inherit;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--pc-transition), border-color var(--pc-transition), color var(--pc-transition);
}
.pc-btn:hover { background: var(--pc-accent-hover); color: #fff; }
.pc-btn:disabled,
.pc-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.pc-btn--secondary {
	border-color: var(--pc-border-strong);
	background: var(--pc-surface);
	color: var(--pc-primary);
}
.pc-btn--secondary:hover {
	border-color: var(--pc-primary);
	background: var(--pc-surface);
	color: var(--pc-primary);
}

.pc-btn--ghost { background: none; color: var(--pc-primary); }
.pc-btn--ghost:hover { background: var(--pc-surface-sunken); color: var(--pc-primary); }

/* A small metadata chip. Not a link unless it is given an href. */
.pc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-1);
	padding: .2rem .55rem;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-surface-sunken);
	color: var(--pc-muted);
	font-size: var(--pc-text-xs);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
a.pc-chip:hover {
	border-color: var(--pc-accent-border);
	background: var(--pc-accent-soft);
	color: var(--pc-accent);
}
.pc-chip--device { border-color: var(--pc-accent-border); background: var(--pc-accent-soft); color: var(--pc-accent); }

/* =========================================================================
   5. HEADER
   ========================================================================= */

.pc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--pc-border);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(140%) blur(8px);
}

.pc-header__inner {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	min-height: var(--pc-header-height);
}

.pc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	color: var(--pc-primary);
	font-size: var(--pc-text-lg);
	font-weight: 700;
	letter-spacing: -.02em;
	text-decoration: none;
	white-space: nowrap;
}
.pc-brand:hover { color: var(--pc-primary); }
.pc-brand__mark { flex: none; width: 30px; height: 30px; }
.pc-brand__logo { width: auto; height: 30px; }

.pc-nav { display: none; margin-left: auto; }

.pc-nav ul {
	display: flex;
	align-items: center;
	gap: var(--pc-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pc-nav li { margin: 0; }

.pc-nav a {
	display: block;
	padding: var(--pc-space-2) var(--pc-space-3);
	border-radius: var(--pc-radius-sm);
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--pc-transition), color var(--pc-transition);
}
.pc-nav a:hover { background: var(--pc-surface-sunken); color: var(--pc-primary); }

.pc-nav .current-menu-item > a,
.pc-nav .current_page_item > a,
.pc-nav .current-menu-ancestor > a {
	background: var(--pc-accent-soft);
	color: var(--pc-accent);
}

.pc-header__actions { display: flex; align-items: center; gap: var(--pc-space-2); margin-left: auto; }
.pc-nav + .pc-header__actions { margin-left: 0; }

.pc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--pc-radius);
	background: none;
	color: var(--pc-primary);
	cursor: pointer;
	transition: background var(--pc-transition), border-color var(--pc-transition);
}
.pc-icon-btn:hover { background: var(--pc-surface-sunken); }
.pc-icon-btn svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
	.pc-nav { display: block; }
	.pc-header__actions { margin-left: var(--pc-space-2); }
	.pc-menu-toggle { display: none; }
}

/* Header search drawer ---------------------------------------------------- */

.pc-header-search {
	display: none;
	padding-block: var(--pc-space-4);
	border-top: 1px solid var(--pc-border);
	background: var(--pc-surface);
}
.pc-header-search.is-open { display: block; }

/* Mobile menu ------------------------------------------------------------- */

.pc-mobile-menu {
	display: none;
	position: fixed;
	inset: var(--pc-header-height) 0 0;
	z-index: 99;
	overflow-y: auto;
	padding: var(--pc-space-5) 0 var(--pc-space-9);
	background: var(--pc-surface);
}
.pc-mobile-menu.is-open { display: block; }

.pc-mobile-menu ul { margin: 0; padding: 0; list-style: none; }
.pc-mobile-menu li { margin: 0; border-bottom: 1px solid var(--pc-border); }

.pc-mobile-menu a {
	display: block;
	padding: var(--pc-space-4) 0;
	color: var(--pc-primary);
	font-size: var(--pc-text-lg);
	font-weight: 600;
	text-decoration: none;
}
.pc-mobile-menu a:hover { color: var(--pc-accent); }
.pc-mobile-menu .current-menu-item > a { color: var(--pc-accent); }

body.pc-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
	.pc-mobile-menu { display: none !important; }
}

/* =========================================================================
   6. SEARCH
   ========================================================================= */

.pc-search { width: 100%; }

.pc-search__field {
	display: flex;
	align-items: center;
	gap: var(--pc-space-2);
	padding: var(--pc-space-2) var(--pc-space-2) var(--pc-space-2) var(--pc-space-4);
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	box-shadow: var(--pc-shadow-sm);
	transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-search__field:focus-within {
	border-color: var(--pc-accent);
	box-shadow: var(--pc-ring);
}

.pc-search__icon { flex: none; width: 20px; height: 20px; color: var(--pc-muted); }
.pc-search__field:focus-within .pc-search__icon { color: var(--pc-accent); }

.pc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--pc-space-2) 0;
	border: 0;
	background: none;
	color: var(--pc-text);
	font: inherit;
	font-size: var(--pc-text-base);
}
.pc-search__input:focus { outline: none; }
.pc-search__input::placeholder { color: var(--pc-muted); }

.pc-search__submit { flex: none; min-height: 40px; }

.pc-search--lg .pc-search__field { padding-left: var(--pc-space-5); border-radius: var(--pc-radius-lg); }
.pc-search--lg .pc-search__icon { width: 22px; height: 22px; }
.pc-search--lg .pc-search__input { padding-block: var(--pc-space-3); font-size: var(--pc-text-lg); }

.pc-search__examples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-4);
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}
.pc-search__examples-label { font-weight: 600; }

@media (max-width: 599px) {
	.pc-search__submit .pc-search__submit-label { display: none; }
	.pc-search__submit { width: 44px; padding-inline: 0; }
}

/* =========================================================================
   7. HERO
   ========================================================================= */

.pc-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--pc-space-8) var(--pc-space-8);
	border-bottom: 1px solid var(--pc-border);
	background: var(--pc-surface);
}

/* A faint technical grid. Decorative only; hidden from assistive tech. */
.pc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(148, 163, 184, .14) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(148, 163, 184, .14) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}

.pc-hero__inner { position: relative; max-width: 720px; }
.pc-hero--center .pc-hero__inner { margin-inline: auto; text-align: center; }
.pc-hero--center .pc-hero__lead { margin-inline: auto; }
.pc-hero--center .pc-search__examples { justify-content: center; }

.pc-hero__title { margin-bottom: var(--pc-space-4); }

.pc-hero__lead {
	max-width: 60ch;
	margin-bottom: var(--pc-space-6);
	color: var(--pc-muted);
	font-size: var(--pc-text-lg);
}

@media (min-width: 768px) {
	.pc-hero { padding-block: var(--pc-space-9); }
}

/* =========================================================================
   8. CARDS
   ========================================================================= */

.pc-grid { display: grid; gap: var(--pc-space-4); }
.pc-grid--2 { grid-template-columns: 1fr; }
.pc-grid--3 { grid-template-columns: 1fr; }
.pc-grid--problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) {
	.pc-grid--problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.pc-grid--problems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.pc-grid--problems { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Problem card: compact by design, icon plus label. */
.pc-problem-card {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	color: var(--pc-primary);
	text-decoration: none;
	transition: border-color var(--pc-transition), box-shadow var(--pc-transition), transform var(--pc-transition);
}
.pc-problem-card:hover {
	border-color: var(--pc-accent-border);
	box-shadow: var(--pc-shadow);
	color: var(--pc-primary);
	transform: translateY(-1px);
}
.pc-problem-card__icon {
	width: 24px;
	height: 24px;
	color: var(--pc-accent);
}
.pc-problem-card__title { font-size: var(--pc-text-sm); font-weight: 600; line-height: var(--pc-leading-snug); }
.pc-problem-card__desc { margin: 0; color: var(--pc-muted); font-size: var(--pc-text-xs); }

/* Device card ------------------------------------------------------------- */

.pc-device-card {
	display: flex;
	flex-direction: column;
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-lg);
	background: var(--pc-surface);
	transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-device-card:hover { border-color: var(--pc-accent-border); box-shadow: var(--pc-shadow); }

.pc-device-card__head { display: flex; align-items: center; gap: var(--pc-space-3); margin-bottom: var(--pc-space-3); }
.pc-device-card__icon { flex: none; width: 26px; height: 26px; color: var(--pc-accent); }
.pc-device-card__title { margin: 0; font-size: var(--pc-text-xl); }
.pc-device-card__title a { color: inherit; text-decoration: none; }
.pc-device-card__title a:hover { color: var(--pc-accent); }
.pc-device-card__desc { margin-bottom: var(--pc-space-4); color: var(--pc-muted); font-size: var(--pc-text-sm); }

.pc-device-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-2);
	margin: 0 0 var(--pc-space-5);
	padding: 0;
	list-style: none;
}
.pc-device-card__tags li { margin: 0; }
.pc-device-card__cta { margin-top: auto; align-self: flex-start; }

/* Guide card -------------------------------------------------------------- */

.pc-guide-card {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.pc-guide-card:hover { border-color: var(--pc-accent-border); box-shadow: var(--pc-shadow); }

.pc-guide-card__meta { display: flex; flex-wrap: wrap; gap: var(--pc-space-2); }

.pc-guide-card__title { margin: 0; font-size: var(--pc-text-lg); line-height: var(--pc-leading-snug); }
.pc-guide-card__title a { color: var(--pc-primary); text-decoration: none; }
.pc-guide-card__title a:hover { color: var(--pc-accent); }

/* The whole card is clickable, but the anchor stays the only focus target. */
.pc-guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.pc-guide-card { position: relative; }

.pc-guide-card__excerpt { margin: 0; color: var(--pc-muted); font-size: var(--pc-text-sm); }
.pc-guide-card__foot { margin-top: auto; padding-top: var(--pc-space-2); }

.pc-guide-card--row { flex-direction: column; }

@media (min-width: 700px) {
	.pc-guide-card--row {
		flex-direction: row;
		align-items: center;
		gap: var(--pc-space-5);
	}
	.pc-guide-card--row .pc-guide-card__body { flex: 1 1 auto; }
	.pc-guide-card--row .pc-guide-card__foot { margin: 0; padding: 0; flex: none; text-align: right; }
}

/* =========================================================================
   9. LAST VERIFIED
   ========================================================================= */

.pc-verified {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	color: var(--pc-muted);
	font-size: var(--pc-text-xs);
	font-weight: 600;
	white-space: nowrap;
}
.pc-verified svg { width: 14px; height: 14px; color: var(--pc-success); }
.pc-verified--lg { font-size: var(--pc-text-sm); }
.pc-verified--lg svg { width: 16px; height: 16px; }

/* =========================================================================
   10. STEPS AND TRUST LISTS
   ========================================================================= */

.pc-steps-flow {
	display: grid;
	gap: var(--pc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pc-flow;
}
@media (min-width: 800px) { .pc-steps-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pc-steps-flow > li {
	position: relative;
	margin: 0;
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	counter-increment: pc-flow;
}
.pc-steps-flow > li::before {
	content: counter(pc-flow);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: var(--pc-space-3);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent-soft);
	color: var(--pc-accent);
	font-size: var(--pc-text-sm);
	font-weight: 700;
}
.pc-steps-flow h3 { margin-bottom: var(--pc-space-2); font-size: var(--pc-text-lg); }
.pc-steps-flow p { margin: 0; color: var(--pc-muted); font-size: var(--pc-text-sm); }

.pc-trust-list {
	display: grid;
	gap: var(--pc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) { .pc-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pc-trust-list > li {
	display: flex;
	gap: var(--pc-space-3);
	margin: 0;
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}
.pc-trust-list svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--pc-accent); }
.pc-trust-list h3 { margin-bottom: var(--pc-space-1); font-size: var(--pc-text-base); }
.pc-trust-list p { margin: 0; color: var(--pc-muted); font-size: var(--pc-text-sm); }

/* Editorial / safety note ------------------------------------------------- */

.pc-editorial-note {
	display: flex;
	gap: var(--pc-space-4);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-left: 3px solid var(--pc-accent);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}
.pc-editorial-note svg { flex: none; width: 24px; height: 24px; color: var(--pc-accent); }
.pc-editorial-note h2 { margin-bottom: var(--pc-space-2); font-size: var(--pc-text-lg); }
.pc-editorial-note p { color: var(--pc-muted); font-size: var(--pc-text-sm); }
.pc-editorial-note p:last-child { margin-bottom: 0; }

/* =========================================================================
   11. BREADCRUMBS
   ========================================================================= */

.pc-breadcrumbs {
	margin-bottom: var(--pc-space-4);
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}
.pc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pc-breadcrumbs li { display: flex; align-items: center; gap: var(--pc-space-2); margin: 0; }
.pc-breadcrumbs li + li::before { content: "/"; color: var(--pc-border-strong); }
.pc-breadcrumbs a { color: var(--pc-muted); text-decoration: none; }
.pc-breadcrumbs a:hover { color: var(--pc-accent); text-decoration: underline; }
.pc-breadcrumbs [aria-current="page"] { color: var(--pc-primary); font-weight: 600; }

/* =========================================================================
   12. ARTICLE
   ========================================================================= */

.pc-main { padding-bottom: var(--pc-space-9); }

.pc-article-head {
	padding-block: var(--pc-space-6) var(--pc-space-5);
	border-bottom: 1px solid var(--pc-border);
	background: var(--pc-surface);
}
.pc-article-head__title { margin-bottom: var(--pc-space-4); }

.pc-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2) var(--pc-space-3);
}

.pc-layout { display: block; padding-top: var(--pc-space-6); }

@media (min-width: 1080px) {
	.pc-layout--sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: var(--pc-space-8);
		align-items: start;
	}
}

.pc-article { max-width: var(--pc-container-narrow); }

/*
 * With no sidebar the article kept its reading width but stayed pinned left,
 * leaving a wide dead column on desktop. Centre it instead: an article with
 * too few headings for a table of contents should read as a centred document,
 * not as a two-column layout with one column missing.
 */
.pc-layout:not(.pc-layout--sidebar) .pc-article { margin-inline: auto; }
.pc-layout--sidebar .pc-article { max-width: none; margin-inline: 0; }

/* Long-form reading rhythm. */
.pc-prose { font-size: var(--pc-text-base); line-height: var(--pc-leading-loose); }
.pc-prose > * + * { margin-top: var(--pc-space-4); }
.pc-prose h2 {
	margin-top: var(--pc-space-8);
	padding-top: var(--pc-space-5);
	border-top: 1px solid var(--pc-border);
	font-size: var(--pc-text-2xl);
	scroll-margin-top: calc(var(--pc-header-height) + 1rem);
}
.pc-prose h3 { margin-top: var(--pc-space-6); font-size: var(--pc-text-xl); }
.pc-prose h4 { margin-top: var(--pc-space-5); }
.pc-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pc-prose ul, .pc-prose ol { padding-left: 1.4em; }
.pc-prose li { margin-bottom: var(--pc-space-2); }
.pc-prose img { border: 1px solid var(--pc-border); border-radius: var(--pc-radius); }
.pc-prose figure { margin: var(--pc-space-5) 0; }
.pc-prose figcaption { margin-top: var(--pc-space-2); color: var(--pc-muted); font-size: var(--pc-text-sm); }

.pc-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--pc-text-sm);
}
.pc-prose th,
.pc-prose td {
	padding: var(--pc-space-3);
	border: 1px solid var(--pc-border);
	text-align: left;
	vertical-align: top;
}
.pc-prose th { background: var(--pc-surface-sunken); color: var(--pc-primary); font-weight: 600; }

@media (min-width: 700px) { .pc-prose table { display: table; } }

/* Quick Answer ------------------------------------------------------------ */

.pc-quick-answer {
	margin-bottom: var(--pc-space-6);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-accent-border);
	border-radius: var(--pc-radius-lg);
	background: var(--pc-accent-soft);
}
.pc-quick-answer__label {
	display: flex;
	align-items: center;
	gap: var(--pc-space-2);
	margin-bottom: var(--pc-space-3);
	color: var(--pc-accent);
	font-size: var(--pc-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.pc-quick-answer__label svg { width: 16px; height: 16px; }
.pc-quick-answer p { color: var(--pc-text); font-size: var(--pc-text-lg); line-height: var(--pc-leading); }
.pc-quick-answer p:last-child { margin-bottom: 0; }
.pc-quick-answer ul, .pc-quick-answer ol { margin-bottom: 0; font-size: var(--pc-text-base); }

/* Callouts ---------------------------------------------------------------- */

.pc-callout {
	display: flex;
	gap: var(--pc-space-3);
	margin-block: var(--pc-space-5);
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-left-width: 3px;
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	font-size: var(--pc-text-sm);
	line-height: var(--pc-leading);
}
.pc-callout__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.pc-callout__body { min-width: 0; }
.pc-callout__title { display: block; margin-bottom: var(--pc-space-1); font-weight: 700; }
.pc-callout p:last-child { margin-bottom: 0; }

.pc-callout--info { border-left-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-callout--info .pc-callout__icon,
.pc-callout--info .pc-callout__title { color: var(--pc-accent); }

.pc-callout--tip { border-left-color: var(--pc-success); background: var(--pc-success-soft); border-color: var(--pc-success-border); }
.pc-callout--tip .pc-callout__icon,
.pc-callout--tip .pc-callout__title { color: var(--pc-success); }

.pc-callout--warning { border-left-color: var(--pc-warning); background: var(--pc-warning-soft); border-color: var(--pc-warning-border); }
.pc-callout--warning .pc-callout__icon,
.pc-callout--warning .pc-callout__title { color: var(--pc-warning); }

.pc-callout--danger { border-left-color: var(--pc-danger); background: var(--pc-danger-soft); border-color: var(--pc-danger-border); }
.pc-callout--danger .pc-callout__icon,
.pc-callout--danger .pc-callout__title { color: var(--pc-danger); }

/* Troubleshooting steps --------------------------------------------------- */

.pc-steps { margin-block: var(--pc-space-6); padding: 0; list-style: none; counter-reset: pc-step; }

.pc-step {
	position: relative;
	margin: 0 0 var(--pc-space-4);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	counter-increment: pc-step;
}

.pc-step__label {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	margin-bottom: var(--pc-space-2);
	color: var(--pc-accent);
	font-size: var(--pc-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.pc-step__label::before {
	content: counter(pc-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent);
	color: #fff;
	font-size: var(--pc-text-xs);
	letter-spacing: 0;
}

.pc-step__title { margin-bottom: var(--pc-space-3); font-size: var(--pc-text-lg); }
.pc-step__body > *:last-child { margin-bottom: 0; }

.pc-step__result {
	display: flex;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-4);
	padding-top: var(--pc-space-3);
	border-top: 1px dashed var(--pc-border);
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}
.pc-step__result strong { color: var(--pc-primary); }

/* Sources ----------------------------------------------------------------- */

.pc-sources { margin-block: var(--pc-space-6); padding: 0; list-style: none; }
.pc-sources > li {
	margin: 0;
	padding: var(--pc-space-4) 0;
	border-bottom: 1px solid var(--pc-border);
}
.pc-sources > li:first-child { border-top: 1px solid var(--pc-border); }
.pc-source__title { display: block; font-weight: 600; text-decoration: none; }
.pc-source__title:hover { text-decoration: underline; }
.pc-source__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-1);
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}
.pc-source__publisher { font-weight: 600; }

/* FAQ --------------------------------------------------------------------- */

.pc-faq { margin-block: var(--pc-space-6); border-top: 1px solid var(--pc-border); }

.pc-faq__item { border-bottom: 1px solid var(--pc-border); }

.pc-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-space-4);
	width: 100%;
	padding: var(--pc-space-4) 0;
	border: 0;
	background: none;
	color: var(--pc-primary);
	font: inherit;
	font-size: var(--pc-text-base);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.pc-faq__question:hover { color: var(--pc-accent); }

.pc-faq__marker { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--pc-muted); transition: transform var(--pc-transition); }
.pc-faq__question[aria-expanded="true"] .pc-faq__marker { transform: rotate(180deg); color: var(--pc-accent); }

.pc-faq__answer { padding: 0 0 var(--pc-space-4); color: var(--pc-text); }
.pc-faq__answer[hidden] { display: none; }
.pc-faq__answer > *:last-child { margin-bottom: 0; }

/* Related problems -------------------------------------------------------- */

.pc-related { margin-top: var(--pc-space-8); padding-top: var(--pc-space-6); border-top: 1px solid var(--pc-border); }
.pc-related__list { display: grid; gap: var(--pc-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .pc-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pc-related__list li { margin: 0; }
.pc-related__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	padding: var(--pc-space-3) var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--pc-transition), color var(--pc-transition);
}
.pc-related__link:hover { border-color: var(--pc-accent-border); color: var(--pc-accent); }
.pc-related__link svg { flex: none; width: 16px; height: 16px; opacity: .5; }

/* =========================================================================
   13. SIDEBAR
   ========================================================================= */

.pc-sidebar { display: none; }

@media (min-width: 1080px) {
	.pc-sidebar { display: block; position: sticky; top: calc(var(--pc-header-height) + var(--pc-space-5)); }
}

.pc-widget + .pc-widget { margin-top: var(--pc-space-6); }
.pc-widget__title {
	margin-bottom: var(--pc-space-3);
	color: var(--pc-muted);
	font-size: var(--pc-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pc-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--pc-border); }
.pc-toc li { margin: 0; }
.pc-toc a {
	display: block;
	padding: var(--pc-space-2) var(--pc-space-3);
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
	text-decoration: none;
	transition: color var(--pc-transition), border-color var(--pc-transition);
}
.pc-toc a:hover { color: var(--pc-primary); }
.pc-toc a.is-active { border-left-color: var(--pc-accent); color: var(--pc-accent); font-weight: 600; }

/* Sidebar safety note --------------------------------------------------- */

/*
 * Quieter than the in-article callout it mirrors. It is a persistent reminder
 * sitting beside the steps, not a second alarm: a sidebar that shouts for the
 * whole scroll gets tuned out, and then the real warning goes unread.
 */
.pc-sidenote {
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-left: 3px solid var(--pc-muted);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}

.pc-sidenote--warning { border-left-color: var(--pc-warning); background: var(--pc-warning-soft); border-color: var(--pc-warning-border); }
.pc-sidenote--danger  { border-left-color: var(--pc-danger);  background: var(--pc-danger-soft);  border-color: var(--pc-danger-border); }

.pc-sidenote__label {
	display: flex;
	align-items: center;
	gap: var(--pc-space-2);
	margin-bottom: var(--pc-space-2);
}
.pc-sidenote--warning .pc-sidenote__label { color: var(--pc-warning); }
.pc-sidenote--danger .pc-sidenote__label { color: var(--pc-danger); }
.pc-sidenote__label svg { flex: none; }

.pc-sidenote__headline {
	margin-bottom: var(--pc-space-2);
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	font-weight: 700;
	line-height: var(--pc-leading-snug);
}

.pc-sidenote__text {
	margin-bottom: var(--pc-space-3);
	color: var(--pc-text);
	font-size: var(--pc-text-sm);
	line-height: var(--pc-leading);
}

.pc-sidenote__link {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-1);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
}
.pc-sidenote__link:hover { text-decoration: underline; }
.pc-sidenote--warning .pc-sidenote__link { color: var(--pc-warning); }
.pc-sidenote--danger .pc-sidenote__link { color: var(--pc-danger); }

/* Landing on a warning from the sidebar link should be obvious. */
.pc-callout:target {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* =========================================================================
   14. HUB PAGES AND DIRECTORIES
   ========================================================================= */

.pc-page-head {
	padding-block: var(--pc-space-7);
	border-bottom: 1px solid var(--pc-border);
	background: var(--pc-surface);
}
.pc-page-head__inner { max-width: 720px; }
.pc-page-head__title { margin-bottom: var(--pc-space-3); }
.pc-page-head__lead { max-width: 62ch; margin-bottom: var(--pc-space-5); color: var(--pc-muted); font-size: var(--pc-text-lg); }
.pc-page-head__lead:last-child { margin-bottom: 0; }

/* Directory: a knowledge index, not a blog archive. */
.pc-directory { display: grid; gap: var(--pc-space-5); }
@media (min-width: 700px) { .pc-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pc-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pc-directory__group {
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}
.pc-directory__head { display: flex; align-items: center; gap: var(--pc-space-3); margin-bottom: var(--pc-space-2); }
.pc-directory__icon { flex: none; width: 22px; height: 22px; color: var(--pc-accent); }
.pc-directory__title { margin: 0; font-size: var(--pc-text-lg); }
.pc-directory__title a { color: inherit; text-decoration: none; }
.pc-directory__title a:hover { color: var(--pc-accent); }
.pc-directory__desc { margin-bottom: var(--pc-space-4); color: var(--pc-muted); font-size: var(--pc-text-sm); }
.pc-directory__links { margin: 0; padding: 0; list-style: none; }
.pc-directory__links li { margin: 0; border-top: 1px solid var(--pc-border); }
.pc-directory__links a {
	display: block;
	padding: var(--pc-space-2) 0;
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	text-decoration: none;
}
.pc-directory__links a:hover { color: var(--pc-accent); }
.pc-directory__empty { margin: 0; padding-top: var(--pc-space-2); border-top: 1px solid var(--pc-border); color: var(--pc-muted); font-size: var(--pc-text-sm); }

/* Category strip used on hub pages. */
.pc-catnav { display: flex; flex-wrap: wrap; gap: var(--pc-space-2); margin: 0; padding: 0; list-style: none; }
.pc-catnav li { margin: 0; }
.pc-catnav a {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	min-height: 40px;
	padding: var(--pc-space-2) var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-surface);
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--pc-transition), background var(--pc-transition), color var(--pc-transition);
}
.pc-catnav a:hover,
.pc-catnav a[aria-current="page"] {
	border-color: var(--pc-accent-border);
	background: var(--pc-accent-soft);
	color: var(--pc-accent);
}
.pc-catnav svg { width: 16px; height: 16px; }

/* =========================================================================
   15. PAGINATION, ARCHIVES, EMPTY STATES
   ========================================================================= */

.pc-post-list { display: grid; gap: var(--pc-space-4); }

.pc-pagination { margin-top: var(--pc-space-8); }
.pc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--pc-space-2); }
.pc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding-inline: var(--pc-space-3);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	color: var(--pc-primary);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	text-decoration: none;
}
.pc-pagination .page-numbers:hover { border-color: var(--pc-accent-border); color: var(--pc-accent); }
.pc-pagination .page-numbers.current { border-color: var(--pc-accent); background: var(--pc-accent); color: #fff; }
.pc-pagination .page-numbers.dots { border-color: transparent; background: none; }

.pc-empty {
	max-width: 560px;
	margin-inline: auto;
	padding: var(--pc-space-8) var(--pc-space-5);
	text-align: center;
}
.pc-empty__icon { width: 44px; height: 44px; margin: 0 auto var(--pc-space-4); color: var(--pc-border-strong); }
.pc-empty__title { margin-bottom: var(--pc-space-2); font-size: var(--pc-text-2xl); }
.pc-empty__text { margin-bottom: var(--pc-space-6); color: var(--pc-muted); }
.pc-empty .pc-search { text-align: left; }

.pc-empty__aside {
	margin-top: var(--pc-space-7);
	margin-bottom: 0;
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}

.pc-quicklinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-6);
	padding: 0;
	list-style: none;
}
.pc-quicklinks li { margin: 0; }

/* Search results ---------------------------------------------------------- */

.pc-search-summary { margin-bottom: var(--pc-space-5); color: var(--pc-muted); font-size: var(--pc-text-sm); }
.pc-search-summary strong { color: var(--pc-primary); }

/* =========================================================================
   16. FOOTER
   ========================================================================= */

.pc-footer {
	margin-top: var(--pc-space-9);
	padding-block: var(--pc-space-8) var(--pc-space-6);
	border-top: 1px solid var(--pc-border);
	background: var(--pc-primary);
	color: #cbd5e1;
	font-size: var(--pc-text-sm);
}

.pc-footer a { color: #cbd5e1; text-decoration: none; }
.pc-footer a:hover { color: #fff; text-decoration: underline; }

.pc-footer__cols { display: grid; gap: var(--pc-space-6); }
@media (min-width: 600px) { .pc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pc-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--pc-space-8); } }

.pc-footer__col { min-width: 0; }

.pc-footer__brand { display: inline-flex; align-items: center; gap: var(--pc-space-2); margin-bottom: var(--pc-space-3); color: #fff; font-size: var(--pc-text-lg); font-weight: 700; }
.pc-footer__brand:hover { color: #fff; text-decoration: none; }
.pc-footer__about { max-width: 42ch; margin: 0; color: #94a3b8; }

.pc-footer__title {
	margin-bottom: var(--pc-space-3);
	color: #fff;
	font-size: var(--pc-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pc-footer__list { margin: 0; padding: 0; list-style: none; }
.pc-footer__list li { margin-bottom: var(--pc-space-2); }

.pc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	margin-top: var(--pc-space-8);
	padding-top: var(--pc-space-5);
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: #94a3b8;
	font-size: var(--pc-text-xs);
}
.pc-footer__bottom p { margin: 0; }

/* =========================================================================
   17. BLOCK EDITOR ALIGNMENT
   ========================================================================= */

.pc-prose .alignwide,
.pc-prose .alignfull { margin-inline: 0; }

.pc-prose .wp-block-image { margin-block: var(--pc-space-5); }
.pc-prose .wp-block-separator { max-width: none; }

.pc-prose .wp-block-search__inside-wrapper {
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	padding: var(--pc-space-1);
}
.pc-prose .wp-block-search__input { border: 0; background: none; padding: var(--pc-space-2) var(--pc-space-3); font: inherit; }
.pc-prose .wp-block-search__input:focus { outline: none; }
.pc-prose .wp-block-search__button {
	border: 0;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-accent);
	color: #fff;
	font-weight: 600;
	padding: var(--pc-space-2) var(--pc-space-4);
	cursor: pointer;
}
.pc-prose .wp-block-search__button:hover { background: var(--pc-accent-hover); }

.pc-prose .wp-block-latest-posts { padding-left: 0; list-style: none; }
.pc-prose .wp-block-latest-posts li {
	padding: var(--pc-space-4) 0;
	border-bottom: 1px solid var(--pc-border);
}
.pc-prose .wp-block-latest-posts li:first-child { border-top: 1px solid var(--pc-border); }
.pc-prose .wp-block-latest-posts__post-title { font-size: var(--pc-text-lg); font-weight: 600; text-decoration: none; }
.pc-prose .wp-block-latest-posts__post-date { display: block; margin-top: var(--pc-space-1); color: var(--pc-muted); font-size: var(--pc-text-sm); }
.pc-prose .wp-block-latest-posts__post-excerpt { margin-top: var(--pc-space-2); color: var(--pc-muted); font-size: var(--pc-text-sm); }

/* =========================================================================
   20. BRAND TEXT AND EDITOR BLOCK STYLES
   ========================================================================= */

.pc-brand__text { font-weight: 700; }
.pc-brand__phone { font-weight: 500; }
.pc-brand--image .custom-logo { max-height: 40px; width: auto; }

/*
 * The block patterns ship both the component class and the is-style- class, so
 * a pattern renders correctly on its own. These rules cover the other route:
 * an editor applying the block style from the sidebar to a plain group.
 */

.pc-prose .is-style-pc-quick-answer {
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-accent-border);
	border-radius: var(--pc-radius-lg);
	background: var(--pc-accent-soft);
}
.pc-prose .is-style-pc-quick-answer > *:last-child { margin-bottom: 0; }
.pc-prose .pc-quick-answer__label {
	margin-bottom: var(--pc-space-3);
	color: var(--pc-accent);
	font-size: var(--pc-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pc-prose [class*="is-style-pc-callout-"] {
	margin-block: var(--pc-space-5);
	padding: var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-left-width: 3px;
	border-radius: var(--pc-radius);
	font-size: var(--pc-text-sm);
}
.pc-prose .is-style-pc-callout-info    { border-left-color: var(--pc-accent);  border-color: var(--pc-accent-border);  background: var(--pc-accent-soft); }
.pc-prose .is-style-pc-callout-tip     { border-left-color: var(--pc-success); border-color: var(--pc-success-border); background: var(--pc-success-soft); }
.pc-prose .is-style-pc-callout-warning { border-left-color: var(--pc-warning); border-color: var(--pc-warning-border); background: var(--pc-warning-soft); }
.pc-prose .is-style-pc-callout-danger  { border-left-color: var(--pc-danger);  border-color: var(--pc-danger-border);  background: var(--pc-danger-soft); }

.pc-prose .is-style-pc-callout-info .pc-callout__title    { color: var(--pc-accent); }
.pc-prose .is-style-pc-callout-tip .pc-callout__title     { color: var(--pc-success); }
.pc-prose .is-style-pc-callout-warning .pc-callout__title { color: var(--pc-warning); }
.pc-prose .is-style-pc-callout-danger .pc-callout__title  { color: var(--pc-danger); }

.pc-prose .is-style-pc-step {
	position: relative;
	margin-block: var(--pc-space-4);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}
.pc-prose .is-style-pc-step > *:last-child { margin-bottom: 0; }
.pc-prose .is-style-pc-step .pc-step__title { margin-top: 0; }
.pc-prose .pc-step__result {
	margin-top: var(--pc-space-4);
	padding-top: var(--pc-space-3);
	border-top: 1px dashed var(--pc-border);
	color: var(--pc-muted);
	font-size: var(--pc-text-sm);
}
.pc-prose .pc-step__result strong { color: var(--pc-primary); }

.pc-prose .is-style-pc-sources {
	padding-left: 0;
	list-style: none;
	border-top: 1px solid var(--pc-border);
}
.pc-prose .is-style-pc-sources li {
	margin: 0;
	padding: var(--pc-space-4) 0;
	border-bottom: 1px solid var(--pc-border);
	font-size: var(--pc-text-sm);
}
.pc-prose .is-style-pc-sources a { font-weight: 600; text-decoration: none; }
.pc-prose .is-style-pc-sources a:hover { text-decoration: underline; }

.pc-prose .is-style-pc-related {
	display: grid;
	gap: var(--pc-space-3);
	padding-left: 0;
	list-style: none;
}
@media (min-width: 700px) { .pc-prose .is-style-pc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-prose .is-style-pc-related li {
	margin: 0;
	padding: var(--pc-space-3) var(--pc-space-4);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	font-size: var(--pc-text-sm);
	font-weight: 600;
}
.pc-prose .is-style-pc-related a { text-decoration: none; }

/*
 * Native <details> styling, used when JavaScript has not upgraded the FAQ to
 * buttons. It must look finished on its own, not like a broken accordion.
 */
.pc-prose details.wp-block-details {
	padding: var(--pc-space-4) 0;
	border-bottom: 1px solid var(--pc-border);
}
.pc-prose details.wp-block-details:first-of-type { border-top: 1px solid var(--pc-border); }
.pc-prose details.wp-block-details summary {
	color: var(--pc-primary);
	font-weight: 600;
	cursor: pointer;
	list-style-position: outside;
}
.pc-prose details.wp-block-details summary:hover { color: var(--pc-accent); }
.pc-prose details.wp-block-details > *:not(summary) { margin-top: var(--pc-space-3); }

/* =========================================================================
   18. MOTION PREFERENCES
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.pc-problem-card:hover { transform: none; }
}

/* =========================================================================
   19. PRINT
   ========================================================================= */

@media print {
	.pc-header,
	.pc-footer,
	.pc-sidebar,
	.pc-related,
	.pc-mobile-menu,
	.pc-header-search { display: none !important; }

	body { background: #fff; font-size: 11pt; }
	.pc-article { max-width: none; }
	.pc-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.pc-step { break-inside: avoid; }
}