/* Generated by ops/build/port_css.py from the Astro sources. Do not edit: change the Astro CSS, then re-run. */

/* ---- src/styles/global.css */
:root {
	
	--ink: #262624;       
	--ink-2: #56554f;
	--ink-3: #76756e;     
	--paper: #ffffff;
	--panel: #f5f5ef;     
	--panel-2: #fafaf7;
	--rail: #e5e5dc;      
	--rail-2: #d3d3c8;

	
	--accent: #4d6410;
	--accent-hover: #3d500c;
	--accent-soft: #dbe77a;
	--accent-tint: #f1f5d8;

	
	--px-sky: #d6e0ea;
	--px-lime: #dbe77a;
	--px-sage: #a9b95a;

	--ok: #2f7d3b;
	--no: #c2410c;

	--sans: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--frame: 1200px;
	--prose: 680px;
	--radius: 10px;

	
	--line: var(--rail);
	--line-2: var(--rail-2);
	--paper-2: var(--panel-2);
	--radius-sm: 8px;
	--code-bg: #1d1d1b;
	--code-ink: #f1edf4;
	--wrap: var(--frame);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
a, button, summary, [role='tab'] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 550; line-height: 1.08; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0 0 1em; }

code, pre, kbd { font-family: var(--mono); font-size: 0.88em; }
:not(pre) > code {
	background: var(--panel-2); border: 1px solid var(--rail); border-radius: 5px;
	padding: 0.06em 0.35em; overflow-wrap: anywhere;
}
pre {
	background: var(--code-bg) !important; color: var(--code-ink);
	padding: 16px 18px; border-radius: 8px; overflow-x: auto; line-height: 1.55; font-size: 0.85rem;
}
pre code { color: inherit; }




.frame {
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	border-left: 1px solid var(--rail);
	border-right: 1px solid var(--rail);
}

.rule { border-top: 1px solid var(--rail); }
.pad { padding-left: 48px; padding-right: 48px; }
@media (max-width: 720px) {
	.frame { border-left: 0; border-right: 0; }
	.pad { padding-left: 16px; padding-right: 16px; }
}


.cells { display: grid; gap: 1px; background: var(--rail); border-top: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.cells > * { background: var(--paper); }



.mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.label {
	font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
}
.label-accent { color: var(--accent); }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.muted { color: var(--ink-3); }


.hl {
	background: var(--accent);
	color: #fff;
	padding: 0.02em 0.18em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 1.28;
}

.hl-soft { background: var(--panel); padding: 0.05em 0.3em; border-radius: 3px; font-family: var(--mono); font-size: 0.92em; }



.pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 11px 20px; border-radius: 999px;
	font: 500 0.97rem/1 var(--sans); text-decoration: none; white-space: nowrap;
	background: var(--accent); color: #fff; border: 1px solid var(--accent);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.pill-soft { background: var(--panel); color: var(--ink); border-color: var(--panel); }
.pill-soft:hover { background: #ebebe2; color: var(--ink); }
.pill-sm { padding: 8px 15px; font-size: 0.9rem; }
.pill .chev { font-size: 1.1em; line-height: 0; transform: translateY(-1px); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }


.mono-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--ink); text-decoration: none;
}
.mono-cta::after { content: '▶'; font-size: 0.7em; }
.mono-cta:hover { color: var(--accent); }

.chip {
	display: inline-flex; align-items: center; gap: 6px;
	font: 500 0.78rem/1 var(--mono); letter-spacing: 0.02em;
	padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rail-2);
	background: var(--paper); color: var(--ink-2); white-space: nowrap;
}
.chip-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-accent { background: var(--accent-tint); border-color: #e3eba8; color: var(--accent-hover); }


.schematic { background: var(--panel); border-radius: 4px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}



.wrap { width: 100%; max-width: var(--frame); margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }
.eyebrow { display: inline-block; font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 14px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 500; font-size: 0.97rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn-primary, .btn-accent { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-accent:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { background: var(--panel); color: var(--ink); }
.btn-ghost:hover { background: #ebebe2; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.card { background: var(--paper); border: 1px solid var(--rail); border-radius: var(--radius); padding: 24px; }
.tag { display: inline-block; font: 500 0.74rem/1.5 var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rail-2); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.tag-read { border-color: #cfe3d3; background: #f3faf4; color: #2f6b3b; }
.tag-write { border-color: #e3eba8; background: var(--accent-tint); color: var(--accent-hover); }
.tag-admin { border-color: #f3d9c9; background: #fdf6f1; color: #8a4a1f; }
.tag-pro { border-color: var(--ink); background: var(--ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- src/layouts/Base.astro */
.skip {
		position: absolute; left: 12px; top: -48px; z-index: 20;
		background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px;
	}
	.skip:focus { top: 12px; }

	.site-header {
		position: sticky; top: 0; z-index: 10;
		background: rgb(255 255 255 / 0.9);
		backdrop-filter: saturate(180%) blur(10px);
		border-bottom: 1px solid var(--rail);
	}
	.bar { display: flex; align-items: center; gap: 24px; height: 64px; }
	.brand {
		display: inline-flex; align-items: center; gap: 10px;
		color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.03em;
	}
	
	.brand-mark { display: inline-flex; color: var(--accent); }
	.brand-mark svg { width: 30px; height: 30px; }
	.bar nav { margin: 0 auto; }
	.bar nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
	.bar nav a {
		display: block; padding: 6px 12px; border-radius: 999px;
		color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 450;
	}
	.bar nav a:hover, .bar nav a[aria-current='page'] { background: var(--panel); color: var(--ink); }

	@media (max-width: 760px) {
		.bar { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 8px 12px; }
		.bar > .pill { margin-left: auto; }
		.bar nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
		.bar nav a { padding: 6px 8px; font-size: 0.9rem; }
	}

	.site-footer { background: var(--paper); }
	.foot {
		display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
		gap: 32px 40px; padding-top: 48px; padding-bottom: 24px;
	}
	.foot-brand { display: grid; gap: 12px; align-content: start; }
	.foot-brand p { margin: 0; max-width: 30ch; color: var(--ink-3); font-size: 0.93rem; }
	.foot-col { display: grid; gap: 8px; align-content: start; }
	.foot-col .label { margin: 0 0 4px; }
	.foot-col a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; width: fit-content; }
	.foot-col a:hover { color: var(--accent); }
	.foot-base {
		grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
		padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--rail);
		font-size: 0.76rem; color: var(--ink-3);
	}
	@media (max-width: 760px) {
		.foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
		.foot-brand { grid-column: 1 / -1; }
	}

/* ---- src/components/Prompt.astro */
.prompt {
		position: relative;
		background: var(--paper-2);
		border: 1px solid var(--line);
		border-left: 3px solid var(--accent-soft);
		border-radius: var(--radius-sm);
		padding: 16px 18px 14px;
	}
	.prompt p { margin: 0 0 12px; font-size: 1.02rem; color: var(--ink); }
	.copy {
		font: 600 0.85rem/1 var(--sans);
		padding: 8px 12px;
		border-radius: 8px;
		border: 1px solid var(--line-2);
		background: var(--paper);
		color: var(--ink);
		cursor: pointer;
	}
	.copy:hover { border-color: var(--ink-3); }

/* ---- src/components/TierTag.astro */
.tier-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---- src/components/AppIcon.astro */
.app-icon {
		display: inline-grid; place-items: center;
		width: calc(var(--s) + 12px); height: calc(var(--s) + 12px);
		border: 1px solid var(--rail); border-radius: 7px; background: var(--paper);
		color: var(--ink); flex: none;
	}
	.app-icon svg { width: var(--s); height: var(--s); }
	.mono-letter { font: 600 calc(var(--s) * 0.78)/1 var(--mono); }

/* ---- src/components/PixelScene.astro */
.pixel-scene {
		display: block;
		width: 100%;
		height: auto;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}

/* ---- src/pages/index.astro (scoped .p-home) */
.p-home .hero-copy, .p-home.hero-copy { padding-top: 88px; padding-bottom: 48px; text-align: center; display: grid; justify-items: center; }
.p-home .hero h1, .p-home.hero h1 { max-width: 13.2em; margin-top: 18px; margin-bottom: 24px; font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.05em; text-wrap: balance; }
.p-home .hero .lede, .p-home.hero .lede { margin: 0 auto 30px; }
.p-home .hero-pills, .p-home.hero-pills { justify-content: center; }
.p-home .trust, .p-home.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; padding: 0; margin: 26px 0 0; color: var(--ink-2); }
.p-home .trust li::before, .p-home.trust li::before { content: '■'; color: var(--accent); font-size: 0.6em; margin-right: 8px; vertical-align: 2px; }
.p-home .stage, .p-home.stage {
		position: relative;
		border-top: 1px solid var(--rail);
		background-color: var(--panel-2);
		background-image: radial-gradient(var(--rail-2) 1px, transparent 1.2px);
		background-size: 14px 14px;
	}
.p-home .stage-inner, .p-home.stage-inner { padding-top: 56px; padding-bottom: 8px; }
@media (max-width: 720px) {
.p-home .hero-copy, .p-home.hero-copy { padding-top: 48px; padding-bottom: 36px; }
.p-home .stage-inner, .p-home.stage-inner { padding-top: 36px; padding-bottom: 28px; }

	
}
.p-home .section-head, .p-home.section-head { padding-top: 88px; padding-bottom: 36px; max-width: 900px; }
.p-home .section-head .label, .p-home.section-head .label { margin-bottom: 14px; }
.p-home .section-lede, .p-home.section-lede { margin: 18px 0 0; color: var(--ink-2); max-width: 40rem; }
.p-home .section-head h2, .p-home.section-head h2 { max-width: 24ch; margin: 0; }
@media (max-width: 720px) {
.p-home .section-head, .p-home.section-head { padding-top: 64px; padding-bottom: 28px; }
 
}
.p-home .cols-2, .p-home.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-home .cols-3, .p-home.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-home .cols-4, .p-home.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-home .pad-cell, .p-home.pad-cell { padding: 36px 48px 38px; }
.p-home .cell h3, .p-home.cell h3 { margin-bottom: 8px; }
.p-home .cell p, .p-home.cell p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) {
.p-home .cols-3, .p-home.cols-3, .p-home .cols-2, .p-home.cols-2 { grid-template-columns: 1fr; }
.p-home .cols-4, .p-home.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-home .pad-cell, .p-home.pad-cell { padding: 24px 16px 26px; }

	
}
.p-home .glyph, .p-home.glyph { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--panel); margin-bottom: 18px; }
.p-home .glyph svg, .p-home.glyph svg { width: 22px; height: 22px; }
.p-home .problem-close, .p-home.problem-close { padding-top: 40px; padding-bottom: 72px; display: grid; gap: 18px; max-width: 760px; }
.p-home .problem-body, .p-home.problem-body { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
.p-home .problem-line, .p-home.problem-line { font: 500 1.15rem/1.5 var(--mono); letter-spacing: -0.01em; margin: 0; padding-left: 16px; border-left: 3px solid var(--accent); }
.p-home .steps, .p-home.steps { list-style: none; margin: 0; padding: 0; }
.p-home .step-n, .p-home.step-n { display: block; color: var(--accent); margin-bottom: 18px; }
.p-home .how-notes, .p-home.how-notes { padding-top: 22px; padding-bottom: 36px; display: grid; gap: 4px; }
.p-home .how-notes p, .p-home.how-notes p { margin: 0; }
.p-home .tabs-wrap, .p-home.tabs-wrap { border-bottom: 0; }
.p-home .tabs, .p-home.tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); background: var(--paper); }
.p-home .tab-list, .p-home.tab-list { display: grid; align-content: start; padding: 28px 32px 32px 48px; }
.p-home .tab-list-label, .p-home.tab-list-label { margin-bottom: 8px; }
.p-home .tab, .p-home.tab {
		all: unset; box-sizing: border-box; cursor: pointer;
		display: grid; gap: 6px; padding: 16px 0 16px; border-top: 1px solid var(--rail);
	}
.p-home .tab:focus-visible, .p-home.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-home .tab-title, .p-home.tab-title { font-weight: 550; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.p-home .tab-body, .p-home.tab-body, .p-home .tab .mono-cta, .p-home.tab .mono-cta { display: none; }
.p-home .tab[aria-selected='true'] .tab-title, .p-home.tab[aria-selected='true'] .tab-title { color: var(--ink); }
.p-home .tab[aria-selected='true'], .p-home.tab[aria-selected='true'] { border-top: 2px solid var(--ink); padding-top: 15px; }
.p-home .tab[aria-selected='true'] .tab-body, .p-home.tab[aria-selected='true'] .tab-body { display: block; color: var(--ink-2); font-size: 0.97rem; }
.p-home .tab[aria-selected='true'] .mono-cta, .p-home.tab[aria-selected='true'] .mono-cta { display: inline-flex; margin-top: 8px; }
.p-home .tab-panels, .p-home.tab-panels { margin: 28px 32px 32px 0; display: grid; place-items: center; padding: 36px; min-height: 360px; }
.p-home .panel, .p-home.panel { width: 100%; max-width: 460px; }
@media (max-width: 900px) {
.p-home .tabs, .p-home.tabs { grid-template-columns: 1fr; }
.p-home .tab-list, .p-home.tab-list { padding: 20px 16px; }
.p-home .tab-panels, .p-home.tab-panels { margin: 0 16px 28px; padding: 20px 14px; min-height: 0; }

	
}
.p-home .win, .p-home.win { background: var(--paper); border-radius: 8px; border: 1px solid var(--rail); overflow: hidden; box-shadow: 0 16px 32px -24px rgb(20 30 60 / 0.4); }
.p-home .win-bar, .p-home.win-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--rail); background: var(--panel-2); }
.p-home .win-bar i, .p-home.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rail-2); }
.p-home .win-bar .mono, .p-home.win-bar .mono { margin-left: 8px; color: var(--ink-3); font-size: 0.75rem; }
.p-home .rows, .p-home.rows { display: grid; }
.p-home .row, .p-home.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--panel); font-size: 0.8rem; }
.p-home .row .mono, .p-home.row .mono { font-size: 0.75rem; }
.p-home .row > span:last-child:not([class*=bar]), .p-home.row > span:last-child:not([class*=bar]) { margin-left: auto; }
.p-home [class^='bar-'] { height: 8px; border-radius: 4px; background: var(--panel); flex: 1; max-width: 220px; }
.p-home .bar-l, .p-home.bar-l { max-width: 220px; }
.p-home .bar-m, .p-home.bar-m { max-width: 160px; }
.p-home .bar-s, .p-home.bar-s { max-width: 110px; }
.p-home .diff, .p-home.diff { background: linear-gradient(90deg, var(--accent-tint), #dbe77a); }
.p-home .win-note, .p-home.win-note { margin: 0; padding: 10px 14px; font-size: 0.75rem; color: var(--ok); background: var(--panel-2); }
.p-home .tree, .p-home.tree { padding: 12px 14px; font-size: 0.78rem; display: grid; gap: 7px; }
.p-home .tree .in, .p-home.tree .in { padding-left: 18px; border-left: 1px dashed var(--rail-2); margin-left: 5px; }
.p-home .note, .p-home.note { padding: 16px 18px; }
.p-home .note .mono, .p-home.note .mono { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 8px; }
.p-home .note ul, .p-home.note ul { margin: 0; padding-left: 18px; font-size: 0.92rem; }
.p-home .never, .p-home.never { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.p-home .never li, .p-home.never li { display: flex; gap: 12px; align-items: baseline; font-size: 1.02rem; }
.p-home .never li::before, .p-home.never li::before { content: '✕'; color: var(--no); font: 600 0.9rem/1 var(--mono); }
.p-home .proof-demo, .p-home.proof-demo { display: grid; gap: 16px; background: var(--panel-2) !important; }
.p-home .preview-card, .p-home.preview-card { background: var(--paper); border: 1px solid var(--rail); border-radius: 8px; padding: 16px 18px; }
.p-home .preview-card p, .p-home.preview-card p { margin: 0 0 6px; }
.p-home .pc-ask, .p-home.pc-ask { color: var(--ink) !important; }
.p-home .pc-tool, .p-home.pc-tool { color: var(--ink-3) !important; margin-top: 10px !important; }
.p-home .pc-tag, .p-home.pc-tag { color: var(--accent); font-weight: 600; }
.p-home .pc-msg, .p-home.pc-msg { color: var(--ink) !important; font-weight: 500; }
.p-home .pc-actions, .p-home.pc-actions { display: flex; gap: 8px; margin: 12px 0 10px; }
.p-home .pc-actions .pill, .p-home.pc-actions .pill { pointer-events: none; }
.p-home .pc-exp, .p-home.pc-exp { font-size: 0.75rem !important; }
.p-home .log, .p-home.log { background: var(--paper); border: 1px solid var(--rail); border-radius: 8px; padding: 14px 16px; font-size: 0.78rem; }
.p-home .log .label, .p-home.log .label { margin: 0 0 8px; }
.p-home .log-row, .p-home.log-row { display: grid; grid-template-columns: 18px 100px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--panel); }
.p-home .log-row .ok, .p-home.log-row .ok { color: var(--ok); }
.p-home .log-row .no, .p-home.log-row .no { color: var(--no); }
@media (max-width: 560px) {
.p-home .log-row, .p-home.log-row { grid-template-columns: 18px 1fr; }
.p-home .log-row span:nth-child(n+3), .p-home.log-row span:nth-child(n+3) { grid-column: 2; }
 
}
.p-home .stats, .p-home.stats { border-top: 0; }
.p-home .stat, .p-home.stat { padding: 30px 48px; }
.p-home .stat-n, .p-home.stat-n { font-size: clamp(2rem, 4vw, 2.8rem) !important; font-weight: 550; letter-spacing: -0.04em; color: var(--ink) !important; line-height: 1; margin-bottom: 10px !important; }
@media (max-width: 900px) {
.p-home .stat, .p-home.stat { padding: 22px 16px; }
 
}
.p-home .checks, .p-home.checks { border-top: 0; }
.p-home .check, .p-home.check { text-decoration: none; color: inherit; display: grid; gap: 6px; align-content: start; transition: background-color 0.15s ease; }
.p-home .check:hover, .p-home.check:hover { background: var(--panel-2); color: inherit; }
.p-home .check .mono-cta, .p-home.check .mono-cta { margin-top: 10px; }
.p-home .check .text-cta::after, .p-home.check .text-cta::after { content: none; }
.p-home .plan, .p-home.plan { display: flex; flex-direction: column; }
.p-home .plan h3, .p-home.plan h3 { font-size: 1.4rem; margin: 0; }
.p-home .plan-price, .p-home.plan-price { font: 500 0.85rem/1 var(--mono) !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent) !important; margin: 10px 0 16px !important; }
.p-home .plan-lede, .p-home.plan-lede { color: var(--ink) !important; margin-bottom: 18px !important; }
.p-home .plan ul, .p-home.plan ul { margin: 0 0 28px; padding-left: 18px; color: var(--ink-2); flex: 1; display: grid; gap: 6px; }
.p-home .plan li::marker, .p-home.plan li::marker { content: '■  '; color: var(--accent-soft); font-size: 0.7em; }
.p-home .plan .pill, .p-home.plan .pill { align-self: flex-start; }
.p-home .plan-pro, .p-home.plan-pro { background: var(--panel-2) !important; }
.p-home .plans-note, .p-home.plans-note { padding-top: 16px; padding-bottom: 64px; margin: 0; }
.p-home .final-inner, .p-home.final-inner { text-align: center; display: grid; justify-items: center; padding-top: 96px; padding-bottom: 72px; }
.p-home .final h2, .p-home.final h2 { max-width: 18ch; }
.p-home .final .lede, .p-home.final .lede { margin: 6px auto 30px; }
.p-home .final .pills, .p-home.final .pills { justify-content: center; }

/* ---- src/layouts/Doc.astro (scoped .p-docs) */
.p-docs .doc-grid, .p-docs.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-top: 56px; padding-bottom: 96px; }
.p-docs .doc-nav, .p-docs.doc-nav { position: sticky; top: 88px; align-self: start; }
.p-docs .doc-nav-title, .p-docs.doc-nav-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.p-docs .doc-nav ul, .p-docs.doc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.p-docs .doc-nav a, .p-docs.doc-nav a {
		display: block; padding: 7px 12px; border-radius: 8px;
		color: var(--ink-2); text-decoration: none; font-size: 0.95rem;
	}
.p-docs .doc-nav a:hover, .p-docs.doc-nav a:hover { background: var(--paper-2); color: var(--ink); }
.p-docs .doc-nav a[aria-current='page'], .p-docs.doc-nav a[aria-current='page'] { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }
.p-docs .prose, .p-docs.prose { max-width: var(--prose); min-width: 0; }
.p-docs .prose h1, .p-docs.prose h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.p-docs .prose .lede, .p-docs.prose .lede { margin-bottom: 32px; }
.p-docs .prose h2, .p-docs.prose h2 { font-size: 1.45rem; margin-top: 48px; padding-top: 8px; }
.p-docs .prose h3, .p-docs.prose h3 { font-size: 1.1rem; margin-top: 32px; }
.p-docs .prose ul, .p-docs.prose ul, .p-docs .prose ol, .p-docs.prose ol { padding-left: 22px; }
.p-docs .prose li, .p-docs.prose li { margin: 6px 0; }
.p-docs .prose table, .p-docs.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.95rem; display: block; overflow-x: auto; }
.p-docs .prose th, .p-docs.prose th, .p-docs .prose td, .p-docs.prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-docs .prose th, .p-docs.prose th { font-weight: 600; color: var(--ink-3); font-size: 0.85rem; }
.p-docs .prose blockquote, .p-docs.prose blockquote {
		margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--accent-soft);
		background: var(--paper-2); border-radius: 0 8px 8px 0; color: var(--ink-2);
	}
.p-docs .prose blockquote p:last-child, .p-docs.prose blockquote p:last-child { margin: 0; }
.p-docs .prose hr, .p-docs.prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
@media (max-width: 860px) {
.p-docs .doc-grid, .p-docs.doc-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
.p-docs .doc-nav, .p-docs.doc-nav { position: static; }
.p-docs .doc-nav ul, .p-docs.doc-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
.p-docs .doc-nav a, .p-docs.doc-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 0.9rem; }
.p-docs .doc-nav-title, .p-docs.doc-nav-title { display: none; }

	
}

/* ---- src/pages/recipes/index.astro (scoped .p-recipes) */
.p-recipes .page-head, .p-recipes.page-head { padding: 64px 0 24px; }
.p-recipes .jump, .p-recipes.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.p-recipes .jump a, .p-recipes.jump a {
		text-decoration: none; color: var(--ink-2); font-size: 0.92rem; font-weight: 500;
		border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
	}
.p-recipes .jump a:hover, .p-recipes.jump a:hover { border-color: var(--ink-3); color: var(--ink); }
.p-recipes .group, .p-recipes.group { padding: 32px 0; scroll-margin-top: 80px; }
.p-recipes .group:last-of-type, .p-recipes.group:last-of-type { padding-bottom: 88px; }
.p-recipes .group h2, .p-recipes.group h2 { font-size: 1.35rem; margin-bottom: 16px; }
.p-recipes .list, .p-recipes.list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.p-recipes .item, .p-recipes.item { text-decoration: none; color: inherit; padding: 20px 22px; transition: border-color 0.15s ease; }
.p-recipes .item:hover, .p-recipes.item:hover { border-color: var(--accent-soft); color: inherit; }
.p-recipes .item-head, .p-recipes.item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.p-recipes .item h3, .p-recipes.item h3 { margin: 0; font-size: 1.05rem; }
.p-recipes .item p, .p-recipes.item p { margin: 8px 0 0; font-size: 0.95rem; }
@media (max-width: 760px) {
.p-recipes .list, .p-recipes.list { grid-template-columns: 1fr; }
.p-recipes .item-head, .p-recipes.item-head { flex-direction: column; gap: 8px; }

	
}

/* ---- src/pages/recipes/[slug].astro (scoped .p-recipe) */
.p-recipe .recipe, .p-recipe.recipe { max-width: calc(var(--prose) + 48px); padding-top: 56px; padding-bottom: 96px; }
.p-recipe .crumbs, .p-recipe.crumbs { font-size: 0.9rem; color: var(--ink-3); }
.p-recipe .crumbs a, .p-recipe.crumbs a { color: var(--ink-3); text-decoration: none; }
.p-recipe .crumbs a:hover, .p-recipe.crumbs a:hover { color: var(--ink); }
.p-recipe h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.p-recipe .meta, .p-recipe.meta { margin-bottom: 32px; }
.p-recipe h2 { font-size: 1.1rem; margin-top: 36px; }
.p-recipe ul { padding-left: 20px; color: var(--ink-2); }
.p-recipe li { margin: 6px 0; }
.p-recipe .more, .p-recipe.more { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---- src/pages/alternatives/index.astro (scoped .p-alts) */
.p-alts .head, .p-alts.head { padding-top: 72px; padding-bottom: 48px; max-width: 880px; }
.p-alts .head .label, .p-alts.head .label { margin-bottom: 14px; }
.p-alts .cols-3, .p-alts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-alts .pad-cell, .p-alts.pad-cell { padding: 30px 48px 32px; }
.p-alts .pad-cell .label, .p-alts.pad-cell .label { margin-bottom: 10px; }
.p-alts .pad-cell p:last-child, .p-alts.pad-cell p:last-child { margin: 0; color: var(--ink-2); }
.p-alts .section-head, .p-alts.section-head { padding-top: 64px; padding-bottom: 24px; }
.p-alts .section-head h2, .p-alts.section-head h2 { margin: 0; }
.p-alts .rows, .p-alts.rows { list-style: none; margin: 0; padding: 0 0 72px; }
.p-alts .row, .p-alts.row {
		display: grid; grid-template-columns: 180px 190px minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
		padding: 22px 48px; border-top: 1px solid var(--rail); text-decoration: none; color: inherit;
		transition: background-color 0.15s ease;
	}
.p-alts .rows li:last-child .row, .p-alts.rows li:last-child .row { border-bottom: 1px solid var(--rail); }
.p-alts .row:hover, .p-alts.row:hover { background: var(--panel-2); color: inherit; }
.p-alts .row-name, .p-alts.row-name { font-weight: 600; font-size: 1.1rem; }
.p-alts .row-type, .p-alts.row-type { color: var(--ink-3); }
.p-alts .row-line, .p-alts.row-line { color: var(--ink-2); }
@media (max-width: 900px) {
.p-alts .cols-3, .p-alts.cols-3 { grid-template-columns: 1fr; }
.p-alts .pad-cell, .p-alts.pad-cell { padding: 22px 16px; }
.p-alts .row, .p-alts.row { grid-template-columns: 1fr; gap: 6px; padding: 20px 16px; }

	
}

/* ---- src/pages/alternatives/[slug].astro (scoped .p-alt) */
.p-alt .head, .p-alt.head { padding-top: 72px; padding-bottom: 56px; max-width: 860px; }
.p-alt .crumbs, .p-alt.crumbs { color: var(--ink-3); margin-bottom: 18px; }
.p-alt .crumbs a, .p-alt.crumbs a { color: var(--ink-3); text-decoration: none; }
.p-alt .crumbs a:hover, .p-alt.crumbs a:hover { color: var(--ink); }
.p-alt .head h1, .p-alt.head h1 { margin-bottom: 20px; }
.p-alt .head .lede, .p-alt.head .lede { margin-bottom: 28px; }
.p-alt .section-head, .p-alt.section-head { padding-top: 72px; padding-bottom: 28px; }
.p-alt .section-head .label, .p-alt.section-head .label { margin-bottom: 12px; }
.p-alt .section-head h2, .p-alt.section-head h2 { margin: 0; max-width: 24ch; }
.p-alt .h-sm, .p-alt.h-sm { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 12px 0 18px; }
.p-alt .table-wrap, .p-alt.table-wrap { overflow-x: auto; border-top: 1px solid var(--rail); }
.p-alt .cmp, .p-alt.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.p-alt .cmp th, .p-alt.cmp th, .p-alt .cmp td, .p-alt.cmp td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--rail); font-size: 0.97rem; }
.p-alt .cmp thead th, .p-alt.cmp thead th { font-weight: 600; font-size: 1rem; padding-top: 20px; padding-bottom: 20px; }
.p-alt .cmp tbody th, .p-alt.cmp tbody th { width: 24%; font-size: 0.8rem; font-weight: 500; color: var(--ink-3); padding-left: 48px; }
.p-alt .cmp td, .p-alt.cmp td { width: 38%; color: var(--ink-2); }
.p-alt .cmp .us-col, .p-alt.cmp .us-col { background: var(--accent-tint); color: var(--ink); }
.p-alt .us-head, .p-alt.us-head { display: inline-flex; align-items: center; gap: 8px; }
.p-alt .us-mark, .p-alt.us-mark { display: inline-flex; color: var(--accent); }
.p-alt .us-mark svg, .p-alt.us-mark svg { width: 24px; height: 24px; }
.p-alt .cols-2, .p-alt.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-alt .pad-cell, .p-alt.pad-cell { padding: 40px 48px 44px; }
.p-alt .soft, .p-alt.soft { background: var(--panel-2) !important; }
.p-alt .list, .p-alt.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: var(--ink-2); }
.p-alt .list li, .p-alt.list li { padding-left: 22px; position: relative; }
.p-alt .list li::before, .p-alt.list li::before { content: '■'; position: absolute; left: 0; top: 0.05em; color: var(--ink-3); font-size: 0.65em; }
.p-alt .list-ok li::before, .p-alt.list-ok li::before { content: '✓'; color: var(--accent); font: 600 0.85rem/1.6 var(--mono); top: 0; }
@media (max-width: 900px) {
.p-alt .cols-2, .p-alt.cols-2 { grid-template-columns: 1fr; }
.p-alt .pad-cell, .p-alt.pad-cell { padding: 28px 16px 32px; }
.p-alt .cmp tbody th, .p-alt.cmp tbody th { padding-left: 16px; }

	
}
.p-alt .faq, .p-alt.faq { padding-bottom: 72px; max-width: 820px; display: grid; }
.p-alt details { border-top: 1px solid var(--rail); padding: 18px 0; }
.p-alt details:last-child { border-bottom: 1px solid var(--rail); }
.p-alt summary { cursor: pointer; font-weight: 550; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.p-alt summary::-webkit-details-marker { display: none; }
.p-alt summary::after { content: '+'; font-family: var(--mono); color: var(--ink-3); }
.p-alt details[open] summary::after { content: '−'; }
.p-alt details p { margin: 12px 0 0; color: var(--ink-2); max-width: 68ch; }
.p-alt .final, .p-alt.final { text-align: center; display: grid; justify-items: center; padding-top: 80px; padding-bottom: 56px; }
.p-alt .final h2, .p-alt.final h2 { max-width: 20ch; }
.p-alt .final .lede, .p-alt.final .lede { margin: 4px auto 26px; }
.p-alt .final .pills, .p-alt.final .pills { justify-content: center; }
.p-alt .basis, .p-alt.basis { margin: 0; padding-top: 14px; padding-bottom: 0; font-size: 0.78rem; }
.p-alt .all, .p-alt.all { margin-top: 26px; }

/* ---- src/pages/download.astro (scoped .p-download) */
.p-download .dl, .p-download.dl { padding-top: 64px; padding-bottom: 96px; }
.p-download .dl-grid, .p-download.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.p-download .dl-grid h2, .p-download.dl-grid h2 { font-size: 1.2rem; }
.p-download .dl-grid ol, .p-download.dl-grid ol { padding-left: 20px; color: var(--ink-2); }
.p-download .dl-grid li, .p-download.dl-grid li { margin: 6px 0; }
.p-download dl { margin: 24px 0 0; display: grid; gap: 8px; font-size: 0.93rem; }
.p-download dl div { display: flex; gap: 12px; }
.p-download dt { color: var(--ink-3); min-width: 76px; }
.p-download dd { margin: 0; }
.p-download .next, .p-download.next { margin-top: 40px; }
.p-download .next p, .p-download.next p { margin-bottom: 8px; }
@media (max-width: 760px) {
.p-download .dl-grid, .p-download.dl-grid { grid-template-columns: 1fr; }
 
}

/* ---- src/pages/404.astro (scoped .p-404) */
.p-404 .nf, .p-404.nf { padding-top: 96px; padding-bottom: 72px; display: grid; justify-items: center; text-align: center; }
.p-404 .nf .label, .p-404.nf .label { margin-bottom: 16px; }
.p-404 .nf h1, .p-404.nf h1 { margin-bottom: 18px; }
.p-404 .nf .lede, .p-404.nf .lede { margin: 0 auto 28px; }
.p-404 .nf .pills, .p-404.nf .pills { justify-content: center; }
.p-404 .nf-links, .p-404.nf-links { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }

/* ---- src/components/HeroDiagram.astro (scoped .stage-inner) */
.stage-inner .diagram, .stage-inner.diagram {
		margin: 0;
		display: grid;
		grid-template-columns: minmax(190px, 220px) minmax(60px, 1fr) minmax(0, 2.6fr);
		align-items: center;
		gap: 0;
	}
.stage-inner .node, .stage-inner.node {
		background: var(--paper);
		border: 1px solid var(--rail-2);
		border-radius: var(--radius);
		box-shadow: 0 1px 0 rgb(11 11 12 / 0.02), 0 14px 32px -22px rgb(20 30 60 / 0.35);
	}
.stage-inner .node p, .stage-inner.node p { margin: 0; }
.stage-inner .apps, .stage-inner.apps { padding: 14px 14px 10px; }
.stage-inner .apps .label, .stage-inner.apps .label { margin-bottom: 10px; }
.stage-inner .apps ul, .stage-inner.apps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-inner .apps li, .stage-inner.apps li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 500; }
.stage-inner .apps .any, .stage-inner.apps .any { color: var(--ink-3); font-weight: 400; }
.stage-inner .plus, .stage-inner.plus {
		display: inline-grid; place-items: center; width: 30px; height: 30px;
		border: 1px dashed var(--rail-2); border-radius: 7px; font-family: var(--mono);
	}
.stage-inner .wire, .stage-inner.wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.stage-inner .wire-in, .stage-inner.wire-in { margin: 0 -1px; }
.stage-inner .no-relay, .stage-inner.no-relay {
		position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
		display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
		font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
		background: var(--paper); padding: 5px 8px; border: 1px solid var(--rail); border-radius: 999px;
	}
.stage-inner .dot, .stage-inner.dot {
		position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
		border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
		opacity: 0;
	}
.stage-inner .dot-in, .stage-inner.dot-in { animation: travel-in 6s linear infinite; }
.stage-inner .dot-out, .stage-inner.dot-out { animation: travel-out 6s linear infinite; }
.stage-inner .site, .stage-inner.site {
		position: relative;
		border: 1.5px dashed var(--rail-2);
		border-radius: 14px;
		padding: 34px 18px 18px;
		background: rgb(255 255 255 / 0.55);
	}
.stage-inner .site-label, .stage-inner.site-label {
		position: absolute; top: -11px; left: 16px; margin: 0;
		background: var(--paper); padding: 2px 8px; border: 1px solid var(--rail); border-radius: 999px;
		color: var(--ink-2);
	}
.stage-inner .site-inner, .stage-inner.site-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(36px, 0.5fr) minmax(0, 1fr); align-items: center; }
.stage-inner .saddle, .stage-inner.saddle { padding: 16px; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint), 0 18px 36px -24px rgb(55 75 10 / 0.35); }
.stage-inner .saddle-head, .stage-inner.saddle-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.stage-inner .saddle-mark, .stage-inner.saddle-mark { display: inline-flex; flex: none; color: var(--accent); }
.stage-inner .saddle-mark svg, .stage-inner.saddle-mark svg { width: 44px; height: 44px; }
.stage-inner .saddle-name, .stage-inner.saddle-name { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; }
.stage-inner .gates, .stage-inner.gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-inner .gates li, .stage-inner.gates li {
		display: flex; align-items: center; gap: 10px;
		font: 500 0.82rem/1.2 var(--mono); padding: 8px 10px; border-radius: 6px; background: var(--panel-2);
		border: 1px solid transparent;
	}
.stage-inner .gate-n, .stage-inner.gate-n { color: var(--ink-3); font-size: 0.72rem; }
.stage-inner .gate-confirm, .stage-inner.gate-confirm { animation: gate 6s linear infinite; }
.stage-inner .wp, .stage-inner.wp { padding: 18px 14px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.stage-inner .wp-name, .stage-inner.wp-name { font-weight: 600; letter-spacing: -0.02em; }
.stage-inner .caption, .stage-inner.caption { grid-column: 1 / -1; text-align: center; color: var(--ink-2); margin-top: 22px; }
@keyframes travel-in {
		0% { left: 0; opacity: 0; }
		4% { opacity: 1; }
		28% { left: 100%; opacity: 1; }
		30%, 100% { left: 100%; opacity: 0; }
	}
@keyframes gate {
		0%, 29% { background: var(--panel-2); border-color: transparent; color: var(--ink); }
		32%, 56% { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
		60%, 100% { background: var(--panel-2); border-color: transparent; color: var(--ink); }
	}
@keyframes travel-out {
		0%, 58% { left: 0; opacity: 0; }
		60% { opacity: 1; }
		84% { left: 100%; opacity: 1; }
		86%, 100% { left: 100%; opacity: 0; }
	}
@media (max-width: 900px) {
.stage-inner .diagram, .stage-inner.diagram { grid-template-columns: 1fr; justify-items: stretch; }
.stage-inner .apps ul, .stage-inner.apps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-inner .wire, .stage-inner.wire { width: 2px; height: 56px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 10px); }
.stage-inner .no-relay, .stage-inner.no-relay { left: 14px; bottom: auto; top: 50%; transform: translateY(-50%); }
.stage-inner .dot, .stage-inner.dot { top: 0; left: 50%; margin: -5px 0 0 -5px; }
.stage-inner .dot-in, .stage-inner.dot-in { animation-name: travel-in-v; }
.stage-inner .dot-out, .stage-inner.dot-out { animation-name: travel-out-v; }
.stage-inner .site-inner, .stage-inner.site-inner { grid-template-columns: 1fr; }
.stage-inner .wire-out, .stage-inner.wire-out { height: 40px; }

	
}
@keyframes travel-in-v {
		0% { top: 0; opacity: 0; } 4% { opacity: 1; } 28% { top: 100%; opacity: 1; } 30%, 100% { top: 100%; opacity: 0; }
	}
@keyframes travel-out-v {
		0%, 58% { top: 0; opacity: 0; } 60% { opacity: 1; } 84% { top: 100%; opacity: 1; } 86%, 100% { top: 100%; opacity: 0; }
	}