@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/* ---------- Reset / page root ---------- */
*{
	margin:0;
	padding:0;
	font:inherit;
	box-sizing:border-box;
}
html{
	font-size:16px;
	line-height:1;
	font-family:Merriweather;
	color:#fff;
	background-color:#000;
}
html,
body,
header{
	width:100%;
}
body {
	padding: 0;
	position: relative;
}
::selection {
	color: #1A0707;
	background-color: #c89048;
}

/* ---------- Typography (root) ---------- */
h1{
	font-size:1.85em;
	color: #fff;
	font-weight: 300;
	line-height: 1.1;
	max-width: 100%;
	margin: 0 auto 0.5em;
	text-wrap: balance;
	max-width: 19em;
}
h1 strong{
	font-weight: 900;
}
h2{
	font-size:1.5em;
	color:white;
	line-height: 1.15;
	font-weight: bold;
	margin-bottom: 0.6em;
	text-wrap: balance;
}
p{
	line-height:1.5;
	color: hsla(0,0%,100%,0.6);
	margin-bottom: 3em;
}
p strong{
	font-weight: bold;
	color: white;
}
em{
	font-style: italic;
}

/* ---------- Page header (wordmark + nav) ---------- */
.header-bar {
	margin: 0 0 4.5em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: 64em;
	margin: 0 auto;
	padding: 1.4em 2em;
	gap: 0.8em 1em;
}
.app-title{
	color: #fff;
	font-weight:bold;
	font-size:1.4em;
	user-select:none;
}
.header-nav {
	display: flex;
	gap: 1.2em;
	font-size: 0.9em;
	flex-shrink: 0;
}
.header-nav a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.18s ease;
}
.header-nav a:hover {
	color: #fff;
}

/* ---------- Hero ---------- */
header{
	text-align: center;
	padding: 0 2em 2.5em;
}
header p{
	text-align: center;
}
header .lede{
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.2em;
	max-width: 28ch;
	margin: 0 auto 2.2em;
	text-wrap: balance;
}
.download {
	display: inline-block;
	position: relative;
	z-index: 0;
	user-select:none;
}
.download-hero {
	margin-bottom: 4.5em;
}
.download::before {
	content: "";
	position: absolute;
	top: -1em;
	left: -1em;
	right: -1em;
	bottom: -1em;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(ellipse at center, #dbc082, #633420);
	filter: blur(2em);
	opacity: 0.8;
	pointer-events: none;
	transition:scale 1s;
}
.download:hover::before{
	scale: 1.5;
}
img.example{
	display:block;
	margin:0 auto 2em;
	max-width:24em;
	width:100%;
	transform: perspective(500px) rotateX(5deg);
}

/* ---------- Hero demo (focus-overlay animation) ---------- */
.hero-demo {
	width: 100%;
	max-width: 58rem;
	margin: 0 auto 3em;
	isolation: isolate;
	font-size: 1.3em;
}
.demo-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 1.2em;
	overflow: hidden;
	background: #000;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 30px 60px -20px rgba(0, 0, 0, 0.6),
		0 12px 24px -12px rgba(0, 0, 0, 0.8);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	color: #fff;
	user-select: none;
}
.demo-wallpaper {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 88% 70% at 22% 16%, rgba(246, 200, 150, 0.58), transparent 62%),
		linear-gradient(155deg, #a26a3e 0%, #6e3a24 45%, #421e14 72%, #1e0e08 100%);
}

/* Menubar */
.demo-menubar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.9em;
	padding: 0 1.1em;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.85em;
	font-weight: 500;
	letter-spacing: 0.01em;
	z-index: 5;
}
.demo-menu-left { flex: 1; }
.demo-menu-timer {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 0.45em;
	background: rgba(255, 255, 255, 0.12);
	font-variant-numeric: tabular-nums;
	color: #fff;
	transition: opacity 0.18s ease-out;
}
.demo-menu-intent {
	font-weight: 600;
}
.demo-menu-intent:not(:empty) {
	margin-right: 0.6em;
}
.demo-menu-clock {
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.92);
}
.demo-menu-icon {
	width: 1.15em;
	height: 1.15em;
	color: rgba(255, 255, 255, 0.88);
	display: block;
	flex-shrink: 0;
}
.demo-menu-icon--battery {
	width: 1.9em;
	height: 0.9em;
}

/* Browser window */
.demo-browser {
	position: absolute;
	top: 16%;
	left: 8%;
	right: 10%;
	bottom: 8%;
	border-radius: 0.7em;
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	background: #4a2d1c;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45);
	z-index: 2;
}
.demo-browser-chrome {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.8em 1em;
	background: #4a2d1c;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.demo-browser .demo-dot {
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	flex-shrink: 0;
	display: block;
}
.demo-browser .demo-dot:nth-child(1) { background: #ff5f57; }
.demo-browser .demo-dot:nth-child(2) { background: #febc2e; }
.demo-browser .demo-dot:nth-child(3) { background: #28c840; }
.demo-browser-body {
	position: relative;
	padding: 1.6em 1.8em;
	overflow: hidden;
	display: grid;
	/* minmax(0,1fr) so the column doesn't auto-size to the widest activity's
	   intrinsic content — otherwise activities with only %-width children
	   (draft, read) get squeezed to email/code's intrinsic widths. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stack";
}

/* Activity templates — all stacked in the same grid cell; the one matching
   data-activity on .hero-demo fades to opacity 1, others fade out. */
.demo-activity {
	grid-area: stack;
	justify-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.hero-demo[data-activity="0"] .demo-activity--draft,
.hero-demo[data-activity="1"] .demo-activity--email,
.hero-demo[data-activity="2"] .demo-activity--read,
.hero-demo[data-activity="3"] .demo-activity--code {
	opacity: 1;
}
/* shared placeholder bar look */
.demo-doc-line, .demo-doc-title,
.demo-email-line, .demo-email-subject, .demo-email-from, .demo-email-meta, .demo-email-reply,
.demo-read-line,
.demo-code-line, .demo-code-num {
	display: block;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 0.18em;
}

/* Per-activity tints — warm-dominant ink/paper across all activities,
   matching the warm Caravaggio palette of the panels below. The blue email
   reply button is the only cool accent, mirroring the popup's blue 3m button. */
.hero-demo[data-activity="0"] .demo-doc-title  { background: rgba(248, 232, 196, 0.62); }
.hero-demo[data-activity="0"] .demo-doc-line   { background: rgba(248, 232, 196, 0.34); }

.hero-demo[data-activity="1"] .demo-email-from    { background: rgba(248, 232, 196, 0.58); }
.hero-demo[data-activity="1"] .demo-email-meta    { background: rgba(248, 232, 196, 0.22); }
.hero-demo[data-activity="1"] .demo-email-subject { background: rgba(248, 232, 196, 0.62); }
.hero-demo[data-activity="1"] .demo-email-line    { background: rgba(248, 232, 196, 0.30); }
.hero-demo[data-activity="1"] .demo-email-reply   { background: rgba(56, 130, 232, 0.92); }

.hero-demo[data-activity="2"] .demo-read-line { background: rgba(236, 210, 168, 0.42); }

.hero-demo[data-activity="3"] .demo-code-num             { background: rgba(248, 232, 196, 0.30); }
.hero-demo[data-activity="3"] .demo-code-line            { background: rgba(248, 232, 196, 0.50); }
.hero-demo[data-activity="3"] .demo-code-line--in1       { background: rgba(228, 184, 110, 0.55); }
.hero-demo[data-activity="3"] .demo-code-line--in2       { background: rgba(240, 142, 112, 0.55); }
.hero-demo[data-activity="3"] .demo-code-line--in2.demo-code-line--short { background: rgba(220, 130, 90, 0.55); }

/* Activity: DRAFT — document editor */
.demo-activity--draft {
	width: 100%;
	max-width: 22em;
}
.demo-doc-title {
	height: 0.85em;
	width: 55%;
	background: rgba(255, 255, 255, 0.20);
	margin-bottom: 0.4em;
}
.demo-doc-line {
	height: 0.4em;
	width: 100%;
}
.demo-doc-line--short { width: 60%; }

/* Activity: EMAIL — message detail view */
.demo-activity--email {
	gap: 0.45em;
	width: 100%;
	max-width: 24em;
}
.demo-email-head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.2em;
}
.demo-email-from {
	height: 0.5em;
	width: 4em;
	background: rgba(255, 255, 255, 0.16);
}
.demo-email-meta {
	height: 0.4em;
	width: 5em;
	background: rgba(255, 255, 255, 0.07);
}
.demo-email-subject {
	height: 0.7em;
	width: 70%;
	background: rgba(255, 255, 255, 0.20);
	margin-bottom: 0.5em;
}
.demo-email-line {
	height: 0.4em;
	width: 100%;
}
.demo-email-line--short { width: 50%; }
.demo-email-reply {
	margin-top: 0.7em;
	height: 1.1em;
	width: 4.5em;
	border-radius: 0.4em;
	background: rgba(255, 255, 255, 0.16);
}

/* Activity: READ — book / article */
.demo-activity--read {
	gap: 0.34em;
	width: 100%;
	max-width: 20em;
}
.demo-read-line {
	height: 0.32em;
	width: 100%;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 0.16em;
}
.demo-read-line--short { width: 70%; }
.demo-read-gap { height: 0.7em; }

/* Activity: CODE — editor with line numbers */
.demo-activity--code {
	gap: 0.35em;
	width: 100%;
	max-width: 22em;
}
.demo-code-row {
	display: flex;
	align-items: center;
	gap: 0.7em;
}
.demo-code-num {
	height: 0.4em;
	width: 0.7em;
	background: rgba(255, 255, 255, 0.12);
	flex-shrink: 0;
	border-radius: 0.1em;
}
.demo-code-line {
	height: 0.4em;
	background: rgba(255, 255, 255, 0.13);
	border-radius: 0.18em;
	flex: 1;
}
.demo-code-line--in1 { margin-left: 1.2em; }
.demo-code-line--in2 { margin-left: 2.4em; }
.demo-code-line--short { max-width: 60%; }

/* Dim/blur veil that covers the browser when Intention is active */
.demo-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	z-index: 4;
	transition: opacity 0.55s ease-in;
}
.hero-demo.is-dimmed .demo-dim { opacity: 1; }
.hero-demo.is-clearing .demo-dim {
	transition-duration: 0s;
}

/* Intention popup card */
.demo-intention {
	position: absolute;
	top: 3em;
	right: 1.6em;
	width: 21em;
	padding: 1.6em;
	background: #1B1B1B;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.6em;
	box-shadow:
		0 20px 40px -10px rgba(0, 0, 0, 0.55),
		0 0 0 0.5px rgba(0, 0, 0, 0.6);
	font-size: 0.77em;
	color: #fff;
	text-align: left;
	opacity: 0;
	transform: translateY(-6px) scale(0.97);
	transform-origin: 100% 0%;
	transition:
		opacity 0.22s ease-out,
		transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25);
	z-index: 5;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.hero-demo.is-prompting .demo-intention {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.demo-gear {
	position: absolute;
	top: 0.65em;
	right: 0.65em;
	width: 1.3em;
	height: 1.3em;
	padding: 0;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.42);
	cursor: default;
}
.demo-gear svg { width: 100%; height: 100%; display: block; }
.demo-int-label {
	font-size: 1em;
	font-weight: 500;
	color: #fff;
	margin: 0 0 0.55em;
	line-height: 1.2;
	padding-right: 1.4em;
}
.demo-int-label--mid {
	margin: 1.8em 0 0.55em;
	padding-right: 0;
}
.demo-hint {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
	margin-left: 0.15em;
}
.demo-int-field {
	display: block;
	min-height: 3.8em;
	padding: 0.5em 0.7em;
	background: rgba(0, 0, 0, 0.25);
	border: 2px solid #24638E;
	border-radius: 0.35em;
	font-size: 0.95em;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
}
.demo-typed {
	color: #fff;
	letter-spacing: 0;
}
.demo-caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: #007AFF;
	margin-left: 1px;
	vertical-align: -0.15em;
	animation: demo-caret-blink 1s steps(1, end) infinite;
}
@keyframes demo-caret-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}
.demo-int-timers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8em;
}
.demo-timer {
	padding: 0.62em 0;
	background: rgba(255, 255, 255, 0.11);
	border: none;
	border-radius: 999px;
	color: #fff;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	cursor: default;
	transition: background 0.18s ease, transform 0.12s ease;
}
.demo-timer.is-selected {
	background: #007AFF;
	color: #fff;
}
.demo-timer.is-chosen {
	background: rgba(255, 255, 255, 0.24);
}
/* Pulse the blue default on Enter — but only if the user hasn't picked a
   different duration. If they have, only the chosen button should pulse. */
.hero-demo.is-sending .demo-int-timers:not(:has(.is-chosen)) .demo-timer.is-selected {
	animation: demo-send-pulse 0.32s ease;
}
.hero-demo.is-sending .demo-timer.is-chosen {
	animation: demo-send-pulse 0.32s ease;
}
@keyframes demo-send-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.08); filter: brightness(1.2); }
	100% { transform: scale(1); }
}

/* ---------- After-hero / section eyebrow ---------- */
.after-hero {
	background: #000;
	padding: 1.5em 2em 0;
	display: flow-root;
}
.section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4em;
	max-width: 28em;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.85em;
	font-weight: 600;
	color: rgba(228, 180, 100, 0.95);
	margin: 1.5em auto 3em;
}
.section-eyebrow::before,
.section-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(228, 180, 100, 0.32);
}

/* ---------- Panels ---------- */
.panel{
	margin: 3em auto;
	max-width: 58em;
}
.panel .text{
	max-width: 30em;
	margin: 0 auto;
}

/* Feature panels: alternating two-column grid (text ↔ vignette) */
.panel.feature {
	position: relative;
	max-width: 58em;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 2em 3.5em;
	align-items: center;
	padding: 3em 3em;
	border-radius: 1.2em;
	isolation: isolate;
	overflow: hidden;
	min-height: 28em;
}
.panel.feature h2 {
	font-weight: 600;
	letter-spacing: -0.005em;
}
.panel.feature p {
	color: hsla(36, 32%, 88%, 0.78);
	font-size: 1.05em;
}
.panel.feature .text {
	max-width: none;
	margin: 0;
}
.panel.feature .text > *:last-child {
	margin-bottom: 0;
}
.panel.feature > *:not(.text) {
	margin: 0 auto;
}
.panel.feature.reverse .text { order: 2; }
.panel.feature.reverse > *:not(.text) { order: 1; }

/* Muted panel tones — Caravaggio palette, darkened/desaturated so they read
   as backgrounds. Subtle radial places a soft highlight echoing single-source
   lighting. */
.feature-sienna {
	background:
		radial-gradient(ellipse 60% 60% at 5% 95%, rgba(38, 56, 78, 0.32), transparent 65%),
		radial-gradient(ellipse 110% 120% at 75% 50%, #5a3320 0%, #1a0e08 75%);
}
.feature-robe {
	background:
		radial-gradient(ellipse 60% 60% at 95% 95%, rgba(38, 56, 78, 0.28), transparent 65%),
		radial-gradient(ellipse 110% 120% at 28% 18%, #6e2c1e 0%, #1f0a07 75%);
}
.panel.feature.feature-parchment {
	background:
		radial-gradient(ellipse 65% 60% at 95% 95%, rgba(106, 55, 32, 0.36), transparent 70%),
		radial-gradient(ellipse 110% 120% at 25% 15%, #ddc498 0%, #b89c6f 70%);
	color: #231610;
}
.panel.feature.feature-parchment h2 { color: #2a1a0e; }
.panel.feature.feature-parchment p  { color: rgba(42, 26, 14, 0.82); }
.panel.feature.feature-parchment .v-goal-check {
	border-color: rgba(42, 26, 14, 0.4);
}
.panel.feature.feature-parchment .v-goal-text { color: #2a1a0e; }
.panel.feature.feature-parchment .v-goal.is-done .v-goal-check {
	background: #5d6638;
	border-color: #3a4322;
}
.panel.feature.feature-parchment .v-goal.is-done .v-goal-check::after { border-color: #fff; }
.panel.feature.feature-parchment .v-goal.is-done .v-goal-text {
	color: rgba(42, 26, 14, 0.45);
}
.panel.feature.feature-parchment .v-goal-text::after { background: currentColor; }

/* ---------- Vignette V1: distracting apps blurring (sienna) ---------- */
.v-blur {
	position: relative;
	width: 100%;
	max-width: 26em;
	aspect-ratio: 4 / 3;
	isolation: isolate;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.v-app {
	position: absolute;
	border-radius: 0.7em;
	overflow: hidden;
	box-shadow:
		0 0 0 0.5px rgba(255, 255, 255, 0.06),
		0 18px 40px -10px rgba(0, 0, 0, 0.55);
}
.v-app--chat  { top:  4%; left:  2%; width: 42%; height: 58%; background: #140a07; color: #f3e3c2; z-index: 1; }
.v-app--feed  { bottom: 3%; left: 18%; width: 54%; height: 56%; background: #e8dcb3; color: #3b2313; z-index: 2; }
.v-app--video { top: 12%; right: 2%; width: 52%; height: 62%; background: #0e0708; color: #fff;    z-index: 3; }
.v-app-chrome {
	display: flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.5em 0.65em;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.v-app--feed .v-app-chrome {
	background: linear-gradient(to bottom, #f2e5bf, #dcc998);
	border-bottom-color: rgba(59, 35, 19, 0.18);
}
.v-app-chrome span {
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	background: rgba(232, 220, 196, 0.22);
}
.v-app-body {
	padding: 0.8em 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}
.v-bubble {
	height: 1em;
	border-radius: 0.8em;
	flex-shrink: 0;
	animation: v-bubble-in 0.4s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.v-bubble--them { width: 70%; background: rgba(243, 227, 194, 0.16); }
.v-bubble--me   { width: 60%; background: #5C1F1A; align-self: flex-end; }
@keyframes v-bubble-in {
	from { opacity: 0; transform: translateY(0.8em) scale(0.82); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.v-app-body--chat {
	justify-content: flex-end;
	overflow: hidden;
}
.v-app-body--video {
	position: relative;
	height: calc(100% - 1.8em);
	padding: 0;
	overflow: hidden;
	background: #0e0708;
}
.v-app-body--video::before,
.v-app-body--video::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(18px);
	pointer-events: none;
}
.v-app-body--video::before {
	width: 70%;
	height: 110%;
	background: #5C1F1A;
	top: -20%;
	left: -25%;
	animation: v-blob-a 4.2s ease-in-out infinite;
}
.v-app-body--video::after {
	width: 60%;
	height: 100%;
	background: #c89048;
	bottom: -25%;
	right: -15%;
	animation: v-blob-b 5.4s ease-in-out infinite;
}
@keyframes v-blob-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30%, 25%) scale(1.08); }
	66%      { transform: translate(55%, 10%) scale(0.94); }
}
@keyframes v-blob-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	40%      { transform: translate(-35%, -30%) scale(1.12); }
	75%      { transform: translate(-10%, 15%) scale(0.9); }
}
.v-play {
	display: none;
}
.v-scrub {
	position: absolute;
	left: 0.9em;
	right: 0.9em;
	bottom: 0.8em;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
	overflow: visible;
	z-index: 2;
}
.v-scrub-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10%;
	background: rgba(255, 255, 255, 0.92);
	border-radius: inherit;
	opacity: 0;
	animation: v-scrub-progress 10s linear infinite;
}
.v-scrub-fill::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
@keyframes v-scrub-progress {
	0%   { width: 8%;  opacity: 0; }
	4%   { width: 10%; opacity: 1; }
	88%  { width: 94%; opacity: 1; }
	96%  { width: 96%; opacity: 0; }
	100% { width: 8%;  opacity: 0; }
}
.v-feed-item {
	height: 0.75em;
	border-radius: 0.2em;
	background: rgba(59, 35, 19, 0.22);
}
.v-feed-item:nth-child(1) { height: 1.1em; width: 70%; background: rgba(59, 35, 19, 0.42); }
.v-feed-item:nth-child(2) { width: 95%; }
.v-feed-item:nth-child(3) { width: 80%; }
.v-feed-item:nth-child(4) { width: 60%; }
/* The blur veil covers the entire feature-sienna panel so there are no
   visible blur-area edges. Text is lifted above via z-index. */
.panel.feature.feature-sienna .text {
	position: relative;
	z-index: 5;
}
.panel.feature.feature-sienna .v-blur {
	position: relative;
	z-index: 1;
}
.panel.feature.feature-sienna::after {
	content: "";
	position: absolute;
	inset: 1px;
	background: rgba(48, 26, 14, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
	z-index: 3;
	border-radius: 1.2em;
}
.panel.feature.feature-sienna.is-blurring::after { opacity: 1; }

/* ---------- Vignette V2: timer buttons cycling (robe) ---------- */
.v-timers {
	width: 100%;
	max-width: 26em;
	padding: 1.6em 1.8em 1.8em;
	background: #1B1B1B;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.6em;
	box-shadow:
		0 20px 40px -10px rgba(0, 0, 0, 0.55),
		0 0 0 0.5px rgba(0, 0, 0, 0.6);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	color: #fff;
	text-align: left;
}
.v-timers-label {
	font-size: 1em;
	font-weight: 500;
	color: #fff;
	margin-bottom: 0.9em;
	line-height: 1.2;
}
.v-timers-hint {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
	margin-left: 0.15em;
}
.v-timers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8em;
}
.v-timer {
	padding: 0.8em 0;
	background: rgba(255, 255, 255, 0.11);
	border: none;
	border-radius: 999px;
	color: #fff;
	font-family: inherit;
	font-size: 1em;
	font-weight: 500;
	cursor: default;
	box-shadow: none;
	transition: background 0.3s ease;
}
.v-timer.is-selected {
	background: #007AFF;
	animation: v-timer-pulse 0.85s cubic-bezier(0.3, 1.2, 0.4, 1);
}
@keyframes v-timer-pulse {
	0% {
		transform: translateY(0) scale(1);
		filter: brightness(1);
		box-shadow:
			0 0 0 0 rgba(0, 0, 0, 0),
			0 0 0 0 rgba(0, 122, 255, 0);
	}
	35% {
		transform: translateY(-6px) scale(1.1);
		filter: brightness(1.18);
		box-shadow:
			0 22px 34px -2px rgba(0, 0, 0, 0.75),
			0 0 14px 2px rgba(0, 122, 255, 0.65);
	}
	60% {
		transform: translateY(-6px) scale(1.1);
		filter: brightness(1.18);
		box-shadow:
			0 22px 34px -2px rgba(0, 0, 0, 0.75),
			0 0 14px 2px rgba(0, 122, 255, 0.6);
	}
	100% {
		transform: translateY(0) scale(1);
		filter: brightness(1);
		box-shadow:
			0 0 0 0 rgba(0, 0, 0, 0),
			0 0 20px 0 rgba(0, 122, 255, 0);
	}
}

/* ---------- Vignette V3: goals checking off (parchment) ---------- */
.v-goals {
	max-width: 22em;
	font-family: Merriweather;
	font-size: 1.05em;
	user-select: none;
}
.v-goal {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.55em 0;
}
.v-goal-check {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 0.35em;
	flex-shrink: 0;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.v-goal-check::after {
	content: "";
	position: absolute;
	left: 0.32em;
	top: 0.13em;
	width: 0.3em;
	height: 0.55em;
	border: solid #fff;
	border-width: 0 0.17em 0.17em 0;
	transform: rotate(45deg) scale(0);
	transform-origin: center;
	transition: transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.v-goal-text {
	color: rgba(255, 255, 255, 0.92);
	transition: color 0.3s ease, opacity 0.3s ease;
	position: relative;
}
.v-goal-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.v-goal.is-done .v-goal-check {
	background: #c89048;
	border-color: #c89048;
	transform: scale(1.1);
}
.v-goal.is-done .v-goal-check::after {
	transform: rotate(45deg) scale(1);
}
.v-goal.is-done .v-goal-text {
	color: rgba(255, 255, 255, 0.45);
}
.v-goal.is-done .v-goal-text::after {
	transform: scaleX(1);
}

/* ---------- Mid-page CTA ---------- */
.cta-mid {
	text-align: center;
	margin: 4em auto 3em;
}

/* ---------- Quote panel ---------- */
.panel.quotes {
	margin: 8em auto;
	padding: 0 2em;
	text-align: center;
}
.panel.quotes::after {
	content: "";
	display: block;
	width: 3em;
	height: 1px;
	margin: 1.8em auto 0;
	background: rgba(207, 184, 132, 0.55);
}
.quotes .text {
	max-width: 30em;
	margin: 0 auto;
	position: relative;
}
.quotes h2 {
	font-weight: 300;
	font-style: italic;
	font-size: 2em;
	line-height: 1.3;
	margin-bottom: 1em;
}
.quotes h2::before {
	content: "\201C";
	display: block;
	font-family: Merriweather;
	font-style: normal;
	font-weight: 400;
	font-size: 3em;
	line-height: 0.6;
	color: #b8a476;
	opacity: 0.7;
}
.quotes p {
	font-family: Merriweather;
	color: rgba(197, 173, 121, 0.75);
	font-size: 0.9em;
	letter-spacing: 0.04em;
	margin-bottom: 0;
}

/* ---------- Footer (Get it now + links) ---------- */
.get{
	background:
		radial-gradient(ellipse 60% 60% at 95% 95%, rgba(38, 56, 78, 0.28), transparent 65%),
		radial-gradient(ellipse 110% 120% at 28% 18%, #a4351f 0%, #1a0707 75%);
	margin: 0;
	padding: 0 2em 2em;
	border-radius: 0;
	max-width: none;
}
.get-inner {
	max-width: 58em;
	margin: 0 auto;
	padding: 7em 1em 7em;
	text-align: center;
}
.footer-links {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.78);
}
.footer-links li {
	display: inline;
	margin-left: 1.5em;
}
.footer-links li:first-child { margin-left: 0; }
.footer-links a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.footer-links a:hover { text-decoration: underline; }

/* ---------- Misc ---------- */
.overlay{
	width: 100%;
	max-width: 60em;
	margin: 0 auto;
	display: block;
	border-radius: 1em;
}
.hide{
	display:none;
}


/* =====================================================================
   Media queries — base rules above are the desktop default.
   Order: largest max-width → smallest, then min-width, then prefs.
   ===================================================================== */

@media (max-width: 60em) {
	.hero-demo { font-size: 1em; }
}

@media (max-width: 50em) {
	.demo-menu-icon--bluetooth { display: none; }
	.panel.feature {
		grid-template-columns: 1fr;
		gap: 2em;
		min-height: 0;
	}
	.panel.feature .text,
	.panel.feature.reverse .text { order: 0; }
	.panel.feature > *:not(.text),
	.panel.feature.reverse > *:not(.text) { order: 1; }
	.panel.feature > .v-goals {
		margin-left: 0;
		margin-right: auto;
	}
	.hero-demo,
	.v-blur,
	.v-timers,
	.v-goals { font-size: 0.9em; }
}

@media (max-width: 40em) {
	.demo-stage { aspect-ratio: 5 / 4; }
	.panel.feature {
		padding: 2em;
	}
	.quotes h2 { font-size: 1.35em; }
	.footer-links li {
		display: block;
		margin-left: 0;
		margin-bottom: 1.4em;
	}
	.footer-links li:last-child { margin-bottom: 0; }
}

@media (max-width: 25em) {
	.header-nav { display: none; }
	.demo-menu-icon--sound { display: none; }
	header { padding-left: 0; padding-right: 0; }
	header > .container { padding-left: 2em; padding-right: 2em; }
	.after-hero { padding-left: 0; padding-right: 0; }
	.panel.feature {
		padding: 2em;
		border-radius: 0;
	}
	.demo-stage {
		border-radius: 0;
	}
}


@media (min-width: 40em) {
	h1 {
		font-size: 3em;
		max-width: 16ch;
	}
}

@media (min-width: 65em) {
	header { padding-bottom: 4em; }
	.header-bar { margin-bottom: 6.5em; }
	.download-hero { margin-bottom: 6em; }
	.header-inner { padding: 1.8em 2em; }
	.app-title { font-size: 1.6em; }
	.header-nav { gap: 1.5em; }
	h1 {
		font-size: 4.5em;
		max-width: 16ch;
	}
	h2 {
		font-size: 2em;
		line-height: 1.1;
	}
	header .lede {
		font-size: 1.4em;
		max-width: 32ch;
	}
	.panel { margin: 5em auto; }
	.panel.feature { padding: 4em 5em; }
	.panel.quotes {
		margin: 12em auto;
	}
	.get-inner { padding: 9em 3em; }
	.footer-links { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.demo-caret { animation: none; }
	.demo-dim,
	.demo-intention { transition-duration: 0s; }
	.demo-timer.is-selected { animation: none !important; }
	.v-blur-veil,
	.v-timer,
	.v-goal-check,
	.v-goal-check::after,
	.v-goal-text,
	.v-goal-text::after {
		transition-duration: 0s;
	}
}