/*
 * Front-page feature reel: a self-contained motion graphic built from
 * ordinary DOM, CSS animations and feature-reel.js. Every selector is
 * prefixed with fr- so it can never collide with auth or app styles.
 * Base styles are each scene's final frame; animations only run while a
 * scene carries .fr-is-on, so reduced motion shows complete still frames.
 */
.fr-reel {
	--fr-ease: cubic-bezier(0.2, 0, 0, 1);
	--fr-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--fr-board: var(--color-bg);
	--fr-board-dot: #d9dce7;
	--fr-surface: var(--color-surface);
	--fr-border: var(--color-border);
	--fr-border-strong: var(--color-border-strong);
	--fr-text: var(--color-text);
	--fr-muted: var(--color-text-muted);
	--fr-faint: var(--color-text-faint);
	--fr-line: #e9ebf2;
	--fr-success: var(--color-success);
	--fr-success-soft: #e3f5ec;
	--fr-warning: var(--color-warning);
	--fr-warning-soft: #fbf0dc;
	--fr-sticky: #fff1a8;
	--fr-sticky-text: #4a3f0c;
	--fr-blue: #3b6ee8;
	--fr-violet: #7a5af0;
	--fr-teal: #159a8c;
	--fr-shadow: 0 1px 2px rgba(20, 22, 28, 0.06), 0 6px 20px rgba(20, 22, 28, 0.07);
	--fr-shadow-lift: 0 2px 4px rgba(20, 22, 28, 0.06), 0 18px 44px rgba(20, 22, 28, 0.14);
	container-type: inline-size;
	position: relative;
	display: grid;
	gap: var(--space-3);
	width: 100%;
	max-width: 44rem;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fr-reel {
		--fr-board-dot: #262b35;
		--fr-line: #2b303b;
		--fr-success-soft: #15301f;
		--fr-warning-soft: #33280f;
		--fr-sticky: #4d4218;
		--fr-sticky-text: #fbecb0;
		--fr-blue: #7c9cff;
		--fr-violet: #a58cff;
		--fr-teal: #4cc9b8;
		--fr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
		--fr-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.5);
	}
}

:root[data-theme="dark"] .fr-reel {
	--fr-board-dot: #262b35;
	--fr-line: #2b303b;
	--fr-success-soft: #15301f;
	--fr-warning-soft: #33280f;
	--fr-sticky: #4d4218;
	--fr-sticky-text: #fbecb0;
	--fr-blue: #7c9cff;
	--fr-violet: #a58cff;
	--fr-teal: #4cc9b8;
	--fr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
	--fr-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.5);
}

.fr-stage-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--fr-board);
	background-image: radial-gradient(var(--fr-board-dot) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	border: 1px solid var(--fr-border);
	box-shadow: var(--fr-shadow-lift);
}
.fr-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 960px;
	height: 540px;
	transform-origin: 0 0;
	transform: scale(var(--fr-scale, 1));
	font-size: 14px;
	line-height: normal;
}
.fr-scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s var(--fr-ease), visibility 0s linear 0.45s;
}
.fr-scene.fr-is-on { opacity: 1; visibility: visible; transition: opacity 0.45s var(--fr-ease); }
.fr-is-paused .fr-scene * { animation-play-state: paused !important; }

/* Animation vocabulary. Base styles are the final frame; animations only run in the active scene. */
@keyframes fr-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes fr-fade { from { opacity: 0; } }
@keyframes fr-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fr-draw { from { stroke-dashoffset: 1; } }
@keyframes fr-grow-y { from { transform: scaleY(0); } }
@keyframes fr-grow-x { from { transform: scaleX(0); } }
@keyframes fr-zoom-in { from { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.06); } }
@keyframes fr-blink-in-out { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fr-box-fill { from { background: transparent; border-color: var(--fr-border-strong); } }
@keyframes fr-check-in { from { transform: scale(0); } }
@keyframes fr-strike { from { text-decoration-color: transparent; color: var(--fr-text); } }
@keyframes fr-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } }
@keyframes fr-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), var(--fr-shadow); } 100% { box-shadow: 0 0 0 14px transparent, var(--fr-shadow); } }
@keyframes fr-dots { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.fr-is-on .fr-a-pop { animation: fr-pop 0.6s var(--fr-ease-spring) var(--d, 0s) both; }
.fr-is-on .fr-a-fade { animation: fr-fade 0.5s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-rise { animation: fr-rise 0.5s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-draw { animation: fr-draw 0.8s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-grow-y { animation: fr-grow-y 0.7s var(--fr-ease-spring) var(--d, 0s) both; }
.fr-is-on .fr-a-grow-x { animation: fr-grow-x 0.9s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-zoom { animation: fr-zoom-in 0.8s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-glow { animation: fr-glow 0.9s var(--fr-ease) var(--d2, var(--d, 0s)); }
.fr-is-on .fr-a-pop.fr-a-glow { animation: fr-pop 0.6s var(--fr-ease-spring) var(--d, 0s) both, fr-glow 0.9s var(--fr-ease) var(--d2, var(--d, 0s)); }
.fr-is-on .fr-a-press { animation: fr-press 0.3s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-a-blink { animation: fr-blink-in-out var(--dur, 1s) linear var(--d, 0s) both; }

.fr-a-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.fr-a-grow-y { transform-origin: 50% 100%; }
.fr-a-grow-x { transform-origin: 0 50%; }

/* ---------- Board primitives ---------- */
.fr-card {
	position: absolute;
	background: var(--fr-surface);
	border: 1px solid var(--fr-border);
	border-radius: 14px;
	box-shadow: var(--fr-shadow);
	padding: 14px 16px;
	overflow: hidden;
}
.fr-card h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fr-kind {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fr-faint);
	margin-bottom: 6px;
}
.fr-lines { display: grid; gap: 8px; }
.fr-lines i { display: block; height: 7px; border-radius: 4px; background: var(--fr-line); }
.fr-links { position: absolute; inset: 0; width: 960px; height: 540px; overflow: visible; pointer-events: none; }
.fr-links path { fill: none; stroke: var(--fr-border-strong); stroke-width: 2; stroke-linecap: round; }
.fr-links path.fr-hot { stroke: var(--accent); }
.fr-links circle { fill: var(--fr-surface); stroke: var(--fr-border-strong); stroke-width: 2; }
.fr-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: var(--fr-line);
	color: var(--fr-muted);
	white-space: nowrap;
}
.fr-chip.fr-accent { background: var(--accent-soft); color: var(--accent-strong); }
.fr-chip.fr-ok { background: var(--fr-success-soft); color: var(--fr-success); }
.fr-chip.fr-warn { background: var(--fr-warning-soft); color: var(--fr-warning); }
.fr-chip svg { width: 12px; height: 12px; }

.fr-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fr-task { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fr-text); }
.fr-task .fr-box {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1.5px solid var(--fr-border-strong);
	display: grid;
	place-items: center;
}
.fr-task .fr-box svg { width: 11px; height: 11px; opacity: 0; }
.fr-task.fr-done .fr-box { background: var(--accent); border-color: var(--accent); }
.fr-task.fr-done .fr-box svg { opacity: 1; color: var(--accent-contrast); }
.fr-task.fr-done .fr-label { color: var(--fr-faint); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--fr-faint); }
.fr-is-on .fr-task.fr-done .fr-box { animation: fr-box-fill 0.25s var(--fr-ease) var(--d, 0s) both; }
.fr-is-on .fr-task.fr-done .fr-box svg { animation: fr-check-in 0.3s var(--fr-ease-spring) var(--d, 0s) both; }
.fr-is-on .fr-task.fr-done .fr-label { animation: fr-strike 0.3s var(--fr-ease) var(--d, 0s) both; }
.fr-task.fr-sub { padding-left: 25px; }
.fr-task .fr-meta { margin-left: auto; display: flex; gap: 6px; }

/* ---------- Scene 1 + 8: brand ---------- */
.fr-brand {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 18px;
	text-align: center;
}
.fr-mark { width: 104px; height: 104px; filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--accent) 35%, transparent)); }
.fr-wordmark { font-size: 64px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.fr-wordmark span { display: inline-block; }
.fr-brand-line { font-size: 22px; font-weight: 500; color: var(--fr-muted); letter-spacing: -0.01em; }
.fr-ghost {
	position: absolute;
	border: 1.5px solid var(--fr-border-strong);
	border-radius: 14px;
	background: color-mix(in srgb, var(--fr-surface) 70%, transparent);
}
.fr-ghost.fr-accent { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Scene 2: board ---------- */
.fr-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 100px; padding-top: 6px; border-bottom: 1.5px solid var(--fr-line); }
.fr-chart-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--accent); }
.fr-chart-bars i:nth-child(odd) { background: color-mix(in srgb, var(--accent) 55%, var(--fr-surface)); }
.fr-table { display: grid; grid-template-columns: 1.4fr 1fr 1fr; font-size: 12px; border: 1px solid var(--fr-border); border-radius: 8px; overflow: hidden; }
.fr-table span { padding: 6px 8px; border-bottom: 1px solid var(--fr-border); border-right: 1px solid var(--fr-border); font-variant-numeric: tabular-nums; }
.fr-table span:nth-child(3n) { border-right: 0; text-align: right; }
.fr-table span:nth-child(3n+2) { text-align: right; }
.fr-table span:nth-last-child(-n+3) { border-bottom: 0; }
.fr-table .fr-th { font-weight: 700; color: var(--fr-muted); background: var(--fr-board); }
.fr-mood { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 96px; }
.fr-mood i { border-radius: 8px; }
.fr-sticky { background: var(--fr-sticky); border-color: transparent; color: var(--fr-sticky-text); transform: rotate(-2deg); }
.fr-sticky p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.fr-link-label { position: absolute; z-index: 2; }

/* ---------- Scene 3: zoom ---------- */
.fr-cam { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(-1620px, -465px) scale(3); }
.fr-cam-fade { position: absolute; inset: 0; opacity: 0; }
.fr-is-on .fr-cam { animation: fr-cam-zoom 1.5s cubic-bezier(0.65, 0, 0.25, 1) 1.7s both; }
.fr-is-on .fr-cam-fade { animation: fr-cam-hide 0.45s linear 3.05s both; }
@keyframes fr-cam-zoom { from { transform: translate(0, 0) scale(1); } }
@keyframes fr-cam-hide { from { opacity: 1; } to { opacity: 0; } }
.fr-frame {
	position: absolute;
	border: 1.5px solid var(--fr-border-strong);
	border-radius: 12px;
	background: color-mix(in srgb, var(--fr-surface) 55%, transparent);
}
.fr-frame-title {
	position: absolute;
	left: 10px;
	top: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fr-muted);
	display: flex;
	gap: 5px;
	align-items: center;
}
.fr-frame-title svg { width: 12px; height: 12px; }
.fr-mini { position: absolute; border-radius: 6px; background: var(--fr-surface); border: 1px solid var(--fr-border); box-shadow: var(--fr-shadow); }
.fr-mini.fr-hl { border-color: var(--accent); }
.fr-crumbs {
	position: absolute;
	left: 24px;
	top: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--fr-surface);
	border: 1px solid var(--fr-border);
	box-shadow: var(--fr-shadow);
	font-size: 13px;
	font-weight: 600;
	color: var(--fr-muted);
}
.fr-crumbs b { color: var(--fr-text); }
.fr-crumbs svg { width: 12px; height: 12px; color: var(--fr-faint); }
.fr-artboard { background: #ffffff; }
.fr-artboard svg path { fill: none; stroke: #14161c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fr-artboard svg path.fr-pink { stroke: #e8355f; }
.fr-artboard .fr-kind, .fr-artboard h3 { color: #14161c; }
.fr-code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--fr-muted);
	white-space: pre;
}
.fr-code b { color: var(--accent-strong); font-weight: 600; }

/* ---------- Scene 4: tasks + timeline ---------- */
.fr-progress { height: 6px; border-radius: 3px; background: var(--fr-line); overflow: hidden; margin: 2px 0 16px; }
.fr-progress i { display: block; height: 100%; width: 50%; background: var(--accent); border-radius: 3px; }
.fr-is-on .fr-progress i { animation: fr-bar-fill 2s var(--fr-ease) 0.9s both; }
@keyframes fr-bar-fill { from { width: 0%; } 30% { width: 17%; } 60% { width: 33%; } }
.fr-filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.fr-tl-grid { position: relative; height: 300px; }
.fr-tl-cols { position: absolute; inset: 0 0 0 96px; display: grid; grid-template-columns: repeat(6, 1fr); }
.fr-tl-cols span { border-left: 1px dashed var(--fr-line); font-size: 10.5px; font-weight: 600; color: var(--fr-faint); padding: 0 0 0 6px; font-variant-numeric: tabular-nums; }
.fr-tl-row { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; }
.fr-tl-row em { width: 96px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--fr-muted); }
.fr-tl-bar { position: absolute; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; padding-left: 8px; white-space: nowrap; }
.fr-tl-today { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--accent); }
.fr-tl-today::before { content: "Today"; position: absolute; top: -18px; left: -16px; font-size: 10px; font-weight: 700; color: var(--accent); }

/* ---------- Scene 5: workflow ---------- */
.fr-wf-frame { left: 40px; top: 36px; width: 880px; height: 256px; }
.fr-wf-node { width: 180px; height: 150px; top: 100px; padding: 12px 14px; display: grid; align-content: start; gap: 6px; }
.fr-wf-node h3 { margin: 0; font-size: 13.5px; }
.fr-wf-node p { margin: 0; font-size: 11.5px; color: var(--fr-muted); line-height: 1.4; }
.fr-wf-type { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fr-wf-type i { width: 8px; height: 8px; border-radius: 50%; }
.fr-wf-state { position: absolute; left: 14px; bottom: 12px; right: 14px; height: 24px; }
.fr-wf-state > * { position: absolute; left: 0; bottom: 0; }
.fr-wf-waiting { opacity: 0; display: flex; gap: 5px; }
.fr-btn-mini { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--fr-border-strong); color: var(--fr-text); background: var(--fr-surface); }
.fr-btn-mini.fr-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.fr-runs { left: 40px; top: 318px; width: 880px; height: 172px; padding: 14px 18px; }
.fr-run { display: grid; grid-template-columns: 70px 1fr 110px 90px 60px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--fr-line); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fr-run:first-of-type { border-top: 0; }
.fr-run b { font-weight: 700; }
.fr-run .fr-dim { color: var(--fr-muted); }
.fr-run .fr-chip { justify-self: start; }

/* ---------- Scene 6: AI ---------- */
.fr-ai-panel { left: 640px; top: 28px; width: 292px; height: 484px; padding: 0; display: flex; flex-direction: column; }
.fr-ai-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--fr-border); }
.fr-ai-head h3 { margin: 0; }
.fr-ai-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.fr-bubble { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.fr-bubble.fr-me { align-self: flex-end; background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; }
.fr-bubble.fr-ai { align-self: flex-start; background: var(--fr-board); border: 1px solid var(--fr-border); border-bottom-left-radius: 4px; }
.fr-typing { position: absolute; left: 14px; top: 76px; display: flex; gap: 4px; padding: 11px 13px; border-radius: 14px; background: var(--fr-board); border: 1px solid var(--fr-border); opacity: 0; }
.fr-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fr-muted); animation: fr-dots 0.9s ease-in-out infinite; }
.fr-typing i:nth-child(2) { animation-delay: 0.15s; }
.fr-typing i:nth-child(3) { animation-delay: 0.3s; }
.fr-receipt { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fr-success) 40%, var(--fr-border)); background: var(--fr-success-soft); font-size: 11.5px; color: var(--fr-text); }
.fr-receipt b { display: flex; align-items: center; gap: 6px; color: var(--fr-success); font-size: 12px; }
.fr-receipt b svg { width: 14px; height: 14px; }
.fr-receipt span { color: var(--fr-muted); }
.fr-ai-input { margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--fr-border); font-size: 12px; color: var(--fr-faint); }
.fr-new-note { border-color: var(--accent); }

/* ---------- Scene 7: sharing ---------- */
.fr-share { left: 540px; top: 70px; width: 360px; padding: 18px 20px; display: grid; gap: 14px; box-shadow: var(--fr-shadow-lift); }
.fr-share h3 { margin: 0; font-size: 16px; }
.fr-field { padding: 9px 12px; border: 1px solid var(--fr-border-strong); border-radius: 10px; font-size: 13px; }
.fr-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--fr-board); border: 1px solid var(--fr-border); position: relative; font-size: 12.5px; font-weight: 700; }
.fr-seg span { position: relative; z-index: 1; text-align: center; padding: 7px; color: var(--fr-muted); }
.fr-seg span.fr-on { color: var(--fr-text); }
.fr-seg .fr-thumb { position: absolute; top: 3px; bottom: 3px; left: 50%; width: calc(50% - 3px); border-radius: 8px; background: var(--fr-surface); box-shadow: var(--fr-shadow); }
.fr-is-on .fr-seg .fr-thumb { animation: fr-seg-move 0.4s var(--fr-ease) 1.5s both; }
@keyframes fr-seg-move { from { left: 3px; } }
.fr-share .fr-btn-row { display: flex; justify-content: flex-end; }
.fr-btn-lg { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); }
.fr-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 2px; }
.fr-cursor svg { width: 20px; height: 20px; }
.fr-cursor span { margin-top: 14px; padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; }
.fr-cursor.fr-maja { transform: translate(230px, 120px); }
.fr-cursor.fr-leo { transform: translate(74px, 334px); }
.fr-is-on .fr-cursor.fr-maja { animation: fr-maja-path 4.6s var(--fr-ease) 0.2s both; }
.fr-is-on .fr-cursor.fr-leo { animation: fr-leo-path 2.2s var(--fr-ease) 2.5s both; }
@keyframes fr-maja-path {
	0% { transform: translate(470px, 420px); }
	20% { transform: translate(796px, 176px); }
	30% { transform: translate(796px, 176px); }
	44% { transform: translate(834px, 258px); }
	56% { transform: translate(834px, 258px); }
	100% { transform: translate(230px, 120px); }
}
@keyframes fr-leo-path {
	0% { opacity: 0; transform: translate(420px, 120px); }
	15% { opacity: 1; }
	100% { opacity: 1; transform: translate(74px, 334px); }
}
.fr-phone {
	position: absolute;
	left: 796px;
	top: 312px;
	width: 112px;
	height: 204px;
	border-radius: 20px;
	border: 5px solid var(--fr-text);
	background: var(--fr-surface);
	padding: 16px 9px 9px;
	display: grid;
	align-content: start;
	gap: 6px;
	box-shadow: var(--fr-shadow-lift);
}
.fr-phone .fr-kind { margin: 0; font-size: 8px; }
.fr-phone .fr-row { display: flex; gap: 5px; align-items: center; font-size: 8.5px; font-weight: 600; }
.fr-phone .fr-row i { width: 8px; height: 8px; border-radius: 3px; border: 1.2px solid var(--fr-border-strong); flex: none; }
.fr-phone .fr-row.fr-done i { background: var(--accent); border-color: var(--accent); }
.fr-phone .fr-row.fr-done { color: var(--fr-faint); text-decoration: line-through; }

/* Captions and controls */
/* feature-reel.js measures the tallest of the eight captions at the current
   width and reserves exactly that height, so chapter changes never move
   anything below the reel without leaving spare empty lines. The controls
   come first in the markup so that narrow captions can flow around them. */
.fr-caption {
	--fr-h2-size: 1.25rem;
	--fr-body-size: 0.9375rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "text controls";
	gap: var(--space-3) var(--space-4);
	align-items: start;
}
.fr-caption-text { grid-area: text; }
.fr-eyebrow { margin-bottom: 4px; font-size: 0.6875rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); }
.fr-caption h2 { margin-bottom: 4px; font-size: var(--fr-h2-size); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; color: var(--fr-text); }
.fr-caption p.fr-body { font-size: var(--fr-body-size); line-height: 1.55; color: var(--fr-muted); text-wrap: pretty; }
.fr-caption-text.fr-swap > * { animation: fr-rise 0.5s var(--fr-ease) both; }
.fr-caption-text.fr-swap > :nth-child(2) { animation-delay: 0.06s; }
.fr-caption-text.fr-swap > :nth-child(3) { animation-delay: 0.12s; }
.fr-controls { grid-area: controls; display: flex; gap: var(--space-2); }
.fr-ctl {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--fr-border);
	background: var(--fr-surface);
	color: var(--fr-text);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--fr-shadow);
	transition: transform var(--duration-fast) var(--fr-ease), border-color var(--duration-fast) var(--fr-ease);
}
.fr-ctl:hover { border-color: var(--accent); }
.fr-ctl:active { transform: scale(0.94); }
.fr-ctl:focus-visible, .fr-chapter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fr-ctl svg { width: 16px; height: 16px; }
.fr-chapters { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.fr-chapter {
	appearance: none;
	border: 0;
	background: none;
	padding: 6px 0 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--fr-faint);
	display: grid;
	gap: 6px;
	min-width: 0;
}
.fr-chapter .fr-track { height: 3px; border-radius: 2px; background: var(--fr-border); overflow: hidden; }
.fr-chapter .fr-track i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.fr-chapter .fr-name { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-chapter[aria-current="step"] .fr-name, .fr-chapter:hover .fr-name { color: var(--fr-text); }

@container (max-width: 560px) {
	.fr-chapter .fr-name { display: none; }
	.fr-stage-wrap { border-radius: var(--radius-md); }
	/* Narrow reels (phone sheet) keep Pause and restart at the top right and let the caption flow around them. */
	.fr-caption { --fr-h2-size: 1.125rem; --fr-body-size: 0.875rem; display: block; }
	.fr-controls { float: right; margin: 0 0 6px 12px; }
	.fr-ctl { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.fr-scene *, .fr-caption-text.fr-swap > * { animation: none !important; }
	.fr-scene { transition: none; }
}

/* Tour modal (partials/feature-tour-dialog.php): the same reel, larger, on
   every screen size, including phones where the inline reel is hidden. */
/* The dialog is as wide as a 16:9 stage can be while the whole reel, header,
   chapters and caption included (about 21rem of chrome), fits the viewport
   height with a margin; everything inside scales with that width. */
.tour-dialog {
	width: min(960px, calc(100vw - 32px), max(340px, calc((100dvh - 48px - 21rem) * 16 / 9 + 44px)));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.tour-dialog::backdrop { background: rgba(10, 11, 16, 0.72); backdrop-filter: blur(4px); }
.tour-dialog[open] { animation: tour-dialog-in 180ms var(--ease-standard, ease-out); }
@keyframes tour-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.tour-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 22px; }
.tour-dialog-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.tour-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.tour-dialog-close:hover { background: var(--color-border); color: var(--color-text); }
.tour-dialog-close svg { width: 22px; height: 22px; }
.tour-dialog .fr-reel { max-width: none; padding: 0 22px 22px; }
@media (max-width: 600px) {
	.tour-dialog { inset: auto 0 0 0; width: 100%; max-width: 100%; height: fit-content; max-height: calc(100dvh - 12px); margin: 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
	.tour-dialog .fr-reel { padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
/* When the screen is short but wide enough (a laptop with a lowered window,
   a phone on its side), the caption sits beside the picture so the tour keeps
   a generous picture instead of shrinking to a narrow column. */
@media (max-height: 780px) and (min-width: 700px) {
	.tour-dialog { width: min(1100px, calc(100vw - 32px), calc((100dvh - 32px - 9.5rem) * 16 / 9 + 330px)); max-height: calc(100dvh - 24px); }
	.tour-dialog-head { padding: 8px 10px 6px 18px; }
	.tour-dialog-head h2 { font-size: 0.9375rem; }
	.tour-dialog .fr-reel { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "stage caption" "chapters caption"; column-gap: 20px; padding: 0 18px 16px; }
	.tour-dialog .fr-stage-wrap { grid-area: stage; }
	.tour-dialog .fr-chapters { grid-area: chapters; }
	.tour-dialog .fr-caption { grid-area: caption; display: block; align-self: start; }
	.tour-dialog .fr-controls { float: right; margin: 0 0 6px 12px; }
}
/* An open tour keeps the page behind it still. */
html.tour-open, html.tour-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.tour-dialog[open] { animation: none; }
}

/* "Watch the tour" button (front page and Features). */
.tour-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 18px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: var(--color-text);
	color: var(--color-bg);
	box-shadow: var(--shadow-md);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 650;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.tour-button small {
	color: color-mix(in srgb, var(--color-bg) 65%, transparent);
	font-size: 0.75rem;
	font-weight: 600;
}

.tour-button-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
	animation: tour-pulse 2.4s var(--ease-standard) infinite;
}

.tour-button-play svg { width: 18px; height: 18px; margin-left: 2px; }

.tour-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tour-button:active { transform: translateY(0); }
.tour-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@keyframes tour-pulse {
	0%, 60%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
	30% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.tour-button-play { animation: none; }
}