/* plugpress.co — sections. v5 "WP desktop": painting wallpapers, floating
   windows, dotted hairlines, banded rhythm. One artwork per page, one accent
   per screen. */

/* ---------- desktop hero — flat paper, painting matted behind the mock ----------
   The painting is NOT the page backdrop (cursor.com's pattern): hero text sits
   on plain --bg, and the artwork is contained to the stage as the desk the
   windows rest on. Text therefore never needs a scrim to stay legible, and the
   product's own UI — not the painting — is the hero image. */
.desktop {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--bg);
	padding-bottom: var(--space-section);
}
.desktop > * { position: relative; }

/* a link sitting inside muted prose can't be distinguished by colour alone
   (blue on --ink-soft is 1.2:1 — WCAG wants 3:1 or a non-colour cue) */
.hero__sub a { text-decoration: underline; text-underline-offset: 3px; }

/* 404 founder scrawl */
.error404 .scrawl {
	font-family: var(--font-hand);
	font-size: var(--text-h3);
	color: var(--ink-soft);
	rotate: -2deg;
	display: inline-block;
	margin-top: var(--space-4);
}

.desktop__intro {
	text-align: center;
	color: var(--ink);
	padding: var(--space-hero) clamp(1.25rem, 4vw, 2rem) 0;
}
.desktop__wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-display);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-3);
	text-transform: lowercase; /* the wordmark is the logo — always lowercase */
}
.desktop__sub {
	font-size: 1.25rem; /* 20px / 400 / 1.5 — Fahim's spec, the classic hero-sub setting */
	font-weight: 400;
	line-height: 1.5;
	margin: 0 auto var(--space-6);
	max-width: 36em;
	color: var(--ink-soft);
}
.desktop__intro .btn-row { justify-content: center; }

/* the brand NAME lives here now that the header logo is icon-only — a chip,
   not a bare label: the border+bg anchor it (heyclicky's own eyebrow trick) */
.desktop__brand-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 4px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-size: var(--text-mono);
	font-weight: 600;
	color: var(--ink);
	margin-bottom: var(--space-4);
}

/* real headline (the logo lives in the header only) — size = --text-h1, same as every page hero */
.desktop__headline {
	font-weight: 700;
	max-width: 15em;
	margin-inline: auto;
	margin-bottom: var(--space-5); /* display line gets more air than eyebrow→headline (16px) */
}

/* the stage IS the desk — it carries the painting, clipped to a panel at the
   references' measured ratio (cursor's hero panel: 1300×720, aspect ~1.8; the
   old clamp(520px, 62vh, 640px) letterboxed at 2.38). padding is the visible
   mat around the windows. */
.desktop__stage {
	position: relative;
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	margin-top: var(--space-hero);
	min-height: clamp(560px, 48vw, 700px);
	padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
	background-size: cover;
	background-position: center;
	background-color: var(--band); /* fallback until the painting loads */
	border-radius: var(--r-canvas);
	overflow: hidden;
}
/* the painting reads UNWASHED — cursor's does, and no text sits on it (§14.3
   moved the hero copy to flat paper). The 28% veil this replaced turned out to
   be broken CSS that never applied, so unwashed is also what every reviewed
   screenshot actually showed. */

/* konami egg: ↑↑↓↓←→←→BA — with no veil left to lift, vivid mode now leans on
   the paintings themselves (site.js toggles the class + console line) */
.pp-vivid .desktop__stage { filter: saturate(1.3) contrast(1.05); }
/* captions sit ON the painting, whose brightness varies region to region —
   so they carry their own paper chip rather than relying on the backdrop. */
.desktop__stage .admin-frame__caption {
	color: var(--ink);
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* three windows for three plugins — saddle leads at ~66% of the stage;
   waggle/loggle overlap IN FRONT of its edges (Fahim: the side mocks sit
   above the saddle mock — desk scatter, not tuck-behind). */
.desktop__win { position: absolute; z-index: 2; }
.desktop__win .admin-frame { width: 100%; }
.desktop__win--saddle {
	width: clamp(540px, 62%, 780px);
	left: 50%;
	translate: -50% 0;
	/* absolute children resolve against the padding box — this offset centers
	   the (caption-less, ~560px) screen in the 700px stage: ~64 mat above,
	   ~76 below, instead of pinned-top with an empty floor */
	top: var(--space-8);
	rotate: -1deg;
	z-index: 2;
}
/* peeks breathe off the stage edges (5% ≈ 62px, was 2% ≈ 25px — they read
   glued to the frame) and stagger gently: waggle high-left, loggle low-right */
.desktop__win--waggle { width: clamp(240px, 22%, 280px); left: 5%; top: 17%; rotate: var(--tilt-2); z-index: 3; }
.desktop__win--loggle { width: clamp(240px, 22%, 280px); right: 5%; top: 24%; rotate: var(--tilt-3); z-index: 3; }
/* the lead's screen fills the stage the way cursor's does (620 of 720):
   the chat scene's natural height is only ~395px here, which left a bald
   248px strip of painting under the window. 520 + title bar ≈ 565 → mats
   read ~64 above / ~70 below. */
.desktop__win--saddle .scene { min-height: 520px; }

/* peeks crop like half-visible windows instead of growing with their text.
   v5's bug: window heights were intrinsic, so the 330px-wide waggle peek
   wrapped its headline and stacked to 446px against the lead's 424px — taller
   than the thing it was meant to tuck behind. scene--compact's min-height is
   a floor; this is the ceiling. */
.desktop__win--waggle .admin-frame__win,
.desktop__win--loggle .admin-frame__win { max-height: 330px; overflow: hidden; }

/* product pages center ONE window on the same desk */
.product-hero__win {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin-inline: auto;
}
.product-hero__win .admin-frame { width: 100%; }

/* the desk is interactive: hovering any window picks it up — it comes to the
   front regardless of motion preference (functional), and with motion allowed
   it straightens its tilt and grows a touch, like grabbing a real window. */
.desktop__win:hover { z-index: 5; }

/* windows settle onto the desk once, on load */
@media (prefers-reduced-motion: no-preference) {
	.desktop__win { animation: pp-settle .7s var(--ease-out) backwards; }
	.desktop__win--waggle { animation-delay: .12s; }
	.desktop__win--loggle { animation-delay: .2s; }
	.desktop__prop { animation: pp-fade .5s ease .45s backwards; }
	.desktop__win { transition: rotate .25s var(--ease-out), scale .25s var(--ease-out); }
	.desktop__win--waggle:hover, .desktop__win--loggle:hover { rotate: 0deg; scale: 1.05; }
	.desktop__win--saddle:hover { rotate: 0deg; scale: 1.01; }
}
@keyframes pp-settle { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@keyframes pp-fade { from { opacity: 0; } }

/* Liquid Glass for everything small that sits ON an image — caption chips
   and prop tiles frost over the painting like the pricing window does. Their
   88% paper stays as the no-backdrop-filter fallback. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.desktop__stage .admin-frame__caption,
	.showcase__stage .admin-frame__caption,
	.desktop__stage .prop--trash,
	.desktop__stage .prop--file,
	.pricing-desk .prop--file {
		background: color-mix(in srgb, var(--bg) 68%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(1.35);
		backdrop-filter: blur(14px) saturate(1.35);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.2);
	}
}

/* props scatter across the desk at heyclicky scale — every prop has its own
   clear lane; only the claude cursor may sit ON a window (it drives it) */
.desktop__prop { position: absolute; z-index: 4; }
/* trash + file sit on the painting, which is dark in places — their own
   paper tile, same trick as the caption chips. The note carries its own. */
.desktop__stage .prop--trash,
.desktop__stage .prop--file {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--r-window);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}
/* the map: note top-right on the sky · trash bottom-right (macOS's corner) ·
   llms.txt bottom-left · kaomoji left mid-floor under the waggle peek ·
   claude cursor resting on the lead window's lower-right */
.desktop__prop--note { right: 2.5%; top: 4%; max-width: 120px; }
.desktop__prop--trash { right: 2.5%; bottom: var(--space-5); }
.desktop__prop--file { left: 2.5%; bottom: var(--space-5); }
.desktop__prop--kaomoji { left: 8%; bottom: 22%; }
.desktop__prop--cursor { right: 29%; bottom: 30%; }

@media (max-width: 1340px) {
	.desktop__prop--note, .desktop__prop--kaomoji { display: none; }
}
@media (max-width: 960px) {
	.desktop__stage { min-height: 0; }
	.desktop__win--waggle, .desktop__win--loggle { display: none; }
	.desktop__win--saddle { position: relative; left: auto; top: auto; translate: none; width: 100%; rotate: 0deg; }
	.desktop__prop { display: none; }
}

/* product hero — clean and centered: title, sub, buttons, ONE big mock.
   Same skeleton as the home hero (intro + stage), one window, no collage. */
.desktop--product .desktop__stage { min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
	.product-hero__win { animation: pp-settle .7s var(--ease-out) backwards; }
}
/* saddle desk eggs — home vocabulary, saddle lanes: note top-right on the
   sky, trash bottom-right (macOS's corner), claude cursor resting on the
   page it just built (only the cursor may sit ON a window — it drives it) */
.product-hero__prop--note { right: 2.5%; top: 5%; max-width: 130px; }
.product-hero__prop--trash { right: 2.5%; bottom: var(--space-5); }
.product-hero__prop--cursor { right: 23%; top: 42%; }
@media (max-width: 1340px) {
	.product-hero__prop--note { display: none; }
}

/* banner variant — short washed-painting band, text only (pricing page) */
.desktop--banner { min-height: clamp(320px, 44vh, 460px); justify-content: center; }
.desktop--banner .desktop__intro { padding-bottom: var(--space-hero); }

/* ---------- hero text (pricing / blog / 404) ---------- */
.hero { padding-block: var(--space-section); text-align: center; }
.hero h1 { max-width: 15em; margin-inline: auto; }
.hero__sub {
	max-width: 34em;
	margin: var(--space-4) auto var(--space-6);
	color: var(--ink-soft);
	font-size: var(--text-lg);
}
.hero .btn-row { justify-content: center; }

/* left-aligned hero variant (blog single/archive/page headers) */
.hero.product-hero { text-align: left; }
.hero.product-hero h1, .hero.product-hero .hero__sub { margin-inline: 0; }

/* 404 shelf — plugin cards grid */
.shelf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 820px) { .shelf__grid { grid-template-columns: 1fr; } }

/* ---------- product trio (feature cards) ---------- */
.trio { display: grid; gap: var(--space-5); }
.trio__panel { max-width: 920px; margin-inline: auto; width: 100%; overflow: hidden; }
.trio__label {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--ink-soft);
	display: flex;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--line);
	background: var(--surface-alt);
}
.trio__body {
	padding: var(--space-6);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
}
@media (max-width: 820px) { .trio__body { grid-template-columns: 1fr; } }
.trio__pitch h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.trio__pitch p { color: var(--ink-soft); font-size: var(--text-small); }
.trio__links { margin-top: var(--space-5); }
.trio__shot .placeholder-slot { min-height: 180px; }

/* ---------- demo ---------- */
.demo__caption { margin-top: var(--space-4); color: var(--ink-soft); max-width: 48em; }

/* ---------- capability grid (Saddle features) — 3×3, one voice ----------
   Every card identical: keycap tile (mono initial — an app-icon anchor with
   zero icon assets) + title, then one plain short sentence. Hover = the
   site's standard lift + the keycap tints to the accent. Clicking stamps a
   little "✓ ran" (tapback family; the roadmap card says "⏳ soon"). */
/* apple-flat bento (Fahim, 2026-07-27): no borders, no shadows, no keycaps —
   gray tiles on the LIGHT page (apple.com's own inversion; the gray band was
   fighting the dotted pricing desk below). Two wide flagship tiles carry live
   mini-scenes; six small tiles rank below. Staggered reveal via --i. */
.cap-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-4);
}
.cap-card {
	position: relative;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--band);
	border-radius: 18px;
	padding: var(--space-6);
	transition-delay: calc(var(--i, 0) * 50ms); /* rides the shared .reveal transition */
}
.cap-card--wide { grid-column: span 3; }
/* flagship scene well — white inset on the gray tile, scene fills it.
   Scenes render STATIC here (finished state): the compact mocks loop on a
   10s cycle and spend part of it blank — a tile that periodically empties
   reads as broken in a calm grid. */
.cap-card__scene {
	margin-top: var(--space-4);
	border-radius: 12px;
	overflow: hidden;
	background: var(--surface);
}
.cap-card__scene .scene { min-height: 200px; }
.cap-card__scene .scene * {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}
.cap-card__title {
	font-size: var(--text-body);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.cap-card__desc {
	font-size: var(--text-small);
	line-height: 1.55;
	color: var(--ink-soft);
}
/* the roadmap, demoted from a card to one quiet line */
.cap-grid__soon {
	margin: var(--space-5) 0 0;
	font-size: var(--text-small);
	color: var(--ink-soft);
}
/* click egg — a stamp pops on the corner (decorative, like the FAQ tapback) */
.cap-card::after {
	content: '✓ ran' / '';
	position: absolute;
	top: -8px;
	right: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--ink);
	opacity: 0;
	transform: scale(.6);
	pointer-events: none;
}
.cap-card.is-run::after { opacity: 1; transform: scale(1); transition: transform .18s var(--ease-out), opacity .12s ease; }
@media (pointer: fine) {
	.pp-js .cap-card { cursor: pointer; }
}
@media (max-width: 1024px) {
	/* wides go full-width, smalls pair up */
	.cap-card { grid-column: span 3; }
	.cap-card--wide { grid-column: span 6; }
}
@media (max-width: 640px) {
	.cap-card, .cap-card--wide { grid-column: span 6; }
}

/* ---------- feature bento (product pages) — every core highlighted ----------
   6-col grid: wide scene cards (span 4) zigzag against small cards (span 2);
   row 1 = wide + small, row 2 = small + wide. Scenes sit in a quiet inset
   well, not a full window — the cards stay light. */
.features-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-5);
	align-items: stretch;
}
.feature-card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-window);
}
.feature-card--wide { grid-column: span 4; }
.feature-card__scene {
	border: 1px solid var(--line);
	border-radius: var(--r-inner);
	overflow: hidden;
	margin-bottom: var(--space-2);
}
.feature-card__scene .scene { min-height: 210px; }
/* kicker — one line in the plugin's own UI voice (real data → mono) */
.feature-card__kicker {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	letter-spacing: 0.03em;
	color: var(--ink-soft);
}
.feature-card h3 { margin: 0; }
.feature-card p { margin: 0; color: var(--ink-soft); }
/* clients tile — small chips + one mono tail line */
.feature-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feature-card .clients__chip { padding: 6px 14px; font-size: var(--text-mono); box-shadow: none; background: var(--surface-alt); }
.feature-card__tail { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--ink-soft); margin-top: auto; }
/* facts tile — the verified fact sheet, stacked */
.feature-card__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink);
}
.feature-card__facts li { padding-block: var(--space-2); }
.feature-card__facts li + li { border-top: 1px dotted var(--line-strong); }
@media (max-width: 820px) {
	.feature-card, .feature-card--wide { grid-column: 1 / -1; }
}

/* ---------- specs rail (product pages) — the readme fact sheet ----------
   One static mono line under the hero: dotted rails borrowed from the marquee,
   zero motion. Every item is a verified number from the plugin's source. */
.specs-rail {
	border-block: 1px dotted var(--line-strong);
	padding-block: var(--space-4);
}
.specs-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--space-3);
	row-gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}
.specs-rail__list li + li::before { content: '·'; padding-right: var(--space-3); color: var(--line-strong); }

/* ---------- clients row (product pages, data-gated) ---------- */
.clients__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}
.clients__chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--ink);
	box-shadow: var(--shadow-window);
}
.clients__tail {
	margin-top: var(--space-5);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}

/* ---------- proof ---------- */
.proof__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	align-items: start;
}
@media (max-width: 820px) { .proof__grid { grid-template-columns: 1fr; } }
.proof-item {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--space-5);
}
.proof-item blockquote { margin: 0 0 var(--space-3); }
.proof-item cite {
	font-style: normal;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}
.proof-item__stars { color: var(--ink); letter-spacing: 2px; margin-bottom: var(--space-2); }
.join-strip {
	margin-top: var(--space-7);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}

/* ---------- pricing — heyclicky window cards ----------
   Three mac-window cards (traffic-light bars, dotted separators, centered
   body, big mono price, "includes" list). Recommended tier = tinted bar +
   mono pill straddling the window edge (heyclicky) + the only filled button
   (cursor's highlight system). Accent = blue on home/pricing (:root default),
   the product accent on product pages. */
/* what One covers — the bundle made concrete: three product chips + the
   future-plugins promise (dashed = the honest-placeholder voice) */
/* ---------- the pricing desk — full-bleed painting band ----------
   heyclicky's pricing move, measured live: their section is a full-bleed sky
   photo with the tier cards sitting straight on it. Here: the page's own
   painting (Monet on /pricing/, Bierstadt crop elsewhere — one artwork per
   page), edge to edge, no radius (it's a band, not a stage panel). Heading
   and notes stay on the flat gray band — text never sits on a painting
   (§14.3). Deliberately outside pp-vivid: the konami egg belongs to the hero. */
/* the SECTION is the desk — dots as its own background, so .band's
   --space-section padding pads content INSIDE the pattern and no blank gray
   ever frames it (Fahim, v5.3). Surface: heyclicky's dotted wallpaper
   (they run rgba(0,0,0,.13) 1px dots — measured), rebuilt token-pure.
   The painting lives INSIDE the cards (framed scenes). */
.pricing-desk {
	position: relative;
	background-color: var(--band);
	background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.3px);
	background-size: 28px 28px;
}


/* pricing desk eggs — real data only: license.key echoes the card title bars,
   the note is the FAQ refund answer, the receipt prints the entry price */
.pricing__prop { position: absolute; z-index: 2; }
.pricing-desk .prop--file {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--r-window);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}
/* lanes measured against the whole section (head included since v5.3) */
.pricing__prop--license { left: 3%; top: 38%; }
.pricing__prop--note { right: 2.5%; top: 26%; max-width: 130px; }
.pricing__prop--receipt { left: 3.5%; bottom: 12%; }
@media (max-width: 1340px) {
	.pricing__prop--note { display: none; }
}
/* the 1080px container fills the viewport before the hero's 960 cut — the
   gutters the eggs live in are gone by here */
@media (max-width: 1180px) {
	.pricing__prop { display: none; }
}

.pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: stretch;
	/* three cards stretch gaunt at the container's full 1080 — cap and center */
	max-width: 1020px;
	margin-inline: auto;
}
@media (max-width: 820px) { .pricing__grid { grid-template-columns: 1fr; } }

/* on the painting the cards float like the hero windows do, and the
   recommended plan physically rises above its siblings — the art band gives
   the lift room that the old flat gray band never had. (Off-canvas tiers,
   if any return, keep the flat --shadow-window treatment below.) */
.pricing-desk .tier { box-shadow: 0 0 0 1px var(--line), var(--shadow-float); }
/* all three cards align — the recommended lift is gone with the ring, glow
   and badge (Fahim, 2026-07-26); only the tinted bar + filled button remain */

/* the card is a framed scene (Fahim's reference screenshot): white frame →
   the page's painting filling the interior → the license window sitting ON
   the art. All text lives inside .tier__win, so nothing ever reads on the
   painting. */
.tier {
	position: relative;
	background-color: var(--band); /* fallback until the art loads */
	background-size: cover;
	/* no frame border (Fahim) — the painting runs to the card edge; the
	   hairline ring below is the only edge definition. Radius is concentric
	   with the inner window: (r-window - 4) + the 8px art ring = r-window + 4,
	   so the ring stays even through the corners. */
	border-radius: calc(var(--r-window) + 4px);
	box-shadow: 0 0 0 1px var(--line), var(--shadow-window);
	display: flex;
	flex-direction: column;
	text-align: center;
	overflow: hidden; /* art clips to the frame's inner corners */
}
/* the window on the painting — an even art border all around (the
   reference's composition) */
.tier__win {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 8px; /* the painting reads as an even border around the window — top = bottom = sides */
	background: var(--surface); /* solid fallback — glass upgrade below */
	border-radius: calc(var(--r-window) - 4px);
	box-shadow: var(--shadow-window);
	overflow: hidden;
}
/* Liquid Glass, BAR ONLY (Fahim): the body stays solid paper; the title bar
   frosts and the painting glows through it — the macOS-toolbar read. The
   window shell goes transparent so the bar's backdrop IS the painting; the
   body carries the solid surface. Solid rules above are the
   no-backdrop-filter fallback. White rgb() literals = specular alpha data
   (same sanctioned pattern as tokens.css's --shadow-window inset). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* transparent only behind the 34px bar — solid below keeps corners clean */
	.tier__win { background: linear-gradient(to bottom, transparent 0 34px, var(--surface) 34px); }
	.tier__win .tier__body { background: var(--surface); }
	.tier__win .tier__bar {
		background: color-mix(in srgb, var(--surface-alt) 78%, transparent);
		-webkit-backdrop-filter: blur(12px) saturate(1.3);
		backdrop-filter: blur(12px) saturate(1.3);
	}
	.tier__win { box-shadow: 0 0 0 1px rgb(28 27 24 / 0.1), var(--shadow-window); }
}
.tier__bar {
	position: relative;
	height: 34px; /* slimmer than media windows — small utility window */
	/* own top radius matching the .tier__win container exactly (6px) — the
	   frosted bar's backdrop-filter ignores the ancestor clip, and the
	   inherited 9px admin-frame radius would notch this smaller container */
	border-radius: calc(var(--r-window) - 4px) calc(var(--r-window) - 4px) 0 0;
}
.tier__bar .admin-frame__lights i { width: 8px; height: 8px; }
/* mono license filename — centers in the bar's free space (flex, chrome.css),
   so the recommended chip can never overlap it. The window is narrower now
   (frame + win margins eat ~40px), so the filename yields with an ellipsis
   before the chip ever clips. */
.tier__file {
	margin-inline: auto;
	font-size: var(--text-micro);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* ink, not ink-soft: over the recommended card's 18% accent-tinted bar
	   (and the product pages' tint band) soft ink falls under AA contrast */
	color: var(--ink);
}
/* recommended, pared back (Fahim, 2026-07-27): no ring, no glow, no bar tint —
   the filled blue button plus one quiet chip in the title bar. */
.tier__flag {
	flex: none;
	font-size: var(--text-micro);
	color: var(--on-accent);
	background: var(--accent);
	border-radius: 999px;
	padding: 2px 8px;
	margin-left: var(--space-2);
	white-space: nowrap;
}
/* in the tier bar the chip sits opposite the lights */
.tier__bar .tier__flag { margin-left: auto; }
.tier__body {
	flex: 1;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}
.tier__name { font-size: var(--text-h3); font-weight: 600; margin: 0; }
.tier__audience { margin: 0; font-size: var(--text-small); color: var(--ink-soft); }
/* soft dotted rule that fades at both ends — quieter than a full-bleed line */
.tier__rule {
	width: 100%;
	height: 1px;
	background-image: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
	mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
	margin-block: var(--space-3);
}
.tier__price {
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.tier__was {
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration-thickness: 1px;
	margin-right: 2px;
	vertical-align: 6px;
}
.tier__billing { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-small); color: var(--ink-soft); } /* hugs the price */
.tier__body .btn { margin-top: var(--space-2); align-self: stretch; } /* full-width CTA: bigger target, cleaner column */
.tier__includes { width: 100%; text-align: left; }
.tier__includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-small); }
.tier__includes li { padding-left: 1.5em; position: relative; color: var(--ink-soft); }
/* SVG check via mask (not the '✓' glyph — its shape drifts per font): rounded
   caps, even stroke, optically aligned to the first text line. Inherits ink
   through background-color, same mask technique as .tier__rule above. */
.tier__includes li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 0.95em;
	height: 0.95em;
	background-color: var(--ink);
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') no-repeat center / contain;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') no-repeat center / contain;
}
/* refund + cancel promises — persistent at every viewport (the sticky-note
   prop is decoration and hides <1340px). Prose, so sans. */
.pricing__terms {
	margin: var(--space-4) 0 0;
	text-align: center;
	font-size: var(--text-small);
	color: var(--ink-soft);
}
/* links in muted prose need a non-colour cue (same rule as .hero__sub a) */
.pricing__terms a { text-decoration: underline; text-underline-offset: 3px; }

.allaccess-banner {
	margin-top: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--space-5) var(--space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
.allaccess-banner p { margin: 0; }
.allaccess-banner .muted { font-size: var(--text-small); }

/* ---------- faq — a messages window (chat with the maker) ----------
   The thread lives inside a mac window: title bar names the conversation,
   questions are visitor bubbles (right), answers are Fahim's replies (left).
   Opening an item shows a brief typing indicator (JS, motion-safe); clicking
   a reply bubble pops a ❤️ tapback — the messages metaphor, doing real work. */
.faq-window {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-window);
	box-shadow: var(--shadow-window);
	overflow: hidden;
}
.faq-window__bar {
	position: relative;
	height: 34px;
	border-radius: calc(var(--r-window) - 1px) calc(var(--r-window) - 1px) 0 0;
}
.faq-window__bar .admin-frame__lights i { width: 8px; height: 8px; }
.faq-window__title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--ink-soft);
	white-space: nowrap;
}
.faq-chat { display: grid; gap: var(--space-4); padding: var(--space-6); }
.faq-chat__item { }
.faq-chat__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: flex-end;
}
.faq-chat__q::-webkit-details-marker { display: none; }
.faq-chat__q span {
	position: relative;
	display: inline-block;
	max-width: 80%;
	background: var(--band);
	border: 1px solid var(--line);
	border-radius: 18px 18px 4px 18px;
	padding: var(--space-3) var(--space-5);
	padding-right: 2.4rem;
	font-weight: 500;
	font-size: var(--text-body);
	transition: border-color .12s ease;
}
.faq-chat__q:hover span { border-color: var(--line-strong); }
.faq-chat__q span::after {
	content: '+';
	position: absolute;
	right: 1rem;
	top: 50%;
	translate: 0 -50%;
	color: var(--ink-soft);
	font: 400 1.125rem/1 var(--font-mono);
	transition: rotate .2s ease;
}
.faq-chat__item[open] .faq-chat__q span::after { rotate: 45deg; }
.faq-chat__a {
	display: flex;
	gap: var(--space-3);
	align-items: flex-end;
	margin-top: var(--space-3);
	max-width: 85%;
}
.faq-chat__avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.faq-chat__avatar--pending {
	display: grid;
	place-items: center;
	background: var(--ink);
	color: var(--bg);
	font: 600 0.8125rem/1 var(--font-display);
}
.faq-chat__bubble {
	position: relative; /* anchors the tapback */
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: 18px 18px 18px 4px;
	padding: var(--space-3) var(--space-5);
	color: var(--ink-soft);
}
.faq-chat__name {
	display: block;
	font-weight: 600;
	font-size: var(--text-mono);
	color: var(--ink);
	margin-bottom: 2px;
}

/* ❤️ tapback — pops on the bubble corner when the reply is clicked.
   Empty alt keeps the emoji out of the accessibility tree (decorative egg). */
.faq-chat__bubble::after {
	content: '❤️' / '';
	position: absolute;
	top: -12px;
	right: -8px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 0.8125rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: var(--shadow-window);
	scale: 0;
	transition: scale .15s ease;
}
.faq-chat__item.has-tapback .faq-chat__bubble::after { scale: 1; }

/* typing indicator — "Fahim is replying": a mini bubble of three dots shown
   for ~600ms after a question opens (JS toggles .is-typing, motion-safe) */
.faq-chat__typing { display: none; }
.pp-js .faq-chat__item.is-typing .faq-chat__typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: 18px 18px 18px 4px;
	padding: var(--space-3) var(--space-4);
}
.pp-js .faq-chat__item.is-typing .faq-chat__bubble { display: none; }
.faq-chat__typing i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
	.faq-chat__typing i { animation: pp-typing 1s ease-in-out infinite; }
	.faq-chat__typing i:nth-child(2) { animation-delay: .15s; }
	.faq-chat__typing i:nth-child(3) { animation-delay: .3s; }
	@keyframes pp-typing {
		0%, 60%, 100% { translate: 0 0; opacity: .5; }
		30% { translate: 0 -3px; opacity: 1; }
	}
	.pp-js .faq-chat__item[open] .faq-chat__bubble { animation: pp-bubble-in .25s ease; }
	@keyframes pp-bubble-in {
		from { opacity: 0; translate: 0 4px; }
	}
}

/* the standing P.S. reply — a real contact path, always visible */
.faq-chat__ps { margin-top: var(--space-2); }
.faq-chat__ps .faq-chat__bubble::after { content: none; }
.faq-chat__ps a { color: var(--ink); }

/* smooth open — answer height eases in where the platform can animate to
   auto; everywhere else <details> opens instantly (graceful fallback). Layers
   under the typing-dots beat: height settles while the dots play. */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		.faq-chat__item::details-content {
			block-size: 0;
			overflow-y: clip;
			opacity: 0;
			transition: content-visibility .3s allow-discrete, block-size .3s var(--ease-out), opacity .25s ease;
		}
		.faq-chat__item[open]::details-content { block-size: auto; opacity: 1; }
	}
}

/* blue band text (styleguide contract; home pricing history) */
.band--blue h2 { color: var(--surface); }
.band--blue .mono { color: rgb(255 255 255 / .7); }

/* ---------- footer — quiet columns over a giant ghost wordmark ----------
   Sits on the gray band: the page rhythm ends pricing-gray → FAQ-white →
   footer-gray, and the desk edge reads against the paper above it. */
.site-footer {
	background: var(--band);
	border-top: 1px dotted var(--line-strong); /* the desk edge */
	padding-top: var(--space-section);
	color: var(--ink-soft);
	font-size: var(--text-small);
	overflow: hidden;
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }

/* link columns (heyclicky structure): brand anchored left, the four link
   columns packed together on the right at content width — an even 1fr spread
   left the links drifting apart */
.site-footer__cols {
	display: flex;
	gap: clamp(2rem, 4vw, 3.25rem);
	margin-bottom: var(--space-7);
}
.site-footer__brand { max-width: 280px; margin-right: auto; }
.site-footer__brand img { display: block; margin-bottom: var(--space-3); }
.site-footer__tag {
	margin: 0 0 var(--space-2);
	color: var(--ink);
	font-weight: 600;
	font-size: var(--text-small);
}
@media (max-width: 900px) {
	.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; max-width: none; margin-right: 0; }
}
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer__label { /* column labels — not headings; keeps the page outline honest */
	font-family: var(--font-sans);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--ink);
	margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__note { margin: 0; max-width: 28em; }

/* the desk — ghost wordmark flanked by working props (trash → 404, folder → blog) */
.site-footer__desk { position: relative; }
.site-footer__prop { position: absolute; bottom: var(--space-5); z-index: 1; }
.site-footer__prop--trash { left: clamp(1rem, 4vw, 3rem); }
.site-footer__prop--folder { right: clamp(1rem, 4vw, 3rem); }
@media (max-width: 820px) { .site-footer__prop { display: none; } }
.site-footer__line {
	border-top: 1px dotted var(--line-strong);
	padding-block: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	justify-content: space-between;
	align-items: baseline;
}
/* the Waggle credit is a link inside running colophon text — underline, not colour */
.site-footer__line a { text-decoration: underline; text-underline-offset: 3px; }
/* "PlugPress" in real <i> letters (aria-hidden) so each can lift under the
   cursor — the one interactive wink down here. Wordmark itself stays
   pointer-transparent; only letters catch hover. */
.site-footer__wordmark {
	display: block;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(5rem, 16vw, 15rem); /* documented exception: ghost texture, not type scale */
	line-height: 0.72;
	letter-spacing: -0.04em;
	color: var(--line); /* one step darker than the gray footer it sits on */
	user-select: none;
	pointer-events: none;
	margin-bottom: -0.06em;
	white-space: nowrap;
}
.site-footer__wordmark i {
	font-style: normal;
	display: inline-block;
	pointer-events: auto;
	transition: translate .25s var(--ease-out), color .25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* the letter under the cursor wakes up brand-blue and lifts… */
	.site-footer__wordmark i:hover {
		translate: 0 -0.06em;
		color: var(--blue);
	}
	/* …and PRESSES down on click (it is PlugPress, after all) */
	.site-footer__wordmark i:active {
		translate: 0 0.03em;
		transition-duration: .07s;
	}
}

/* ---------- legal pages — heyclicky anatomy (Fahim's reference, 2026-07-27):
   the dotted desk carries the whole page, a big centered lowercase title,
   "← back", then one narrow gray-prose column with numbered headings. ---------- */
.legal-desk { background: var(--surface); } /* plain white — Fahim dropped the dots */
.legal-hero {
	padding: clamp(4rem, 10vw, 7rem) 0 var(--space-6);
	text-align: center;
}
.legal-hero h1 {
	margin: 0 0 var(--space-3);
	font-size: var(--text-h1);
	/* sentence case like every other heading — lowercase was heyclicky's brand
	   voice, not ours (the wordmark alone owns lowercase) */
	letter-spacing: -0.03em;
}
.legal-col { padding-bottom: var(--space-section); }
.legal-back { margin: 0 0 var(--space-7); }
.legal-back a { color: var(--ink-soft); text-decoration: none; }
.legal-back a:hover { color: var(--ink); }
.legal-lede { color: var(--ink-soft); margin: 0 0 var(--space-5); }
.legal-updated { color: var(--ink-soft); font-size: var(--text-label); margin: 0; }
/* prose runs gray; headings stay ink and number themselves */
.legal-body { color: var(--ink-soft); counter-reset: legal; }
.legal-body h2 { color: var(--ink); counter-increment: legal; }
.legal-body h2::before { content: counter(legal) '. '; }
.legal-body { margin-top: var(--space-7); }
.legal-body h2:first-child { margin-top: 0; }
/* a policy is a document, not a landing page — the display scale would have
   eight section headings shouting over the clauses they introduce */
.legal-body h2 { font-size: var(--text-h3); }
.legal-body h3 { font-size: var(--text-lg); }

/* an unanswered question in a policy — deliberately loud. Uses the highlighter
   token, the same voice the sticky note speaks in, so it reads as a human note
   to self rather than an error state. */
.legal-blank {
	background: var(--marker-soft);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	padding: 1px 8px;
	border-radius: var(--r-inner);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.legal-blank::before { content: 'TO CONFIRM: '; color: var(--ink-soft); }

.legal-foot {
	margin: var(--space-8) 0 var(--space-section);
	padding-top: var(--space-5);
	border-top: 1px dotted var(--line-strong);
	font-size: var(--text-small);
	color: var(--ink-soft);
}
.legal-foot p { margin: 0; }
.legal-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- contact form — a window you type into ----------
   Sits in the same admin-frame chrome as every other surface on the site, so
   the form reads as furniture rather than a bolted-on widget. Labels are sans:
   mono stays reserved for real data. */
.form-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-window);
	overflow: hidden;
}
.form { padding: var(--space-6); display: grid; gap: var(--space-5); }

.field { margin: 0; display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-small); font-weight: 600; color: var(--ink); }
.field__hint { font-size: var(--text-small); color: var(--ink-soft); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.field input, .field select, .field textarea {
	width: 100%;
	font: inherit;
	font-size: var(--text-body);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-inner);
	padding: var(--space-3) var(--space-4);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; /* replaced by the ring below — :focus-visible still applies for keyboard */
	border-color: var(--blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}
.form-actions__alt { font-size: var(--text-small); color: var(--ink-soft); }
.form-actions__alt a { text-decoration: underline; text-underline-offset: 3px; }

/* honeypot — must be reachable to a bot parsing the DOM, invisible to a person.
   Not `display:none`: some bots skip those. */
.form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* result banner — never colour alone: each carries its own glyph */
.form-notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--r-inner);
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: var(--text-small);
	color: var(--ink);
}
.form-notice::before { font-family: var(--font-mono); margin-right: var(--space-2); }
.form-notice--ok { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.form-notice--ok::before { content: '✓'; }
.form-notice--error::before { content: '!'; }
.form-notice--error { border-color: var(--line-strong); background: var(--surface-alt); }

/* ---------- blog list (posts page / archives / author) ----------
   An editorial log (2026-07-28): mono date column, title + excerpt, dotted
   hairlines between entries — the git-log voice the theme already speaks. */
.post-list { display: grid; }
.post-list__item { border-top: 1px dotted var(--line-strong); }
.post-list__item:first-child { border-top: 0; }
.post-list__link {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--space-4);
	padding-block: var(--space-5);
	color: inherit;
}
.post-list__link:hover { text-decoration: none; }
.post-list__date {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--ink-soft);
	padding-top: 0.55em; /* optical align with the title's cap height */
	white-space: nowrap;
}
.post-list__body { display: block; }
.post-list__title { font-size: var(--text-h3); margin: 0; transition: color .12s ease; }
.post-list__link:hover .post-list__title { color: var(--blue); }
.post-list__excerpt {
	margin: var(--space-2) 0 0;
	color: var(--ink-soft);
	font-size: var(--text-small);
	max-width: 60ch;
}
.post-list__more {
	display: inline-block;
	margin-top: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--ink-soft);
	transition: color .12s ease;
}
.post-list__link:hover .post-list__more { color: var(--blue); }
@media (max-width: 640px) {
	.post-list__link { grid-template-columns: 1fr; gap: var(--space-2); }
	.post-list__date { padding-top: 0; }
}

/* author archive hero — avatar + name + bio on one line */
.author-hero { display: flex; align-items: center; gap: var(--space-5); }
.author-hero__avatar { display: block; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.author-hero .hero__sub { margin: var(--space-2) 0 0; }
@media (max-width: 640px) { .author-hero { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }

/* pagination — mono pills (the_posts_pagination markup) */
.pagination { margin-top: var(--space-6); }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-inner);
	color: var(--ink-soft);
}
.pagination a.page-numbers:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pagination .page-numbers.dots { border: 0; }

/* single post prev/next — closes the page under the maker notice */
.post-navigation { margin-top: var(--space-6); border-top: 1px dotted var(--line-strong); padding-top: var(--space-5); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-small); }
.post-navigation .nav-next { margin-left: auto; text-align: right; }

/* 404 — the trash sits above the headline, gently tipped */
.error404 .prop--trash { margin-bottom: var(--space-4); rotate: -3deg; }
.error404 .hero .btn-row { margin-bottom: var(--space-2); }

/* ---------- blog / entry content ---------- */
.single .hero, .blog .hero, .archive .hero, .error404 .hero { padding-bottom: var(--space-6); }
.entry { font-size: var(--text-body); }
.entry > * + * { margin-top: var(--space-4); }
.entry h2 { margin-top: var(--space-7); }
.entry h3 { margin-top: var(--space-6); }
.entry img { border: 1px solid var(--line); border-radius: var(--r-card); }
.entry pre {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-window);
	padding: var(--space-4);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
}
.entry code { font-family: var(--font-mono); font-size: 0.9em; }
.entry blockquote {
	margin: 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--line);
	color: var(--ink-soft);
}
/* long-form structure — legal pages lean on lists, sub-headings and rules,
   none of which .entry styled before (they fell through to UA defaults) */
.entry h4 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: var(--space-6) 0 var(--space-3);
}
.entry ul, .entry ol { padding-left: 1.35em; }
.entry li + li { margin-top: var(--space-2); }
.entry li::marker { color: var(--ink-soft); }
.entry ul ul, .entry ol ol { margin-top: var(--space-2); }
.entry hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin-block: var(--space-7);
}
.entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-small);
}
.entry th, .entry td {
	text-align: left;
	padding: var(--space-3);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.entry th { font-weight: 600; }
/* a link inside body prose can't be told apart by colour alone */
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.post-list { display: grid; gap: var(--space-6); max-width: var(--container-narrow); }
.post-list__item h2 { margin: var(--space-1) 0 var(--space-2); }

/* 404 trash prop — ink on paper, not wallpaper */
.error404 .prop { color: var(--ink-soft); text-shadow: none; margin-bottom: var(--space-4); }
.error404 .prop__icon { fill: var(--ink-soft); filter: none; }

/* ---------- styleguide ---------- */
.styleguide .band { padding-block: var(--space-7); }
.styleguide__label {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--ink-soft);
	border-bottom: 1px dotted var(--line-strong);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-6);
}

/* ---------- product showcases (home shelf) ----------
   ONE section, three stacked zigzag panels (cursor's feature-card rhythm).
   One quiet shared fill — no borders, no per-product tint: the product's
   color identity lives in its icon and scene only. */
.showcase-stack { display: grid; gap: var(--space-8); } /* clear air between product panels — each reads as its own scene */
.showcase {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* content 50 / mock 50 */
	gap: var(--space-7);
	align-items: center;
	background: var(--band);
	border-radius: var(--r-canvas);
	padding: clamp(1.5rem, 3.5vw, 3rem);
}
.showcase--flip .showcase__stage { order: 2; }
/* the mock's half is a painted panel — the reference-screenshot anatomy
   (panel → art → window) at section scale. Inline wallpaper from shelf.php;
   --band is the pre-load fallback. Text stays in the pitch half, never here. */
.showcase__stage {
	background-color: var(--band);
	background-size: cover;
	background-position: center;
	/* concentric corners: outer radius = inner window radius + the 8px ring,
	   so the art border stays even THROUGH the corner (a 4px outer against
	   the 10px window pinched at the corners — Fahim's circles) */
	border-radius: calc(var(--r-window) + 8px);
	overflow: hidden;
	padding: 8px; /* thin, even art border around the mock — same 8px ring as the pricing cards */
}
.showcase__stage .admin-frame { width: 100%; margin-inline: auto; }
.showcase__stage .admin-frame__win { box-shadow: var(--shadow-float); }
/* Liquid Glass, BAR ONLY (Fahim) — the scene body stays solid; the browser
   bar frosts over the painting. Window shell transparent so the bar's
   backdrop is the art; the media/scene below keep their solid chrome.css
   backgrounds and cover the body. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* transparent only behind the 44px bar — solid below keeps corners clean */
	.showcase__stage .admin-frame__win { background: linear-gradient(to bottom, transparent 0 44px, var(--surface) 44px); }
	.showcase__stage .admin-frame__bar {
		background: color-mix(in srgb, var(--surface-alt) 78%, transparent);
		-webkit-backdrop-filter: blur(12px) saturate(1.3);
		backdrop-filter: blur(12px) saturate(1.3);
	}
	.showcase__stage .admin-frame__win { box-shadow: 0 0 0 1px rgb(28 27 24 / 0.12), var(--shadow-float); }
}
/* captions sitting on the panel art carry their own chip (same rule as the
   hero stage) */
.showcase__stage .admin-frame__caption {
	color: var(--ink);
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.showcase__pitch h2 { margin: var(--space-2) 0 var(--space-3); }
.showcase__pitch p { color: var(--ink-soft); max-width: 42ch; }
/* no buttons here — one quiet arrow link; buying CTAs live on the product
   page and in pricing. The arrow nudges 3px on hover (motion-safe via the
   global reduce block zeroing transitions). */
.showcase__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	margin-top: var(--space-5);
	font-weight: 500;
	color: var(--ink);
}
.showcase__link span { transition: translate .15s var(--ease-out); }
.showcase__link:hover { text-decoration: none; color: var(--blue); }
.showcase__link:hover span { translate: 3px 0; }
/* product icon beside the eyebrow name — optically centered, brand-colored */
.showcase__pitch .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.showcase__icon {
	display: block;
	width: 24px;
	height: 24px;
}
/* three scannable facts — short lines, real numbers, ✓ in ink */
.showcase__points {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
	font-size: var(--text-small);
	color: var(--ink-soft);
	max-width: 42ch;
}
.showcase__points li { padding-left: 1.5em; position: relative; }
/* same SVG check as .tier__includes — one check shape site-wide */
.showcase__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 0.95em;
	height: 0.95em;
	background-color: var(--ink);
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') no-repeat center / contain;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="3.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') no-repeat center / contain;
}
@media (max-width: 960px) {
	/* minmax(0, …), not 1fr — a nowrap scene chip must crop, never widen the panel */
	.showcase { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); }
	.showcase--flip .showcase__stage { order: 0; } /* stage always first when stacked */
}

/* reveal choreography — the section doesn't fade as one slab: the window
   settles while the pitch arrives line by line (eyebrow → h2 → p → CTAs).
   Tight 70ms steps; one-shot IO in site.js; no-JS / reduced-motion get
   everything instantly (both gates below). */
@media (prefers-reduced-motion: no-preference) {
	.pp-js .showcase.reveal { opacity: 1; transform: none; }
	.pp-js .showcase.reveal .showcase__stage,
	.pp-js .showcase.reveal .showcase__pitch > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
	}
	.pp-js .showcase.reveal .showcase__stage { transform: translateY(24px) scale(.985); }
	.pp-js .showcase.reveal.is-visible .showcase__stage,
	.pp-js .showcase.reveal.is-visible .showcase__pitch > * { opacity: 1; transform: none; }
	.pp-js .showcase.reveal.is-visible .showcase__pitch > *:nth-child(2) { transition-delay: 60ms; }
	.pp-js .showcase.reveal.is-visible .showcase__pitch > *:nth-child(3) { transition-delay: 120ms; }
	.pp-js .showcase.reveal.is-visible .showcase__pitch > *:nth-child(4) { transition-delay: 180ms; }
	.pp-js .showcase.reveal.is-visible .showcase__pitch > *:nth-child(5) { transition-delay: 240ms; }
}

/* ---------- about timeline ---------- */
/* year in mono (real data), rows split by the site's dotted hairlines */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-top: 1px dotted var(--line-strong);
}
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline__year { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.7; }
.timeline li p { margin: 0; }

/* ---------- about story ---------- */
/* lede typography: the story reads like a letter — one size up, tall leading,
   a real pause between beats, ~34em measure */
.about-desk .entry { max-width: 34em; }
.about-desk .entry p {
	font-size: 1.1875rem;
	line-height: 1.75;
}
.about-desk .entry p + p { margin-top: var(--space-5); }

/* the desk itself: the dotted-paper texture (pricing-desk's move), so the
   props sit on something and the story band stops being flat gray */
.about-desk {
	position: relative;
	background-color: var(--band);
	background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.3px);
	background-size: 28px 28px;
}

/* desk props — decoration at the section edges, gone before they can crowd */
.about-desk__prop { position: absolute; z-index: 2; }
.about-desk__prop--kaomoji { right: 7%; top: 22%; }
.about-desk__prop--folder { left: 4%; top: 30%; }
.about-desk__prop--trash { right: 3.5%; bottom: 12%; }
@media (max-width: 1200px) { .about-desk__prop { display: none; } }

/* prose beside the founder.jpg window; 224px source shown at exactly its own
   size inside the window — grayscale reads editorial, not underexposed */
.story-grid {
	display: grid;
	grid-template-columns: 1fr 240px;
	gap: var(--space-7);
	align-items: start;
}
.story-side { display: grid; gap: var(--space-6); justify-items: center; }
.story-side .admin-frame { width: 100%; }
.story-side .admin-frame__media img { filter: grayscale(1) contrast(1.05); }
.story-note { transform: rotate(-2deg); }
@media (max-width: 760px) {
	.story-grid { grid-template-columns: 1fr; }
	.story-side { justify-items: start; max-width: 240px; }
}

/* section separators: the dotted hairline, contained (not full-bleed) */
.about-sep > .container { border-top: 1px dotted var(--line-strong); padding-top: var(--space-7); }

/* ---------- faq: the telegram treatment ---------- */
/* a real messaging window: narrower than the prose column, floated on the
   page's painting (same anatomy as every other window), with the classic
   messenger doodle wallpaper inside the chat. */
.faq-window { max-width: 680px; margin-inline: auto; }

/* the canvas under the window — showcase__stage's recipe at FAQ scale */
.faq-stage {
	border-radius: var(--r-canvas);
	/* no overflow:hidden — the floating props hang OUTSIDE the canvas; the
	   background still respects the radius on its own */
	padding: clamp(1rem, 2.5vw, 1.75rem);
	background-size: cover;
	background-position: center 30%;
	background-color: var(--band); /* fallback until the painting loads */
}

/* chat body: accent-tinted paper (telegram's move — the tint follows the
   page accent), with a hand-drawn doodle tile. The tile is an alpha-only SVG
   mask (keyword 'black', zero hex) colored via color-mix on --ink, so the
   pattern always matches the theme and costs no asset request. */
.faq-chat { position: relative; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.faq-chat::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--ink) 8%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 48c-6-8-14-10-14-18a8 8 0 0 1 14-5a8 8 0 0 1 14 5c0 8-8 10-14 18z'/%3E%3Cpath d='M150 18l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z' transform='rotate(12 150 30)'/%3E%3Cpath d='M50 152l38-16-11 34-8-11-19-7z' transform='rotate(-8 66 160)'/%3E%3Cpath d='M182 116h16v9a8 8 0 0 1-16 0zM186 116v-8M194 116v-8M190 133v9' transform='rotate(15 190 124)'/%3E%3Cpath d='M96 192h28a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-14l-8 7v-7h-6a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6z'/%3E%3Cpath d='M204 214l6 6 12-14'/%3E%3Cpath d='M104 78l-10 18h8l-6 16 16-20h-8l6-14z' transform='rotate(-10 102 94)'/%3E%3Ccircle cx='222' cy='52' r='4'/%3E%3Ccircle cx='18' cy='112' r='4'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 48c-6-8-14-10-14-18a8 8 0 0 1 14-5a8 8 0 0 1 14 5c0 8-8 10-14 18z'/%3E%3Cpath d='M150 18l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z' transform='rotate(12 150 30)'/%3E%3Cpath d='M50 152l38-16-11 34-8-11-19-7z' transform='rotate(-8 66 160)'/%3E%3Cpath d='M182 116h16v9a8 8 0 0 1-16 0zM186 116v-8M194 116v-8M190 133v9' transform='rotate(15 190 124)'/%3E%3Cpath d='M96 192h28a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-14l-8 7v-7h-6a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6z'/%3E%3Cpath d='M204 214l6 6 12-14'/%3E%3Cpath d='M104 78l-10 18h8l-6 16 16-20h-8l6-14z' transform='rotate(-10 102 94)'/%3E%3Ccircle cx='222' cy='52' r='4'/%3E%3Ccircle cx='18' cy='112' r='4'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-size: 240px;
	mask-size: 240px;
}
.faq-chat > * { position: relative; }
/* bubbles stay opaque paper on the tint — visitor bubble goes full white so
   the outgoing/incoming contrast reads like a real messenger */
.faq-chat__q span { background: var(--surface); }

/* floating eggs on the faq canvas — fahim's cursor and a note, drifting
   slowly (motion-safe); gone on small screens before they can crowd */
.faq-stage { position: relative; }
.faq-stage__prop { position: absolute; z-index: 2; }
/* props sit OUTSIDE the window, on the band beside the canvas */
.faq-stage__prop--cursor { left: -3.5rem; bottom: 10%; }
.faq-stage__prop--note { right: -4.5rem; top: 16%; transform: rotate(2deg); max-width: 110px; }
@media (prefers-reduced-motion: no-preference) {
	.faq-stage__prop { animation: pp-drift 7s ease-in-out infinite alternate; }
	.faq-stage__prop--note { animation-duration: 9s; animation-delay: 1.2s; }
}
@keyframes pp-drift { to { translate: 0 -12px; } }
@media (max-width: 900px) { .faq-stage__prop { display: none; } }

/* faq messenger eggs: the day chip, the presence line, and the composer —
   a message input that is really the mailto contact path */
.faq-chat__day {
	justify-self: center;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--ink-soft);
	padding: 2px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.faq-chat__presence {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: calc(28px + var(--space-3)); /* clears the avatar column */
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--ink-soft);
}
.faq-chat__presence i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--mac-green);
}
.faq-chat__composer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	color: var(--ink-soft);
	text-decoration: none;
	transition: border-color .12s ease;
}
.faq-chat__composer:hover { border-color: var(--line-strong); }
.faq-chat__composer b {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--surface);
	font-weight: 600;
}

/* ---------- support: the compose window ---------- */
/* the mail To: line under the title bar — real recipient, mono artifact voice */
.compose-to {
	padding: var(--space-3) var(--space-6);
	border-bottom: 1px dotted var(--line-strong);
	font-size: var(--text-mono);
	color: var(--ink-soft);
	background: var(--surface);
}
.compose-to b { color: var(--ink); font-weight: 400; }
/* desk eggs beside the compose window (same contract as .faq-stage__prop) */
.support-stage__prop { position: absolute; z-index: 2; }
.support-stage__prop--folder { left: -3.5rem; bottom: 14%; }
.support-stage__prop--note { right: -4.5rem; top: 20%; transform: rotate(2deg); max-width: 120px; }
@media (prefers-reduced-motion: no-preference) {
	.support-stage__prop { animation: pp-drift 8s ease-in-out infinite alternate; }
	.support-stage__prop--note { animation-delay: 1s; }
}
@media (max-width: 900px) { .support-stage__prop { display: none; } }

/* optional marker on form labels — quiet, not a second label */
.field__optional { color: var(--ink-soft); font-weight: 400; font-size: var(--text-small); }

/* ---------- mini window — the smallest mac window, for feature mocks ---------- */
.mini-window { background: var(--surface); }
.mini-window__bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 28px;
	padding-inline: var(--space-3);
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
}
.mini-window__bar .admin-frame__lights i { width: 7px; height: 7px; }
.mini-window__label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--text-micro);
	color: var(--ink-soft);
	white-space: nowrap;
}

/* ---------- liquid glass windows on canvases ---------- */
/* windows sitting ON the sky frost it (Apple's liquid glass): translucent
   surface + backdrop blur/saturate, inner top highlight. Content stays
   opaque (bubbles, inputs) so contrast never pays for the effect. Solid
   surface remains the no-backdrop-filter fallback. Conversion surfaces
   (pricing tier bodies) deliberately stay solid. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.faq-stage .faq-window,
	.faq-stage .form-card {
		background: color-mix(in srgb, var(--surface) 72%, transparent);
		-webkit-backdrop-filter: blur(22px) saturate(1.5);
		backdrop-filter: blur(22px) saturate(1.5);
		border-color: color-mix(in srgb, var(--surface) 55%, transparent);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--surface) 85%, transparent),
			var(--shadow-float);
	}
	/* the layers inside go translucent so the glass reads through */
	.faq-stage .faq-window__bar,
	.faq-stage .form-card .admin-frame__bar { background: color-mix(in srgb, var(--surface-alt) 50%, transparent); }
	.faq-stage .faq-chat { background: color-mix(in srgb, var(--accent) 7%, transparent); }
	.faq-stage .compose-to { background: transparent; }
}