/* =====================================================================
   Aimi Session — landing page
   Accents mapped to the Aimi brand guide: Purple Beats #AF70FF,
   Blue Bass #7098FF, Red Melody #FF7070, Green Harmony #90FFB9,
   Orange Pads #FFB470. Type: Nexa (brand primary) / Open Sans backup.
   ===================================================================== */

@font-face {
	font-family: 'Nexa';
	src: url('Nexa-Book.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nexa';
	src: url('Nexa-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Tape-label handwriting — same face the mixtape site writes its cassette
   labels in (SIL OFL 1.1, see OFL-GochiHand.txt). */
@font-face {
	font-family: 'Gochi Hand';
	src: url('GochiHand-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg-0: #141414;
	/* near-black canvas */
	--bg-1: #1C1C1C;
	/* Black — cards, panels, mock */
	--bg-2: #262626;
	/* neutral grey (chips, inputs) */
	--bg-3: #303030;
	/* neutral grey (raised) */
	--bg-4: #3A3A3A;
	/* neutral grey (badges) */
	--line: #2E2E2E;
	/* neutral grey border */
	--line-soft: #242424;
	/* neutral grey soft border */
	--text-0: #ffffff;
	/* White */
	--text-1: #B3B3B3;
	/* neutral grey */
	--text-2: #757575;
	/* neutral grey (muted) */
	--accent: #AF70FF;
	/* Purple Beats */
	--accent-2: #7098FF;
	/* Blue Bass */
	--accent-3: #FF7070;
	/* Red Melody */
	--good: #90FFB9;
	/* Green Harmony */
	--warn: #FFB470;
	/* Orange Pads */
	--radius: 14px;
	--shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.75);
	--maxw: 1100px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg-0);
	color: var(--text-0);
	font-family: 'Nexa', 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--accent-2);
}

h1,
h2,
h3 {
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--accent);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
}

.skip:focus {
	left: 12px;
	top: 12px;
}

/* ---------------------------------------------------------------- nav */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
	border-bottom: 1px solid transparent;
}

.nav.scrolled {
	background: rgba(28, 28, 28, 0.82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--line-soft);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.nav-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.logo {
	display: flex;
	align-items: center;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--text-0);
	text-decoration: none;
}

/* A lock-up is three pieces on one inline run: thread, "aimi" wordmark, product
   name. Thread and wordmark carry the same height and the same vertical-align,
   which is what makes their tops and bottoms line up exactly — they are two
   halves of one piece of artwork, so any drift between them reads as a mistake.
   Both are centred on the product name (logo midpoint to text midpoint, not
   baseline to baseline), so the artwork reads as a peer of the word rather than
   a letter in it. Keep the two selectors together; splitting them is how the
   heights drift apart. */
.mark,
.wordmark {
	height: 0.88em;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

/* Tighter than the word space below, so thread and wordmark group together. */
.mark {
	margin-right: 0.22em;
}

/* Stands in for the word space before the product name. */
.wordmark {
	margin-right: 0.3em;
}

.nav-links {
	display: flex;
	gap: 22px;
	margin-left: auto;
}

.nav-links a {
	color: var(--text-1);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.2s;
}

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

/* ------------------------------------------------------------ buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-radius: 12px;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	font-family: inherit;
	color: var(--text-0);
	transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.2s ease,
		border-color 0.2s ease, filter 0.2s ease;
}

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

.btn.primary {
	background: linear-gradient(135deg, var(--accent) 0%, rgba(174, 112, 255, 0.215) 100%);
	color: #fff;
	box-shadow: 0 10px 30px -10px rgba(175, 112, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.btn.primary:hover {
	filter: brightness(1.08);
	box-shadow: 0 14px 40px -10px rgba(175, 112, 255, 0.65),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

.btn.ghost {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	color: var(--text-0);
	backdrop-filter: blur(6px);
}

.btn.ghost:hover {
	border-color: #3A3A3A;
	background: rgba(255, 255, 255, 0.07);
}

.btn.outline {
	background: transparent;
	border: 1.5px solid var(--accent);
	color: #BF8DFF;
}

.btn.outline:hover {
	background: rgba(175, 112, 255, 0.12);
}

.btn.sm {
	padding: 9px 18px;
	font-size: 13.5px;
	border-radius: 10px;
}

.btn.lg {
	padding: 15px 30px;
	font-size: 16px;
	border-radius: 14px;
}

.play-ic {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --------------------------------------------------------------- hero */
.hero {
	position: relative;
	padding: 148px 24px 0;
	text-align: center;
	overflow: hidden;
}

#aurora {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(175, 112, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(175, 112, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 90% 65% at 50% 20%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 20%, #000 30%, transparent 75%);
}

.hero-inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(175, 112, 255, 0.12);
	border: 1px solid rgba(175, 112, 255, 0.35);
	color: #C79BFF;
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.pulse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--good);
	box-shadow: 0 0 0 0 rgba(144, 255, 185, 0.6);
	animation: pulse 2.2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(144, 255, 185, 0.55);
	}

	70% {
		box-shadow: 0 0 0 9px rgba(144, 255, 185, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(144, 255, 185, 0);
	}
}

.hero h1 {
	font-size: clamp(40px, 6.4vw, 68px);
	font-weight: 850;
	margin: 30px auto 20px;
}

.hero h1 em {
	font-style: normal;
	background: linear-gradient(92deg, var(--accent) 5%, var(--accent-2) 55%, var(--good) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sub {
	font-size: clamp(16px, 2.1vw, 19.5px);
	color: var(--text-1);
	max-width: 720px;
	margin: 0 auto 36px;
}

.ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.fine {
	margin-top: 20px;
	font-size: 13px;
	color: var(--text-2);
}

/* -------------------------------------------------------- session mock */
.mock-wrap {
	position: relative;
	max-width: 920px;
	margin: 64px auto 0;
	perspective: 1400px;
	/* Reserve buffer room below the mock. The mock sits at the top and the
	   empty space beneath it absorbs the chat box growing as its text wraps,
	   so nothing below the mock shifts down until the buffer is used up. */
	min-height: 400px;
}

.mock {
	background: linear-gradient(180deg, var(--bg-1), #141414);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow:
		0 40px 120px -30px rgba(175, 112, 255, 0.28),
		0 30px 80px -30px rgba(0, 0, 0, 0.9),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	padding: 16px 16px 14px;
	text-align: left;
	font-size: 12.5px;
	transform: rotateX(4deg);
	transform-origin: 50% 0;
}

.mock-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
}

.mock-bar .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.dot.r {
	background: #652B34;
}

.dot.y {
	background: #747653;
}

.dot.g {
	background: #59645E;
}

.mock-title {
	margin-left: 10px;
	color: var(--text-2);
	font-weight: 600;
}

.mock-cr {
	margin-left: auto;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px 12px;
	color: #90FFB9;
	font-weight: 600;
	font-size: 11.5px;
}

.mock-prompt {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bg-2);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 14px;
	min-height: 40px;
}

.mock-you {
	background: var(--bg-4);
	color: var(--text-1);
	border-radius: 6px;
	padding: 2px 9px;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.type-line {
	color: var(--text-0);
}

.caret {
	display: inline-block;
	width: 8px;
	height: 15px;
	margin-left: 2px;
	background: var(--accent-2);
	vertical-align: text-bottom;
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

.mock-tracks {
	position: relative;
	display: grid;
	gap: 9px;
	min-height: 172px;
}

.playhead {
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: 132px;
	width: 2px;
	background: linear-gradient(180deg, var(--accent-2), rgba(112, 152, 255, 0.25));
	box-shadow: 0 0 12px rgba(112, 152, 255, 0.8);
	border-radius: 2px;
	opacity: 0;
	z-index: 5;
	transition: opacity 0.4s;
}

.playhead.on {
	opacity: 1;
}

.mtrack {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 10px;
	align-items: stretch;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.mtrack.in {
	opacity: 1;
	transform: none;
}

.tname {
	background: var(--bg-2);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	padding: 8px 11px;
	color: var(--text-1);
	font-weight: 650;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}

.tname .sw {
	width: 8px;
	height: 8px;
	border-radius: 3px;
	flex: none;
}

.mclips {
	display: flex;
	gap: 7px;
}

.mclip {
	height: 38px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: scaleX(0.6);
	transform-origin: left center;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.mclip.in {
	opacity: 0.96;
	transform: none;
}

.mclip canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mclip.lit {
	box-shadow: 0 0 14px rgba(112, 152, 255, 0.35);
	filter: brightness(1.25);
}

.mock-chat {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--bg-2);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 10px 14px;
	margin-top: 14px;
	min-height: 42px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s, transform 0.5s;
}

.mock-chat.in {
	opacity: 1;
	transform: none;
}

.mock-chat .who {
	background: linear-gradient(135deg, var(--accent), #7C3DCC);
	color: #fff;
	border-radius: 6px;
	padding: 2px 9px;
	font-weight: 700;
	font-size: 11px;
	white-space: nowrap;
}

.mock-chat .msg {
	color: var(--text-1);
}

.mock-chat .cost {
	margin-left: auto;
	white-space: nowrap;
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 2px 11px;
	font-size: 11px;
	color: var(--text-2);
}

/* --------------------------------------------------------- trust strip */
.truststrip {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 56px auto 0;
	padding: 22px 12px;
	border-top: 1px solid var(--line-soft);
	max-width: var(--maxw);
	font-size: 13.5px;
	color: var(--text-1);
}

.truststrip span {
	padding: 4px 22px;
}

.truststrip span+span {
	border-left: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------ sections */
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 96px 24px 0;
}

.sk {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-2);
	font-weight: 800;
	margin: 0 0 12px;
}

h2 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	margin-bottom: 16px;
}

.lead {
	font-size: 16.5px;
	color: var(--text-1);
	max-width: 760px;
	margin: 0 0 8px;
}

.lead strong {
	color: var(--text-0);
}

.cards3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
	margin-top: 38px;
}

.card {
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
	transform: translateY(-4px);
	border-color: #3A3A3A;
	box-shadow: 0 18px 40px -20px rgba(175, 112, 255, 0.35);
}

.card .n {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(175, 112, 255, 0.14);
	color: #BF8DFF;
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.card .n.ok {
	background: rgba(144, 255, 185, 0.13);
	color: var(--good);
}

.card .n.em {
	background: var(--bg-3);
	font-size: 16px;
}

.card h3 {
	font-size: 16.5px;
	margin-bottom: 7px;
}

.card p {
	margin: 0;
	font-size: 13.5px;
	color: var(--text-1);
}

.card p em {
	color: var(--accent-2);
	font-style: normal;
	font-weight: 600;
}

.vs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 44px;
}

.vs .cell {
	border-radius: var(--radius);
	padding: 24px;
	border: 1px solid var(--line);
}

.vs .cell h3 {
	font-size: 15.5px;
	margin-bottom: 8px;
}

.vs .them {
	background: var(--bg-1);
	color: var(--text-2);
}

.vs .them h3 {
	color: var(--text-1);
}

.vs .us {
	background:
		linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
		linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
	border: 1.5px solid transparent;
	box-shadow: 0 20px 50px -25px rgba(175, 112, 255, 0.5);
	color: var(--text-1);
}

.vs .us h3 {
	background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--good));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vs ul {
	margin: 8px 0 0 18px;
	padding: 0;
	font-size: 13.5px;
}

.vs li {
	margin: 6px 0;
}

/* ---------------------------------------------------------------- video */
.video-shell {
	margin-top: 38px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow), 0 30px 90px -30px rgba(112, 152, 255, 0.18);
	background: #1C1C1C;
	line-height: 0;
}

.video-shell video {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------ ownership */
.own-panel {
	background:
		radial-gradient(120% 160% at 85% -20%, rgba(175, 112, 255, 0.22), transparent 55%),
		radial-gradient(100% 140% at 0% 110%, rgba(112, 152, 255, 0.1), transparent 50%),
		var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 52px 44px;
	box-shadow: var(--shadow);
}

.card.dark {
	background: rgba(28, 28, 28, 0.55);
}

/* The two limits on the ownership promise. Deliberately not .fine — a note
   that says "we train on this" has no business being set as small print. */
.own-limits {
	margin-top: 26px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--warn);
	border-radius: 12px;
	background: rgba(28, 28, 28, 0.55);
	font-size: 14px;
	color: var(--text-1);
}

.own-limits strong {
	color: var(--text-0);
}

/* -------------------------------------------------------------- pricing */
.grant {
	display: flex;
	gap: 28px;
	align-items: center;
	background:
		linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
		linear-gradient(120deg, rgba(144, 255, 185, 0.8), rgba(112, 152, 255, 0.5)) border-box;
	border: 1.5px solid transparent;
	border-radius: 18px;
	padding: 26px 30px;
	margin-top: 38px;
	font-size: 14.5px;
	color: var(--text-1);
}

.grant strong {
	color: var(--text-0);
}

.grant-num {
	text-align: center;
	flex: none;
	min-width: 130px;
}

.grant-num .count {
	display: block;
	font-size: 44px;
	font-weight: 850;
	letter-spacing: -0.03em;
	background: linear-gradient(92deg, var(--accent), var(--accent-2), var(--good));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.grant-num small {
	color: var(--text-2);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Frame for the embedded Stripe pricing table — same panel treatment as the
   credit-pack tiers around it. The table is display-only on this page: a
   transparent overlay routes any click to the in-app credits page. */
.stripe-panel {
	position: relative;
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 28px 20px;
	margin-top: 38px;
	overflow: hidden;
}

.stripe-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 18px;
	cursor: pointer;
}

.stripe-panel:has(.stripe-overlay:hover) {
	border-color: var(--accent);
}

.tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 38px;
	align-items: stretch;
}

.tier {
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 28px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tier:hover {
	transform: translateY(-4px);
}

.tier.hot {
	background:
		linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
		linear-gradient(160deg, var(--accent), var(--accent-2)) border-box;
	border: 1.5px solid transparent;
	box-shadow: 0 24px 70px -25px rgba(175, 112, 255, 0.55);
}

.tier .tag {
	position: absolute;
	top: -12px;
	left: 24px;
	background: linear-gradient(135deg, var(--accent), #7C3DCC);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 13px;
	box-shadow: 0 6px 18px -6px rgba(175, 112, 255, 0.8);
}

.tier h3 {
	font-size: 16px;
}

.tier .price {
	font-size: 40px;
	font-weight: 850;
	letter-spacing: -0.03em;
	margin: 10px 0 2px;
}

.tier .price small {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-2);
}

.tier .qty {
	font-size: 13px;
	color: var(--accent-2);
	font-weight: 600;
	margin-bottom: 16px;
}

.tier ul {
	margin: 0 0 24px 18px;
	padding: 0;
	font-size: 13.5px;
	color: var(--text-1);
	flex: 1;
}

.tier li {
	margin: 7px 0;
}

.topups {
	margin-top: 30px;
	font-size: 14px;
	color: var(--text-1);
	background: var(--bg-1);
	border: 1px dashed var(--line);
	border-radius: 12px;
	padding: 18px 22px;
}

.topups strong {
	color: var(--text-0);
}

.menu {
	margin-top: 56px;
}

.menu h3 {
	font-size: 18px;
	margin-bottom: 14px;
}

.menu table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	max-width: 720px;
	font-size: 14px;
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.menu th,
.menu td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line-soft);
}

.menu tr:last-child td {
	border-bottom: 0;
}

.menu th {
	background: var(--bg-2);
	color: var(--text-1);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.menu td {
	color: var(--text-1);
}

.menu td em {
	color: var(--text-2);
	font-style: normal;
	font-size: 12.5px;
}

.menu td.cr {
	font-weight: 800;
	color: #BF8DFF;
	white-space: nowrap;
}

.menu td.cr.free {
	color: var(--good);
}

.menu-note {
	font-size: 13px;
	color: var(--text-2);
	margin-top: 14px;
	max-width: 720px;
}

/* ------------------------------------------------------------------ faq */
.faq {
	max-width: 780px;
	margin-top: 10px;
}

.faq details {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg-1);
	margin: 10px 0;
	overflow: hidden;
	transition: border-color 0.2s;
}

.faq details[open] {
	border-color: #3A3A3A;
}

.faq summary {
	font-weight: 700;
	cursor: pointer;
	font-size: 15px;
	padding: 16px 20px;
	list-style: none;
	position: relative;
	transition: color 0.2s;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: '+';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--accent-2);
	font-size: 20px;
	font-weight: 400;
	transition: transform 0.25s;
}

.faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.faq p {
	color: var(--text-1);
	font-size: 14px;
	margin: 0;
	padding: 0 20px 18px;
}

/* ------------------------------------------------------------ mixtape ----
   The cassette imagery is ported from the mixtape site itself (mixtape/
   src/app.css + routes/tapes): paper label stickers in Gochi Hand, a tape
   window with cover-art panes, and two punched reel holes with toothed hubs. */
.mixtape-shelf {
	margin-top: 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* Same lock-up as .logo above — thread, wordmark, name on one inline run, both
   images sized and aligned by the shared .mark/.wordmark rules. */
.mixtape-brand {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.01em;
	color: var(--text-0);
}

.shelf-tapes {
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
}

.cassette-mock {
	flex: 0 1 340px;
	min-width: 260px;
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: rotate(-1.2deg);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.cassette-mock:nth-child(even) {
	transform: rotate(1deg);
}

.cassette-mock:hover {
	transform: rotate(0deg) translateY(-3px);
	border-color: var(--accent);
}

/* The cassette shell: label up top, cover strip with the reel holes punched
   through it filling the rest of the face. */
.cass-face {
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Stuck-on paper sticker: cream paper, faint ruled lines, ballpoint ink,
   a slight crooked-sticker tilt held down by a strip of "tape". */
.label-sticker {
	position: relative;
	background:
		repeating-linear-gradient(180deg,
			transparent 0,
			transparent 27px,
			rgba(58, 76, 128, 0.16) 27px,
			rgba(58, 76, 128, 0.16) 28px),
		linear-gradient(180deg, #f6f2e4, #e9e3d0);
	color: #262019;
	font-family: 'Gochi Hand', 'Segoe Print', 'Comic Sans MS', cursive;
	border-radius: 5px;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.45),
		inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	transform: rotate(-0.8deg);
	padding: 7px 14px;
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.cassette-mock:nth-child(even) .label-sticker {
	transform: rotate(0.9deg);
}

.label-sticker::after {
	content: '';
	position: absolute;
	top: -7px;
	left: 50%;
	width: 58px;
	height: 14px;
	transform: translateX(-50%) rotate(1.6deg);
	background: rgba(255, 255, 255, 0.16);
	border-left: 1px dashed rgba(255, 255, 255, 0.22);
	border-right: 1px dashed rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(1px);
}

.lname {
	font-size: 21px;
	line-height: 1.15;
}

/* Cassette window: the cover-art strip runs edge to edge and the two reel
   holes are punched through it — like looking into a real cassette. */
.tape-window {
	position: relative;
	height: 66px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-0);
	padding: 4px;
	display: flex;
	gap: 3px;
}

.tape-window .pane {
	flex: 1;
	border-radius: 4px;
}

.tape-window .pane.empty {
	background: var(--bg-3);
}

.tape-reels {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26%;
	pointer-events: none;
}

.reel-hole {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bg-0);
	box-shadow:
		0 0 0 4px rgba(20, 20, 20, 0.7),
		inset 0 2px 6px rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The toothed hub inside the hole. A conic gradient — not a dashed border —
   so the six teeth sit at exact 30° intervals; dashed borders space unevenly. */
.reel-hole::after {
	content: '';
	width: 58%;
	height: 58%;
	border-radius: 50%;
	background: repeating-conic-gradient(from -15deg,
			var(--text-2) 0deg 30deg,
			transparent 30deg 60deg);
	-webkit-mask: radial-gradient(closest-side, transparent 70%, #000 73%);
	mask: radial-gradient(closest-side, transparent 70%, #000 73%);
}

/* Spin the hub only — the hole's shading must stay put. */
.reel-hole.reel-spinning::after {
	animation: reel-spin 2.4s linear infinite;
}

@keyframes reel-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.reel-hole.reel-spinning::after {
		animation: none;
	}
}

.cass-meta {
	font-size: 12px;
	color: var(--text-2);
	text-align: center;
}

.cassette-mock.playing .cass-meta {
	color: var(--good);
}

.listen-cta {
	display: flex;
	justify-content: center;
	margin-top: 38px;
}

/* ------------------------------------------------------------ final cta */
.final {
	position: relative;
	text-align: center;
	margin-top: 110px;
	padding: 96px 24px;
	background:
		radial-gradient(90% 120% at 50% 115%, rgba(175, 112, 255, 0.35), transparent 60%),
		radial-gradient(60% 80% at 50% 130%, rgba(112, 152, 255, 0.18), transparent 55%),
		var(--bg-0);
	border-top: 1px solid var(--line-soft);
	overflow: hidden;
}

.final h2 {
	font-size: clamp(30px, 4.4vw, 44px);
}

.final p {
	color: var(--text-1);
	max-width: 560px;
	margin: 18px auto 30px;
}

.final .fine {
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--text-2);
}

.footer-logo {
	display: block;
	/* width set by JS relative to the "Claim your founding grant" button;
	   this is the fallback until that runs */
	width: 140px;
	height: auto;
	margin: 30px auto 0;
}

.footer {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 26px 24px 34px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-2);
	border-top: 1px solid var(--line-soft);
}

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

.footer a:hover {
	color: var(--text-1);
}

/* ---------------------------------------------------------------- modal */
.modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal[hidden] {
	display: none;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 28, 0.85);
	backdrop-filter: blur(8px);
}

.modal-body {
	position: relative;
	width: min(960px, 92vw);
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	border: 1px solid var(--line);
	box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.9);
	animation: modal-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes modal-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}
}

.modal-body video {
	width: 100%;
	background: #1C1C1C;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: rgba(28, 28, 28, 0.7);
	color: var(--text-0);
	font-size: 15px;
	cursor: pointer;
}

.modal-close:hover {
	background: rgba(58, 58, 58, 0.9);
}

/* --------------------------------------------------------------- reveal */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.vis {
	opacity: 1;
	transform: none;
}

.reveal.d1 {
	transition-delay: 0.08s;
}

.reveal.d2 {
	transition-delay: 0.16s;
}

.reveal.d3 {
	transition-delay: 0.24s;
}

.reveal.d4 {
	transition-delay: 0.32s;
}

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

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.caret,
	.pulse-dot {
		animation: none;
	}

	.mock {
		transform: none;
	}
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 760px) {
	.nav-links {
		display: none;
	}

	.hero {
		padding-top: 120px;
	}

	.mock {
		transform: none;
		font-size: 11.5px;
	}

	.mock-wrap {
		/* more reserve on narrow screens, where the chat (and prompt) wrap
		   onto several extra lines — sized to hold up to ~6 lines of chat */
		min-height: 530px;
	}

	.mock-chat .cost {
		/* let the pill break after the ':' onto a second line when space is tight
		   (the non-breaking spaces keep "this turn:" and "10 cr" each intact) */
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}

	.mtrack {
		grid-template-columns: 88px 1fr;
	}

	.playhead {
		left: 98px;
	}

	.truststrip span {
		border: 0 !important;
		padding: 4px 12px;
	}

	.grant {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.own-panel {
		padding: 36px 24px;
	}

	.wrap {
		padding-top: 72px;
	}
}

/* ---------------------------------------------------------------- legal ----
   Terms of Service / Privacy Policy — one readable column on the same dark
   canvas as the landing page, sharing its nav, footer and type scale. */
.legal-page .nav {
	/* No hero to float over here, so the bar is glass from the first pixel
	   (main.js still toggles .scrolled, which lands on the same styling). */
	background: rgba(28, 28, 28, 0.82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--line-soft);
}

.legal {
	max-width: 820px;
	padding-top: 132px;
	padding-bottom: 40px;
}

.legal h1 {
	font-size: clamp(30px, 4.4vw, 42px);
	font-weight: 800;
	margin-bottom: 14px;
}

.legal-meta {
	font-size: 12.5px;
	color: var(--text-2);
	margin: 0 0 32px;
}

.legal section {
	margin-top: 34px;
	/* clear the fixed nav when jumped to from the contents list */
	scroll-margin-top: 96px;
}

.legal h2 {
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 12px;
}

.legal h3 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--text-0);
	margin: 24px 0 8px;
}

.legal p,
.legal li {
	color: var(--text-1);
	font-size: 15px;
}

.legal p {
	margin: 0 0 14px;
	max-width: 72ch;
}

.legal ul,
.legal ol {
	margin: 0 0 14px;
	padding-left: 22px;
	max-width: 72ch;
}

.legal li {
	margin-bottom: 8px;
}

.legal strong {
	color: var(--text-0);
}

.legal a {
	color: var(--accent-2);
}

/* ---- plain-English summary card ---- */
.legal-summary {
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 22px 24px 8px;
	margin-bottom: 34px;
}

.legal-summary h2 {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
}

.legal-summary p {
	font-size: 13px;
	color: var(--text-2);
}

/* ---- contents ---- */
.legal-toc {
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	padding: 20px 0 8px;
}

.legal-toc h2 {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-2);
	font-weight: 800;
	margin-bottom: 12px;
}

.legal-toc ol {
	columns: 2;
	column-gap: 32px;
	padding-left: 20px;
}

.legal-toc li {
	break-inside: avoid;
	font-size: 14px;
	margin-bottom: 6px;
}

.legal-toc a {
	text-decoration: none;
}

.legal-toc a:hover {
	text-decoration: underline;
}

/* ---- the ownership call-out (terms §7) ---- */
.legal-callout {
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 4px 24px 6px;
	margin: 0 0 18px;
}

.legal-callout .yes,
.legal-callout .no {
	position: relative;
	list-style: none;
	padding-left: 26px;
}

.legal-callout .yes::before,
.legal-callout .no::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.legal-callout .yes::before {
	content: '✓';
	color: var(--good);
}

.legal-callout .no::before {
	content: '✕';
	color: var(--accent-3);
}

/* ---- processor table (privacy §5) ---- */
.legal-table-wrap {
	overflow-x: auto;
	margin-bottom: 16px;
}

.legal-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
}

.legal-table th,
.legal-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--text-1);
	vertical-align: top;
}

.legal-table th {
	color: var(--text-0);
	font-weight: 700;
	border-bottom-color: var(--line);
}

.legal-table td:first-child {
	color: var(--text-0);
	font-weight: 700;
	white-space: nowrap;
}

.legal-foot-note {
	font-size: 13px;
	color: var(--text-2);
	margin-top: 24px;
}

@media (max-width: 760px) {
	.legal {
		padding-top: 104px;
	}

	.legal-toc ol {
		columns: 1;
	}
}