/* ---------- tokens ---------- */

:root {
	--bg: #fafafc;
	--surface: #ffffff;
	--sunk: #f1f2f6;
	--line: #e4e6ec;
	--line-2: #d4d8e0;
	--text: #12151a;
	--text-2: #525a66;
	--text-3: #828b98;
	--accent: #a9721f;
	--accent-2: #8a5c15;
	--wash: rgba(169, 114, 31, 0.1);
	--nav-bg: rgba(250, 250, 252, 0.8);
	--stage-1: #eef0f5;
	--stage-2: #e1e5ee;
	--chrome: rgba(255, 255, 255, 0.72);
	--shadow: 0 22px 55px -26px rgba(18, 21, 26, 0.34);
	--shadow-sm: 0 2px 10px -4px rgba(18, 21, 26, 0.2);

	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--wrap: 1120px;
	--gutter: clamp(1.1rem, 4vw, 2.5rem);
	--nav-h: 60px;
	--radius: 14px;

	--button-text: #fff9ee;
	--download-button-bg: #000;
	--download-button-bg-hover: rgba(0, 0, 0, 0.8);
	--download-button-text: #FFF;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0e1116;
		--surface: #161b22;
		--sunk: #0a0d12;
		--line: #242b35;
		--line-2: #333b47;
		--text: #edf0f4;
		--text-2: #a5afbc;
		--text-3: #79838f;
		--accent: #dfa75b;
		--accent-2: #f0c081;
		--wash: rgba(223, 167, 91, 0.13);
		--nav-bg: rgba(14, 17, 22, 0.78);
		--stage-1: #1b2129;
		--stage-2: #11161d;
		--chrome: rgba(30, 36, 45, 0.78);
		--shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.78);
		--shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.55);
		--button-text: #000;
		--download-button-bg: #FFF;
		--download-button-bg-hover: rgba(255, 255, 255, 0.8);
		--download-button-text: #000;
	}
}

:root[data-theme="dark"] {
	--bg: #0e1116;
	--surface: #161b22;
	--sunk: #0a0d12;
	--line: #242b35;
	--line-2: #333b47;
	--text: #edf0f4;
	--text-2: #a5afbc;
	--text-3: #79838f;
	--accent: #dfa75b;
	--accent-2: #f0c081;
	--wash: rgba(223, 167, 91, 0.13);
	--nav-bg: rgba(14, 17, 22, 0.78);
	--stage-1: #1b2129;
	--stage-2: #11161d;
	--chrome: rgba(30, 36, 45, 0.78);
	--shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.78);
	--shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.55);
	--button-text: #000;
	--download-button-bg: #FFF;
	--download-button-bg-hover: rgba(255, 255, 255, 0.8);
	--download-button-text: #000;
}

/* ---------- base ---------- */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	text-wrap: balance;
	letter-spacing: -0.022em;
	line-height: 1.15;
}

h1 {
	font-size: clamp(2.15rem, 5.4vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.035em;
}

h2 {
	font-size: clamp(1.55rem, 3.2vw, 2.2rem);
	font-weight: 700;
}

h3 {
	font-size: 1.02rem;
	font-weight: 600;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

img,
video {
	max-width: 100%;
}

.wrap {
	width: min(var(--wrap), 100%);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

section {
	scroll-margin-top: calc(var(--nav-h) + 8px);
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.eyebrow {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--accent);
	margin-bottom: 0.85rem;
}

.sec-head {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sec-head p {
	color: var(--text-2);
	margin-top: 0.9rem;
	font-size: 1.05rem;
}

.mono {
	font-family: var(--mono);
	font-size: 0.92em;
}

/* ---------- top menu ---------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--nav-h);
	background: var(--nav-bg);
	border-bottom: 1px solid var(--line);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

.nav-in {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	margin-right: auto;
}

.brand img {
	width: 26px;
	height: 26px;
	border-radius: 6px;
}

.brand .v {
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--accent);
	background: var(--wash);
	border-radius: 999px;
	padding: 0.1rem 0.42rem;
	letter-spacing: 0.02em;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nav-links a {
	text-decoration: none;
	color: var(--text-2);
	font-size: 0.92rem;
	font-weight: 500;
	padding: 0.4rem 0.7rem;
	border-radius: 8px;
	transition:
		color 0.15s,
		background 0.15s;
}

.nav-links a:hover {
	color: var(--text);
	background: var(--sunk);
}

.nav-links a.active {
	color: var(--accent);
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* theme selector */

.theme {
	display: inline-flex;
	padding: 2px;
	gap: 2px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}

.theme button {
	display: inline-grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-3);
	cursor: pointer;
	padding: 0;
	transition:
		background 0.15s,
		color 0.15s;
}

.theme button:hover {
	color: var(--text);
}

.theme button[aria-pressed="true"] {
	background: var(--wash);
	color: var(--accent);
}

.theme svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hamburger {
	display: none;
	width: 34px;
	height: 32px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}

.hamburger svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.only-mobile {
	display: none;
}

@media (max-width: 900px) {
	.nav-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem var(--gutter) 1rem;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-sm);
	}

	.nav-links.open {
		display: flex;
	}

	.nav-links a {
		padding: 0.7rem 0.5rem;
		font-size: 1rem;
		border-bottom: 1px solid var(--line);
	}

	.nav-links a:last-child {
		border-bottom: 0;
	}

	.hamburger {
		display: grid;
	}

	.nav-right .nav-cta {
		display: none;
	}

	.only-mobile {
		display: block;
		color: var(--accent) !important;
		font-weight: 600 !important;
	}
}

/* ---------- buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 1.05rem;
	border-radius: 10px;
	font-size: 0.94rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
	transition:
		transform 0.12s ease,
		background 0.15s,
		border-color 0.15s;
}

.btn:active {
	transform: translateY(1px);
}

.btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.btn-primary {
	background: var(--accent);
	color: var(--button-text);
}

.btn-primary:hover {
	background: var(--accent-2);
}

.btn-ghost {
	background: var(--surface);
	color: var(--text);
	border-color: var(--line-2);
}

.btn-ghost:hover {
	background: var(--sunk);
}

.btn-sm {
	padding: 0.42rem 0.85rem;
	font-size: 0.88rem;
}

.btn-download {
	background: var(--download-button-bg);
	color: var(--download-button-text);
}

.btn-download:hover {
	background: var(--download-button-bg-hover);
}

/* ---------- hero ---------- */

.hero {
	padding-block: clamp(2.75rem, 7vw, 4.75rem) clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.hero .lede {
	max-width: 40rem;
	margin: 1.15rem auto 0;
	color: var(--text-2);
	font-size: clamp(1.02rem, 1.6vw, 1.16rem);
}

.hero .actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-top: 1.75rem;
}

.meta {
	margin-top: 1rem;
	font-family: var(--mono);
	font-size: 0.76rem;
	color: var(--text-3);
}

/* the screenshot stage: a menu bar with the app's panel hanging from it */

.stage {
	--shot-w: clamp(200px, 24vw, 262px);
	/* Frame 06's gear menu reaches 226px (in capture pixels) further right
         than the panel does, so the gutter has to clear that or the stage's
         overflow clips it. The 0.75rem is breathing room past the menu edge. */
	--shot-r: calc(var(--shot-w) * 226 / 784 + 0.75rem);
	position: relative;
	width: min(860px, 100%);
	height: 660px;
	margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
	box-shadow: var(--shadow);
	overflow: hidden;
	padding-bottom: clamp(1.25rem, 3vw, 2rem);
	text-align: left;
}

.stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 78% 0%, var(--wash), transparent 70%),
		radial-gradient(55% 60% at 12% 100%, rgba(120, 140, 180, 0.14), transparent 72%);
}

.menubar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	height: 28px;
	padding-inline: 0.85rem;
	background: var(--chrome);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 0.72rem;
	color: var(--text-2);
}

.menubar .apple {
	width: 20px;
	height: 20px;
	fill: currentColor;
	opacity: 0.75;
	flex: none;
}

.menubar .menus {
	display: flex;
	gap: 0.9rem;
	opacity: 0.7;
}

.menubar .menus b {
	font-weight: 600;
	color: var(--text);
}

.mb-app {
	position: absolute;
	top: 50%;
	right: calc(var(--shot-r) + var(--shot-w) / 2 - 10px);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 5px;
	color: var(--text);
}

.mb-app svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	opacity: 0.8;
}

/* the shackle is a hollow arc in the source icon, not a filled shape */
.mb-app svg .shackle {
	fill: none;
	stroke: currentColor;
	stroke-width: 4;
}

.mb-sys {
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--text-3);
}

.mb-sys svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.8;
}

.shot-col {
	position: relative;
	z-index: 1;
	width: var(--shot-w);
	margin-left: auto;
	margin-right: var(--shot-r);
	/* pull the panel's notch up against the menu bar */
	margin-top: calc(var(--shot-w) * -0.052);
}

/* The captures cross-fade in place. Every frame shares the same notch
       offset and panel width, so top-aligning them keeps the panel pinned to
       the menu bar, and the tallest frame reserves the height so that nothing
       below the stage reflows as they cycle. */
.shots {
	position: relative;
	aspect-ratio: 784 / 1776;
}

@supports not (aspect-ratio: 1) {
	.shots {
		padding-top: 226.53%;
	}
}

/* Each capture is scaled so that the app panel inside it comes out the same
       size, rather than so the image fills the box. The panel is 638px wide in
       every capture, but the canvas around it is not: sheets widen it on both
       sides, the gear menu widens it to the right. Scaling to the canvas would
       shrink the panel and drag the notch off the menu bar, so instead each
       frame declares its own canvas width (--w) and how far to slide it back so
       the panel lands where it always does (--dx). Both are in capture pixels;
       784 is the reference canvas. */
.shot-col img {
	position: absolute;
	top: 0;
	left: calc(100% * var(--dx, 0) / 784);
	display: block;
	width: calc(100% * var(--w, 784) / 784);
	/* the global img reset caps width at 100%, which would undo --w */
	max-width: none;
	height: auto;
	opacity: 0;
	transition: opacity 620ms ease;
}

.shot-col img.on {
	opacity: 1;
}

.shot-dots {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
}

.shot-dots button {
	-webkit-appearance: none;
	appearance: none;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--text-3);
	opacity: 0.4;
	cursor: pointer;
	transition:
		opacity 220ms ease,
		background 220ms ease,
		transform 220ms ease;
}

.shot-dots button:hover {
	opacity: 0.75;
}

.shot-dots button[aria-current="true"] {
	background: var(--accent);
	opacity: 1;
	transform: scale(1.4);
}

.shot-dots button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.shot-col img {
		transition: none;
	}
}

@media (max-width: 780px) {
	.mb-sys {
		display: none;
	}

	.menubar .menus {
		display: none;
	}
}

@media (max-width: 700px) {
	.stage {
		--shot-w: min(260px, 64vw);
	}

	.shot-col {
		margin-inline: auto;
	}

	.mb-app {
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

/* ---------- trust strip ---------- */

.strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin-top: clamp(2rem, 4vw, 3rem);
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: left;
}

.strip div {
	background: var(--surface);
	padding: 1rem 1.15rem;
}

.strip strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
}

.strip span {
	font-size: 0.82rem;
	color: var(--text-3);
}

/* ---------- features ---------- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 1rem;
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.35rem 1.4rem 1.5rem;
	transition:
		border-color 0.15s,
		transform 0.15s;
}

.card:hover {
	border-color: var(--line-2);
	transform: translateY(-2px);
}

.card .ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--wash);
	color: var(--accent);
	margin-bottom: 0.9rem;
}

.card .ico svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card p {
	margin-top: 0.5rem;
	color: var(--text-2);
	font-size: 0.94rem;
}

/* ---------- under the hood ---------- */

.band {
	background: var(--sunk);
	border-block: 1px solid var(--line);
}

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.75rem 2rem;
}

.fact .n {
	font-family: var(--mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--text-3);
}

.fact strong {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0.35rem 0 0.5rem;
}

.fact p {
	color: var(--text-2);
	font-size: 0.94rem;
}

/* ---------- demo video ---------- */

.demo-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 880px) {
	.demo-grid {
		grid-template-columns: 1fr minmax(280px, 380px);
	}
}

.demo-lede {
	margin-top: 0.9rem;
	color: var(--text-2);
}

.demo-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.demo-list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	color: var(--text-2);
	font-size: 0.95rem;
}

.demo-list svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.24rem;
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.video-frame {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
	box-shadow: var(--shadow);
	padding: clamp(0.75rem, 2vw, 1.15rem);
	margin-inline: auto;
	width: 100%;
	max-width: 380px;
}

.video-frame video {
	display: block;
	width: 100%;
	aspect-ratio: 1042 / 1986;
	border-radius: 10px;
	background: #000;
}

.video-cap {
	margin-top: 0.75rem;
	text-align: center;
	font-family: var(--mono);
	font-size: 0.7rem;
	color: var(--text-3);
}

/* ---------- release notes ---------- */

.rel {
	display: grid;
	gap: 0.9rem 2.5rem;
	padding-block: 1.9rem;
	border-top: 1px solid var(--line);
}

.rel:first-of-type {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 780px) {
	.rel {
		grid-template-columns: 190px 1fr;
	}
}

.rel-v {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	align-self: start;
	gap: 0.5rem;
}

.rel-v h3 {
	font-family: var(--mono);
	font-size: 1.12rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.rel-v .badge {
	font-family: var(--mono);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
	background: var(--wash);
	border-radius: 999px;
	padding: 0.14rem 0.5rem;
}

.rel-v time {
	display: block;
	width: 100%;
	font-size: 0.83rem;
	color: var(--text-3);
}

.rel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.rel li {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 0.85rem;
	align-items: baseline;
	color: var(--text-2);
	font-size: 0.95rem;
}

@media (max-width: 520px) {
	.rel li {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

.tag {
	font-family: var(--mono);
	font-size: 0.63rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	text-align: center;
	border-radius: 5px;
	padding: 0.16rem 0;
	border: 1px solid var(--line-2);
	color: var(--text-3);
	justify-self: start;
	width: 74px;
}

.tag.new {
	color: #19820f;
	border-color: #19820f;
}

.tag.fixed {
	color: var(--accent);
	border-color: var(--accent);
}

.tag.improved {
	color: #3150ff;
	border-color: #3150ff;
}

/* ---------- closing CTA ---------- */

.cta {
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: clamp(2.25rem, 6vw, 3.5rem) var(--gutter);
	box-shadow: var(--shadow-sm);
}

.cta p {
	max-width: 34rem;
	margin: 0.9rem auto 0;
	color: var(--text-2);
}

.cta .actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-top: 1.6rem;
}

/* ---------- footer ---------- */

footer {
	border-top: 1px solid var(--line);
	padding-block: 2rem;
	font-size: 0.85rem;
	color: var(--text-3);
}

.foot-in {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.25rem;
	justify-content: space-between;
	align-items: center;
}

footer a {
	color: var(--text-2);
	text-decoration: none;
}

footer a:hover {
	color: var(--accent);
}