/* OdoTick — site design system (light + dark).

   Aubergine #6A266F is the app's seed colour (CLAUDE.md § Design system), a
   money-and-receipts colour with no energy-type association. Do not drift it,
   and do not introduce a green: the app never labels an energy type clean or
   eco, and neither does the site.

   No build step, no framework, no JavaScript, no third-party fonts or scripts:
   /privacy claims this site loads nothing from anyone else, and that has to
   stay true. Everything below is hand-written CSS on the system font stack.
   The app's Space Grotesk / Public Sans pairing is deliberately NOT pulled from
   Google Fonts here — a font request is a third-party request.

   Layout order:
     tokens · base · header · buttons
     hero · shots · trust · sections · bento · comparison · plus · faq · cta
     footer · legal pages · 404
*/

/* ── Tokens ─────────────────────────────────────────────── */
:root {
	--brand: #6a266f;
	--brand-ink: #58205c;
	--brand-deep: #3f1743;
	--brand-soft: #f6daf4;

	/* Sand. In the app this means "OdoTick did arithmetic"; here it marks the
	   boxes that state a consequence the reader must not miss. */
	--sand: #f9e7c6;
	--sand-line: #e3caa0;
	--sand-ink: #4b2100;

	/* The cheap → dear ramp, straight from the app. One hue; weight means
	   dearer. Four stops interpolated between the ends CLAUDE.md fixes. The
	   ends swap on dark so weight still reads as dearer against a dark ground. */
	--r1: #e4aee6;
	--r2: #c275c7;
	--r3: #8e3d94;
	--r4: #57125d;

	--ink: #1c1a1e;
	--body: #574e5a;
	--muted: #7d7280;

	/* Three grounds, and the order matters: --bg is the page, --surface is a
	   section that recedes from it, --card is a surface that rises above it.
	   A card painted in --bg disappears on a --bg section, which is exactly
	   what happens in dark mode if you reach for the wrong one. */
	--bg: #faf7fb;
	--card: #ffffff;
	--surface: #f3ecf4;
	--line: #e6dce8;

	--radius-sm: 14px;
	--radius: 20px;
	--radius-lg: 30px;
	--radius-xl: 40px;

	--shadow-xs: 0 1px 2px rgba(28, 26, 30, 0.07);
	--shadow: 0 1px 2px rgba(28, 26, 30, 0.04), 0 12px 32px rgba(28, 26, 30, 0.07);
	--shadow-lg: 0 30px 70px rgba(28, 26, 30, 0.16);

	--wrap: 1160px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Every figure on the site rides on this, the way the app puts every figure
	   in Space Grotesk. It is the system stack for now because pulling Space
	   Grotesk from Google Fonts would be a third-party request, and /privacy
	   says this site makes none. To get the real face, self-host a woff2 under
	   /assets/fonts and put it at the front of this one stack — nothing else
	   needs to change. */
	--font-figure: var(--font);
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand: #e9a6ec;
		--brand-ink: #f0bdf2;
		--brand-deep: #f6d5f7;
		--brand-soft: #35103a;

		--sand: #2e1c07;
		--sand-line: #5c4318;
		--sand-ink: #ffddb0;

		--r1: #7a3d80;
		--r2: #9e5aa4;
		--r3: #c77fcc;
		--r4: #efaaf2;

		--ink: #e9e0ea;
		--body: #ccc1ce;
		--muted: #9a8d9d;

		--bg: #131015;
		--card: #1e1821;
		--surface: #191419;
		--line: #322a35;

		--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
	}
}

/* ── Base ───────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--ink);
	line-height: 1.08;
	letter-spacing: -0.035em;
	margin: 0 0 0.5em;
	font-weight: 800;
}

h4 {
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

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

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

strong {
	color: var(--ink);
	font-weight: 700;
}

/* Figures and identifiers sit in a mono face for the same reason the app gives
   them Space Grotesk: a number you might check by hand should look like one.
   Tabular figures keep a column of prices aligned. */
code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1px 5px;
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
	border-radius: 8px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: var(--bg);
	padding: 12px 20px;
	z-index: 100;
	border-radius: 0 0 12px 0;
}

.skip:focus {
	left: 0;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 72px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 19px;
	color: var(--ink);
	letter-spacing: -0.04em;
	margin-inline-end: auto;
}

.logo:hover {
	text-decoration: none;
}

.logo svg {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 10px;
	box-shadow: var(--shadow-xs);
}

.nav {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 5px;
	border-radius: 999px;
}

.nav a {
	color: var(--body);
	font-weight: 600;
	font-size: 14.5px;
	padding: 7px 15px;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nav a:hover {
	color: var(--ink);
	background: var(--card);
	text-decoration: none;
	box-shadow: var(--shadow-xs);
}

.nav a[aria-current="page"] {
	color: var(--ink);
	background: var(--card);
	box-shadow: var(--shadow-xs);
}

@media (max-width: 560px) {
	.site-header .wrap {
		gap: 12px;
		padding: 0 16px;
	}
	.logo {
		font-size: 17px;
	}
	.logo svg {
		width: 30px;
		height: 30px;
	}
	.nav a {
		padding: 7px 12px;
		font-size: 14px;
	}
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.97rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.btn-primary {
	background: var(--brand);
	color: var(--bg);
	box-shadow: var(--shadow);
}

.btn-ghost {
	background: var(--card);
	color: var(--ink);
	border-color: var(--line);
}

/* ── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brand);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 16px;
}

.eyebrow svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.eyebrow-pill {
	background: var(--brand-soft);
	color: var(--brand-ink);
	padding: 8px 16px;
	border-radius: 999px;
	letter-spacing: 0.1em;
	margin-bottom: 24px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
	position: relative;
	padding: 84px 0 64px;
	text-align: center;
	overflow: hidden;
}

/* Two soft aubergine washes behind the headline. Decorative and
   pointer-transparent, so nothing above them loses a click. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
}

.hero::before {
	width: 900px;
	height: 620px;
	top: -300px;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--brand) 24%, transparent),
		transparent
	);
	filter: blur(20px);
}

.hero::after {
	width: 640px;
	height: 380px;
	top: 140px;
	inset-inline-end: -200px;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--brand) 14%, transparent),
		transparent
	);
	filter: blur(30px);
}

.hero > .wrap {
	position: relative;
	z-index: 1;
}

.hero h1 {
	font-size: clamp(2.6rem, 6.2vw, 4.4rem);
	margin: 0 auto 22px;
	max-width: 13em;
}

.hero h1 .accent {
	display: block;
	background: linear-gradient(100deg, var(--brand) 0%, var(--brand-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* The gradient clips to the glyphs; descenders need the extra line box. */
	padding-bottom: 0.08em;
}

.hero-sub {
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	max-width: 36em;
	margin: 0 auto 32px;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.btn-lg {
	padding: 17px 30px;
	font-size: 1.02rem;
}

.hero-note {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	font-size: 0.87rem;
	color: var(--muted);
	margin: 0;
}

.hero-note span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hero-note svg {
	width: 14px;
	height: 14px;
	color: var(--brand);
	flex: none;
}

/* ── The hero figure ────────────────────────────────────── */
/* Design rule 1: the hero is a bare number on a plain surface — no card, no
   shadow, no chart, no icon. Everything else on this page is a tile; this is
   not. Breaking that here would cost the page the one thing that makes it look
   like the app. The currency and the unit ride at ~⅓ size in muted ink and are
   attached to the number, exactly as the app sets them. */
.hero-figure {
	margin: 72px auto 0;
	max-width: 30em;
}

.figure {
	font-family: var(--font-figure);
	font-size: clamp(3.6rem, 10vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin: 0 0 14px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.08em;
}

.figure-cur,
.figure-unit {
	font-size: 0.33em;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--muted);
}

.figure-cap {
	font-size: 0.95rem;
	color: var(--muted);
	margin: 0;
}

/* ── Screenshot placeholders ────────────────────────────── */
/* Stand-ins until the real captures land. Each one names the screen it is
   waiting for, so filling them in later is mechanical: swap the .shot div for
   an <img> of the same aspect and the layout does not move. Deliberately
   drawn, not broken — a dashed frame and a hatch, never a grey void. */
.shot {
	aspect-ratio: 9 / 19.5;
	border-radius: 26px;
	border: 2px dashed color-mix(in srgb, var(--brand) 34%, var(--line));
	background-color: var(--card);
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 9px,
		color-mix(in srgb, var(--brand) 7%, transparent) 9px 10px
	);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	padding: 20px;
	text-align: center;
}

.shot svg {
	width: 26px;
	height: 26px;
	color: color-mix(in srgb, var(--brand) 62%, var(--muted));
}

.shot b {
	display: block;
	font-size: 0.95rem;
	color: var(--ink);
	letter-spacing: -0.02em;
}

.shot span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--muted);
}

/* ── Phone fan ──────────────────────────────────────────── */
.fan {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	margin-top: 64px;
}

.phone-card {
	flex: none;
	width: 300px;
	filter: drop-shadow(0 18px 34px rgba(28, 26, 30, 0.2));
}

.fan .fan-side {
	width: 250px;
	margin-bottom: 42px;
}

.fan-left {
	margin-inline-end: -46px;
	transform: rotate(-4.5deg);
	transform-origin: bottom right;
	z-index: 1;
}

.fan-right {
	margin-inline-start: -46px;
	transform: rotate(4.5deg);
	transform-origin: bottom left;
	z-index: 1;
}

.fan-main {
	z-index: 2;
}

@media (max-width: 900px) {
	.hero {
		padding-top: 52px;
	}
	.hero-figure {
		margin-top: 56px;
	}
	.fan {
		margin-top: 48px;
	}
	/* Below this width the fan is more clutter than context: the lead screen
	   carries the story on its own. */
	.fan-side {
		display: none;
	}
	.phone-card {
		width: 280px;
	}
}

@media (max-width: 400px) {
	.phone-card {
		width: 100%;
	}
}

/* ── Trust strip ────────────────────────────────────────── */
.trust {
	padding: 8px 0 0;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.trust-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 24px;
}

.trust-item svg {
	width: 20px;
	height: 20px;
	color: var(--brand);
	flex: none;
	margin-top: 4px;
}

.trust-item strong {
	display: block;
	color: var(--ink);
	font-size: 15px;
	margin-bottom: 3px;
	letter-spacing: -0.01em;
}

.trust-item span {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.5;
}

@media (max-width: 860px) {
	.trust-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Sections ───────────────────────────────────────────── */
.section {
	padding: 104px 0;
}

.section-head {
	max-width: 34em;
	margin: 0 auto 60px;
	text-align: center;
}

.section-head .eyebrow {
	justify-content: center;
}

.section-head h2 {
	font-size: clamp(2rem, 4.2vw, 3rem);
}

.section-head p {
	font-size: 1.09rem;
	margin: 0;
}

.section-alt {
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* Marks a feature the free tier does not get. If a claim is not true on the
   free plan, it needs one of these. */
.plus-tag {
	display: inline-block;
	vertical-align: middle;
	background: var(--brand);
	color: var(--bg);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	margin-inline-start: 8px;
	position: relative;
	top: -2px;
	white-space: nowrap;
}

/* The counterpart: a feature the free plan does get, where a reader scanning a
   grid of PLUS badges would otherwise assume it does not. Deliberately quieter
   — it reassures, it does not sell. */
.free-tag {
	display: inline-block;
	vertical-align: middle;
	background: var(--brand-soft);
	color: var(--brand-ink);
	border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	margin-inline-start: 8px;
	position: relative;
	top: -2px;
	white-space: nowrap;
}

/* ── Bento ──────────────────────────────────────────────── */
.bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.bcard {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bcard:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
	box-shadow: var(--shadow-lg);
}

.bcard h3 {
	font-size: 1.28rem;
	margin-bottom: 10px;
	letter-spacing: -0.025em;
}

.bcard p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--muted);
	line-height: 1.6;
}

.bcard .icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--brand-soft);
	color: var(--brand-ink);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.bcard .icon svg {
	width: 21px;
	height: 21px;
}

.bcard-media {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bcard-media .bcard-copy {
	max-width: 30em;
}

/* While these are placeholders they sit fully inside the card, because a dashed
   frame clipped halfway reads as broken rather than as a bleed. Once the real
   screenshots land, give .bcard-media `padding-bottom: 0` and drop this cap —
   the phone then bleeds off the bottom edge, which .bcard's overflow clips, and
   the grid reads as app surface instead of a row of thumbnails. */
.bcard-shot {
	margin-top: 26px;
	align-self: center;
	width: 100%;
	max-width: 190px;
}

/* The wide card has room to put the copy beside the shot instead of above it.
   Declared after .bcard-media so its grid wins over that flex. */
.bcard-split {
	display: grid;
	grid-template-columns: 1fr minmax(0, 220px);
	gap: 40px;
	align-items: center;
}

.bcard-split .bcard-shot {
	margin-top: 0;
	max-width: 220px;
}

/* A full phone is 2.2× as tall as it is wide, which in a landscape card buries
   three lines of copy under half a metre of frame. This one takes a crop
   instead — and a crop is what the real screenshot should be here too, so the
   aspect stays right when the placeholder is swapped out. */
.bcard-split .shot {
	aspect-ratio: 9 / 13;
}

@media (max-width: 980px) {
	.bcard-split {
		display: flex;
		flex-direction: column;
	}
	.bcard-split .bcard-shot {
		margin-top: 26px;
	}
}

.b-wide {
	grid-column: span 4;
}

.b-tall {
	grid-column: span 2;
	grid-row: span 2;
}

.b-third {
	grid-column: span 2;
}

.b-full {
	grid-column: 1 / -1;
}

/* Copy beside its bullets, so the full-width card does not run a single line of
   text the whole way across the grid. */
.bcard-wide-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 48px;
	align-items: center;
}

.bcard-wide-split .feature-list {
	margin-top: 0;
}

@media (max-width: 980px) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.b-wide,
	.b-tall,
	.b-third {
		grid-column: span 1;
		grid-row: auto;
	}
	.b-wide {
		grid-column: span 2;
	}
	.bcard-wide-split {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 620px) {
	.bento {
		grid-template-columns: 1fr;
	}
	.b-wide {
		grid-column: span 1;
	}
	.bcard {
		padding: 26px;
	}
}

/* ── Comparison bars ────────────────────────────────────── */
/* A hand-authored replica of the app's own chart, drawn in CSS: one bar per
   row, the figure at the end, every bar scaled against the dearest value. The
   ramp is one hue and weight means dearer, so the row you want to look at is
   the darkest one. Illustrative numbers — this is a drawing, not anyone's real
   ledger, which is why the card says so. */
.compare {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: center;
}

.compare h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	margin-bottom: 16px;
}

.compare > div > p {
	font-size: 1.06rem;
}

.compare-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px;
	box-shadow: var(--shadow-lg);
}

.compare-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 22px;
}

.bars {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 18px;
}

.bars li {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
}

.bar-label {
	font-size: 0.93rem;
	color: var(--ink);
	font-weight: 600;
}

.bar-row {
	display: grid;
	grid-template-columns: 1fr max-content;
	align-items: center;
	gap: 14px;
}

.bar-track {
	height: 26px;
	border-radius: 7px;
	background: var(--surface);
	overflow: hidden;
}

/* The fallback matters: without it a bar that forgot its --w drops the whole
   declaration, falls back to a block's auto width, and renders full — reading
   as the dearest row. Failing to zero is the honest direction. */
.bar-track i {
	display: block;
	height: 100%;
	width: var(--w, 0%);
	border-radius: 7px;
	background: var(--r1);
}

.bar-track i.r2 {
	background: var(--r2);
}

.bar-track i.r3 {
	background: var(--r3);
}

.bar-track i.r4 {
	background: var(--r4);
}

/* The figure at the end of the row, set the way the app sets one: tabular, tight,
   with the unit riding small and muted and attached to the number. */
.bar-figure {
	font-family: var(--font-figure);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 1.12rem;
	letter-spacing: -0.03em;
	color: var(--ink);
	white-space: nowrap;
}

.bar-figure em {
	font-style: normal;
	font-size: 0.6em;
	font-weight: 700;
	color: var(--muted);
	margin-inline-start: 2px;
}

.compare-foot {
	margin: 22px 0 0;
	font-size: 0.82rem;
	color: var(--muted);
}

/* The figures the app puts on Home and Summary. */
.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 56px;
}

.stat {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow-xs);
}

.stat svg {
	width: 20px;
	height: 20px;
	color: var(--brand);
	margin-bottom: 12px;
}

.stat strong {
	display: block;
	font-size: 1.02rem;
	color: var(--ink);
	letter-spacing: -0.02em;
	margin-bottom: 2px;
}

.stat span {
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.5;
}

@media (max-width: 900px) {
	.compare {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.stat-row {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 40px;
	}
}

@media (max-width: 520px) {
	.stat-row {
		grid-template-columns: 1fr;
	}
	.compare-card {
		padding: 22px;
	}
}

/* ── Feature list ───────────────────────────────────────── */
.feature-list {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 11px;
}

.feature-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 0.99rem;
}

.feature-list svg {
	width: 19px;
	height: 19px;
	color: var(--brand);
	flex: none;
	margin-top: 4px;
}

.feature-list .plus-tag {
	font-size: 9.5px;
	padding: 2px 7px;
	margin-inline-start: 6px;
	top: -1px;
}

/* ── Plus ───────────────────────────────────────────────── */
.plus-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.plus-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow-xs);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plus-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.plus-card .icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--brand-soft);
	color: var(--brand-ink);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.plus-card .icon svg {
	width: 21px;
	height: 21px;
}

.plus-card h3 {
	font-size: 1.06rem;
	margin-bottom: 6px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.plus-card p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.plus-features {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.plus-features {
		grid-template-columns: 1fr;
	}
}

.price-disclaimer {
	text-align: center;
	font-size: 0.86rem;
	color: var(--muted);
	margin: 56px auto 0;
	max-width: 44em;
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq {
	max-width: 800px;
	margin: 0 auto;
}

.faq details {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq details[open] {
	border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
	box-shadow: var(--shadow);
}

.faq summary {
	padding: 21px 26px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 1.03rem;
	letter-spacing: -0.015em;
}

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

.faq summary::after {
	content: "";
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: var(--brand-soft);
	/* A plus sign drawn from two bars, rotated to an x when the panel opens. */
	background-image: linear-gradient(var(--brand), var(--brand)),
		linear-gradient(var(--brand), var(--brand));
	background-repeat: no-repeat;
	background-size: 11px 2px, 2px 11px;
	background-position: center, center;
	transition: transform 0.22s ease;
}

.faq details[open] summary::after {
	transform: rotate(135deg);
}

.faq .faq-body {
	padding: 0 26px 22px;
}

.faq .faq-body p:last-child {
	margin-bottom: 0;
}

/* ── CTA band ───────────────────────────────────────────── */
/* Bracketed by the FAQ section's bottom padding and the footer's top margin, so
   its own section adds none — otherwise the gaps stack to ~200px. */
.section-cta {
	padding-top: 0;
	padding-bottom: 0;
}

.cta-band {
	position: relative;
	/* Fixed stops, not tokens: white sits on this in both themes, and the middle
	   stop is where the body copy lands, so it has to clear 4.5:1 on its own. */
	background: linear-gradient(150deg, #7b2c81 0%, #5d2062 46%, #35093a 100%);
	border-radius: var(--radius-xl);
	padding: 84px 40px;
	text-align: center;
	color: #fff;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* A faint lattice over the gradient, echoing the app's own bar chart. */
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
			rgba(255, 255, 255, 0.09) 1px,
			transparent 1px
		),
		linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(closest-side, #000, transparent);
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	pointer-events: none;
}

.cta-band > * {
	position: relative;
}

.cta-band h2 {
	color: #fff;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	margin-bottom: 16px;
}

.cta-band p {
	color: rgba(255, 255, 255, 0.94);
	font-size: 1.12rem;
	max-width: 32em;
	margin: 0 auto 32px;
}

.cta-band .btn-primary {
	background: #fff;
	color: #45034b;
}

@media (max-width: 620px) {
	.cta-band {
		padding: 56px 24px;
		border-radius: var(--radius-lg);
	}
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
	border-top: 1px solid var(--line);
	background: var(--surface);
	padding: 64px 0 44px;
	margin-top: 104px;
}

.footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 44px;
}

.footer-tagline {
	font-size: 0.94rem;
	color: var(--muted);
	max-width: 24em;
	margin: 14px 0 0;
}

.footer-links {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.footer-col h4 {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--muted);
	margin-bottom: 14px;
	font-weight: 700;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.footer-col a {
	color: var(--body);
	font-size: 0.94rem;
}

.footer-col a:hover {
	color: var(--brand);
}

.footer-bottom {
	border-top: 1px solid var(--line);
	padding-top: 28px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.88rem;
	color: var(--muted);
}

/* Legal pages have no grid above the bottom bar, so its rule would double up
   with .site-footer's own top border. */
.footer-bottom:first-child {
	border-top: 0;
	padding-top: 0;
}

.footer-bottom p {
	margin: 0;
}

/* ── Legal pages ────────────────────────────────────────── */
.legal {
	max-width: 780px;
	margin: 0 auto;
	padding: 72px 24px 0;
}

.legal-head {
	border-bottom: 1px solid var(--line);
	padding-bottom: 34px;
	margin-bottom: 42px;
}

.legal-head h1 {
	font-size: clamp(2.2rem, 4.8vw, 3.1rem);
	margin-bottom: 14px;
}

.legal-meta {
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0;
}

.legal-summary {
	background: var(--brand-soft);
	border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
	border-radius: var(--radius);
	padding: 26px 28px;
	margin-bottom: 46px;
}

/* Scoped through .legal so it outranks `.legal h2`'s 52px top margin, which
   would otherwise push this heading away from the top of its own box. */
.legal .legal-summary h2 {
	font-size: 1.05rem;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.legal-summary h2 svg {
	width: 19px;
	height: 19px;
	color: var(--brand);
	flex: none;
}

.legal-summary p:last-child {
	margin-bottom: 0;
}

.legal h2 {
	font-size: 1.4rem;
	margin-top: 52px;
	margin-bottom: 14px;
	scroll-margin-top: 92px;
}

.legal h3 {
	font-size: 1.06rem;
	margin-top: 32px;
	margin-bottom: 8px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.legal ul {
	padding-inline-start: 22px;
	margin: 0 0 1em;
}

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

.legal table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 0.94rem;
}

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

.legal th {
	background: var(--surface);
	color: var(--ink);
	font-weight: 700;
}

.legal-scroll {
	overflow-x: auto;
}

.callout {
	border-inline-start: 3px solid var(--brand);
	background: var(--surface);
	padding: 18px 22px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 0 0 1.4em;
}

/* Sand keeps the meaning it has in the app: a consequence OdoTick worked out
   for you, spelled out rather than left to be inferred. Used sparingly. */
.callout-sand {
	background: var(--sand);
	border-inline-start-color: var(--sand-line);
	color: var(--sand-ink);
}

.callout-sand strong,
.callout-sand a,
.callout-sand em {
	color: var(--sand-ink);
}

.callout p:last-child {
	margin-bottom: 0;
}

.legal-toc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 28px;
	margin-bottom: 46px;
}

.legal-toc h2 {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--muted);
	margin: 0 0 14px;
}

.legal-toc ol {
	margin: 0;
	padding-inline-start: 20px;
	columns: 2;
	gap: 24px;
}

.legal-toc li {
	margin-bottom: 7px;
	break-inside: avoid;
}

@media (max-width: 620px) {
	.legal-toc ol {
		columns: 1;
	}
}

/* ── 404 ────────────────────────────────────────────────── */
.notfound {
	min-height: 62vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 90px 24px;
}

.notfound .code {
	font-size: 5rem;
	font-weight: 800;
	color: var(--brand);
	line-height: 1;
	margin-bottom: 12px;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}