/* 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 */
.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; }
/* icon + wordmark (2026-07-28) — the mark lives on the brand link itself, so
   it survives every breakpoint (the old dead-center twin hid ≤820px) */
.admin-bar-pp__brand { display: inline-flex; align-items: center; gap: 8px; }
.admin-bar-pp__brand > img { display: block; }
/* 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 {
	color: var(--ink-soft);
	padding: 6px 12px;
	border-radius: 6px;
	transition: color .12s ease, background-color .12s ease;
}
.admin-bar-pp__nav a:hover { color: var(--ink); background: var(--band); text-decoration: none; }
.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); }
.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 { padding: 4px 8px; font-size: var(--text-mono); }
}
@media (max-width: 420px) {
	.admin-bar-pp__nav { gap: 0; }
	.admin-bar-pp__nav a { 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 {
	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 {
	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 { 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; }
.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; }
}

/* ---------- 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: denser + less blur, no hot top highlight — the bright
		   spec rim dissolved the window's corners against the painting */
		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);
	}
	/* 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);
	background: var(--surface-alt);
	/* 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);
}

/* neutral traffic lights — window semantics, not decoration */
.admin-frame__lights { display: flex; gap: var(--space-2); flex: none; }
.admin-frame__lights i {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--line);
	border: 1px solid var(--line-strong);
}

/* 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);
}
.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; }
.scene__row-vis { color: var(--ink-soft); font-size: var(--text-micro); }
.scene--compact .scene__row-vis { display: none; } /* visitors column needs width the hero side windows lack */
.scene__row-rev {
	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 { transition: transform .15s var(--ease-out), border-color .15s ease, box-shadow .15s ease; }
.trio__panel:hover, .tier:hover, .proof-item: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, .pricing__grid .tier:hover { transform: none; }
	.prop--note { transition: none; }
	.prop--note:hover { rotate: -2deg; }
}