/*
 * The Levo page. A product page with its own design, kept apart from the site's
 * text layout on purpose: everything here lives in levo/.
 * Light by default; html.dark (set in the head) switches it.
 */

:root {
	--bg: #F7F7F7;
	--ink: 0 0 0;
	--text: #1D1D1F;
	--muted: #6B6B74;
	--card: rgba(0, 0, 0, 0.025);
	--rim: rgba(0, 0, 0, 0.08);
	--btn: #1D1D1F;
	--btn-text: #FFFFFF;
	--glow-a: rgba(110, 160, 255, 0.35);
	--glow-b: rgba(255, 170, 120, 0.3);
	--lit: #2C6BEA; /* Levo's blue: the icon's rim and macOS's blue */
	--round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
	color-scheme: light;
}
html.dark {
	--bg: #070707;
	--ink: 255 255 255;
	--text: #F0F0F0;
	--muted: #8E8E96;
	--card: rgba(255, 255, 255, 0.03);
	--rim: rgba(255, 255, 255, 0.08);
	--btn: #F0F0F0;
	--btn-text: #070707;
	--glow-a: rgba(40, 96, 220, 0.38);
	--glow-b: rgba(40, 120, 200, 0.3);
	--lit: #6F9CFF;
	color-scheme: dark;
}

* { box-sizing: border-box; }
/* The page colour on html, so it fills the whole screen: behind the status bar, the browser's bars
   and the home indicator, and past either end when scrolling (as cristianrus.me). The content keeps
   clear of the notch and the rounded corners (env(safe-area-inset-*)). */
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
	background: var(--bg);
	color: var(--text);
	font-family: var(--round);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
::selection { background: rgba(0, 178, 255, 0.3); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid #00B2FF; outline-offset: 2px; border-radius: 8px; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 22px;
	border-radius: 13px;
	background: var(--btn);
	color: var(--btn-text);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .15s, background-color .15s;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.97); }
.btn-quiet { background: rgb(var(--ink) / 0.07); color: var(--text); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.06); }
.btn-sm { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* The hand-drawn circle, drawn each time it comes into view. */
.circled { position: relative; white-space: nowrap; }
.circled svg { position: absolute; left: -22px; top: -12px; width: calc(100% + 44px); height: calc(100% + 26px); overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--lit); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 500; stroke-dashoffset: 500; }
.circled.drawn path { animation: draw .8s ease-in .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The first screen is the Mac. */
.first { position: relative; }
.demo { display: block; }

/* Sections below: shown, not explained. */
.sect { max-width: 1080px; margin: 0 auto; padding: 120px 20px 0; text-align: center; }
.sect > h2 { font-size: clamp(40px, 6vw, 64px); }

/* Agents: the CLIs as chips. A click copies the install prompt. */
.chips { list-style: none; margin: 44px auto 0; padding: 0; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--rim);
	color: var(--text);
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	cursor: pointer;
	transition: transform .15s, background-color .15s, box-shadow .15s;
}
.chip:hover { background: rgb(var(--ink) / 0.06); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.14); }
.chip:active { transform: scale(.97); }
.chip-p { color: #E8833A; font-size: 13px; }
li:nth-child(3n+2) .chip-p { color: #4FA3F8; }
li:nth-child(3n) .chip-p { color: #3FB0C8; }
.chip-any { background: transparent; box-shadow: none; outline: 1px dashed rgb(var(--ink) / 0.25); outline-offset: -1px; color: var(--muted); }

/* Price and Download */
.get { padding-bottom: 20px; }
.get-icon { --u: 2; display: block; margin: 0 auto 22px; width: 128px; height: 128px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25)); }
.get-icon img { display: block; width: 100%; height: 100%; }

/* The icon dance (the Left app's, as on the omggg home): on hover, once, a crouch, a tilted jump,
   a landing, a small hop and a bouncy settle. Two layers inside the icon: .dance moves and turns
   about the centre, .dance-sq squashes against the floor (its bottom centre). Lengths are px at a
   64 px icon, times --u (the icon's size over 64). levo.js plays it ([data-dance] hosts). */
.dance, .dance-sq { display: block; width: 100%; height: 100%; }
.dance { transform-origin: 50% 50%; }
.dance-sq { transform-origin: 50% 100%; }
.is-dancing .dance { animation: dance .94s both; }
.is-dancing .dance-sq { animation: dance-sq .94s both; }
@keyframes dance {
	0% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
	12.77% { transform: translateY(calc(6px * var(--u, 1))) rotate(0deg); animation-timing-function: ease-in-out; }
	38.3% { transform: translateY(calc(-26px * var(--u, 1))) rotate(-9deg); animation-timing-function: ease-in-out; }
	61.7% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
	78.72% { transform: translateY(calc(-10px * var(--u, 1))) rotate(7deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
	100% { transform: translateY(0) rotate(0deg); }
}
@keyframes dance-sq {
	0% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
	12.77% { transform: scale(1.12, 0.82); animation-timing-function: ease-in-out; }
	38.3% { transform: scale(0.94, 1.1); animation-timing-function: ease-in-out; }
	61.7% { transform: scale(1.08, 0.9); animation-timing-function: ease-in-out; }
	78.72% { transform: scale(0.98, 1.04); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
	100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .is-dancing .dance, .is-dancing .dance-sq { animation: none; } }
.get .ctas { margin-top: 34px; }
.price { margin-top: 26px; display: inline-flex; align-items: baseline; gap: 34px; }
.price b { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price > span:last-child { font-size: 17px; font-weight: 600; color: var(--muted); }

/* Under the price, from the live feed (levo.js): the early price struck out once its spots are gone,
   this price's spots as the app's segmented bar with the next price's chip at its end; then the
   licence. Each part waits, hidden, until the feed has its numbers. */
.tiers { margin: 18px auto 0; max-width: 320px; text-align: center; }
.tiers p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.tiers-early s { text-decoration-thickness: 1.5px; }
.tiers-bar { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 300px; margin: 8px auto 0; }
.tiers-bar .tiers-spots { flex: 1; }
.tiers-bar .spots i { height: 10px; border-radius: 2px; }
.tiers .tiers-line { margin-top: 12px; font-size: 14px; }

.foot { max-width: 1080px; margin: 110px auto 0; padding: 26px 20px 44px; display: flex; gap: 22px; justify-content: center; border-top: 1px solid var(--rim); font-size: 14px; color: var(--muted); }
.foot a:hover { color: var(--text); }

/* Arrival */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1); }
.js .rv.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Settings (settings.css draws the window) */

.sect[hidden] { display: none !important; }

.settings { max-width: 920px; margin: 0 auto; text-align: left; }

/* ------------------------------------------------------------ Narrow screens */

@media (max-width: 760px) {
	.sect { padding-top: 80px; }
}
@media (max-width: 560px) {
	.ctas .btn { flex: 1; min-width: 0; }
	.get .ctas { max-width: 360px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.circled.drawn path { animation: none; stroke-dashoffset: 0; }
	.js .rv { opacity: 1; transform: none; transition: opacity .3s; }
	.btn:hover, .btn:active { transform: none; }
	.lv-sym { animation: none !important; }
}

/* Between pages, the same crossfade as the rest of the site. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* ------------------------------------------------------------ Below the bento (desktop)
 * Agents and the price continue the bento's grid as two full-width tiles, in its
 * tile surface (bento.css: --bt-tile). Markup and behaviour are levo.js's; the
 * phone page (mobile.css) shows its own. */

@media (min-width: 761px) {
	#agents.sect,
	#get.sect {
		position: relative;
		width: calc(100% - 40px);
		max-width: 1100px;
		margin: 16px auto 0;
		border-radius: 26px;
		background: var(--bt-tile);
		box-shadow: inset 0 0 0 1px var(--bt-tile-rim);
	}
	/* As a bento tile: the chips, then the caption at the bottom-leading corner (bento.css's .bt-cap). */
	#agents.sect { padding: 56px 0 0; text-align: left; }
	#agents .chips { max-width: 880px; margin: 0 auto 48px; padding: 0 24px; }

	#get.sect {
		overflow: hidden;
		padding: 80px 24px 72px;
		background:
			radial-gradient(55% 70% at 50% 0%, var(--glow-a) 0%, transparent 70%),
			radial-gradient(45% 60% at 85% 100%, var(--glow-b) 0%, transparent 70%),
			var(--bt-tile);
	}
	#get h2 { font-size: clamp(40px, 5vw, 56px); }
	.foot { margin-top: 64px; }
}

/* ------------------------------------------------------------ The navbar */

.nav { position: sticky; top: 0; z-index: 80; height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); transition: background-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
.nav.is-scrolled {
	background: color-mix(in srgb, var(--bg) 72%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	backdrop-filter: blur(20px) saturate(1.6);
	box-shadow: 0 1px 0 var(--rim);
}
.nav-in { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 28px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.nav-brand img { display: block; border-radius: 6px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--muted); }
.nav-links a { transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-dl { margin-left: 4px; }

/* The framed Mac sits under the navbar with page margins. */
.first { padding: 4px 24px 0; }
.first .demo { max-width: 1440px; margin: 0 auto; }
/* Until demo.js builds the Mac, its place is kept at the size it will have (demo.css's desk frame:
   16:10, ruled by the viewport's height, capped at 1440 px wide), so nothing below it jumps. The
   desk starts where the demo is 760 px wide (the page's 24 px sides: an 808 px window). */
@media (min-width: 808px) {
	.first .demo:empty { height: min(calc((100vw - 48px) / 1.6), 900px, 90svh, calc(100svh - 184px)); }
}
#agents, #get { scroll-margin-top: calc(80px + env(safe-area-inset-top)); }

@media (max-width: 760px) {
	.nav { height: calc(56px + env(safe-area-inset-top)); }
	.nav-in { padding: 0 16px; }
	.nav-links { display: none; }
	.nav-dl { margin-left: auto; }
	.m-bar { display: none !important; }
}

/* ------------------------------------------------------------ Agents: steps, chips, the copied prompt */

/* The chip's name: its own box, as wide as the name or "copied" (monospace, so in ch), centred, so
   deciphering into "copied" and back never changes the chip's size. */
.chip-n { display: inline-block; width: calc(var(--n, 6) * 1ch); text-align: center; white-space: pre; }
/* Seen by screen readers only. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Clear space between the navbar and the framed Mac. */
.first { padding-top: 104px; }

/* "Just click here": a small "just" over the right half of "click", then "click here", in
   handwriting, turned a little anticlockwise, and an arrow from the end of "here" that runs right
   and curves down to Levo in the simulator's menubar (levo.js draws the arrow
   from the text's measured end and places its tip over the icon). It's tucked behind the Mac's
   window (the demo sits above it) and slides up from behind its top edge with one springy
   overshoot, then stays still; it fades once the visitor has clicked Levo. Less motion: it's
   simply there. */
.first .demo { position: relative; z-index: 1; }
.cue { position: absolute; z-index: 0; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
/* It waits out the wallpaper's own first transition (0.6 s), unseen, then rises. */
.cue.is-placed { opacity: 1; transition-duration: 0s; animation: cue-pop .75s cubic-bezier(.34, 1.56, .64, 1) .7s both, cue-show 1ms linear .7s both; }
.cue.is-done { opacity: 0; transition-duration: .4s; }
.cue-t { position: absolute; left: 0; top: 0; display: block; font-family: "Bradley Hand", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive; font-weight: 700; letter-spacing: .01em; color: var(--text); white-space: nowrap; transform: rotate(-6deg); transform-origin: 0 calc(100% - 12px); }
.cue-just { display: block; padding-left: 0.95em; font-size: 20px; line-height: 20px; } /* about 90 % of "click here" */
.cue-main { display: block; font-size: 22px; line-height: 24px; }
.cue-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cue-svg path { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* From just under the window's top edge (levo.js sets --cue-rise to the cue's full height). */
@keyframes cue-pop { from { translate: 0 var(--cue-rise, 110px); } to { translate: 0 0; } }
@keyframes cue-show { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue.is-placed { animation: none; } }
@media (max-width: 760px) { .cue { display: none; } }

/* The page scrolls without a visible scrollbar; scroll areas inside the simulator keep theirs. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Arrival (cntxtlabs.co's curve, slower): what wasn't in view at first waits hidden, then, once
   about 15 % of it is in view, rises 28 px into place over 1.15 s while it fades in a little
   quicker (0.8 s), once; levo.js (LevoArrive) does the waiting and the 90 ms steps along a row.
   Less motion: all in place. */
@keyframes arrive-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes arrive-fade { from { opacity: 0; } to { opacity: 1; } }
.is-waiting { opacity: 0; }
.is-arriving { animation: arrive-rise 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms) both, arrive-fade 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms) both; }
@media (prefers-reduced-motion: reduce) {
	.is-waiting { opacity: 1; }
	.is-arriving { animation: none; }
}

/* The price's parts (levo.js): this price's spots as the app's disk bar (a segment each, the
   claimed ones filled), and the next price as a small chip. */
.spots { display: flex; gap: 2px; width: 100%; }
.spots i { flex: 1; height: 8px; border-radius: 1.5px; background: rgb(var(--ink) / 0.12); }
.spots i.is-on { background: var(--lit); }
.pp-next { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--lit); background: color-mix(in srgb, var(--lit) 13%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; }