/* =============================================================
   AI Agent OS — Design System
   Editorial-calm developer brand. Warm cream canvas, warm ink,
   a single scarce brand voltage (Cursor Orange), hairline-only
   depth, and the AI-timeline pastel pill signature.

   Deviations from design.md (requested):
   · Techno display face (Chakra Petch) instead of CursorGothic/Inter.
     Weight stays at 400 — the editorial voice depends on it.
   · A whisper-light cream gradient wash + hairline dot-grid pattern
     on the canvas, where the spec calls for flat cream.
   ============================================================= */

:root {
	/* ---- Brand & accent ---- */
	--c-primary: #f54e00;
	--c-primary-active: #d04200;
	--c-on-primary: #ffffff;

	/* ---- Surface ---- */
	--c-canvas: #f7f7f4;
	--c-canvas-soft: #fafaf7;
	--c-surface-card: #ffffff;
	--c-surface-strong: #e6e5e0;

	/* ---- Hairlines ---- */
	--c-hairline: #e6e5e0;
	--c-hairline-soft: #efeee8;
	--c-hairline-strong: #cfcdc4;

	/* ---- Text ---- */
	--c-ink: #26251e;
	--c-body: #5a5852;
	--c-body-strong: #26251e;
	--c-muted: #807d72;
	--c-muted-soft: #a09c92;

	/* ---- Timeline (AI-action signature — in-product only) ---- */
	--c-tl-thinking: #dfa88f;
	--c-tl-grep: #9fc9a2;
	--c-tl-read: #9fbbe0;
	--c-tl-edit: #c0a8dd;
	--c-tl-done: #c08532;

	/* ---- Semantic ---- */
	--c-success: #1f8a65;
	--c-error: #cf2d56;

	/* ---- Canvas wash + pattern ---- */
	--c-wash-top: #fbfbf8;
	--c-wash-bottom: #f4f4f0;
	--c-dot: rgba(38, 37, 30, 0.055);
	--c-dot-strong: rgba(38, 37, 30, 0.07);
	--c-header-bg: rgba(247, 247, 244, 0.85);

	/* Derived shades. These sit on the ink surface, so they must flip
	   with it — the ink/canvas pair swaps in dark. */
	--c-ink-hover: #35342b;
	--c-on-ink-veil: rgba(247, 247, 244, 0.14);
	--c-glare: rgba(38, 37, 30, 0.035);

	color-scheme: light;

	/* ---- Radius ---- */
	--r-xs: 4px;
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-pill: 9999px;

	/* ---- Spacing ---- */
	--s-xxs: 4px;
	--s-xs: 8px;
	--s-sm: 12px;
	--s-base: 16px;
	--s-md: 20px;
	--s-lg: 24px;
	--s-xl: 32px;
	--s-xxl: 48px;
	--s-section: 80px;

	/* ---- Type ---- */
	--f-display: "Chakra Petch", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--f-body: "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--f-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--container: 1200px;
}

/* =============================================================
   DARK THEME
   A warm inverse of the cream system — never pure black, and the
   ink/canvas pair simply swaps, so ink-backed components (the
   download CTA, the featured pricing tier, accent chips) invert
   correctly on their own.

   Follows the OS by default; an explicit data-theme always wins.
   The token block is duplicated rather than shared because plain
   CSS cannot hoist a rule into a media query.
   ============================================================= */

:root[data-theme="dark"] {
	--c-canvas: #1a1813;
	--c-canvas-soft: #211f19;
	--c-surface-card: #232119;
	--c-surface-strong: #35322a;

	--c-hairline: #35322a;
	--c-hairline-soft: #2b2922;
	--c-hairline-strong: #4a463c;

	--c-ink: #f2f0e6;
	--c-body: #b3afa2;
	--c-body-strong: #f2f0e6;
	--c-muted: #8d8979;
	--c-muted-soft: #6b6759;

	/* Nudged brighter so the accent holds up against a dark canvas. */
	--c-primary: #ff5a0d;
	--c-primary-active: #f54e00;

	--c-success: #34d399;
	--c-error: #f87171;

	--c-wash-top: #201e17;
	--c-wash-bottom: #141310;
	--c-dot: rgba(242, 240, 230, 0.05);
	--c-dot-strong: rgba(242, 240, 230, 0.07);
	--c-header-bg: rgba(26, 24, 19, 0.85);

	--c-ink-hover: #e2e0d4;
	--c-on-ink-veil: rgba(38, 37, 30, 0.12);
	--c-glare: rgba(242, 240, 230, 0.05);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-canvas: #1a1813;
		--c-canvas-soft: #211f19;
		--c-surface-card: #232119;
		--c-surface-strong: #35322a;

		--c-hairline: #35322a;
		--c-hairline-soft: #2b2922;
		--c-hairline-strong: #4a463c;

		--c-ink: #f2f0e6;
		--c-body: #b3afa2;
		--c-body-strong: #f2f0e6;
		--c-muted: #8d8979;
		--c-muted-soft: #6b6759;

		--c-primary: #ff5a0d;
		--c-primary-active: #f54e00;

		--c-success: #34d399;
		--c-error: #f87171;

		--c-wash-top: #201e17;
		--c-wash-bottom: #141310;
		--c-dot: rgba(242, 240, 230, 0.05);
		--c-dot-strong: rgba(242, 240, 230, 0.07);
		--c-header-bg: rgba(26, 24, 19, 0.85);

		--c-ink-hover: #e2e0d4;
		--c-on-ink-veil: rgba(38, 37, 30, 0.12);
		--c-glare: rgba(242, 240, 230, 0.05);

		color-scheme: dark;
	}
}

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

html { scroll-behavior: smooth; }

body.aios {
	margin: 0;
	color: var(--c-body);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;

	/* Gradient wash + hairline dot-grid pattern over the canvas. */
	background-color: var(--c-canvas);
	background-image:
		radial-gradient(circle at 1px 1px, var(--c-dot) 1px, transparent 0),
		linear-gradient(180deg, var(--c-wash-top) 0%, var(--c-canvas) 42%, var(--c-wash-bottom) 100%);
	background-size: 24px 24px, 100% 100%;
	background-attachment: fixed, fixed;
}

img { max-width: 100%; height: auto; }

/* Display: techno face, weight 400, negative tracking. Never bold. */
h1, h2, h3, h4, h5 {
	font-family: var(--f-display);
	font-weight: 400;
	color: var(--c-ink);
	margin: 0 0 var(--s-sm);
}

a { color: var(--c-ink); text-decoration: none; }
a:hover { color: var(--c-primary); }

code, pre, kbd { font-family: var(--f-code); }

.aios-container {
	width: min(var(--container), calc(100% - var(--s-xxl)));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	background: var(--c-surface-card); color: var(--c-ink);
	border: 1px solid var(--c-hairline-strong);
	padding: var(--s-sm) var(--s-base); border-radius: var(--r-md); z-index: 999;
}

/* =============================================================
   TYPE SCALE
   ============================================================= */
.aios-display-mega {
	font-size: 72px; line-height: 1.1; letter-spacing: -2.16px;
}
.aios-display-lg { font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; }
.aios-display-md { font-size: 26px; line-height: 1.25; letter-spacing: -0.325px; }
.aios-display-sm { font-size: 22px; line-height: 1.3; letter-spacing: -0.11px; }

.aios-title-md { font-family: var(--f-body); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--c-ink); }
.aios-title-sm { font-family: var(--f-body); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--c-ink); }

.aios-body-md { font-size: 16px; line-height: 1.5; }
.aios-body-tracked { font-size: 16px; line-height: 1.5; letter-spacing: 0.08px; }
.aios-body-sm { font-size: 14px; line-height: 1.5; }
.aios-caption { font-size: 13px; line-height: 1.4; color: var(--c-muted); }

.aios-caption-uppercase,
.aios-eyebrow {
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.88px;
	text-transform: uppercase;
}

@media (max-width: 1024px) { .aios-display-mega { font-size: 56px; letter-spacing: -1.68px; } }
@media (max-width: 640px)  { .aios-display-mega { font-size: 32px; letter-spacing: -0.96px; } .aios-display-lg { font-size: 28px; } }

/* =============================================================
   BUTTONS
   ============================================================= */
.aios-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-xs);
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary — the single brand voltage. Used scarcely. */
.aios-btn--primary {
	height: 40px;
	padding: 10px 18px;
	background: var(--c-primary);
	color: var(--c-on-primary);
}
.aios-btn--primary:hover { background: var(--c-primary); color: var(--c-on-primary); }
.aios-btn--primary:active { background: var(--c-primary-active); }

/* Secondary — white pill on cream. */
.aios-btn--secondary {
	height: 40px;
	padding: 10px 18px;
	background: var(--c-surface-card);
	color: var(--c-ink);
	border-color: var(--c-hairline-strong);
}
.aios-btn--secondary:hover { background: var(--c-canvas-soft); color: var(--c-ink); }

/* Download — larger ink-on-canvas CTA. */
.aios-btn--download {
	height: 44px;
	padding: 12px 20px;
	background: var(--c-ink);
	color: var(--c-canvas);
}
.aios-btn--download:hover { background: var(--c-ink-hover); color: var(--c-canvas); }

/* Tertiary — inline ink text link. */
.aios-btn--text {
	height: 40px;
	padding: 10px 4px;
	background: none;
	color: var(--c-ink);
}
.aios-btn--text:hover { color: var(--c-primary); }

.aios-link-arrow { font-size: 14px; font-weight: 500; color: var(--c-ink); }
.aios-link-arrow span { display: inline-block; transition: transform 0.15s ease; }
.aios-link-arrow:hover { color: var(--c-primary); }
.aios-link-arrow:hover span { transform: translateX(3px); }

/* =============================================================
   BADGES / TAGS
   ============================================================= */
.aios-chip,
.aios-badge-pill {
	display: inline-block;
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	background: var(--c-surface-strong);
	color: var(--c-ink);
	border-radius: var(--r-pill);
	padding: 4px 10px;
}
.aios-chip--accent { background: var(--c-ink); color: var(--c-canvas); }

.aios-eyebrow {
	display: inline-block;
	color: var(--c-muted);
	margin-bottom: var(--s-base);
}

/* =============================================================
   TOP NAV
   ============================================================= */
.aios-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-header-bg);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--c-hairline);
}
.aios-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-lg);
	height: 64px;
}
.aios-logo { display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--c-ink); }
.aios-logo__mark { display: inline-flex; }
.aios-logo__text {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.2px;
	color: var(--c-ink);
}
.aios-nav__list {
	display: flex;
	gap: var(--s-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}
.aios-nav__list a {
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-body);
}
.aios-nav__list a:hover,
.aios-nav__list .current-menu-item > a { color: var(--c-ink); }
.aios-header__actions { display: flex; align-items: center; gap: var(--s-sm); }

/* Theme toggle — shows the icon of the theme you'd switch TO. */
.aios-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-md);
	color: var(--c-body);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.aios-theme-toggle:hover { color: var(--c-ink); border-color: var(--c-hairline-strong); }
.aios-theme-toggle__sun { display: none; }
.aios-theme-toggle__moon { display: block; }

/* In dark, offer the sun. Mirrors the token cascade exactly. */
:root[data-theme="dark"] .aios-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .aios-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .aios-theme-toggle__sun { display: block; }
	:root:not([data-theme="light"]) .aios-theme-toggle__moon { display: none; }
}

.aios-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: var(--s-xs);
	cursor: pointer;
}
.aios-nav-toggle span {
	width: 20px; height: 1.5px;
	background: var(--c-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.aios-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.aios-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aios-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
	.aios-nav-toggle { display: flex; }
	.aios-nav {
		position: fixed;
		inset: 64px 0 auto 0;
		background: var(--c-canvas);
		border-bottom: 1px solid var(--c-hairline);
		padding: var(--s-base) var(--s-lg) var(--s-lg);
		transform: translateY(-120%);
		transition: transform 0.25s ease;
		z-index: 99;
	}
	.aios-nav.is-open { transform: translateY(0); }
	.aios-nav__list { flex-direction: column; gap: var(--s-base); }
}

/* =============================================================
   PARALLAX BACKDROP — whisper-light warm wash
   ============================================================= */
.aios-scene { position: relative; }

.aios-backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.aios-backdrop__grid {
	position: absolute;
	inset: -20%;
	background-image:
		linear-gradient(var(--c-hairline-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-hairline-soft) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 20%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 20%, transparent 72%);
	opacity: 0.7;
	will-change: transform;
}
.aios-backdrop__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform;
}
.aios-backdrop__orb--cyan   { width: 520px; height: 520px; background: rgba(245, 78, 0, 0.05);  top: -14%; left: -8%; }
.aios-backdrop__orb--violet { width: 560px; height: 560px; background: rgba(223, 168, 143, 0.13); top: 12%; right: -12%; }
.aios-backdrop__orb--pink   { width: 380px; height: 380px; background: rgba(159, 187, 224, 0.11); bottom: -18%; left: 34%; }

.aios-scene > .aios-container,
.aios-page-hero > .aios-container,
.aios-section > .aios-container { position: relative; z-index: 1; }

/* =============================================================
   HERO
   ============================================================= */
.aios-hero {
	position: relative;
	padding: var(--s-section) 0;
	overflow: hidden;
}
.aios-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-xxl);
	align-items: center;
}
/* The display headline runs the full container — capping it forces the
   72px type to wrap early and orphan a word. */
.aios-hero__copy { max-width: none; }
.aios-hero__inner--center { text-align: center; }
.aios-hero__inner--center .aios-hero__copy { margin-inline: auto; max-width: 62ch; }
.aios-hero__inner--center .aios-hero__title { max-width: none; }

/* Bottom row: CTAs left, social proof right — fills the width. */
.aios-hero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-lg);
	flex-wrap: wrap;
	padding-top: var(--s-lg);
	border-top: 1px solid var(--c-hairline);
	margin-top: var(--s-xl);
}
.aios-hero__foot .aios-hero__actions { margin: 0; }
.aios-hero__foot .aios-hero__proof { margin: 0; }
.aios-hero__inner--center .aios-hero__foot { justify-content: center; border-top: 0; }

.aios-hero__title {
	font-size: 72px;
	line-height: 1.1;
	letter-spacing: -2.16px;
	font-weight: 400;
	margin-bottom: var(--s-md);
	color: var(--c-ink);
}
@media (max-width: 1024px) { .aios-hero__title { font-size: 56px; letter-spacing: -1.68px; } }
@media (max-width: 640px)  { .aios-hero__title { font-size: 32px; letter-spacing: -0.96px; } }

/* The "gradient text" slot becomes a quiet accent line, not a rainbow. */
.aios-gradient-text { display: block; color: var(--c-muted); }

.aios-hero__lead {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.08px;
	color: var(--c-body);
	max-width: 62ch;
	margin: 0 0 var(--s-xl);
}
.aios-hero__inner--center .aios-hero__lead { margin-inline: auto; }
.aios-hero__actions { display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center; }
.aios-hero__actions--center { justify-content: center; }
.aios-hero__proof { margin-top: var(--s-lg); color: var(--c-muted); font-size: 13px; line-height: 1.4; }
.aios-hero__proof strong { color: var(--c-ink); font-weight: 600; }

/* =============================================================
   IDE MOCKUP CARD — the signature elevated element
   ============================================================= */
.aios-hero__visual { position: relative; margin-top: var(--s-xl); }

.aios-ide {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.aios-ide__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--s-sm) var(--s-base);
	border-bottom: 1px solid var(--c-hairline);
	background: var(--c-canvas-soft);
}
.aios-ide__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--c-hairline-strong); }
.aios-ide__bar em {
	margin-left: var(--s-xs);
	font-style: normal;
	font-family: var(--f-code);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-muted);
}
.aios-ide__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-base);
	padding: var(--s-base);
}

/* IDE pane */
.aios-ide__pane {
	background: var(--c-canvas-soft);
	border: 1px solid var(--c-hairline-soft);
	border-radius: var(--r-md);
	padding: var(--s-base);
}
.aios-ide__stat b {
	display: block;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.325px;
	color: var(--c-ink);
}
.aios-ide__stat small {
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* Agent timeline — the AI-action pill signature. In-product only. */
.aios-ide__timeline {
	grid-column: 1 / -1;
	background: var(--c-canvas-soft);
	border: 1px solid var(--c-hairline-soft);
	border-radius: var(--r-md);
	padding: var(--s-base);
	display: grid;
	gap: var(--s-sm);
}
.aios-tl-row {
	display: flex;
	align-items: center;
	gap: var(--s-sm);
	font-family: var(--f-code);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-body);
}
.aios-tl-pill {
	flex: none;
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--c-ink);
	border-radius: var(--r-pill);
	padding: 4px 10px;
}
.aios-tl-pill--thinking { background: var(--c-tl-thinking); }
.aios-tl-pill--grep     { background: var(--c-tl-grep); }
.aios-tl-pill--read     { background: var(--c-tl-read); }
.aios-tl-pill--edit     { background: var(--c-tl-edit); }
.aios-tl-pill--done     { background: var(--c-tl-done); color: var(--c-on-primary); }

.aios-float-chip {
	display: inline-flex;
	align-items: center;
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline-strong);
	border-radius: var(--r-pill);
	padding: 4px 10px;
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--c-ink);
	white-space: nowrap;
}
.aios-hero__visual .aios-float-chip { position: absolute; }
.aios-float-chip--a { top: calc(var(--s-base) * -1); right: var(--s-xl); }
.aios-float-chip--b { bottom: calc(var(--s-base) * -1); left: var(--s-xl); }

@media (max-width: 640px) {
	/* Multi-pane collapses to a single primary pane preview. */
	.aios-ide__body { grid-template-columns: 1fr; }
	.aios-ide__stat:nth-child(n+2) { display: none; }
	.aios-float-chip--a, .aios-float-chip--b { display: none; }
}

/* =============================================================
   PAGE HERO (inner pages)
   ============================================================= */
.aios-page-hero {
	position: relative;
	padding: var(--s-section) 0 var(--s-xxl);
	overflow: hidden;
}
.aios-page-hero__title { font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; margin-bottom: 0; }
/* The split head already carries a bottom hairline + rhythm. */
.aios-page-hero .aios-section__head--split { margin-bottom: 0; }
.aios-page-hero__lead {
	font-size: 16px; line-height: 1.5; letter-spacing: 0.08px;
	color: var(--c-body); max-width: 62ch; margin: 0;
}

/* =============================================================
   SECTIONS & GRIDS — 80px rhythm
   ============================================================= */
.aios-section { position: relative; padding: var(--s-section) 0; }
.aios-section--alt { background: var(--c-canvas-soft); border-block: 1px solid var(--c-hairline); }
.aios-section--tight { padding: var(--s-xxl) 0; }
.aios-section__head { max-width: 62ch; margin-bottom: var(--s-xl); }
.aios-section__title { font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; }

/* Editorial split head: title left (cols 1–6), supporting lead right (8–13).
   Fills the width a lone left-aligned heading would leave empty. */
.aios-section__head--split {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--s-lg);
	align-items: end;
	max-width: none;
	padding-bottom: var(--s-lg);
	border-bottom: 1px solid var(--c-hairline);
}
.aios-section__head--split .aios-section__headline { grid-column: 1 / 7; }
.aios-section__head--split .aios-section__lead { grid-column: 8 / 13; }
.aios-section__head--split .aios-section__title { margin-bottom: 0; }
.aios-section__lead {
	color: var(--c-body);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.08px;
	margin: 0;
}
@media (max-width: 1024px) {
	.aios-section__head--split { grid-template-columns: 1fr; align-items: start; }
	.aios-section__head--split .aios-section__headline,
	.aios-section__head--split .aios-section__lead { grid-column: 1 / -1; }
}

/* =============================================================
   LAYOUT PRIMITIVES
   ============================================================= */

/* Editorial 12-column grid. */
.aios-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-lg); }

/* Sticky aside + main body — the editorial reading split. */
.aios-col--aside { grid-column: 1 / 5; align-self: start; position: sticky; top: 96px; }
.aios-col--main  { grid-column: 6 / 13; }

@media (max-width: 1024px) {
	.aios-grid-12 { grid-template-columns: repeat(6, 1fr); }
	.aios-col--aside { grid-column: 1 / -1; position: static; }
	.aios-col--main  { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .aios-grid-12 { grid-template-columns: 1fr; } }

/* Panel — a section card that groups content on the cream canvas. */
.aios-panel {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-xxl);
}
.aios-panel--flush { padding: 0; overflow: hidden; }
@media (max-width: 640px) { .aios-panel { padding: var(--s-lg); } }

/* Stat strip — hairline-separated figures inside a panel. */
.aios-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.aios-stat-strip > div {
	padding: var(--s-lg) var(--s-xl);
	border-left: 1px solid var(--c-hairline);
}
.aios-stat-strip > div:first-child { border-left: 0; }
.aios-stat-strip b {
	display: block;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.72px;
	color: var(--c-ink);
}
.aios-stat-strip small {
	font-size: 11px; font-weight: 600; letter-spacing: 0.88px;
	text-transform: uppercase; color: var(--c-muted);
}
@media (max-width: 640px) {
	.aios-stat-strip { grid-template-columns: repeat(2, 1fr); }
	.aios-stat-strip > div:nth-child(odd) { border-left: 0; }
	.aios-stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--c-hairline); }
}

/* Bento — a lead cell twice the width of its siblings. */
.aios-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-lg); }
.aios-bento > * { grid-column: span 2; }
.aios-bento > .aios-bento__wide { grid-column: span 4; }
@media (max-width: 1024px) {
	.aios-bento { grid-template-columns: repeat(4, 1fr); }
	.aios-bento > *, .aios-bento > .aios-bento__wide { grid-column: span 2; }
}
@media (max-width: 640px) {
	.aios-bento { grid-template-columns: 1fr; }
	.aios-bento > *, .aios-bento > .aios-bento__wide { grid-column: 1 / -1; }
}

/* Numbered process rows — hairline-divided, editorial. */
.aios-steps-list { display: grid; }
.aios-steps-list__row {
	display: grid;
	grid-template-columns: 72px 1fr 1.5fr;
	gap: var(--s-lg);
	padding: var(--s-lg) 0;
	border-top: 1px solid var(--c-hairline);
	align-items: baseline;
}
.aios-steps-list__row:first-child { border-top: 0; padding-top: 0; }
.aios-steps-list__row:last-child { padding-bottom: 0; }
.aios-steps-list__num {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.325px;
	color: var(--c-muted-soft);
}
.aios-steps-list__row h3 { margin-bottom: 0; }
.aios-steps-list__row p { margin: 0; color: var(--c-body); }
@media (max-width: 640px) {
	.aios-steps-list__row { grid-template-columns: 48px 1fr; gap: var(--s-sm); }
	.aios-steps-list__row p { grid-column: 2; }
}

/* Alternating feature rows — text beside a supporting code pane. */
.aios-feature-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-xxl);
	align-items: center;
	padding: var(--s-xxl) 0;
	border-top: 1px solid var(--c-hairline);
}
.aios-feature-row:first-child { border-top: 0; padding-top: 0; }
.aios-feature-row:last-child { padding-bottom: 0; }
.aios-feature-row--flip .aios-feature-row__media { order: -1; }
.aios-feature-row__body h3 { font-size: 22px; font-family: var(--f-display); font-weight: 400; letter-spacing: -0.11px; }
.aios-feature-row__media {
	background: var(--c-canvas-soft);
	border: 1px solid var(--c-hairline-soft);
	border-radius: var(--r-md);
	padding: var(--s-base);
	font-family: var(--f-code);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-body);
	display: grid;
	gap: var(--s-xs);
	overflow-x: auto;
}
.aios-feature-row__media .aios-tl-row { gap: var(--s-xs); }
@media (max-width: 1024px) {
	.aios-feature-row { grid-template-columns: 1fr; gap: var(--s-lg); }
	.aios-feature-row--flip .aios-feature-row__media { order: 0; }
}

/* Featured blog post — full-width split card. */
.aios-post-featured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	padding: 0;
	overflow: hidden;
	margin-bottom: var(--s-lg);
}
.aios-post-featured .aios-card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.aios-post-featured .aios-card__body { padding: var(--s-xl); justify-content: center; }
.aios-post-featured .aios-card__title { font-size: 26px; font-family: var(--f-display); font-weight: 400; letter-spacing: -0.325px; line-height: 1.25; }
.aios-post-featured .aios-card__excerpt { font-size: 16px; }
@media (max-width: 768px) {
	.aios-post-featured { grid-template-columns: 1fr; }
	.aios-post-featured .aios-card__media { min-height: 200px; }
}

.aios-grid { display: grid; gap: var(--s-lg); }
.aios-grid--2 { grid-template-columns: repeat(2, 1fr); }
.aios-grid--3 { grid-template-columns: repeat(3, 1fr); }
.aios-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .aios-grid--3, .aios-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .aios-grid--2, .aios-grid--3, .aios-grid--4 { grid-template-columns: 1fr; } }

/* =============================================================
   CARDS — hairline-only depth. No shadows.
   ============================================================= */
.aios-card {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-lg);
	position: relative;
	transition: border-color 0.15s ease;
}
.aios-card:hover { border-color: var(--c-hairline-strong); }
.aios-card h3 {
	font-family: var(--f-body);
	font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
	color: var(--c-ink);
	margin-bottom: var(--s-xs);
}
.aios-card p { color: var(--c-body); font-size: 16px; line-height: 1.5; margin: 0 0 var(--s-sm); }

/* Tilt glare stays subtle on a light surface. */
.aios-tilt-glare {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), var(--c-glare), transparent 55%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	border-radius: inherit;
}
[data-tilt]:hover .aios-tilt-glare { opacity: 1; }

.aios-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: var(--r-sm);
	background: var(--c-surface-strong);
	font-size: 16px;
	margin-bottom: var(--s-base);
}
.aios-step__num {
	display: block;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.325px;
	color: var(--c-muted-soft);
	margin-bottom: var(--s-xs);
}
.aios-benefit { display: flex; gap: var(--s-base); align-items: flex-start; }
.aios-benefit__check {
	flex: none;
	width: 24px; height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	background: var(--c-surface-strong);
	color: var(--c-ink);
	font-size: 12px;
	font-weight: 600;
}

/* Testimonial */
.aios-quote {
	max-width: 760px;
	margin-inline: auto;
	padding: var(--s-lg);
}
.aios-quote p {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.11px;
	color: var(--c-ink);
	margin-bottom: var(--s-base);
}
.aios-quote footer { color: var(--c-muted); font-size: 14px; }
.aios-quote strong { color: var(--c-ink); font-weight: 600; }

/* CTA band — 96px vertical padding, single orange CTA. */
.aios-cta-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-xl);
	flex-wrap: wrap;
	padding: 96px var(--s-xxl);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-hairline);
	background: var(--c-surface-card);
	text-align: left;
}
.aios-cta-band h2 { font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; margin-bottom: var(--s-xs); }
.aios-cta-band p { color: var(--c-body); margin: 0; }
.aios-cta-band--stack { flex-direction: column; text-align: center; }
.aios-cta-band small { color: var(--c-muted); font-size: 13px; }
@media (max-width: 640px) { .aios-cta-band { padding: var(--s-xxl) var(--s-lg); } }

/* =============================================================
   PRICING
   ============================================================= */
.aios-price-card { display: flex; flex-direction: column; padding: var(--s-xl); }
.aios-price-card ul {
	list-style: none; padding: 0; margin: 0 0 var(--s-lg);
	color: var(--c-body); display: grid; gap: var(--s-xs); flex: 1;
	font-size: 14px;
}
.aios-price-card ul li::before { content: "→ "; color: var(--c-muted-soft); }
.aios-price {
	font-family: var(--f-display);
	font-weight: 400;
	margin: var(--s-xxs) 0 var(--s-md);
	color: var(--c-ink);
}
.aios-price b { font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; font-weight: 400; }
.aios-price span { color: var(--c-muted); font-size: 14px; font-family: var(--f-body); }
.aios-price-card .aios-chip { align-self: flex-start; margin-bottom: var(--s-sm); }

/* Featured tier inverts to ink — no colored ribbon. */
.aios-price-card--featured {
	background: var(--c-ink);
	border-color: var(--c-ink);
}
.aios-price-card--featured h3,
.aios-price-card--featured .aios-price { color: var(--c-canvas); }
.aios-price-card--featured ul { color: var(--c-muted-soft); }
.aios-price-card--featured ul li::before { color: var(--c-muted); }
.aios-price-card--featured .aios-price span { color: var(--c-muted-soft); }
.aios-price-card--featured .aios-chip { background: var(--c-on-ink-veil); color: var(--c-canvas); }

/* FAQ */
.aios-faq { max-width: 760px; display: grid; gap: var(--s-sm); }
.aios-faq__item {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-md) var(--s-lg);
}
.aios-faq__item summary {
	cursor: pointer;
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--c-ink);
	list-style: none;
}
.aios-faq__item summary::-webkit-details-marker { display: none; }
.aios-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.aios-faq__item[open] summary::after { content: "–"; }
.aios-faq__item p { color: var(--c-body); margin: var(--s-sm) 0 0; }

/* =============================================================
   BLOG
   ============================================================= */
.aios-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
@media (max-width: 1024px) { .aios-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .aios-post-grid { grid-template-columns: 1fr; } }

.aios-card--post { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.aios-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-canvas-soft); }
.aios-card__media img { width: 100%; height: 100%; object-fit: cover; }
.aios-card__media-fallback {
	display: block; width: 100%; height: 100%;
	background-color: var(--c-canvas-soft);
	background-image: radial-gradient(circle at 1px 1px, var(--c-dot-strong) 1px, transparent 0);
	background-size: 16px 16px;
}
.aios-card__body { padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-xs); flex: 1; }
.aios-card__meta {
	display: flex; align-items: center; gap: var(--s-xs);
	color: var(--c-muted); font-size: 13px; line-height: 1.4;
}
.aios-card__title {
	font-family: var(--f-body);
	font-size: 18px; font-weight: 600; line-height: 1.4;
	margin: 0;
}
.aios-card__title a { color: var(--c-ink); }
.aios-card__title a:hover { color: var(--c-primary); }
.aios-card__excerpt { margin: 0; flex: 1; font-size: 14px; }

.aios-pagination { margin-top: var(--s-xl); text-align: center; }
.aios-pagination .nav-links { display: inline-flex; gap: var(--s-xxs); }
.aios-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px; height: 40px;
	padding: 0 var(--s-sm);
	border-radius: var(--r-md);
	border: 1px solid var(--c-hairline);
	background: var(--c-surface-card);
	color: var(--c-body);
	font-size: 14px;
	font-weight: 500;
}
.aios-pagination .page-numbers.current { background: var(--c-ink); color: var(--c-canvas); border-color: var(--c-ink); }
.aios-pagination .page-numbers:hover { color: var(--c-ink); }
.aios-pagination .page-numbers.current:hover { color: var(--c-canvas); }

/* =============================================================
   LONG-FORM ARTICLE
   ============================================================= */
.aios-article { padding: var(--s-lg) 0 var(--s-section); }

/* Breadcrumb */
.aios-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--s-xs);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--s-xl);
}
.aios-breadcrumb a { color: var(--c-muted); }
.aios-breadcrumb a:hover { color: var(--c-primary); }

/* Centred byline */
.aios-article__head { text-align: center; margin-bottom: var(--s-xl); }
.aios-byline { display: grid; justify-items: center; gap: 2px; margin-bottom: var(--s-md); }
.aios-byline__avatar img {
	border-radius: var(--r-pill);
	border: 1px solid var(--c-hairline);
	display: block;
	width: 48px; height: 48px;
	margin-bottom: var(--s-xs);
}
.aios-byline__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-ink);
}
.aios-byline__social {
	display: inline-grid;
	place-items: center;
	width: 18px; height: 18px;
	border-radius: var(--r-xs);
	background: var(--c-surface-strong);
	color: var(--c-ink);
}
.aios-byline__social:hover { background: var(--c-primary); color: var(--c-on-primary); }
.aios-byline__role { margin: 0; font-size: 11px; letter-spacing: 0.4px; color: var(--c-muted); }

.aios-article__title {
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: -0.4px;
	max-width: 22ch;
	margin: 0 auto var(--s-md);
}
@media (max-width: 640px) { .aios-article__title { font-size: 24px; max-width: none; } }

/* Meta pills */
.aios-meta-pills {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--s-xs);
	flex-wrap: wrap;
}
.aios-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-pill);
	background: var(--c-surface-card);
	font-size: 11px;
	font-weight: 500;
	color: var(--c-body);
	white-space: nowrap;
}
.aios-meta-pill__icon {
	display: inline-grid;
	place-items: center;
	width: 22px; height: 22px;
	border-radius: var(--r-pill);
	background: var(--c-surface-strong);
	color: var(--c-ink);
	flex: none;
}
.aios-meta-pill--btn { padding: 4px; cursor: pointer; font: inherit; }
.aios-meta-pill--btn:hover { border-color: var(--c-hairline-strong); }
.aios-meta-pill--btn .aios-meta-pill__icon { background: var(--c-surface-strong); }
.aios-meta-pill--btn:hover .aios-meta-pill__icon { background: var(--c-primary); color: var(--c-on-primary); }
.aios-meta-pill--btn.is-copied { border-color: var(--c-success); color: var(--c-success); }
.aios-meta-pill--btn.is-copied .aios-meta-pill__icon { background: var(--c-success); color: var(--c-on-primary); }
.aios-meta-pill--btn.is-playing .aios-meta-pill__icon { background: var(--c-primary); color: var(--c-on-primary); }

/* Featured image + key takeaways */
.aios-article__lede {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: var(--s-lg);
	align-items: stretch;
	margin: var(--s-xl) 0;
}
.aios-article__lede--solo { grid-template-columns: 1fr; }
.aios-article__cover { margin: 0; }
.aios-article__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-lg);
	border: 1px solid var(--c-hairline);
	display: block;
}
.aios-takeaways { align-self: stretch; }
.aios-takeaways__title { font-size: 18px; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s-sm); }
.aios-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-sm); }
.aios-takeaways li {
	position: relative;
	padding-left: var(--s-base);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-body);
}
.aios-takeaways li::before {
	content: "";
	position: absolute;
	left: 0; top: 7px;
	width: 5px; height: 5px;
	border-radius: 1px;
	background: var(--c-primary);
}
@media (max-width: 900px) { .aios-article__lede { grid-template-columns: 1fr; } }

/* Three-column body */
.aios-article__layout {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 250px;
	gap: var(--s-xl);
	align-items: start;
}
@media (max-width: 1200px) {
	.aios-article__layout { grid-template-columns: 180px minmax(0, 1fr); }
	.aios-article__aside { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.aios-article__layout { grid-template-columns: 1fr; gap: var(--s-lg); }
}

/* Table of contents */
.aios-toc { position: sticky; top: 88px; }
.aios-toc__box {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-base);
}
.aios-toc__title {
	font-family: var(--f-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}
.aios-toc__title::-webkit-details-marker { display: none; }
.aios-toc__list {
	list-style: none;
	margin: var(--s-sm) 0 0;
	padding: 0;
	display: grid;
	gap: var(--s-sm);
	counter-reset: none;
}
.aios-toc__list a {
	display: flex;
	gap: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--c-body);
}
.aios-toc__list a:hover { color: var(--c-primary); }
.aios-toc__num { color: var(--c-muted-soft); flex: none; }
.aios-toc__list .is-active a { color: var(--c-ink); font-weight: 600; }
.aios-toc__list .is-active .aios-toc__num { color: var(--c-primary); }

@media (max-width: 900px) {
	.aios-toc { position: static; }
	/* Collapsed by default on mobile so it doesn't push the article down. */
	.aios-toc__box[open] .aios-toc__list { display: grid; }
	.aios-toc__title::after { content: " ▾"; color: var(--c-muted); }
}

/* Lead form. The un-sticking must live after this base rule — an override
   earlier in the file loses on source order at equal specificity. */
.aios-lead-form { position: sticky; top: 88px; }
@media (max-width: 1200px) {
	.aios-lead-form { position: static; max-width: 520px; }
}
.aios-lead-form__title { font-size: 16px; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.aios-lead-form__note { font-size: 12px; color: var(--c-muted); margin-bottom: var(--s-base); }
.aios-form--compact { gap: var(--s-sm); }
.aios-form--compact label span { font-size: 10px; letter-spacing: 0.6px; }
.aios-form--compact input[type="text"],
.aios-form--compact input[type="email"] { height: 38px; padding: 8px 12px; font-size: 14px; }
.aios-form--compact textarea { padding: 8px 12px; font-size: 14px; }
.aios-form--compact .aios-btn { width: 100%; }

/* Inline CTA banner */
.aios-inline-cta {
	display: grid;
	justify-items: center;
	gap: var(--s-base);
	text-align: center;
	background: var(--c-ink);
	border-radius: var(--r-lg);
	padding: var(--s-xl);
	margin: var(--s-xl) 0;
}
/* Prose-scoped: `.aios-prose p` and `.aios-prose a` are (0,1,1) and would
   otherwise beat these (0,1,0) rules, painting the copy body-dark on the ink
   panel and the button label orange-on-orange. */
.aios-inline-cta__text,
.aios-prose .aios-inline-cta__text {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.11px;
	color: var(--c-canvas);
	margin: 0;
	max-width: 34ch;
}
.aios-prose .aios-inline-cta .aios-btn--primary {
	color: var(--c-on-primary);
	text-decoration: none;
}
@media (max-width: 640px) { .aios-inline-cta { padding: var(--s-lg); } .aios-inline-cta__text { font-size: 18px; } }

/* Also read */
.aios-also-read {
	font-size: 14px;
	padding: var(--s-sm) 0;
	margin: var(--s-lg) 0;
	border-top: 1px solid var(--c-hairline);
	border-bottom: 1px solid var(--c-hairline);
}
.aios-also-read strong { color: var(--c-ink); }
.aios-also-read a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }

.aios-article__footer { margin-top: var(--s-xxl); }

/* Single post */
.aios-single__hero-media { margin-bottom: var(--s-xl); }
.aios-single__hero-media img { border-radius: var(--r-lg); border: 1px solid var(--c-hairline); }
.aios-single__layout { padding: 0 0 var(--s-section); }
.aios-single__content { max-width: 760px; margin-inline: auto; }
.aios-single__tags { margin: var(--s-xl) 0 var(--s-lg); display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.aios-author-box { display: flex; gap: var(--s-base); align-items: center; }
.aios-author-box img { border-radius: var(--r-pill); flex: none; }
.aios-author-box h4 { font-family: var(--f-body); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.aios-author-box p { margin: 0; font-size: 14px; }

/* Prose */
.aios-prose { font-size: 16px; line-height: 1.5; letter-spacing: 0.08px; color: var(--c-body); }
.aios-prose h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.325px; margin-top: var(--s-xxl); }
.aios-prose h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.11px; margin-top: var(--s-xl); }
.aios-prose p, .aios-prose ul, .aios-prose ol { color: var(--c-body); }
.aios-prose blockquote {
	margin: var(--s-xl) 0;
	padding: var(--s-base) var(--s-lg);
	border-left: 1px solid var(--c-hairline-strong);
	color: var(--c-ink);
}
.aios-prose pre {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-md);
	overflow-x: auto;
	font-family: var(--f-code);
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-ink);
}
.aios-prose code {
	font-family: var(--f-code);
	font-size: 13px;
	color: var(--c-ink);
	background: var(--c-surface-strong);
	border-radius: var(--r-xs);
	padding: 1px 5px;
}
.aios-prose pre code { background: none; padding: 0; }
.aios-prose img { border-radius: var(--r-lg); }
.aios-prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.aios-prose a:hover { color: var(--c-primary-active); }

/* Figures — charts and diagrams with captions. */
.aios-prose figure { margin: var(--s-xl) 0; }
.aios-prose figure img {
	border: 1px solid var(--c-hairline);
	background: var(--c-surface-card);
	display: block;
	width: 100%;
}
.aios-prose figcaption {
	margin-top: var(--s-xs);
	font-size: 13px;
	line-height: 1.4;
	color: var(--c-muted);
	text-align: center;
}

/* Tables — hairline grid, uppercase header. Scrolls inside itself on
   narrow screens so the page body never scrolls sideways. */
.aios-prose .aios-table-scroll,
.aios-prose figure.wp-block-table { overflow-x: auto; }
.aios-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s-xl) 0;
	font-size: 14px;
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-md);
}
.aios-prose thead th {
	background: var(--c-canvas-soft);
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--c-ink);
	text-align: left;
}
.aios-prose th,
.aios-prose td {
	border: 1px solid var(--c-hairline);
	padding: var(--s-sm) var(--s-base);
	vertical-align: top;
	line-height: 1.5;
}
.aios-prose td { color: var(--c-body); }
.aios-prose tbody th { color: var(--c-ink); font-weight: 600; white-space: nowrap; }

/* Comments */
.aios-comments { max-width: 760px; }
.aios-comments .comment-list { list-style: none; padding: 0; display: grid; gap: var(--s-sm); }
.aios-comments .comment-body {
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-lg);
	padding: var(--s-lg);
}
.aios-comments .comment-body p { color: var(--c-body); }

/* =============================================================
   FORMS
   ============================================================= */
.aios-form { display: grid; gap: var(--s-base); }
.aios-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-base); }
@media (max-width: 640px) { .aios-form__row { grid-template-columns: 1fr; } }
.aios-form label { display: grid; gap: var(--s-xs); }
.aios-form label span {
	font-size: 11px; font-weight: 600; letter-spacing: 0.88px;
	text-transform: uppercase; color: var(--c-muted);
}

.aios-form input[type="text"],
.aios-form input[type="email"],
.aios-form textarea,
.aios-optin-form input[type="email"],
.aios-comments input, .aios-comments textarea {
	width: 100%;
	height: 44px;
	background: var(--c-surface-card);
	border: 1px solid var(--c-hairline-strong);
	border-radius: var(--r-md);
	color: var(--c-ink);
	padding: 12px 16px;
	font-family: var(--f-body);
	font-size: 16px;
	transition: border-color 0.15s ease;
}
.aios-form textarea, .aios-comments textarea { height: auto; }
.aios-form input:focus, .aios-form textarea:focus,
.aios-optin-form input:focus {
	outline: none;
	border-color: var(--c-ink);
}

.aios-optin-form { display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.aios-optin-form input[type="email"] { flex: 1 1 220px; }
.aios-optin-form .aios-btn { height: 44px; }
.aios-hp { position: absolute !important; left: -9999px !important; }

.aios-form-notice {
	padding: var(--s-sm) var(--s-base);
	border-radius: var(--r-md);
	font-size: 14px;
	border: 1px solid;
}
.aios-form-notice--success { background: var(--c-surface-card); border-color: var(--c-success); color: var(--c-success); }
.aios-form-notice--error { background: var(--c-surface-card); border-color: var(--c-error); color: var(--c-error); }

/* Contact layout */
.aios-contact-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-lg); align-items: start; }
@media (max-width: 1024px) { .aios-contact-layout { grid-template-columns: 1fr; } }
.aios-contact-card h2 { margin-bottom: var(--s-md); }
.aios-contact-aside { display: grid; gap: var(--s-lg); }
.aios-contact-aside h3 { margin-bottom: 2px; }
.aios-contact-aside p { margin: 0; }

/* Hairline-divided contact routes. */
.aios-contact-list { display: grid; }
.aios-contact-list__row {
	padding: var(--s-md) var(--s-lg);
	border-top: 1px solid var(--c-hairline);
}
.aios-contact-list__row:first-child { border-top: 0; }
.aios-contact-list__row p { color: var(--c-body); }

/* Compact steps for narrow asides. */
.aios-steps-list--compact { margin-top: var(--s-sm); }
.aios-steps-list--compact .aios-steps-list__row {
	grid-template-columns: 40px 1fr;
	gap: var(--s-sm);
	padding: var(--s-sm) 0;
	align-items: start;
}
.aios-steps-list--compact .aios-steps-list__num { font-size: 16px; }
.aios-steps-list--compact p { font-size: 14px; }

/* Opt-in page */
.aios-hero--optin { min-height: 88vh; display: flex; align-items: center; }
.aios-optin-layout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--s-xxl);
	align-items: center;
}
@media (max-width: 1024px) { .aios-optin-layout { grid-template-columns: 1fr; } }
.aios-optin-card { padding: var(--s-xl); }
.aios-optin-card h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.325px; }
.aios-optin-card .aios-optin-form { margin: var(--s-base) 0 var(--s-sm); }
.aios-optin-card small { color: var(--c-muted); font-size: 13px; }
.aios-checklist { list-style: none; padding: 0; display: grid; gap: var(--s-sm); color: var(--c-body); font-size: 14px; }
.aios-checklist li { display: flex; gap: var(--s-xs); }
.aios-checklist li::before { content: "→"; color: var(--c-muted-soft); flex: none; }

/* =============================================================
   FOOTER — 5-column, 64×48px padding
   ============================================================= */
.aios-footer {
	border-top: 1px solid var(--c-hairline);
	background: var(--c-canvas);
	padding: 64px 0 48px;
}
.aios-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
	gap: var(--s-xl);
	margin-bottom: var(--s-xxl);
}
@media (max-width: 1024px) { .aios-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px)  { .aios-footer__grid { grid-template-columns: 1fr 1fr; } }
.aios-footer h4 {
	font-family: var(--f-body);
	font-size: 11px; font-weight: 600; letter-spacing: 0.88px;
	text-transform: uppercase; color: var(--c-muted);
	margin-bottom: var(--s-sm);
}
.aios-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-xs); }
.aios-footer ul a { color: var(--c-body); font-size: 14px; }
.aios-footer ul a:hover { color: var(--c-ink); }
.aios-footer__tagline { color: var(--c-body); font-size: 14px; max-width: 32ch; }
.aios-footer__bottom {
	border-top: 1px solid var(--c-hairline);
	padding-top: var(--s-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-base);
	flex-wrap: wrap;
	color: var(--c-muted);
	font-size: 14px;
}
.aios-footer__menu { display: flex; gap: var(--s-md); list-style: none; margin: 0; padding: 0; }
.aios-footer__menu a { color: var(--c-body); font-size: 14px; }

/* The footer column is too narrow to sit the field and button side by side. */
.aios-footer .aios-optin-form input[type="email"] { flex: 1 1 100%; }

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
.aios-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.aios-reveal.is-visible { opacity: 1; transform: none; }

.aios-grid .aios-reveal:nth-child(2), .aios-post-grid .aios-reveal:nth-child(2) { transition-delay: 0.06s; }
.aios-grid .aios-reveal:nth-child(3), .aios-post-grid .aios-reveal:nth-child(3) { transition-delay: 0.12s; }
.aios-grid .aios-reveal:nth-child(4) { transition-delay: 0.18s; }
.aios-grid .aios-reveal:nth-child(5) { transition-delay: 0.24s; }
.aios-grid .aios-reveal:nth-child(6) { transition-delay: 0.3s; }

/* =============================================================
   ELEMENTOR COMPAT
   ============================================================= */
body.elementor-page .aios-main { padding: 0; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--f-display); font-weight: 400; }

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.aios-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}