/* plugpress.co — chrome: menu-bar header, admin windows, props, notice, plugin card.
   v5 "WP desktop": windows float on painting wallpapers with mono .mov captions.
   Hairlines over shadows; floating windows own the big shadow. */

/* ---------- header — mac menu bar × wp-admin ---------- */
.admin-bar-pp {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
/* full-width fluid — no container cap; edge padding scales with the viewport */
.admin-bar-pp__inner {
	position: relative;
	display: flex;
	align-items: center;
	/* 16px + the first item's 12px padding ≈ the 28px between menu items —
	   brand→menu reads the same as item→item */
	gap: var(--space-4);
	min-height: 56px;
	width: 100%;
	padding-inline: clamp(1rem, 3vw, 2.25rem);
}
/* wordmark rides at menu-text size — just a touch bolder than the items.
   The icon sits directly beside "PlugPress" — one brand mark, one spot,
   at every width (2026-08-24: previously doubled as a dead-center mac
   menu-bar mark on wide viewports and swapped for a small inline icon
   ≤820px; simplified to a single position). */
.admin-bar-pp__brand-wrap {
	position: relative;
	display: inline-flex;
}
.admin-bar-pp__brand {
	color: var(--ink);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: -0.01em;
}
.admin-bar-pp__brand:hover { text-decoration: none; }
.admin-bar-pp__brand { display: inline-flex; align-items: center; gap: 8px; }
.admin-bar-pp__brand > img { display: block; }

/* brand menu — right-click the icon: a mac context menu under the brand */
.brand-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 160px;
	padding: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow-float);
	z-index: 60;
}
.brand-menu[hidden] { display: none; }
.brand-menu__item {
	display: block;
	width: 100%;
	padding: 7px 12px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 0.8125rem;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}
.brand-menu__item:hover { background: var(--band); }
.brand-menu__item.is-copied { color: var(--blue); }
/* home header CTA is a plain link, not a pill — the hero button owns the viewport (heyclicky pattern) */
.admin-bar-pp__cta { color: var(--blue); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.admin-bar-pp__cta:hover { text-decoration: underline; }
/* live-plugin counter — quiet neutral chip (GitHub-counter voice), not a
   colored alert bubble: nothing on the bar should outshout the CTA */
.admin-bar-pp__count {
	display: inline-grid;
	place-items: center;
	min-width: 16px;
	height: 16px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--band);
	border: 1px solid var(--line);
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	line-height: 1;
	vertical-align: 1px;
}
.admin-bar-pp__nav { display: flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; }
.admin-bar-pp__nav a,
.admin-bar-pp__nav .admin-bar-pp__item-trigger {
	color: var(--ink-soft);
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	transition: color .12s ease, background-color .12s ease;
}
.admin-bar-pp__nav a:hover,
.admin-bar-pp__nav .admin-bar-pp__item-trigger:hover { color: var(--ink); background: var(--band); text-decoration: none; }
/* the trigger is a <button> (Products isn't a page of its own) — strip its
   native chrome so it reads exactly like the link items beside it */
.admin-bar-pp__item-trigger {
	display: inline-block;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}
.admin-bar-pp__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.admin-bar-pp__howdy { font-size: var(--text-label); }
/* howdy is now a link to /account/ — keeps its quiet meta color, wp-hover feel */
a.admin-bar-pp__howdy { color: var(--ink-soft); }
a.admin-bar-pp__howdy:hover { color: var(--ink); text-decoration: none; }
.admin-bar-pp--dark a.admin-bar-pp__howdy { color: var(--adminbar-muted); }
.admin-bar-pp--dark a.admin-bar-pp__howdy:hover { background: var(--adminbar-bg-hover); color: var(--adminbar-link-hover); }
.admin-bar-pp__clock { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-soft); }
.admin-bar-pp__clock:empty { display: none; }
.admin-bar-pp__glyph { width: 14px; height: 14px; fill: var(--ink-soft); flex: none; }
@media (max-width: 640px) {
	.admin-bar-pp__howdy, .admin-bar-pp__clock, .admin-bar-pp__glyph { display: none; }
	.admin-bar-pp--dark .admin-bar-pp__nav { display: none; }
}
@media (max-width: 820px) {
	.admin-bar-pp__inner { gap: var(--space-2); }
	.admin-bar-pp__nav a,
	.admin-bar-pp__nav .admin-bar-pp__item-trigger { padding: 4px 8px; font-size: var(--text-mono); }
}
@media (max-width: 420px) {
	.admin-bar-pp__nav { gap: 0; }
	.admin-bar-pp__nav a,
	.admin-bar-pp__nav .admin-bar-pp__item-trigger { padding: 4px 5px; white-space: nowrap; }
	/* the update-count egg yields to the longer CTA — its dropdown is gone ≤820px anyway */
	.admin-bar-pp__count { display: none; }
	.admin-bar-pp__meta .btn { padding-inline: 0.7rem; }
}

/* ---------- product header stack — wp-admin, literally ----------
   Bar 1: the slim black admin bar = the simple PlugPress site header.
   32px tall, 46px ≤782px (WP's own breakpoint). Flat items, wp hover fill.
   Palette = --adminbar-* tokens (wp-admin's own, contrast pre-vetted). */
.admin-bar-pp--dark {
	background: var(--adminbar-bg);
	border-bottom: none;
}
.admin-bar-pp--dark .admin-bar-pp__inner {
	min-height: 32px;
	gap: 0;
	align-items: stretch;
	font-size: var(--text-mono);
}
/* full-bleed like the original bar — fluid wp edge padding */
.admin-bar-pp__inner--full {
	display: flex;
	width: 100%;
	padding-inline: clamp(6px, 1.5vw, 16px);
}
.admin-bar-pp--dark .admin-bar-pp__brand,
.admin-bar-pp--dark .admin-bar-pp__nav a,
.admin-bar-pp--dark .admin-bar-pp__nav .admin-bar-pp__item-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 10px;
	color: var(--adminbar-ink);
	border-radius: 0;
	transition: background-color .12s ease, color .12s ease;
}
.admin-bar-pp--dark .admin-bar-pp__brand {
	font-size: var(--text-mono); /* same as the dark bar's menu items */
	font-weight: 600;
	letter-spacing: 0;
}
.admin-bar-pp--dark .admin-bar-pp__brand:hover,
.admin-bar-pp--dark .admin-bar-pp__nav a:hover,
.admin-bar-pp--dark .admin-bar-pp__nav .admin-bar-pp__item-trigger:hover {
	background: var(--adminbar-bg-hover);
	color: var(--adminbar-link-hover);
	text-decoration: none;
}
/* icon-only brand on the black bar — white mark at rest, blue mark on hover */
.admin-bar-pp__brand--icon img { display: block; }
.admin-bar-pp__brand--icon .admin-bar-pp__brand-hover { display: none; }
.admin-bar-pp__brand--icon:hover .admin-bar-pp__brand-rest,
.admin-bar-pp__brand--icon:focus-visible .admin-bar-pp__brand-rest { display: none; }
.admin-bar-pp__brand--icon:hover .admin-bar-pp__brand-hover,
.admin-bar-pp__brand--icon:focus-visible .admin-bar-pp__brand-hover { display: block; }
.admin-bar-pp--dark .admin-bar-pp__nav { gap: 0; font-size: var(--text-mono); }
.admin-bar-pp--dark .admin-bar-pp__nav a,
.admin-bar-pp--dark .admin-bar-pp__nav .admin-bar-pp__item-trigger { color: var(--adminbar-muted); }
.admin-bar-pp--dark .admin-bar-pp__count {
	background: var(--adminbar-bg-hover);
	border-color: color-mix(in srgb, var(--adminbar-muted) 30%, transparent);
	color: var(--adminbar-muted);
}
.admin-bar-pp--dark .admin-bar-pp__meta { gap: 0; align-items: stretch; }
.admin-bar-pp--dark .admin-bar-pp__howdy,
.admin-bar-pp--dark .admin-bar-pp__clock {
	display: inline-flex;
	align-items: center;
	padding-inline: 10px;
	color: var(--adminbar-muted);
	font-size: var(--text-label);
}
.admin-bar-pp--dark .admin-bar-pp__glyph { align-self: center; margin-inline: 4px; fill: var(--adminbar-muted); }
/* wp-admin link blue — the one colored item on the black bar */
.admin-bar-pp--dark .admin-bar-pp__cta {
	display: inline-flex;
	align-items: center;
	padding-inline: 10px;
	color: var(--adminbar-link-hover);
	font-size: var(--text-label);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .12s ease;
}
.admin-bar-pp--dark .admin-bar-pp__cta:hover {
	background: var(--adminbar-bg-hover);
	text-decoration: underline;
}
/* wp-admin's own mobile bar height */
@media (max-width: 782px) {
	.admin-bar-pp--dark .admin-bar-pp__inner { min-height: 46px; }
}
@media (max-width: 640px) {
	.admin-bar-pp--dark .admin-bar-pp__howdy { display: none; }
}

/* ---------- products dropdown — a quiet menu-bar submenu ----------
   CSS-only: hover / focus-within on the Products item. Light paper panel
   on BOTH bars (macOS menu over the dark bar too) — rules sit after the
   dark-bar block so row links win its muted/flat treatment. */
.admin-bar-pp__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: stretch; /* dropdown hangs from the bar edge — no hover gap */
}
.admin-bar-pp__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 250px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow-window);
	opacity: 0;
	visibility: hidden;
	translate: 0 6px;
	transition: opacity .16s var(--ease-out), translate .16s var(--ease-out), visibility 0s linear .16s;
}
.admin-bar-pp__item:hover .admin-bar-pp__dropdown,
.admin-bar-pp__item:focus-within .admin-bar-pp__dropdown {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}
.admin-bar-pp__nav .admin-bar-pp__dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 7px;
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
}
.admin-bar-pp__nav .admin-bar-pp__dropdown a:hover {
	background: var(--band);
	color: var(--ink);
	text-decoration: none;
}
.admin-bar-pp__dropdown img { width: 18px; height: 18px; flex: none; display: block; }
.admin-bar-pp__dropdown-text { display: block; }
.admin-bar-pp__dropdown-job {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-label);
	font-weight: 400;
}
/* Liquid Glass panel (v5.4 material) — the page glows through the menu.
   Solid --surface above stays as the no-backdrop fallback. */
@supports (backdrop-filter: blur(1px)) {
	.admin-bar-pp__dropdown {
		background: linear-gradient(
			color-mix(in srgb, var(--surface) 86%, transparent),
			color-mix(in srgb, var(--surface) 72%, transparent)
		);
		backdrop-filter: blur(22px) saturate(1.45);
		-webkit-backdrop-filter: blur(22px) saturate(1.45);
	}
	.admin-bar-pp__nav .admin-bar-pp__dropdown a:hover {
		background: color-mix(in srgb, var(--band) 72%, transparent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.admin-bar-pp__dropdown { transition: none; translate: 0 0; }
}
@media (max-width: 820px) {
	/* touch/tight bars: the Products link alone goes to /#plugins */
	.admin-bar-pp__dropdown { display: none; }
}

/* Bar 2: the main product header — white, sticky right under the admin bar.
   Icon + name, in-page anchors, the one accent CTA pill. */
.product-bar {
	position: sticky;
	top: 32px;
	z-index: 49;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.product-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: 56px;
}
.product-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-body);
	letter-spacing: -0.01em;
}
.product-bar__brand:hover { text-decoration: none; }
.product-bar__icon { width: 24px; height: 24px; display: block; }
/* the mark, painted in the product accent instead of shipping a second SVG.
   Same mask technique as the relay badge: the source file is a flat black
   mark, right on light chips, and a mask lets it take a token colour here. */
.product-bar__icon--mark {
	background-color: var(--accent);
	-webkit-mask-image: var(--mark);
	mask-image: var(--mark);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.product-bar__nav { display: flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; }
.product-bar__nav a {
	color: var(--ink-soft);
	padding: 6px 12px;
	border-radius: 6px;
	transition: color .12s ease, background-color .12s ease;
}
.product-bar__nav a:hover { color: var(--ink); background: var(--band); text-decoration: none; }
/* CTA is a plain link (home-header pattern) — ink, accent-independent */
.product-bar__cta {
	margin-left: auto;
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}
.product-bar__cta:hover { text-decoration: underline; }
@media (max-width: 782px) {
	.product-bar { top: 46px; }
}
@media (max-width: 640px) {
	.product-bar__nav { display: none; }

	/* ...except the one link that leaves the page. Dropping Features/Plans/FAQ
	   on a phone costs nothing, because they are anchors and you can scroll to
	   all three. Dropping Cookbook removes the only route to it, since it is
	   deliberately not in the site nav — so the bar stays when it carries that
	   link, and only the anchors inside it go. */
	.product-bar__nav:has(.product-bar__nav-away) { display: flex; }
	.product-bar__nav a:not(.product-bar__nav-away) { display: none; }
}

/* ---------- admin window — the one demo container ---------- */
.admin-frame { margin: 0; }

.admin-frame__win {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-window);
	overflow: hidden;
	box-shadow: var(--shadow-window);
}

/* floating on a wallpaper (desktop hero, product hero) */
.admin-frame--float .admin-frame__win { box-shadow: var(--shadow-float); }

/* Liquid Glass, BAR ONLY (Fahim) — on every painted stage the browser bar
   frosts over the artwork while the body stays solid paper: the window shell
   goes transparent (the bar's backdrop becomes the painting) and the opaque
   scene/media layers below cover the body. Solid rules above are the
   no-backdrop-filter fallback. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* transparent ONLY behind the 44px bar — solid paper below, so the
	   window's rounded corners stay clean (a fully transparent shell let
	   slivers of painting leak at the corner antialiasing) */
	.desktop__stage .admin-frame__win,
	.product-hero__win .admin-frame__win,
	.canvas .admin-frame__win { background: linear-gradient(to bottom, transparent 0 44px, var(--surface) 44px); }
	.desktop__stage .admin-frame__bar,
	.product-hero__win .admin-frame__bar,
	.canvas .admin-frame__bar {
		/* calm glass, no hot top highlight — the bright spec rim dissolved the
		   window's corners against the wallpaper. White now, and subtler
		   (2026-08-25): "make bar white… with liqued glass effect subtle". The
		   paper is let up to 82% and the blur down, so the wallpaper reads as a
		   hint of colour through the bar rather than a frosted grey slab. */
		background: color-mix(in srgb, var(--surface) 82%, transparent);
		-webkit-backdrop-filter: blur(10px) saturate(1.18);
		backdrop-filter: blur(10px) saturate(1.18);
	}
	/* a definite edge: an ink-tinted hairline that reads on ANY painting
	   region — the pale --line border alone vanished on bright crops and the
	   corners looked broken */
	.desktop__stage .admin-frame__win,
	.product-hero__win .admin-frame__win,
	.canvas .admin-frame__win { box-shadow: 0 0 0 1px rgb(28 27 24 / 0.12), var(--shadow-float); }
}

.admin-frame__bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 44px;
	padding-inline: var(--space-4);
	border-bottom: 1px solid var(--line);
	/* white, not --surface-alt (Fahim, 2026-08-25: "make bar white"). The bar
	   now separates from the body by its hairline and, on a wallpaper, by the
	   glass below — not by being a shade greyer. */
	background: var(--surface);
	/* own top radius, exactly the window's inner radius: backdrop-filter does
	   not honor the ancestor's rounded overflow clip, so a radius-less frosted
	   bar painted SQUARE corners over the rounded window */
	border-radius: calc(var(--r-window) - 1px) calc(var(--r-window) - 1px) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--ink-soft);
}

/* real traffic lights (Fahim, 2026-08-25: "3 dot make real color of mac").
   The hues are macOS's own, held in tokens.css as DATA. No border: a mac light
   has no ring, it has a slightly darker edge of itself, which is what the
   inset shadow draws — a 1px --line-strong ring around a 10px dot ate most of
   the colour and was why these read grey in the first place. */
.admin-frame__lights { display: flex; gap: var(--space-2); flex: none; }
.admin-frame__lights i {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--mac-red);
	box-shadow: inset 0 0 0 1px rgb(23 23 23 / 0.12);
}
.admin-frame__lights i:nth-child(2) { background: var(--mac-yellow); }
.admin-frame__lights i:nth-child(3) { background: var(--mac-green); }

/* centered address pill */
.admin-frame__url { flex: 1; display: flex; justify-content: center; min-width: 0; }
/* plain text in the bar — no pill chrome (Fahim: "remove text rounded things") */
.admin-frame__url span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.admin-frame__url b { color: var(--ink); font-weight: 500; }

.admin-frame__filename { flex: none; color: var(--ink-soft); }

.admin-frame__media { background: var(--surface-alt); }
/* real media (B4 screencasts) gets its space pre-booked — no layout shift
   when a lazy video/img swaps in. CSS scenes keep their own min-height flow. */
.admin-frame__media img,
.admin-frame__media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; height: auto; }
.admin-frame__media .placeholder-slot { border: none; border-radius: 0; min-height: 320px; }

/* mono .mov caption under the window (heyclicky) */
.admin-frame__caption {
	margin-top: var(--space-3);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}

/* ---------- desktop props — small, tilted, heyclicky scale ---------- */
.prop {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: var(--text-micro);
}
a.prop:hover { text-decoration: none; }
a.prop:hover .prop__icon { transform: scale(1.06); }
.prop__icon {
	width: 30px;
	height: 30px;
	fill: var(--ink-soft);
	transition: transform .15s ease;
}
/* the trash/file strokes read at 30px because they're drawn at 2/44 ≈ 3px
   effective — no redraw needed */

/* sticky note — hand voice, real data only */
.prop--note {
	background: var(--marker-soft);
	color: var(--ink);
	font-family: var(--font-hand);
	font-size: var(--text-lg);
	line-height: 1.15;
	text-shadow: none;
	padding: var(--space-2) var(--space-3);
	max-width: 120px;
	rotate: -2deg;
	box-shadow: 0 1px 2px rgb(28 27 24 / .08), 0 8px 20px -6px rgb(28 27 24 / .16);
}

/* kaomoji doodle — the one decorative prop (owner-sanctioned). Sits on the
   painting's dark forest region, so it speaks in paper, not ink. */
.prop--kaomoji {
	font-size: var(--text-mono);
	color: var(--bg);
	opacity: .9;
	rotate: -6deg;
	letter-spacing: 0.02em;
}

/* receipt — a small paper strip with a torn-off bottom edge (the tier__rule
   repeating-mask trick, vertical flip). Prints real prices only. */
.prop--receipt {
	background: var(--surface);
	padding: var(--space-2) var(--space-3) var(--space-3);
	rotate: 2.5deg;
	gap: 2px;
	box-shadow: 0 1px 2px rgb(28 27 24 / .08), 0 8px 20px -6px rgb(28 27 24 / .16);
	/* the tear: bottom 6px punched into teeth by a repeating mask */
	-webkit-mask-image: linear-gradient(#000 calc(100% - 6px), transparent calc(100% - 6px)), repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px);
	-webkit-mask-size: 100% 100%, 100% 6px;
	-webkit-mask-position: 0 0, 0 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: linear-gradient(#000 calc(100% - 6px), transparent calc(100% - 6px)), repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 10px);
	mask-size: 100% 100%, 100% 6px;
	mask-position: 0 0, 0 100%;
	mask-repeat: no-repeat;
}
.prop__receipt-line { color: var(--ink-soft); letter-spacing: 0.03em; }
.prop__receipt-line--sub { color: var(--ink); font-weight: 700; }

/* claude cursor — a multiplayer-canvas pointer resting on the window it
   drives. Coral = Claude's own hue (sanctioned brand-data, tokens.css). */
.prop--cursor { position: relative; }
.prop--cursor .prop__pointer {
	width: 18px;
	height: 18px;
	fill: var(--ink);
	stroke: var(--surface);
	stroke-width: 1.5;
}
.prop--cursor .prop__tag {
	position: absolute;
	top: 15px;
	left: 13px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--claude-coral);
	color: var(--surface);
	font-size: var(--text-micro);
	white-space: nowrap;
}
/* idle drift — alive, barely (motion-safe; heyclicky props don't dance) */
@keyframes pp-drift { to { translate: 6px -4px; } }
@media (prefers-reduced-motion: no-preference) {
	.prop--cursor { animation: pp-drift 5s ease-in-out infinite alternate; }
}

/* ---------- notice — founder card: highlighter + scrawl ---------- */
.admin-notice {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-window);
}
.admin-notice__body { max-width: 58ch; }
.admin-notice__body p { margin-bottom: var(--space-3); }
.admin-notice__sig {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px dotted var(--line-strong);
}
.admin-notice__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.admin-notice__photo--pending {
	display: grid;
	place-items: center;
	background: var(--tint);
	border: 1.5px dashed var(--line);
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
}
.admin-notice__name { font-weight: 600; line-height: 1.3; }
.admin-notice__handle { font-family: var(--font-mono); font-size: var(--text-mono); }
.admin-notice__scrawl {
	margin-left: auto;
	font-family: var(--font-hand);
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
	rotate: -3deg;
}

/* ---------- plugin card (404 shelf) ---------- */
.plugin-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.plugin-card__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.plugin-card__icon {
	width: 44px; height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--r-window);
	background: var(--accent);
	color: var(--on-accent);
	font: 600 var(--text-lg)/1 var(--font-mono);
}
/* A real mark carries its own colour (saddle's is black, loggle's indigo), so
   it cannot sit on the solid accent tile the initial keycap was drawn for.
   The tile becomes a wash of the same accent instead, and the logo reads. */
.plugin-card__icon--logo {
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	border: 1px solid var(--line);
}
.plugin-card__icon--logo img { display: block; width: 24px; height: 24px; }
.plugin-card__name { font-size: var(--text-h3); font-weight: 600; margin: 0; }
.plugin-card__job { color: var(--ink-soft); margin: var(--space-1) 0 0; }
.plugin-card__meta {
	border-top: 1px solid var(--line);
	padding-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: center;
}
.plugin-card__stars { color: var(--ink); letter-spacing: 2px; }
.chip {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-alt);
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink-soft);
}
.plugin-card__links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-small);
}
.plugin-card__free { color: var(--ink-soft); }
.plugin-card__free:hover { color: var(--ink); }
/* accent as TEXT on white, not as a fill — a light accent (Waggle's gold is
   3.25:1 raw) has to be darkened toward ink to stay readable. Mixing keeps the
   product's hue while clearing 4.5:1 for every accent we ship. */
.plugin-card__pro {
	color: color-mix(in srgb, var(--accent) 70%, var(--ink));
	font-weight: 500;
}

/* ---------- canvas — quiet bordered panel holding a window (cursor) ---------- */
.canvas {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r-canvas);
	overflow: hidden;
	/* the page's painting under the window (inline wallpaper from the
	   template); --band is the pre-load fallback */
	background-color: var(--band);
	background-size: cover;
	background-position: center;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}
.canvas .admin-frame {
	max-width: 720px;
	margin-inline: auto;
}
.canvas .admin-frame__win { box-shadow: var(--shadow-float); }
.canvas--offset { padding-bottom: 0; }
.canvas--offset .admin-frame__win {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

/* ---------- alive scenes — CSS-drawn wp-admin vignettes ---------- */
.scene {
	--scene-ease: cubic-bezier(.22, .61, .36, 1);
	display: flex;
	min-height: 300px;
	background: var(--surface);
	font-family: var(--font-sans); /* real UIs speak sans; mono = data */
	font-size: var(--text-mono);
	color: var(--ink-soft);
}
.scene--compact { min-height: 240px; }
.scene__main { flex: 1; min-width: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* min-width 0: a nowrap chip may crop, never widen the scene */

/* the AI apps saddle plugs into — context strip, not a beat */
.scene__apps {
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: 0.03em;
	color: var(--ink-soft);
	border-bottom: 1px dotted var(--line-strong);
	padding-bottom: var(--space-2);
}
.scene__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); flex: 1; }
.scene__cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.scene__col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* hero cut — the roomy product-hero scale of a scene. Height gives the
   880px window desktop-screenshot proportions (~1.65:1, cursor's 1080×620);
   the old 380px read as a squat letterbox next to the saddle browser mock. */
.scene--hero { min-height: 490px; }
.scene--hero .scene__main { padding: var(--space-7); gap: var(--space-5); }
.scene--hero .scene__viz-head b { font-size: var(--text-lg); }
.scene--hero .scene__stat b { font-size: var(--text-body); }
.scene--hero .scene__stat { padding: var(--space-3) var(--space-4); }
.scene--hero .scene__rows, .scene--hero .scene__bars { gap: var(--space-4); }
.scene__chat { display: flex; flex-direction: column; gap: var(--space-3); border-right: 1px solid var(--line); padding-right: var(--space-5); }
.scene__page { display: flex; flex-direction: column; gap: var(--space-3); }
/* assistant output — plain text, no bubble (Claude/Codex style) */
.scene__reply {
	align-self: flex-start;
	color: var(--ink);
	opacity: 0;
	animation: scene-reply 10s var(--scene-ease) infinite;
}
@keyframes scene-reply {
	0%, 28% { opacity: 0; transform: translateY(4px); }
	34%, 94% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}
@media (max-width: 640px) { .scene__cols { grid-template-columns: 1fr; } .scene__chat { border-right: none; padding-right: 0; } }

/* the user's prompt — Claude Desktop / Codex voice: left, mono, ❯ marker */
.scene__cmd {
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: var(--text-mono);
	color: var(--ink);
	overflow: hidden;
	white-space: nowrap;
}
.scene__cmd b { color: var(--accent); font-weight: 700; }
.scene__cmd span {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	max-width: 24ch;
	border-right: 1px solid var(--ink-soft);
	animation: scene-type 10s steps(24) infinite;
}
@keyframes scene-type {
	0% { width: 0; }
	24%, 92% { width: 24ch; }
	100% { width: 24ch; opacity: 0; }
}

/* skeleton blocks appearing */
.scene__block {
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-inner);
	background: repeating-linear-gradient(-45deg, var(--surface-alt) 0 10px, var(--band) 10px 20px);
	opacity: 0;
	transform: translateY(8px);
	animation: scene-block 10s var(--scene-ease) infinite;
}
.scene__block--tall { height: 88px; }
.scene__block:nth-child(2) { animation-delay: .35s; }
.scene__block:nth-child(3) { animation-delay: .7s; }
@keyframes scene-block {
	0%, 40% { opacity: 0; transform: translateY(8px); }
	48%, 94% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}

/* status chip */
.scene__chip {
	align-self: flex-start;
	border-radius: 999px;
	padding: 3px 12px;
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
	color: var(--ink);
	opacity: 0;
	animation: scene-chip 10s var(--scene-ease) infinite;
}
/* in the cropped hero peek windows a wrapped pill reads broken — keep one line,
   let the tail crop with the window like everything else in the peek */
.scene--compact .scene__chip { white-space: nowrap; }
@keyframes scene-chip {
	0%, 58% { opacity: 0; transform: translateY(4px); }
	66%, 95% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}

/* streaming lines (waggle) */
.scene__line {
	height: 10px;
	border-radius: 999px;
	background: var(--line-strong);
	opacity: 0;
	animation: scene-line 10s var(--scene-ease) infinite;
}
.scene__line--w60 { width: 60%; }
.scene__line--w80 { width: 80%; }
.scene__line--w45 { width: 45%; }
/* stagger by sibling order, not absolute position — lines follow apps/cmd/reply */
.scene__line + .scene__line { animation-delay: .5s; }
.scene__line + .scene__line + .scene__line { animation-delay: 1s; }
@keyframes scene-line {
	0%, 26% { opacity: 0; }
	34%, 94% { opacity: 1; }
	100% { opacity: 0; }
}
/* tool-run rows (saddle) — real MCP tool names ticking through */
.scene__tools { display: flex; flex-direction: column; gap: var(--space-2); }
.scene__tool {
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--ink-soft);
	padding-left: 14px;
	text-indent: -14px; /* hanging indent — wrapped rows read as terminal continuation */
	opacity: 0;
	transform: translateY(4px);
	animation: scene-tool 10s var(--scene-ease) infinite;
}
.scene__tool b { font-weight: 400; color: var(--ink); }
.scene__tool:nth-child(2) { animation-delay: .5s; }
.scene__tool:nth-child(3) { animation-delay: 1s; }
.scene__tool:nth-child(4) { animation-delay: 1.5s; }
@keyframes scene-tool {
	0%, 38% { opacity: 0; transform: translateY(4px); }
	44%, 92% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}

/* unsplash photo tiles (saddle) — real photos settle in */
.scene__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.scene__photo {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--r-inner);
	border: 1px solid var(--line);
	background: var(--surface-alt);
	opacity: 0;
	transform: translateY(10px) scale(.98);
	animation: scene-photo 10s var(--scene-ease) infinite;
}
.scene__photo { filter: saturate(.22) contrast(.95); } /* muted thumbnails — the scene stays near-monochrome */
.scene__photos picture { display: contents; } /* imgs are the grid items; picture only swaps webp/jpg */
.scene__photos source { display: none; } /* keep <source> out of the grid — display:contents would promote it */
.scene__photos picture:nth-child(2) .scene__photo { animation-delay: .3s; }
.scene__photos picture:nth-child(3) .scene__photo { animation-delay: .6s; }
@keyframes scene-photo {
	0%, 48% { opacity: 0; transform: translateY(10px) scale(.98); }
	56%, 94% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}

/* mini pricing tiers assembling (saddle) — the demo MATCHES the prompt */
.scene__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.scene__tier {
	border: 1px solid var(--line);
	border-radius: var(--r-inner);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	opacity: 0;
	transform: translateY(8px);
	animation: scene-photo 10s var(--scene-ease) infinite;
	animation-delay: .5s;
}
.scene__tier:nth-child(2) { animation-delay: .75s; }
.scene__tier:nth-child(3) { animation-delay: 1s; }
.scene__tier i { height: 7px; border-radius: 999px; background: var(--line); width: 55%; }
.scene__tier .scene__tier-price { height: 13px; width: 40%; background: var(--line-strong); }
.scene__tier i:nth-child(3), .scene__tier i:nth-child(4) { width: 80%; }
.scene__tier b {
	height: 18px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 85%, var(--surface));
	margin-top: 2px;
}

/* AI Visibility (waggle) — the shipped headline + "Crawlers by company" list */
.scene__viz-head { color: var(--ink); }
.scene__viz-head b { font-size: var(--text-body); font-weight: 700; }
.scene__panel-label {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}
.scene__bars { display: flex; flex-direction: column; gap: var(--space-3); }
.scene__bar {
	display: grid;
	grid-template-columns: minmax(96px, auto) 1fr auto;
	align-items: center;
	gap: var(--space-3);
}
.scene__bar-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); white-space: nowrap; }
.scene__bar-label b { font-weight: 400; color: var(--ink-soft); font-size: var(--text-micro); }
.scene--compact .scene__bar-label b { display: none; } /* bot list needs width the hero side windows lack */
/* company identity lives in a small dot; bars stay near-monochrome (matches
   Waggle's own calm Geist-style admin — color is identity, not decoration) */
.scene__bar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bar-color, var(--ink-soft)); flex: none; }
.scene__bars .scene__bar-track i { background: color-mix(in srgb, var(--ink) 45%, var(--surface)); }
.scene__bar-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--surface-alt);
	overflow: hidden;
}
.scene__bar-track i {
	position: absolute;
	inset: 0;
	width: var(--bar-width, 50%);
	border-radius: 999px;
	background: var(--bar-color, var(--accent));
	transform: scaleX(0);
	transform-origin: left center;
	animation: scene-grow 10s var(--scene-ease) infinite;
}
.scene__bar:nth-child(2) .scene__bar-track i { animation-delay: .35s; }
.scene__bar:nth-child(3) .scene__bar-track i { animation-delay: .7s; }
.scene__bar-count { color: var(--ink); font-size: var(--text-micro); }
@keyframes scene-grow {
	0%, 10% { transform: scaleX(0); }
	32%, 94% { transform: scaleX(1); }
	100% { transform: scaleX(0); }
}

/* AI fix chips (waggle) */
.scene__fixes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scene__fixes .chip { opacity: 0; animation: scene-chip 10s var(--scene-ease) infinite; }
.scene__fixes .chip:nth-child(2) { animation-delay: .5s; }

/* mini stat cards (loggle) — @plugpress/ui StatCard voice */
.scene__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.scene__stat {
	border: 1px solid var(--line);
	border-radius: var(--r-inner);
	padding: var(--space-2) var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	opacity: 0;
	animation: scene-stat 10s var(--scene-ease) infinite;
}
.scene__stat span { font-size: var(--text-micro); color: var(--ink-soft); }
.scene__stat b { font-size: var(--text-small); color: var(--ink); }
.scene__stat:nth-child(2) { animation-delay: .2s; }
.scene__stat:nth-child(3) { animation-delay: .4s; }
@keyframes scene-stat {
	0%, 6% { opacity: 0; }
	14%, 95% { opacity: 1; }
	100% { opacity: 0; }
}

/* Sources card (loggle) — head + channel rows, AI (referred) pinned first.
   Bar = visitors, right value = revenue: few AI visitors, most of the money. */
.scene__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--ink);
	font-weight: 600;
}
.scene__range {
	font-size: var(--text-micro);
	color: var(--ink-soft);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 1px 8px;
}
.scene__rows { display: flex; flex-direction: column; gap: var(--space-3); }
.scene__row {
	display: grid;
	grid-template-columns: minmax(88px, auto) 1fr auto auto;
	align-items: center;
	gap: var(--space-3);
}
.scene__row-label { color: var(--ink); white-space: nowrap; }
.scene__row--accent .scene__row-label { font-weight: 600; }
.scene__row .scene__bar-track i { background: var(--line-strong); }
.scene__row--accent .scene__bar-track i { background: var(--accent); }
.scene__row:nth-child(2) .scene__bar-track i { animation-delay: .35s; }
.scene__row:nth-child(3) .scene__bar-track i { animation-delay: .7s; }
/* --sub is the secondary metric, --val the one the table is sorted by. Named
   by role, not by metric: --sub used to be "-vis" and --val "-rev", which is
   exactly backwards now that the bold column is visitors (2026-08-01). */
.scene__row-sub { color: var(--ink-soft); font-size: var(--text-micro); }
.scene--compact .scene__row-sub { display: none; } /* second column needs width the hero side windows lack */
.scene__row-val {
	color: var(--ink);
	font-size: var(--text-micro);
	font-weight: 700;
	min-width: 52px;
	text-align: right;
}

/* browser scene (saddle product hero) — a modern minimal landing page that
   ASSEMBLES as the CLI prompt runs: nav → centered hero → big image →
   testimonial cards with avatars. The Claude CLI lives in its OWN window
   (.cli-window) — it's a separate app. */
.scene--browser { min-height: 360px; }
.scene--browser .scene__main { padding: var(--space-6) var(--space-7); gap: var(--space-5); }
/* everything in soft grays — no ink-black blocks; the darkest bar is a 35% mix */
.scene__site-nav { display: flex; align-items: center; gap: var(--space-3); }
.scene__site-nav b { width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 32%, var(--surface)); flex: none; }
.scene__site-nav i { width: 36px; height: 7px; border-radius: 999px; background: var(--line); }
.scene__site-nav .scene__site-cta { margin-left: auto; width: 52px; height: 18px; background: color-mix(in srgb, var(--ink) 28%, var(--surface)); }
/* split hero — copy bars left, media well right. simple. */
.scene__site-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--space-6);
	align-items: center;
	flex: 1;
}
.scene__site-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.scene__site-h { height: 14px; border-radius: 999px; width: 78%; background: color-mix(in srgb, var(--ink) 35%, var(--surface)); }
.scene__site-h--sub { height: 8px; width: 92%; background: var(--line-strong); }
.scene__site-h--short { width: 60%; }
.scene__site-btn { width: 84px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 30%, var(--surface)); margin-top: var(--space-2); }
/* the media slot — holds the page's painting (inline wallpaper from
   mock-scene.php) inset in a white frame: the heyclicky border. The old
   skeleton stripes live on as the pre-load background-color fallback. */
.scene__site-media {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	border: 6px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
	background-color: var(--surface-alt);
	background-size: cover;
	background-position: center;
}
.scene__site-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.scene__site-card {
	border: 1px solid var(--line);
	border-radius: var(--r-inner);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.scene__site-card i { height: 7px; border-radius: 999px; background: var(--line-strong); width: 85%; }
.scene__site-card i:last-child { width: 60%; background: var(--line); }
.scene__site-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ink) 18%, var(--surface));
	border: 1px solid var(--line);
}
/* the page assembles ONCE as the prompt types, then stays built — a hero
   mock must never sit empty (the infinite scene loop is for small scenes).
   Clicking the mock replays the build (site.js replay egg). */
@keyframes cli-build {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.scene--browser .scene__site-nav,
.scene--browser .scene__site-split,
.scene--browser .scene__site-card {
	animation: cli-build .5s var(--scene-ease) backwards;
}
.scene--browser .scene__site-nav { animation-delay: .5s; }
.scene--browser .scene__site-split { animation-delay: .9s; }
.scene--browser .scene__site-card { animation-delay: 1.4s; }
.scene--browser .scene__site-card:nth-child(2) { animation-delay: 1.6s; }
.scene--browser .scene__site-card:nth-child(3) { animation-delay: 1.8s; }

/* narrow: the split hero and the card row stack rather than crushing into
   200px columns — same breakpoint the two-column chat scene already uses.
   (A flat-hero-only scale-up block lived here for one session; the home lead
   window is back to ~820px — product-hero scale — so the default strokes fit.) */
@media (max-width: 640px) {
	.scene__site-split { grid-template-columns: 1fr; }
	.scene__site-cards { grid-template-columns: 1fr; }
}

/* the Claude CLI as a proper macOS terminal window overlapping the browser's
   bottom-left corner — two apps on the desk. Real mac chrome: lighter title
   bar with the classic traffic lights + centered title, dark terminal body,
   Claude-coral prompt. Palette = admin-bar darks + the mac/claude data hues. */
/* room for the CLI window hanging off the browser window's bottom-left. Two
   classes deep on purpose: `.desktop__stage`'s padding shorthand lives in
   sections.css, which loads after this file, so a single-class rule here loses
   the cascade and the terminal gets clipped by the stage's overflow. */
.desktop__stage.desktop__stage--cli { padding-bottom: var(--space-8); }
/* Light terminal (iTerm2-daylight / Cursor-CLI marketing look — Fahim's
   reference, 2026-07-27): paper window, mono ink, coral prompt. */
.cli-window {
	position: absolute;
	left: clamp(1.25rem, 6vw, 7rem);
	/* clear of the stage floor, not flush to it: the tilt below swings the
	   lower corner ~4px past the layout box, which a painted stage (overflow:
	   hidden) would otherwise shave off. */
	bottom: var(--space-6); /* real air under the window — it sat 6px off the stage edge */
	z-index: 3;
	width: min(440px, 82%);
	border-radius: var(--r-window);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 0 0 1px rgb(28 27 24 / .08), var(--shadow-float);
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	rotate: var(--tilt-3);
}
@media (prefers-reduced-motion: no-preference) {
	.cli-window { animation: pp-settle .7s var(--ease-out) .15s backwards; }
}
.cli-window__bar {
	display: flex;
	align-items: center;
	height: 34px;
	padding-inline: var(--space-4);
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
}
.cli-window__lights { display: flex; gap: 7px; flex: none; }
.cli-window__lights i { width: 11px; height: 11px; border-radius: 50%; }
.cli-window__lights i:nth-child(1) { background: var(--mac-red); }
.cli-window__lights i:nth-child(2) { background: var(--mac-yellow); }
.cli-window__lights i:nth-child(3) { background: var(--mac-green); }
.cli-window__title {
	flex: 1;
	text-align: center;
	color: var(--ink-soft);
	font-size: var(--text-label);
}
.cli-window__bar::after { content: ''; width: 47px; flex: none; } /* balances the lights so the title truly centers */
.cli-window__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	color: var(--ink);
}
/* connect status: green dot + muted line — "how MCP plugs in", one glance */
.cli-window__connect {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-soft);
	font-size: var(--text-micro);
}
.cli-window__connect i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mac-green);
	flex: none;
}
.cli-window .scene__cmd { color: var(--ink); font-size: var(--text-micro); }
.cli-window .scene__cmd b { color: var(--claude-coral); }
.cli-window .scene__cmd span { border-right-color: var(--ink-soft); }
/* tool-call rows — appear one by one (delays inline per row) */
.cli-window__tool {
	color: var(--ink-soft);
	animation: cli-build .5s var(--scene-ease) backwards;
}
.cli-window__tool b { font-weight: 400; color: var(--mac-green); }
.cli-window__tool-meta { color: color-mix(in srgb, var(--ink-soft) 65%, transparent); }
/* the follow-up box — an input at rest, waiting */
.cli-window__input {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-2);
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	color: var(--ink-soft);
	animation: cli-build .5s var(--scene-ease) backwards;
}
.cli-window__input b { font-weight: 400; color: var(--claude-coral); }
/* the terminal types once and HOLDS its transcript — same contract as the page
   it built. Both lines used to loop `scene-reply`, which blanked them for the
   tail of every 10s cycle and left an empty black box sitting next to a
   finished website. `cli-type` likewise replaces the looping `scene-type`,
   whose 100% keyframe dropped the prompt to opacity 0. */
@keyframes cli-type { from { width: 0; } to { width: 24ch; } }
.cli-window .scene__cmd span { animation: cli-type 1.2s steps(24) both; }
.scene__cli-reply { color: var(--ink); animation: cli-build .5s var(--scene-ease) 1.5s backwards; }
.scene__cli-reply b { font-weight: 400; color: var(--mac-green); }
@media (max-width: 960px) {
	/* stacks under the browser with a small overlap — still two windows.
	   Two classes deep to match the desktop rule it has to beat. */
	.desktop__stage.desktop__stage--cli { padding-bottom: 0; }
	.cli-window {
		position: relative;
		left: auto;
		bottom: auto;
		margin: calc(-1 * var(--space-5)) auto 0;
		width: min(420px, 92%);
		rotate: 0deg;
	}
}

/* scene replay egg — clicking the product-hero scene (or CLI) restarts both (site.js) */
.scene.is-resetting *, .cli-window.is-resetting * { animation: none !important; }
@media (pointer: fine) {
	.pp-js .product-hero__win .scene, .pp-js .cli-window { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
	.scene__cmd span { animation: none; width: 24ch; border-right: none; }
	.scene__block, .scene__chip, .scene__line, .scene__reply, .scene__tool,
	.scene__photo, .scene__tier, .scene__fixes .chip, .scene__stat,
	.scene__cli-reply, .cli-window__tool, .cli-window__input,
	.scene--browser .scene__site-nav,
	.scene--browser .scene__site-split,
	.scene--browser .scene__site-card { animation: none; opacity: 1; transform: none; }
	.scene__bar-track i { animation: none; transform: scaleX(1); }
}

/* ---------- marquee — white tape strip, apple-calm ----------
   Display face (the claims are prose, not data — sans is the honest voice),
   hairlines not dots, generous air, long fades, pauses under the cursor. */
.marquee {
	overflow: hidden;
	padding-block: var(--space-4);
	/* brand-blue tape, surface text — the same pre-vetted pair as .btn--primary;
	   a colored slab needs no hairlines */
	background: var(--blue);
	/* body face, not display: Bricolage only ships 600–800, so any "400" on it
	   silently renders semi-bold. Instrument Sans has a true regular. */
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--surface);
	white-space: nowrap;
	rotate: -1.2deg; /* the little angle — edge fade hides the corner gaps */
	margin-block: var(--space-3); /* room for the tilt's ±16px overhang */
	/* long soft fades at the edges — #000 here is mask alpha data, not a color
	   (same sanctioned pattern as the .tier__rule mask) */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee__track { display: inline-block; animation: marquee 100s linear infinite; }
/* each claim is its own span; the separator is a drawn dot, not a typed "·" —
   even air on both sides of every item, dot optically centered */
.marquee__item { position: relative; display: inline-block; padding-inline: 1.75rem; }
.marquee__item::after {
	content: '';
	position: absolute;
	right: -2px;
	top: 50%;
	translate: 0 -50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--surface) 50%, transparent); /* quiet dot on the blue */
}
.marquee:hover .marquee__track { animation-play-state: paused; } /* readable on intent */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- hover lifts ---------- */
.trio__panel, .tier, .proof-item, .post-card--lead { transition: transform .15s var(--ease-out), border-color .15s ease, box-shadow .15s ease; }
.trio__panel:hover, .tier:hover, .proof-item:hover, .post-card--lead:hover { transform: translateY(-2px); border-color: var(--line-strong); }
/* pricing windows feel physical: a whisper of tilt + a real elevation step */
.pricing__grid .tier:hover { transform: translateY(-2px) rotate(-0.4deg); box-shadow: var(--shadow-lift), var(--shadow-window); }
.pricing__grid .tier:nth-child(even):hover { transform: translateY(-2px) rotate(0.4deg); }
/* the recommended card keeps its glow ring while lifting */
.pricing__grid .tier--popular:hover {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-lift), var(--shadow-window);
}
/* sticky notes straighten when touched — they feel peelable */
.prop--note { transition: rotate .25s ease; }
.prop--note:hover { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
	.trio__panel:hover, .tier:hover, .proof-item:hover, .post-card--lead:hover, .pricing__grid .tier:hover { transform: none; }
	.prop--note { transition: none; }
	.prop--note:hover { rotate: -2deg; }
}