/**
 * paio-cpt.css
 * Styling for migrated PureBox surfaces: skills, use-cases, compare, status,
 * and static marketing pages. Tokens ported from PureBox src/index.css
 * (PAIO purple design system). Light marketing theme.
 *
 * @package paio-theme
 */

:root {
	/* ── PAIO brand tokens (ported from PureBox HSL) ── */
	--paio-primary: hsl( 251 48% 31% );        /* #352A75 */
	--paio-primary-foreground: hsl( 0 0% 100% );
	--paio-secondary: hsl( 249 52% 15% );      /* #18123A */
	--paio-cream: hsl( 40 33% 92% );           /* landing bg */
	--paio-yellow: hsl( 47 88% 65% );
	--paio-yellow-hover: hsl( 47 80% 59% );
	--paio-text: hsl( 251 30% 35% );
	--paio-muted: hsl( 251 20% 95% );
	--paio-muted-foreground: hsl( 251 30% 45% );
	--paio-border: hsl( 251 20% 87% );
	--paio-card: hsl( 0 0% 100% );
	--paio-destructive: hsl( 0 97% 58% );
	--paio-radius: 0.5rem;

	/* Status colors */
	--paio-status-operational: hsl( 145 63% 42% );
	--paio-status-degraded: hsl( 38 92% 50% );
	--paio-status-partial: hsl( 25 95% 53% );
	--paio-status-major: hsl( 0 84% 60% );
	--paio-status-maintenance: hsl( 217 91% 60% );

	/* Severity badges */
	--paio-sev-minor: hsl( 38 92% 50% );
	--paio-sev-major: hsl( 25 95% 53% );
	--paio-sev-critical: hsl( 0 84% 60% );

	/* Rhythm */
	--paio-space-section: clamp( 3rem, 2rem + 5vw, 7rem );
	--paio-container: 72rem;
	--paio-duration: 600ms;
	--paio-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* ── Scroll reveal (replaces framer-motion) ── */
.paio-reveal {
	opacity: 0;
	transform: translateY( 24px );
	transition:
		opacity var(--paio-duration) var(--paio-ease),
		transform var(--paio-duration) var(--paio-ease);
	will-change: opacity, transform;
}
.paio-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}
@media ( prefers-reduced-motion: reduce ) {
	.paio-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Shared layout primitives ── */
.paio-section {
	padding-block: var(--paio-space-section);
}
.paio-container {
	max-width: var(--paio-container);
	margin-inline: auto;
	padding-inline: clamp( 1rem, 0.5rem + 2vw, 2rem );
}
.paio-card {
	background: var(--paio-card);
	border: 1px solid var(--paio-border);
	border-radius: var(--paio-radius);
	padding: clamp( 1.25rem, 1rem + 1vw, 1.75rem );
}
.paio-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paio-primary);
}

/* ── Skill / use-case grids ── */
.paio-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
}
.paio-skill-card,
.paio-use-case-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--paio-card);
	border: 1px solid var(--paio-border);
	border-radius: var(--paio-radius);
	padding: 1.25rem;
	text-decoration: none;
	color: var(--paio-text);
	transition: transform 200ms var(--paio-ease), box-shadow 200ms var(--paio-ease);
}
.paio-skill-card:hover,
.paio-use-case-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 28px -12px hsl( 251 48% 31% / 0.25 );
}
.paio-skill-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--paio-primary);
}
.paio-skill-card__name {
	font-weight: 700;
	color: var(--paio-primary);
}

/* ── Detail page meta blocks ── */
.paio-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.paio-feature-list li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--paio-text);
}
.paio-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--paio-primary);
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E" ) center / 70% no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E" ) center / 70% no-repeat;
}

/* How-it-works steps */
.paio-steps {
	display: grid;
	gap: 1rem;
	counter-reset: paio-step;
}
.paio-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}
.paio-step::before {
	counter-increment: paio-step;
	content: counter( paio-step );
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--paio-primary);
	color: var(--paio-primary-foreground);
	font-weight: 700;
}

/* FAQ */
.paio-faq details:not(.paio-faq__item) {
	border-bottom: 1px solid var(--paio-border);
	padding: 1rem 0;
}
.paio-faq details:not(.paio-faq__item) summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--paio-primary);
	list-style: none;
}
.paio-faq details:not(.paio-faq__item) summary::-webkit-details-marker { display: none; }
.paio-faq details:not(.paio-faq__item) summary::after {
	content: "+";
	float: right;
	font-weight: 400;
	transition: transform 200ms var(--paio-ease);
}
.paio-faq details:not(.paio-faq__item)[open] summary::after { content: "\2212"; }
.paio-faq details:not(.paio-faq__item) > *:not(summary) {
	margin-top: 0.75rem;
	color: var(--paio-text);
}

/* ── Status page ── */
.paio-status-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: var(--paio-radius);
	padding: 1rem 1.25rem;
	font-weight: 600;
	color: #fff;
	background: var(--paio-status-operational);
}
.paio-status-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	flex: none;
	background: currentColor;
}
.paio-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--paio-border);
}
.paio-status--operational { color: var(--paio-status-operational); }
.paio-status--degraded    { color: var(--paio-status-degraded); }
.paio-status--partial_outage { color: var(--paio-status-partial); }
.paio-status--major_outage   { color: var(--paio-status-major); }
.paio-status--maintenance    { color: var(--paio-status-maintenance); }

/* Incident timeline */
.paio-timeline {
	display: grid;
	gap: 1.25rem;
	border-left: 2px solid var(--paio-border);
	padding-left: 1.5rem;
}
.paio-timeline__item { position: relative; }
.paio-timeline__item::before {
	content: "";
	position: absolute;
	left: -1.94rem;
	top: 0.35rem;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--paio-primary);
	border: 2px solid var(--paio-card);
}
.paio-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	color: #fff;
}
.paio-badge--minor    { background: var(--paio-sev-minor); }
.paio-badge--major    { background: var(--paio-sev-major); }
.paio-badge--critical { background: var(--paio-sev-critical); }

/* ── Archive heads + filters ── */
.paio-archive { padding-block: var(--paio-space-section); }
.paio-archive__head { text-align: center; margin-bottom: 2.5rem; }
.paio-archive__head h1 {
	font-size: clamp( 2rem, 1.4rem + 3vw, 3.25rem );
	color: var(--paio-primary);
	margin: 0.5rem 0;
}
.paio-archive__head p { color: var(--paio-text); }
.paio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 2rem;
}
.paio-filter {
	border: 1px solid var(--paio-border);
	background: var(--paio-card);
	color: var(--paio-text);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 150ms var(--paio-ease), color 150ms var(--paio-ease);
}
.paio-filter:hover { border-color: var(--paio-primary); }
.paio-filter.is-active {
	background: var(--paio-primary);
	color: var(--paio-primary-foreground);
	border-color: var(--paio-primary);
}

/* ── Chips ── */
.paio-chip {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--paio-muted);
	color: var(--paio-muted-foreground);
}
.paio-chip--featured {
	background: hsl( 47 88% 65% / 0.18 );
	color: hsl( 38 70% 35% );
}
.paio-back {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: var(--paio-primary);
	text-decoration: none;
	font-size: 0.9rem;
}
.paio-back:hover { text-decoration: underline; }

.paio-compare-detail, .paio-incident-detail,
.paio-status-page, .paio-status-history {
	padding-block: var(--paio-space-section);
}

/* ══════════════════════════════════════════════════════════════
   USE-CASES — faithful port of purebox UseCases.tsx + UseCaseDetail.tsx
   ══════════════════════════════════════════════════════════════ */

/* Shared dark grid + glow backdrop (archive + detail). */
.paio-uc-archive, .paio-uc-detail { position: relative; isolation: isolate; overflow-x: clip; }
.paio-uc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.paio-uc-bg__grid {
	position: absolute; inset: 0; height: 100vh;
	background-image:
		linear-gradient( to right, hsl( 0 0% 100% / 0.04 ) 1px, transparent 1px ),
		linear-gradient( to bottom, hsl( 0 0% 100% / 0.04 ) 1px, transparent 1px );
	background-size: 120px 120px;
	-webkit-mask-image: radial-gradient( ellipse 60% 50% at 50% 40%, #000 20%, transparent 70% );
	        mask-image: radial-gradient( ellipse 60% 50% at 50% 40%, #000 20%, transparent 70% );
}
.paio-uc-bg__glow {
	position: fixed; inset: 0;
	background: radial-gradient( ellipse 85% 55% at 50% 0%, hsl( 30 100% 50% / 0.18 ) 0%, transparent 62% );
}

/* ── Archive ── */
.paio-uc-archive__hero { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; padding-inline: 1.5rem; }
.paio-uc-archive__title {
	font-size: clamp( 2.2rem, 1.4rem + 4vw, 4.25rem );
	font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 1rem;
	background: linear-gradient( 180deg, #FBF9EC 30%, rgba( 251, 249, 236, 0.6 ) );
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.paio-uc-archive__lead { font-size: clamp( 0.9rem, 0.85rem + 0.3vw, 1rem ); line-height: 1.65; color: var(--paio-dark-muted); margin: 0; }
.paio-uc-archive__lead span { color: var(--paio-dark-accent); font-weight: 600; }

.paio-uc-tabs {
	display: flex; gap: 0.25rem; align-items: center; max-width: 64rem; margin: 0 auto 2.5rem;
	padding-inline: 1.5rem; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	overflow-x: auto; scrollbar-width: none;
}
.paio-uc-tabs::-webkit-scrollbar { display: none; }
.paio-uc-tab {
	position: relative; flex: none; padding: 0.75rem 1rem; margin-bottom: -1px;
	background: none; border: 0; border-bottom: 2px solid transparent;
	font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap;
	color: rgba( 202, 200, 188, 0.6 ); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.paio-uc-tab:hover { color: var(--paio-dark-muted); }
.paio-uc-tab.is-active { color: var(--paio-dark-accent); border-bottom-color: var(--paio-dark-accent); }

.paio-uc-archive__grid {
	display: grid; gap: 1.25rem; max-width: 68.75rem; margin: 0 auto; padding: 0 1.5rem var(--paio-space-section);
	grid-template-columns: 1fr;
}
@media ( min-width: 48rem ) { .paio-uc-archive__grid { grid-template-columns: repeat( 2, 1fr ); } }
@media ( min-width: 64rem ) { .paio-uc-archive__grid { grid-template-columns: repeat( 3, 1fr ); } }

.paio-uc-card {
	display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1rem;
	background: rgba( 20, 20, 20, 0.6 ); border: 1px solid rgba( 255, 255, 255, 0.08 );
	text-decoration: none; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.paio-uc-card:hover { border-color: rgba( 255, 140, 42, 0.4 ); box-shadow: 0 0 24px -6px rgba( 255, 140, 42, 0.15 ); }
.paio-uc-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.paio-uc-card__icon {
	width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: 0.75rem;
	background: rgba( 255, 255, 255, 0.06 ); border: 1px solid rgba( 255, 255, 255, 0.08 ); color: var(--paio-dark-accent);
}
.paio-uc-card__icon svg { width: 1.25rem; height: 1.25rem; }
.paio-uc-card__cat { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba( 202, 200, 188, 0.6 ); }
.paio-uc-card__name { display: block; font-size: 1rem; font-weight: 600; color: var(--paio-dark-text); margin: 0 0 0.5rem; }
.paio-uc-card__desc { display: block; font-size: 0.875rem; line-height: 1.6; color: var(--paio-dark-muted); }
.paio-uc-card__source { display: block; margin-top: 1.25rem; font-size: 0.75rem; color: rgba( 202, 200, 188, 0.4 ); }
.paio-uc-card[hidden] { display: none; }

/* ── Detail — 3-column editorial ── */
.paio-uc-detail__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.paio-uc-detail .paio-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; font-size: 0.875rem; }
.paio-uc-detail__grid { display: flex; gap: 2rem; }
.paio-uc-main { flex: 1 1 auto; min-width: 0; max-width: 42rem; }

/* Left section-index nav */
.paio-uc-nav { display: none; }
@media ( min-width: 64rem ) {
	.paio-uc-nav { display: block; width: 12rem; flex: none; position: sticky; top: 6rem; align-self: flex-start; }
}
.paio-uc-nav__link {
	display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
	font-size: 0.8125rem; color: rgba( 202, 200, 188, 0.6 ); text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
}
.paio-uc-nav__link:hover { color: var(--paio-dark-muted); background: rgba( 255, 255, 255, 0.03 ); }
.paio-uc-nav__link.is-active { color: var(--paio-dark-accent); background: rgba( 255, 140, 42, 0.08 ); font-weight: 500; }

/* Hero */
.paio-uc-hero { margin-bottom: 3rem; }
.paio-uc-hero__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.paio-uc-hero__icon {
	width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: 0.75rem;
	background: rgba( 255, 255, 255, 0.06 ); border: 1px solid rgba( 255, 255, 255, 0.08 ); color: var(--paio-dark-accent);
}
.paio-uc-hero__icon svg { width: 1.25rem; height: 1.25rem; }
.paio-uc-hero__cat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paio-dark-accent); }
.paio-uc-hero h1 { font-size: clamp( 2rem, 1.2rem + 3.5vw, 3.2rem ); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 1rem; }
.paio-uc-hero__lead { font-size: clamp( 0.875rem, 0.8rem + 0.3vw, 1rem ); line-height: 1.65; color: var(--paio-dark-muted); margin: 0; }

/* Sections */
.paio-uc-section { margin-bottom: 3.5rem; scroll-margin-top: 6rem; }
.paio-uc-section h2 { font-size: clamp( 1.25rem, 1rem + 1.2vw, 1.875rem ); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 1rem; }
.paio-uc-section p { font-size: clamp( 0.875rem, 0.8rem + 0.3vw, 1rem ); line-height: 1.65; color: var(--paio-dark-muted); margin: 0; }
.paio-uc-section .paio-eyebrow { display: block; margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba( 202, 200, 188, 0.5 ); }
.paio-uc-section .paio-eyebrow--accent { color: var(--paio-dark-accent); }

/* Prompt cards */
.paio-uc-prompts { display: grid; gap: 0.75rem; }
.paio-uc-prompt {
	margin: 0; padding: 1rem 1.25rem; border-radius: 0.75rem;
	background: rgba( 255, 255, 255, 0.03 ); border: 1px solid rgba( 255, 255, 255, 0.08 );
	font-size: 0.875rem; line-height: 1.6; color: var(--paio-dark-muted);
}

/* Numbered steps */
.paio-uc-steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: paio-uc-step; display: grid; gap: 1.5rem; }
.paio-uc-step { position: relative; padding-left: 3.25rem; counter-increment: paio-uc-step; }
.paio-uc-step::before {
	content: counter( paio-uc-step ); position: absolute; left: 0; top: 0;
	width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%;
	background: rgba( 255, 140, 42, 0.1 ); border: 1px solid rgba( 255, 140, 42, 0.3 );
	font-size: 0.875rem; font-weight: 700; color: var(--paio-dark-accent);
}
.paio-uc-step h3 { font-size: 1rem; font-weight: 600; color: var(--paio-dark-text); margin: 0.25rem 0 0.35rem; }
.paio-uc-step p { font-size: 0.875rem; line-height: 1.6; color: var(--paio-dark-muted); margin: 0; }

/* Recommended-plan CTA */
.paio-uc-cta {
	margin-bottom: 2rem; padding: 2rem; text-align: center; border-radius: 1rem; scroll-margin-top: 6rem;
	background: rgba( 255, 255, 255, 0.03 ); border: 1px solid rgba( 255, 255, 255, 0.08 );
}
.paio-uc-cta .paio-eyebrow { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba( 202, 200, 188, 0.5 ); }
.paio-uc-cta h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; }
.paio-uc-cta > p { font-size: 0.875rem; color: var(--paio-dark-muted); margin: 0 0 1.5rem; }
.paio-uc-cta__fine { margin: 1rem 0 0 !important; font-size: 0.75rem; color: rgba( 202, 200, 188, 0.4 ); }
.paio-btn-primary {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.75rem;
	background: linear-gradient( 135deg, #FF8C2A, #FF6B2A ); color: #1A0A00;
	font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.paio-btn-primary:hover { transform: translateY( -1px ); box-shadow: 0 8px 24px -8px rgba( 255, 140, 42, 0.5 ); }

/* Right sticky stats widget */
.paio-uc-aside { display: none; }
@media ( min-width: 80rem ) {
	.paio-uc-aside { display: block; width: 16rem; flex: none; }
}
.paio-uc-widget {
	position: sticky; top: 6rem; display: grid; gap: 1.25rem; padding: 1.25rem; border-radius: 1rem;
	background: rgba( 20, 20, 20, 0.8 ); border: 1px solid rgba( 255, 255, 255, 0.08 );
}
.paio-uc-widget__head { display: block; margin-bottom: 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba( 202, 200, 188, 0.5 ); }
.paio-uc-channels { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.paio-uc-channel {
	width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.5rem;
	background: rgba( 255, 255, 255, 0.06 ); border: 1px solid rgba( 255, 255, 255, 0.08 ); color: #fff;
}
.paio-uc-channel svg { width: 1rem; height: 1rem; }
.paio-uc-skills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.paio-uc-skill {
	padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem;
	background: rgba( 255, 255, 255, 0.05 ); border: 1px solid rgba( 255, 255, 255, 0.06 ); color: rgba( 202, 200, 188, 0.8 );
}
.paio-uc-widget__tokens { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 1.25rem; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); }
.paio-uc-widget__tokens strong { font-size: 0.95rem; color: var(--paio-dark-text); }
.paio-uc-widget__tokens span { font-size: 0.6875rem; color: rgba( 202, 200, 188, 0.5 ); }
.paio-uc-widget__plan { text-align: center; padding-top: 1.25rem; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); }
.paio-uc-badge {
	display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	background: rgba( 255, 255, 255, 0.06 ); border: 1px solid rgba( 255, 255, 255, 0.08 ); color: var(--paio-dark-muted);
}
.paio-uc-badge--pro { background: rgba( 255, 140, 42, 0.1 ); border-color: rgba( 255, 140, 42, 0.3 ); color: var(--paio-dark-accent); }
.paio-uc-widget__rec { display: block; margin-top: 0.5rem; font-size: 0.6875rem; color: rgba( 202, 200, 188, 0.4 ); }

/* ══════════════════════════════════════════════════════════════
   COMPARE PAGE — faithful port of purebox ComparePage.tsx
   ══════════════════════════════════════════════════════════════ */
.paio-compare-detail {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	padding-block: 0;
}
.paio-compare-detail > section {
	max-width: 75rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
/* fixed orange glow behind everything */
.paio-compare-glow {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient( ellipse 120% 80% at 50% -10%, hsl( 30 100% 50% / 0.18 ) 0%, hsl( 30 100% 50% / 0.08 ) 30%, transparent 70% ),
		radial-gradient( ellipse 70% 50% at 50% 15%, hsl( 25 100% 55% / 0.12 ) 0%, transparent 60% );
}

/* Eyebrow pill */
.paio-eyebrow--pill {
	display: inline-block;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba( 255, 140, 42, 0.25 );
	background: rgba( 255, 140, 42, 0.08 );
	color: #FFAA44;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Shared buttons */
.paio-compare-detail .paio-btn-primary {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	height: 2.75rem; padding-inline: 1.4rem;
	border-radius: 0.75rem;
	font-weight: 600; font-size: 0.95rem;
	white-space: nowrap;
	color: #1A0A00;
	background: linear-gradient( 135deg, #FF8C2A 0%, #FF6A2A 100% );
	box-shadow: 0 10px 30px -8px rgba( 255, 140, 42, 0.6 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.paio-compare-detail .paio-btn-primary:hover { transform: translateY( -1px ); box-shadow: 0 14px 36px -8px rgba( 255, 140, 42, 0.7 ); }
.paio-compare-detail .paio-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	height: 2.75rem; padding-inline: 1.4rem;
	border-radius: 0.75rem;
	font-weight: 600; font-size: 0.95rem;
	white-space: nowrap;
	color: var(--paio-dark-text);
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.10 );
	transition: background 0.2s ease, border-color 0.2s ease;
}
.paio-compare-detail .paio-btn-ghost:hover { background: rgba( 255, 255, 255, 0.14 ); border-color: rgba( 255, 255, 255, 0.2 ); }
/* Mobile: stack buttons full-width; from 640px they shrink to content */
.paio-cta-row { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.paio-cta-row .paio-btn-primary,
.paio-cta-row .paio-btn-ghost { width: 100%; }
@media ( min-width: 40rem ) {
	.paio-cta-row { flex-direction: row; flex-wrap: nowrap; }
	.paio-cta-row .paio-btn-primary,
	.paio-cta-row .paio-btn-ghost { width: auto; }
}
.paio-cta-row--center { justify-content: center; }

.paio-gradient-text {
	background-image: linear-gradient( 180deg, #FFFFFF 0%, #E8E4DF 50%, #C4B5A3 100% );
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Hero ── */
/* Top padding accounts for the 94px fixed-header push already applied by .wp-site-blocks.
   Reference hero is pt-24 (6rem) mobile / md:pt-36 (9rem) desktop; subtract the push to match. */
.paio-compare-hero { padding-block: clamp( 0.25rem, 0rem + 3.5vw, 3.25rem ) clamp( 1.5rem, 0.5rem + 2vw, 3rem ); }
.paio-compare-hero__grid {
	display: grid; gap: 2.5rem; align-items: start;
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 56rem ) {
	.paio-compare-hero__grid { grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr ); gap: 3rem; }
}
.paio-compare-hero__copy { text-align: left; }
.paio-compare-hero h1 {
	font-family: var(--paio-font-display, inherit);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
	margin: 1.25rem 0 0;
	display: flex; flex-direction: column; gap: 0.15em;
}
.paio-compare-hero__top {
	display: inline; color: rgba( 251, 249, 236, 0.5 );
	font-size: clamp( 2rem, 1.4rem + 2.5vw, 3rem );
}
.paio-compare-hero__logo {
	display: inline-block; vertical-align: middle;
	width: clamp( 2rem, 1.4rem + 1.5vw, 3rem ); height: auto;
	margin-right: 0.6rem; object-fit: contain;
}
.paio-compare-hero__accent {
	font-size: clamp( 2.25rem, 1.4rem + 3.5vw, 3.75rem );
	font-weight: 700; letter-spacing: -0.04em; line-height: 0.95;
	background-image: linear-gradient( 180deg, #FFFFFF 0%, #E8E4DF 50%, #C4B5A3 100% );
	-webkit-background-clip: text; background-clip: text; color: transparent;
	padding-bottom: 0.12em;
}
.paio-compare-hero__sub { margin-top: 1.25rem; max-width: 36rem; font-size: 1rem; color: var(--paio-dark-muted); }
.paio-compare-hero__visual { position: relative; width: 100%; max-width: 56rem; margin-inline: auto; }
.paio-compare-hero__visual::before {
	content: ""; position: absolute; inset: -1.5rem; z-index: -1;
	border-radius: 2rem; filter: blur( 40px );
	background: radial-gradient( 60% 60% at 60% 40%, rgba( 255, 140, 42, 0.22 ), transparent 70% );
}
.paio-compare-hero__visual img { display: block; width: 100%; height: auto; border-radius: 1rem; }

/* ── Section heads ── */
.paio-compare-section { padding-block: clamp( 2.5rem, 1.5rem + 3.5vw, 5.5rem ); }
.paio-compare-section__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.paio-compare-section__head h2 {
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
	font-size: clamp( 1.75rem, 1.2rem + 2.5vw, 3rem );
	max-width: 48rem; margin: 0;
	background: linear-gradient( 180deg, #FFFFFF 0%, #E8E4DF 50%, #C4B5A3 100% );
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.paio-section-sub { font-size: 1.05rem; color: var(--paio-dark-muted); margin: 0; }
.paio-solution-intro__h {
	display: flex; flex-direction: column;
	background: linear-gradient( 180deg, #FFFFFF 0%, #E8E4DF 50%, #C4B5A3 100% );
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.paio-solution-intro__h .paio-line { display: block; }

/* ── Problems ── */
.paio-problems-grid {
	margin-top: 3.5rem; display: grid; gap: 2rem;
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 48rem ) { .paio-problems-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
.paio-problem { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
.paio-problem__icon {
	flex: none; width: 2.75rem; height: 2.75rem;
	display: grid; place-items: center; border-radius: 0.75rem;
	background: rgba( 255, 140, 42, 0.12 ); border: 1px solid rgba( 255, 140, 42, 0.2 );
	color: var(--paio-dark-accent);
}
.paio-problem__icon svg { width: 1.25rem; height: 1.25rem; }
.paio-problem h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.paio-problem p { font-size: 0.9rem; line-height: 1.6; color: var(--paio-dark-muted); margin: 0; }

/* ── Spotlights (zigzag) ── */
.paio-spotlights { display: grid; gap: clamp( 4rem, 3rem + 4vw, 7rem ); padding-block: clamp( 4rem, 3rem + 4vw, 7rem ); }
.paio-spotlight { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax( 0, 1fr ); }
@media ( min-width: 48rem ) {
	.paio-spotlight { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 4rem; }
	.paio-spotlight--reversed .paio-spotlight__copy { order: 2; }
}
.paio-spotlight__label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paio-dark-accent); margin-bottom: 0.75rem; }
.paio-spotlight__copy h3 { font-size: clamp( 1.5rem, 1.1rem + 1.5vw, 2.25rem ); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.paio-spotlight__copy p { margin-top: 1rem; font-size: 1.05rem; line-height: 1.65; color: var(--paio-dark-muted); }
.paio-spotlight__media {
	position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
	border-radius: 1rem; border: 1px solid rgba( 255, 255, 255, 0.1 );
	background: linear-gradient( to bottom right, rgba( 255, 255, 255, 0.05 ), rgba( 255, 255, 255, 0.01 ) );
}
.paio-spotlight__media::before {
	content: ""; position: absolute; inset: -1rem; z-index: -1; border-radius: 1.75rem; filter: blur( 40px );
	background: radial-gradient( 60% 60% at 50% 50%, rgba( 255, 140, 42, 0.18 ), transparent 70% );
}
.paio-spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
/* designs rendered on light cards look best contained with padding */
.paio-spotlight__media--personas img,
.paio-spotlight__media--tokens img,
.paio-spotlight__media--pricing img { object-fit: contain; padding: 1.5rem 1.5rem 2rem; }
.paio-spotlight__placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: rgba( 255, 255, 255, 0.4 ); }

/* ── Start fresh ── */
.paio-start-fresh { text-align: center; max-width: 48rem; padding-block: clamp( 4rem, 3rem + 4vw, 7rem ); }
.paio-start-fresh h2 { font-size: clamp( 1.75rem, 1.2rem + 2.5vw, 3rem ); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.paio-start-fresh p { margin: 1.25rem auto 0; max-width: 36rem; font-size: 1.05rem; line-height: 1.65; color: var(--paio-dark-muted); }
.paio-start-fresh .paio-btn-primary { margin-top: 2rem; }

/* ── Comparison table (CSS grid, not <table>) ── */
.paio-compare-table {
	margin-top: 3rem; border-radius: 1rem;
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	background: rgba( 255, 255, 255, 0.02 );
	overflow: hidden;
}
.paio-compare-table__head,
.paio-compare-row {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr;
	align-items: center; gap: 0.75rem;
	padding: 0.9rem 1.25rem;
}
@media ( min-width: 48rem ) { .paio-compare-table__head, .paio-compare-row { padding-inline: 2rem; } }
.paio-compare-table__head {
	position: sticky; top: 1.5rem; z-index: 5;
	margin: 0.5rem; border-radius: 0.75rem;
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	background: rgba( 15, 15, 15, 0.92 );
	backdrop-filter: blur( 8px );
	box-shadow: 0 8px 24px -12px rgba( 0, 0, 0, 0.6 );
	font-size: 0.85rem; font-weight: 600;
}
.paio-compare-col--feature { color: rgba( 255, 255, 255, 0.5 ); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.paio-compare-table__head .paio-compare-col--paio,
.paio-compare-table__head .paio-compare-col--comp { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #fff; }
.paio-compare-table__head .paio-compare-col--comp { color: rgba( 255, 255, 255, 0.7 ); }
.paio-compare-table__head .paio-compare-col--paio img { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; }
.paio-compare-group {
	background: rgba( 255, 255, 255, 0.04 );
	padding: 0.6rem 1.25rem; font-size: 0.7rem; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--paio-dark-accent);
}
@media ( min-width: 48rem ) { .paio-compare-group { padding-inline: 2rem; } }
.paio-compare-row { border-top: 1px solid rgba( 255, 255, 255, 0.05 ); }
.paio-compare-row--highlight { background: rgba( 255, 140, 42, 0.06 ); }
.paio-compare-row .paio-compare-col--feature { font-size: 0.9rem; color: rgba( 255, 255, 255, 0.85 ); text-transform: none; letter-spacing: 0; }
.paio-compare-row--highlight .paio-compare-col--feature { font-weight: 700; color: #fff; }
.paio-compare-row .paio-compare-col--paio,
.paio-compare-row .paio-compare-col--comp { display: flex; justify-content: center; }
.paio-cell-icon { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; }
.paio-cell-icon svg { width: 1rem; height: 1rem; }
.paio-cell-icon--yes-paio { background: rgba( 255, 140, 42, 0.15 ); color: var(--paio-dark-accent); }
.paio-cell-icon--yes { background: rgba( 255, 255, 255, 0.1 ); color: rgba( 255, 255, 255, 0.8 ); }
.paio-cell-icon--no { background: rgba( 255, 255, 255, 0.04 ); color: rgba( 255, 255, 255, 0.3 ); }
.paio-cell-limited { font-style: italic; color: rgba( 255, 255, 255, 0.6 ); font-size: 0.85rem; }
.paio-cell-text { font-size: 0.85rem; font-style: italic; color: rgba( 255, 255, 255, 0.6 ); }
.paio-cell-text--paio { color: #fff; font-style: normal; }
.paio-cell-text--strong { font-weight: 700; }
.paio-compare-row--highlight .paio-cell-text--paio { color: var(--paio-dark-accent); }

/* ── Final CTA ── */
.paio-final-cta { padding-block: clamp( 4rem, 3rem + 4vw, 7rem ); }
.paio-final-cta__frame {
	border-radius: 1.5rem; padding: 1.5px;
	background: linear-gradient( 135deg, #5A2A05 0%, #B85A12 35%, #FF8C2A 70%, #FFB36B 100% );
}
.paio-final-cta__inner {
	position: relative; overflow: hidden; border-radius: calc( 1.5rem - 1.5px );
	padding: clamp( 3rem, 2rem + 3vw, 5rem ) 1.5rem; text-align: center;
	background: #0A0A0A;
}
.paio-final-cta__inner::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--paio-mars); background-size: cover; background-position: center;
	opacity: 0.6; filter: saturate( 0.95 ) brightness( 0.7 );
}
.paio-final-cta__inner::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient( 80% 100% at 50% 0%, rgba( 255, 140, 42, 0.18 ) 0%, rgba( 10, 10, 10, 0.55 ) 55%, rgba( 10, 10, 10, 0.8 ) 100% );
}
.paio-final-cta__inner > * { position: relative; z-index: 1; }
.paio-final-cta__inner h2 { font-size: clamp( 1.75rem, 1.2rem + 2.5vw, 3rem ); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.paio-final-cta__inner p { margin: 1rem auto 0; max-width: 36rem; font-size: 1.05rem; color: #FFAA66; }

/* ── FAQ ── */
.paio-faq.paio-compare-section { max-width: 48rem; margin-inline: auto; }
.paio-faq__list { margin-top: 2rem; display: grid; gap: 0.75rem; }
.paio-faq__item {
	background: #141414; border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 0.75rem; overflow: hidden; transition: border-color 0.3s ease;
}
.paio-faq__item[open], .paio-faq__item:hover { border-color: rgba( 255, 140, 42, 0.4 ); }
.paio-faq__item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.1rem 1.25rem; font-weight: 500; color: var(--paio-dark-text); font-size: 0.95rem;
}
.paio-faq__item summary::-webkit-details-marker { display: none; }
.paio-faq__plus { flex: none; color: var(--paio-dark-accent); font-size: 1.25rem; line-height: 1; transition: transform 0.3s ease; }
.paio-faq__item[open] .paio-faq__plus { transform: rotate( 45deg ); }
.paio-faq__answer { padding: 0 1.25rem 1.25rem; font-size: 0.9rem; line-height: 1.65; color: var(--paio-dark-muted); }

/* ── Incident meta ── */
.paio-incident-meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.paio-timeline__head { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.35rem; }
.paio-timeline__head time { font-size: 0.8rem; color: var(--paio-muted-foreground); }
.paio-affected { color: var(--paio-muted-foreground); font-size: 0.9rem; }
.paio-status-banner--issue { background: var(--paio-status-major); }

/* ── DARK skill detail (matches PureBox app shell) ── */
.paio-dark {
	--paio-dark-bg: #0A0A0A;
	--paio-dark-surface: #141414;
	--paio-dark-text: #FBF9EC;
	--paio-dark-muted: #CAC8BC;
	--paio-dark-accent: #FF8C2A;
	background: var(--paio-dark-bg);
	color: var(--paio-dark-muted);
	padding-block: var(--paio-space-section);
}
.paio-dark .paio-back { color: rgba( 202, 200, 188, 0.6 ); }
.paio-dark .paio-back:hover { color: var(--paio-dark-accent); }
.paio-dark h1, .paio-dark h2, .paio-dark h3 { color: var(--paio-dark-text); }
.paio-dark .paio-card {
	background: rgba( 20, 20, 20, 0.6 );
	border-color: rgba( 255, 255, 255, 0.08 );
}
.paio-skill-detail__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 64rem ) {
	.paio-skill-detail__grid { grid-template-columns: minmax( 0, 1fr ) 20rem; }
}
.paio-skill-head { display: flex; gap: 1.25rem; align-items: flex-start; }
.paio-skill-head__icon {
	width: 4rem; height: 4rem; flex: none;
	display: grid; place-items: center;
	border-radius: 1rem;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	color: var(--paio-dark-accent);
}
.paio-skill-head__icon svg { width: 2rem; height: 2rem; }
.paio-skill-head__name { font-size: clamp( 1.75rem, 1.2rem + 2vw, 2.5rem ); margin: 0 0 0.5rem; }
.paio-skill-head__desc { color: var(--paio-dark-muted); }
.paio-skill-head__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; font-size: 0.8rem; color: rgba( 202, 200, 188, 0.5 ); }
.paio-dark .paio-chip { background: rgba( 255, 255, 255, 0.04 ); color: rgba( 202, 200, 188, 0.6 ); }
.paio-dark .paio-chip--featured { background: rgba( 255, 140, 42, 0.1 ); color: var(--paio-dark-accent); }
.paio-dark .paio-feature-list li { color: var(--paio-dark-muted); }
.paio-dark .paio-feature-list li::before { background: var(--paio-dark-accent); }
.paio-dark .paio-step::before { background: var(--paio-dark-accent); color: #0A0A0A; }
.paio-dark .paio-use-case-card { background: rgba( 20, 20, 20, 0.6 ); border-color: rgba( 255, 255, 255, 0.08 ); color: var(--paio-dark-muted); }
.paio-dark .paio-skill-card__name { color: var(--paio-dark-text); }
.paio-dark .paio-faq details:not(.paio-faq__item) summary { color: var(--paio-dark-text); }
.paio-dark .paio-faq details:not(.paio-faq__item) { border-color: rgba( 255, 255, 255, 0.08 ); }
.paio-install code {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	color: var(--paio-dark-accent);
	word-break: break-all;
}
.paio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.paio-stats div { display: flex; flex-direction: column; }
.paio-stats strong { color: var(--paio-dark-text); font-size: 1.1rem; }
.paio-stats span { font-size: 0.7rem; color: rgba( 202, 200, 188, 0.4 ); }

/* ── Single-skill detail additions ── */
.paio-step__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paio-dark-accent);
	margin-bottom: 0.15rem;
}
.paio-install__label,
.paio-aside__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba( 202, 200, 188, 0.5 );
	margin-bottom: 0.6rem;
}
.paio-requirements ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.paio-requirements li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.875rem;
	color: var(--paio-dark-muted);
}
.paio-requirements li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--paio-dark-accent);
}
.paio-skill-detail__aside > .paio-card + .paio-card { margin-top: 1rem; }
.paio-aside-cat { display: flex; flex-direction: column; gap: 0.5rem; }
.paio-aside-cat .paio-chip { align-self: flex-start; }

/* ── Dark skills archive (mirrors paioclaw.ai/skills) ── */
.paio-archive.paio-dark { padding-block: var(--paio-space-section); }
.paio-archive.paio-dark .paio-container { max-width: 70rem; }
.paio-archive.paio-dark .paio-archive__head { text-align: center; max-width: 42rem; margin-inline: auto; margin-bottom: 2rem; }
.paio-archive.paio-dark .paio-archive__head h1 {
	color: var(--paio-dark-text);
	font-size: clamp( 2.2rem, 1rem + 4vw, 4.25rem );
	letter-spacing: -0.035em;
	line-height: 1.08;
}
.paio-archive.paio-dark .paio-archive__head p { color: var(--paio-dark-muted); font-size: 1rem; margin-top: 1.25rem; }
.paio-archive .paio-accent { color: var(--paio-dark-accent); font-weight: 600; }

/* Search bar */
.paio-skill-search {
	position: relative;
	max-width: 36rem;
	margin: 0 auto 2rem;
}
.paio-skill-search__icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY( -50% );
	width: 1rem;
	height: 1rem;
	color: rgba( 202, 200, 188, 0.4 );
	pointer-events: none;
}
.paio-skill-search__icon svg { width: 100%; height: 100%; }
.paio-skill-search__input {
	width: 100%;
	padding: 0.75rem 1rem 0.75rem 2.75rem;
	border-radius: 0.75rem;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	color: var(--paio-dark-text);
	font-size: 0.875rem;
	font-family: inherit;
	transition: border-color 150ms var(--paio-ease), box-shadow 150ms var(--paio-ease);
}
.paio-skill-search__input::placeholder { color: rgba( 202, 200, 188, 0.3 ); }
.paio-skill-search__input:focus {
	outline: none;
	border-color: rgba( 255, 140, 42, 0.4 );
	box-shadow: 0 0 0 3px rgba( 255, 140, 42, 0.12 );
}

/* Category filters: underline tabs, centered (mirrors reference) */
.paio-archive.paio-dark .paio-filters {
	justify-content: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	margin-bottom: 1rem;
	max-width: 64rem;
	margin-inline: auto;
	scrollbar-width: none;
}
.paio-archive.paio-dark .paio-filters::-webkit-scrollbar { display: none; }
.paio-archive.paio-dark .paio-filter {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: rgba( 202, 200, 188, 0.6 );
	padding: 0.75rem 1rem;
	margin-bottom: -1px;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color 150ms var(--paio-ease), border-color 150ms var(--paio-ease);
}
.paio-archive.paio-dark .paio-filter:hover { border-color: transparent; color: var(--paio-dark-text); }
.paio-archive.paio-dark .paio-filter.is-active {
	background: transparent;
	color: var(--paio-dark-accent);
	border-bottom-color: var(--paio-dark-accent);
}

/* Sort tabs: centered pills */
.paio-sorts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 2rem; justify-content: center; }
.paio-sort {
	border: none;
	background: transparent;
	color: rgba( 202, 200, 188, 0.5 );
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 150ms var(--paio-ease), color 150ms var(--paio-ease);
}
.paio-sort:hover { color: var(--paio-dark-text); background: rgba( 255, 255, 255, 0.04 ); }
.paio-sort.is-active { background: var(--paio-dark-accent); color: #1A0A00; }

/* 4-col grid on dark archive (mirrors sm:2 lg:3 xl:4) */
.paio-archive.paio-dark .paio-skills-grid {
	grid-template-columns: repeat( 4, 1fr );
	gap: 1rem;
}
@media ( max-width: 1100px ) { .paio-archive.paio-dark .paio-skills-grid { grid-template-columns: repeat( 3, 1fr ); } }
@media ( max-width: 800px )  { .paio-archive.paio-dark .paio-skills-grid { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 540px )  { .paio-archive.paio-dark .paio-skills-grid { grid-template-columns: 1fr; } }

/* Skill cards on dark archive */
.paio-archive.paio-dark .paio-skill-card {
	background: rgba( 20, 20, 20, 0.6 );
	border-color: rgba( 255, 255, 255, 0.08 );
	border-radius: 1rem;
	color: var(--paio-dark-muted);
	gap: 0.5rem;
}
.paio-archive.paio-dark .paio-skill-card:hover {
	border-color: rgba( 255, 140, 42, 0.4 );
	box-shadow: 0 0 24px -6px rgba( 255, 140, 42, 0.15 );
}
.paio-skill-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.paio-archive.paio-dark .paio-skill-card__icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.75rem;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paio-dark-accent);
}
.paio-archive.paio-dark .paio-skill-card__icon svg { width: 1rem; height: 1rem; }
.paio-archive.paio-dark .paio-skill-card__name {
	color: var(--paio-dark-text);
	font-size: 0.875rem;
	font-weight: 600;
}
.paio-skill-card__badge {
	align-self: flex-start;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: rgba( 255, 140, 42, 0.1 );
	border: 1px solid rgba( 255, 140, 42, 0.2 );
	color: var(--paio-dark-accent);
}
.paio-skill-card__desc {
	font-size: 0.75rem;
	color: rgba( 202, 200, 188, 0.7 );
	line-height: 1.5;
	flex: 1;
	margin-bottom: 0.5rem;
}
.paio-skill-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.625rem;
}
.paio-skill-card__cat {
	color: rgba( 202, 200, 188, 0.5 );
	font-weight: 500;
	padding: 0.1rem 0.5rem;
	border-radius: 0.375rem;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
}
.paio-skill-card__uses { color: rgba( 202, 200, 188, 0.3 ); }
.paio-skill-card[hidden] { display: none; }
.paio-archive__empty { color: rgba( 202, 200, 188, 0.4 ); text-align: center; padding: 5rem 0; font-size: 0.875rem; }

/* ── Dark compare page (mirrors paioclaw.ai/compare/:slug) ── */
.paio-compare-detail.paio-dark { padding-block: 0; }
.paio-compare-detail.paio-dark h1,
.paio-compare-detail.paio-dark h2,
.paio-compare-detail.paio-dark h3 { color: var(--paio-dark-text); }
.paio-compare-detail.paio-dark .paio-compare-hero__sub,
.paio-compare-detail.paio-dark .paio-section-sub,
.paio-compare-detail.paio-dark p { color: var(--paio-dark-muted); }
.paio-compare-detail.paio-dark .paio-eyebrow { color: var(--paio-dark-accent); }
.paio-compare-detail.paio-dark .paio-compare-hero__accent { color: var(--paio-dark-accent); }
.paio-compare-detail.paio-dark .paio-card {
	background: rgba( 20, 20, 20, 0.6 );
	border-color: rgba( 255, 255, 255, 0.08 );
}
.paio-compare-detail.paio-dark .paio-trust { color: rgba( 202, 200, 188, 0.5 ); }

.paio-compare-section { margin-top: 0; }
.paio-compare-section > .paio-eyebrow { display: block; margin-bottom: 0.5rem; }
.paio-compare-section > h2 { max-width: 38rem; }
.paio-section-sub { margin-top: 0.5rem; }

/* Hero CTA row + ghost button */
.paio-cta-row { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.paio-cta-row--center { align-items: center; }
@media ( min-width: 40rem ) {
	.paio-cta-row { flex-direction: row; flex-wrap: nowrap; }
	.paio-cta-row--center { justify-content: center; }
}
.paio-btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.4rem;
	border-radius: var(--paio-radius);
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: var(--paio-dark-text);
	text-decoration: none;
	font-weight: 600;
	transition: border-color 150ms var(--paio-ease), background 150ms var(--paio-ease);
}
.paio-btn-ghost:hover { border-color: var(--paio-dark-accent); background: rgba( 255, 255, 255, 0.04 ); }

/* Numbered solution spotlights */
.paio-spotlight__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paio-dark-accent);
	margin-bottom: 0.35rem;
}

/* Start-fresh band */
.paio-start-fresh {
	margin-top: var(--paio-space-section);
	text-align: center;
	background: rgba( 255, 140, 42, 0.06 );
	border-color: rgba( 255, 140, 42, 0.2 );
}
.paio-start-fresh h2 { margin-top: 0; }
.paio-start-fresh .wp-element-button { margin-top: 1.25rem; }

/* Comparison table + FAQ on dark */
.paio-compare-detail.paio-dark .paio-compare-table th,
.paio-compare-detail.paio-dark .paio-compare-table td { border-color: rgba( 255, 255, 255, 0.08 ); }
.paio-compare-detail.paio-dark .paio-compare-table thead th { color: var(--paio-dark-text); }
.paio-compare-detail.paio-dark .paio-compare-group {
	background: rgba( 255, 255, 255, 0.04 );
	color: var(--paio-dark-text);
}
.paio-compare-detail.paio-dark .paio-compare-yes { color: var(--paio-status-operational); }
.paio-compare-detail.paio-dark .paio-compare-no { color: rgba( 202, 200, 188, 0.4 ); }
.paio-compare-detail.paio-dark .paio-legend { color: rgba( 202, 200, 188, 0.5 ); }
.paio-compare-detail.paio-dark .paio-faq summary { color: var(--paio-dark-text); }
.paio-compare-detail.paio-dark .paio-faq details { border-color: rgba( 255, 255, 255, 0.08 ); }
.paio-compare-detail.paio-dark .paio-faq details > *:not(summary) { color: var(--paio-dark-muted); }

/* ═══════════════════════════════════════════════════════════════════
   Status pages — faithful port of Status.tsx / StatusHistory.tsx /
   StatusIncident.tsx (dark raycast-page shell)
   ═══════════════════════════════════════════════════════════════════ */

/* Shell */
.paio-status-wrap {
	position: relative;
	min-height: 100vh;
	background: #0A0A0A;
	color: #FBF9EC;
}

/* Background layers */
.paio-status-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.paio-status-bg__radial {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(255,140,42,0.12), transparent 60%);
}
.paio-status-bg__grid {
	position: absolute;
	inset: 0;
	opacity: 0.03;
	background-image:
		linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 120px 120px;
}

/* Centred content column */
.paio-status-inner {
	max-width: 700px;
	margin-inline: auto;
	padding-inline: 1rem;
}
@media (min-width: 640px) { .paio-status-inner { padding-inline: 1.5rem; } }

/* Header row */
.paio-status-header {
	position: relative;
	z-index: 20;
	padding-top: 2.5rem;
	padding-bottom: 2rem;
}
@media (min-width: 640px) { .paio-status-header { padding-top: 3.5rem; } }
.paio-status-header__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.paio-status-logo { width: 36px; height: 36px; flex: none; }
.paio-status-title {
	font-size: clamp(1.5rem, 1.25rem + 1.5vw, 1.875rem);
	font-weight: 700;
	color: #FBF9EC;
	margin: 0;
}
.paio-status-title--page {
	font-size: clamp(1.5rem, 1.25rem + 1.5vw, 1.875rem);
	margin: 0 0 0.5rem;
}

/* Body area */
.paio-status-body {
	position: relative;
	z-index: 10;
	padding-bottom: 4rem;
	padding-inline: 1rem;
}
.paio-status-body--history { padding-top: 4rem; }
@media (min-width: 640px) { .paio-status-body { padding-inline: 1.5rem; } }

/* Overall status banner */
.paio-status-overall {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid transparent;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .paio-status-overall { padding: 1rem 1.5rem; } }
.paio-status-overall__label {
	font-size: 0.875rem;
	font-weight: 600;
}

/* Generic section wrapper */
.paio-status-section { margin-bottom: 1.5rem; }
.paio-status-section__title {
	font-size: 1rem;
	font-weight: 600;
	color: #FBF9EC;
	margin: 0 0 1rem;
}

/* Active incident card */
.paio-status-inc-card {
	display: block;
	border-radius: 0.75rem;
	border: 1px solid rgba(255,140,42,0.3);
	background: rgba(255,140,42,0.08);
	padding: 1.25rem;
	margin-bottom: 0.75rem;
	text-decoration: none;
	transition: background 180ms;
}
@media (min-width: 640px) { .paio-status-inc-card { padding: 1.5rem; } }
.paio-status-inc-card:hover { background: rgba(255,140,42,0.12); }
.paio-status-inc-card__head {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.paio-status-inc-card__icon { flex: none; margin-top: 1px; }
.paio-status-inc-card__head h3 {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 600;
	color: #FBF9EC;
	margin: 0;
}
.paio-status-inc-card__arrow { flex: none; color: rgba(255,255,255,0.3); margin-top: 1px; }
.paio-status-inc-card__msg {
	font-size: 0.8125rem;
	color: rgba(251,249,236,0.5);
	margin: 0 0 0.75rem 1.5rem;
}
.paio-status-inc-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding-left: 1.5rem;
	font-size: 0.75rem;
}

/* Separator dot between meta pieces */
.paio-status-sep { color: rgba(255,255,255,0.2); }

/* System status component table */
.paio-status-table {
	border-radius: 0.75rem;
	border: 1px solid rgba(255,255,255,0.08);
	overflow: hidden;
	margin-bottom: 2rem;
}
.paio-status-table__head {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	font-size: 1rem;
	font-weight: 600;
	color: #FBF9EC;
}
@media (min-width: 640px) { .paio-status-table__head { padding: 1rem 1.5rem; } }

/* Component row */
.paio-status-comp { border-bottom: 1px solid rgba(255,255,255,0.06); }
.paio-status-comp:last-child { border-bottom: none; }
.paio-status-comp__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	background: none;
	border: none;
	color: inherit;
	text-align: left;
	cursor: default;
}
@media (min-width: 640px) { .paio-status-comp__row { padding: 1rem 1.5rem; } }
.paio-status-comp__row--toggle { cursor: pointer; }
.paio-status-comp__row--toggle:hover { background: rgba(255,255,255,0.02); }
.paio-status-comp__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.paio-status-comp__name {
	font-size: 0.875rem;
	font-weight: 500;
	color: #FBF9EC;
}
.paio-status-comp__count {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.paio-status-comp__status { font-size: 0.75rem; font-weight: 500; flex: none; }

/* Chevron flip when expanded */
.paio-status-chevron { transition: transform 200ms; }
.paio-status-comp__row[aria-expanded="true"] .paio-status-chevron { transform: rotate(180deg); }

/* Sub-components panel */
.paio-status-sub {
	background: rgba(255,255,255,0.015);
	border-top: 1px solid rgba(255,255,255,0.04);
}
.paio-status-sub__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem 0.75rem 3.5rem;
}
@media (min-width: 640px) { .paio-status-sub__row { padding-inline: 1.5rem 1.5rem; padding-left: 3.5rem; } }
.paio-status-sub__left {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.6);
}

/* Past incidents list */
.paio-status-past { display: flex; flex-direction: column; gap: 0.75rem; }
.paio-status-past__item {
	display: block;
	border-radius: 0.75rem;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 1.25rem;
	text-decoration: none;
	transition: background 180ms;
}
.paio-status-past__item:hover { background: rgba(255,255,255,0.02); }
.paio-status-past__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.375rem;
}
.paio-status-past__head h3 {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: #FBF9EC;
	margin: 0;
}
.paio-status-past__arrow { flex: none; color: rgba(255,255,255,0.2); margin-top: 1px; }
.paio-status-past__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.3);
}
.paio-status-past__meta--indented { padding-left: 1.5rem; }
.paio-status-hist-icon { flex: none; }

/* View-history button */
.paio-status-history-link {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}
.paio-status-ghost-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255,255,255,0.5);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 0.5rem;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	transition: color 180ms, border-color 180ms;
}
.paio-status-ghost-btn:hover {
	color: #FBF9EC;
	border-color: rgba(255,255,255,0.2);
}

/* Back link */
.paio-status-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	margin-bottom: 1.5rem;
	transition: color 180ms;
}
.paio-status-back:hover { color: #FBF9EC; }

/* History page */
.paio-status-history-lead {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.4);
	margin: 0 0 2.5rem;
}
.paio-status-history-groups { display: flex; flex-direction: column; gap: 2.5rem; }
.paio-status-history-month {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.3);
	letter-spacing: 0.08em;
	margin: 0 0 1rem;
}

/* Empty state */
.paio-status-empty {
	text-align: center;
	padding-block: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.paio-status-empty p { color: rgba(255,255,255,0.4); }

/* Incident detail */
.paio-inc-detail-header { margin-bottom: 2rem; }
.paio-inc-detail-badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.paio-inc-status-badge {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
}
.paio-inc-sev-chip {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.3);
	text-transform: capitalize;
}
.paio-inc-detail-title {
	font-size: clamp(1.25rem, 1rem + 1.5vw, 1.5rem);
	font-weight: 700;
	color: #FBF9EC;
	margin: 0 0 0.75rem;
}
.paio-inc-detail-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.3);
}

/* Incident timeline */
.paio-inc-timeline { margin-bottom: 2rem; }
.paio-inc-timeline__head {
	font-size: 1rem;
	font-weight: 600;
	color: #FBF9EC;
	margin: 0 0 1.25rem;
}
.paio-inc-timeline__body {
	position: relative;
	padding-left: 2rem;
}
.paio-inc-timeline__line {
	position: absolute;
	left: 11px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(255,255,255,0.08);
}
.paio-inc-timeline__items { display: flex; flex-direction: column; gap: 1.5rem; }
.paio-inc-timeline__item {
	position: relative;
	display: flex;
	gap: 1rem;
}
.paio-inc-timeline__dot {
	position: absolute;
	left: -2rem;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0A0A0A;
	border: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.paio-inc-timeline__content { flex: 1; }
.paio-inc-timeline__labels {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}
.paio-inc-timeline__ts {
	font-size: 0.6875rem;
	color: rgba(255,255,255,0.25);
}
.paio-inc-timeline__msg {
	font-size: 0.8125rem;
	color: rgba(251,249,236,0.5);
	line-height: 1.6;
	margin: 0;
}

/* Auth pages (account / ref-signup): base = desktop, mobile tuned below. */
.paio-auth-heading { font-size: 24px; }
.paio-auth-card { padding: 32px; }
.paio-otp-box { font-size: 18px; flex: 1 1 0; min-width: 0 !important; width: auto !important; }

@media ( max-width: 480px ) {
	.paio-auth-heading { font-size: 20px; margin-bottom: 1.25rem !important; }
	.paio-auth-card { padding: 20px; border-radius: 14px; }
	.paio-otp-box { font-size: 15px; }
}

@media ( max-width: 360px ) {
	[data-paio-otp-boxes] { gap: 0.375rem !important; }
	.paio-otp-box { font-size: 13px; }
}