/* Daimond landing page.
   Reuses the app's warm palette (see www/css/variables.css) and the pink diamond
   brand mark. Dark is the primary look; a polished light theme follows the
   viewer's prefers-color-scheme. Vanilla CSS, no external requests. */

/* ---- Oxanium: the Daimond wordmark's typeface, for display headings.
   Embedded locally (TrueType) so the page still makes no external request. ---- */
@font-face {
	font-family: 'Oxanium';
	src: url('../assets/fonts/Oxanium-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
}

/* ---- Design tokens: dark (default) ---- */
:root {
	--bg:            #15120F;   /* Primary background. */
	--bg-2:          #1E1A16;   /* Raised surface. */
	--bg-3:          #241F1A;   /* Cards. */
	--border:        #332C25;
	--border-2:      #3F372E;
	--text:          #ECE6DC;
	--text-2:        #A79E92;
	--text-3:        #736A5F;
	--accent:        #D2604F;   /* Terracotta. */
	--accent-hover:  #E07A67;
	--accent-text:   #E9A392;
	--pink:          #F98596;   /* Diamond pink. */
	--pink-soft:     #FCCFD4;
	--good:          #67B9A2;   /* Semantic: a corner closed. */
	--radius:        8px;
	--radius-lg:     14px;
	--radius-xl:     22px;
	--font:          system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-display:  'Oxanium', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--shadow:        0 18px 50px rgba(0, 0, 0, 0.45);
	--maxw:          1200px;
	/* The sticky header is 62px of content over a 1px border. The hero subtracts
	   it to make the first screen exactly one screen. */
	--header-h:      63px;
	/* Which wordmark shows: white on dark. */
	--word-dark:     block;   /* white glyphs, for dark bg */
	--word-light:    none;    /* grey glyphs, for light bg */
	--glow-a:        rgba(210, 96, 79, 0.30);
	--glow-b:        rgba(249, 133, 150, 0.22);
}

/* ---- Light theme, when the viewer prefers it ---- */
@media (prefers-color-scheme: light) {
	:root {
		--bg:            #FBF9F5;
		--bg-2:          #FFFFFF;
		--bg-3:          #FFFFFF;
		--border:        #E7E1D6;
		--border-2:      #D6CEBF;
		--text:          #211C18;
		--text-2:        #6B635A;
		--text-3:        #9A9187;
		--accent:        #A6322A;
		--accent-hover:  #C24A38;
		--accent-text:   #7E2A20;
		--good:          #1F8F73;
		--shadow:        0 18px 50px rgba(74, 58, 44, 0.14);
		--word-dark:     none;
		--word-light:    block;
		--glow-a:        rgba(166, 50, 42, 0.16);
		--glow-b:        rgba(249, 133, 150, 0.28);
	}
}

/* ---- Reset-ish base ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
/* Oxanium Semi-Bold (the wordmark weight) carries the display headings and labels. */
h1, h2, .eyebrow, .section-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; }
.eyebrow { letter-spacing: 0.08em; }

p { margin: 0; }

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

.nowrap { white-space: nowrap; }

/* Read aloud, never seen. Used for the figure caption that stands in for the
   pathways drawing, which is hidden from assistive technology because the
   routes listed beside it already say everything it draws. */
.vh {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	/* Base padding, so size-less buttons (the full-width pricing CTAs) still
	   breathe; the size classes below override for the header and hero. */
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}
.btn:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 3px;
}
.btn-sm  { padding: 0.55rem 1.15rem; font-size: 0.94rem; }
.btn-lg  { padding: 1.02rem 2.2rem;  font-size: 1.05rem; }
.btn-primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 24px -8px var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-2);
}
.btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-2px); }
.btn-block { display: flex; width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---- Brand marks ---- */
.brand-mark { width: 28px; height: 28px; }
.brand-word { height: 22px; width: auto; }
.word-on-dark  { display: var(--word-dark); }
.word-on-light { display: var(--word-light); }

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }

/* ---- Hero ---- */
/* The hero is committed to the dark daybreak scene in either theme, so its text
   is forced light here regardless of the page theme below it. */
.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Exactly the first screenful, less the header above it. It was
	   clamp(560px, 84vh, 860px), which was short of the viewport at every common
	   size -- 81px at 1440x900, 157px at 1920x1080 -- so the scene stopped before
	   the fold and the 860px ceiling clipped 136px off the top of the artwork on
	   a 1080p screen. min-height rather than height, so copy that outgrows the
	   screen pushes the hero taller instead of spilling out of it. */
	min-height: calc(100svh - var(--header-h));
	display: flex;
	align-items: center;
	background: #060507;
	--text:   #F2ECE2;
	--text-2: #CDC2B4;
	--text-3: #8d8478;
	--border: rgba(255, 255, 255, 0.14);
	/* The hero is a dark scene in BOTH page themes, so pin the whole accent palette
	   to its dark-theme (bright) values. Otherwise, under prefers-color-scheme:
	   light, --accent-text becomes a dark maroon and the gradient words render dark
	   (only visible to viewers whose browser is in light mode). */
	--accent:       #D2604F;
	--accent-hover: #E07A67;
	--accent-text:  #E9A392;
	/* Force the light colour onto the hero itself. Overriding --text alone is not
	   enough: the title has no colour of its own and would otherwise inherit the
	   page's already-computed colour, which is dark under prefers-color-scheme:
	   light, leaving the headline near-invisible on the dark scene. */
	color: var(--text);
}
/* Text overlaid on the dark night side of the full-background scene. The .wrap
   holds it to the page gutter (aligned with the header); hero-inner sits at the
   left of that centred container and stays narrow to clear the flyer. */
.hero-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	/* A more generous left gutter for the overlaid text than the page default,
	   so the headline is not jammed against the edge on the full-bleed hero. */
	padding-inline: clamp(28px, 6vw, 76px);
}
.hero-inner {
	max-width: 560px;
	text-align: left;
	padding-block: clamp(40px, 8vh, 96px);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6);
}
.eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-text);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.hero-title {
	font-size: clamp(2.2rem, 4.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.04;
	margin-bottom: 1.3rem;
}
/* Gradient-filled display words. The earlier Firefox failure was not the font
   and not the clip: it was the hero's inherited text-shadow, which Firefox
   paints through the transparent glyphs and renders black. So we cancel the
   text-shadow on these words and get depth from a drop-shadow instead, which
   plays fine with background-clip:text on every engine. */
.grad {
	/* Explicit colours (not theme variables) so the gradient is identical in light
	   and dark browser modes: deep rose on the left, brightening steadily to soft
	   pink on the right (no bright peak in the middle). */
	background-image: linear-gradient(95deg, #C13B57 0%, #FCE0E6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	text-shadow: none;
}
/* Gradient text for a section that takes the page background, rather than the
   hero's scene. .grad is deliberately pinned to fixed hex because the hero is
   dark under both colour schemes; a page section is not, so its pale end
   disappears into a light page. This variant flips with the scheme instead,
   keeping both ends contrasting against whatever the page is. */
.grad-page {
	background-image: linear-gradient(95deg, #C13B57 0%, #FCE0E6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	text-shadow: none;
}
@media (prefers-color-scheme: light) {
	/* Both ends stay dark against the light page: deep maroon to deep rose. */
	.grad-page { background-image: linear-gradient(95deg, #7E2A20 0%, #C13B57 100%); }
}

.hero-sub {
	font-size: clamp(1.05rem, 2.2vw, 1.28rem);
	color: var(--text-2);
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: 2.2rem;
}
/* ---- Closed beta: the state of things, said where it is needed ----
   A panel rather than a line of text, because it has to be seen before the
   buttons under it are clicked. It sits on the hero's dark scene, so its own
   surface is a dark wash with an accent edge, and it cancels the hero's text
   shadow the way the gradient words do. */
.beta-note {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	flex-wrap: wrap;
	max-width: 48ch;
	margin-bottom: 1.9rem;
	padding: 0.9rem 1.1rem;
	background: color-mix(in srgb, var(--accent) 14%, rgba(6, 5, 7, 0.62));
	border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
	border-radius: var(--radius-lg);
	text-align: left;
	text-shadow: none;
}
/* The same chip in the hero and in the pricing strip, so the two readings of
   "closed beta" are plainly the one fact. */
.beta-tag {
	flex: none;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
}
.beta-say {
	flex: 1 1 16rem;
	color: var(--text);
	font-size: 0.99rem;
	line-height: 1.55;
}
/* The way in for a tester who already has a passcode, and the tour link the
   ghost button used to carry. Quieter than either button, on purpose. */
.cta-aside {
	margin-top: -1.4rem;
	margin-bottom: 2.4rem;
	color: var(--text-2);
	font-size: 0.95rem;
}
.cta-aside a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cta-aside a:hover { color: var(--text); }

.cta-row {
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 2.4rem;
}
/* Daybreak splash. The scene is 863 x 448, an aspect of 1.93, and it is laid at
   the hero's full width and pinned to the bottom edge, so it always renders at
   its own aspect and nothing is ever cropped away. `cover` used to do this job
   and could not: the hero's height is set by the copy in the left column, so
   every line added to that copy scaled the artwork up and cut the sides off,
   taking the Earth's limb and most of the dawn with them.

   Where the copy is taller than the artwork, the surplus is dark sky above it,
   which .sky-top blends into the hero's flat background. */
.sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.sky-art {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: auto;
	/* The base rule is `img { max-width: 100% }`, which would cap the width at
	   the hero's and defeat the height fit. */
	max-width: none;
	display: block;
}
/* Darken the left half so the overlaid text stays crisp, letting the flyer and
   the diamond stay bright on the right. Lighter than it was: the artwork's own
   left third is already near black, so the scrim only has to lift the contrast
   under the headline rather than paint the scene out. */
.sky-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(4,4,7,0.92) 0%, rgba(4,4,7,0.78) 30%, rgba(4,4,7,0.34) 52%, rgba(4,4,7,0.06) 68%, rgba(4,4,7,0) 80%);
}

/* On a narrow screen the wide scene stacks below the text instead of cropping. */
@media (max-width: 760px) {
	/* Stack: the scene as a full-width banner at the very top, text beneath it. */
	.hero { display: block; min-height: 0; }
	.sky {
		position: relative;
		height: auto;
	}
	.sky-art {
		position: relative;
		left: auto;
		bottom: auto;
		width: 100%;
		height: auto;
	}
	.sky-scrim { display: none; }
	.hero-inner {
		max-width: none;
		margin: 0 auto;
		text-align: center;
		text-shadow: none;
		padding: clamp(32px, 5vh, 48px) clamp(20px, 5vw, 40px) clamp(36px, 7vh, 64px);
	}
	.cta-row { justify-content: center; }
	/* Centred with the rest of the stacked hero, and centred within itself: the
	   chip sits over its sentence rather than beside it at this width. */
	.beta-note {
		margin-inline: auto;
		justify-content: center;
		text-align: center;
	}
	.beta-say { flex-basis: 100%; }
}

/* ---- Section scaffolding ----
   The bands alternate on purpose. Reading down the page a visitor should meet a
   different shape each time, so only the statement near the top and the closing
   band are centred, and every other section leads from the left. */
section { position: relative; }
/* Anchored targets clear the sticky header (62px) when jumped to. Applied to
   main#top too, where it clamps the jump to the very top of the page. */
section[id], main[id] { scroll-margin-top: 76px; }
/* Every band gets the same vertical rhythm. Matched on the element rather than a
   list of classes, so a new section cannot be added with no padding and end up
   flush against its neighbour. The hero sets its own and is excluded. */
main > section:not(.hero) { padding-block: clamp(56px, 9vw, 100px); }

.section-title {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 600;
	text-align: left;
}
.section-lead {
	margin-top: 0.9rem;
	color: var(--text-2);
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	line-height: 1.62;
	max-width: 58ch;
}
/* The ground alternates band by band, so most boundaries are a change of colour
   and only a same-coloured pair needs a rule drawn between them. */
.works    { background: var(--bg); }
.how      { background: var(--bg); }
.diamonds { background: var(--bg-2); border-top: 1px solid var(--border); }
.verify   { background: var(--bg); }
.compare  { background: var(--bg-2); border-top: 1px solid var(--border); }
.pricing  { background: var(--bg); }

/* Off the hero, an eyebrow is a line of small caps above its heading rather than
   a chip. The chip form stays in the hero, where it sits on artwork and needs an
   edge to hold it. */
main > section:not(.hero) .eyebrow {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--accent-text);
	font-size: 0.8rem;
}

/* ---- Diamonds: the memory story ----
   Shots on the left and prose on the right, the opposite way round to the steps
   above it, so the eye crosses back rather than tracking the same column twice. */
.diamonds-inner {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.diamonds-shots { display: grid; gap: 1rem; }
.diamonds-shot { margin: 0; }
.diamonds-shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
/* Two files per shot, because a raster cannot follow the reader's colour scheme
   the way the rest of the page does. */
.diamonds-shot .shot-on-dark  { display: var(--word-dark); }
.diamonds-shot .shot-on-light { display: var(--word-light); }
.diamonds-body .section-title { margin-bottom: 1.1rem; }
.diamonds-body p { color: var(--text-2); font-size: 1.02rem; line-height: 1.68; }
.diamonds-body p + p { margin-top: 1rem; }
.diamonds-body em { color: var(--accent-text); font-style: normal; font-weight: 600; }
.diamonds-body p.diamonds-tag {
	margin-top: 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: 0.94rem;
}

/* ---- How it works: three routes to a model ----
   Heading and lead in a left column with the drawing beside them, then the three
   routes full width beneath, divided by hairline rules. No cards here: the rules
   carry the division, and the accent is spent on the one line in each route that
   answers the question the section asks. */
.works-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.works-fig { margin: 0; }
.works-svg {
	display: block;
	width: 100%;
	max-width: 470px;
	height: auto;
	font-family: var(--font);
}
/* Every colour in the drawing comes from a page token, so it is right in both
   themes, and every stroke is non-scaling, so the weight matches the rest of the
   page whether it renders at 340px or 470px. */
.works-svg .wk-you {
	fill: color-mix(in srgb, var(--pink) 10%, transparent);
	stroke: color-mix(in srgb, var(--pink) 55%, var(--border));
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}
.works-svg .wk-youtxt { fill: var(--text); font-size: 14.5px; font-weight: 600; }
.works-svg .wk-lbl { fill: var(--text-3); font-size: 13.5px; letter-spacing: 0.02em; }
.works-svg .wk-node {
	fill: color-mix(in srgb, var(--text) 5%, transparent);
	stroke: var(--border-2);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}
.works-svg .wk-node-mine {
	fill: color-mix(in srgb, var(--good) 9%, transparent);
	stroke: color-mix(in srgb, var(--good) 46%, var(--border-2));
}
.works-svg .wk-name { fill: var(--text); font-size: 15px; font-weight: 600; }
.works-svg .wk-read { fill: var(--accent-text); font-size: 13.5px; }
.works-svg .wk-read-none { fill: var(--good); }
/* The wires are the one thing here NOT drawn with a non-scaling stroke, and it
   has to stay that way. `vector-effect: non-scaling-stroke` resolves
   stroke-dasharray in SCREEN pixels, while getTotalLength() reports the path in
   USER units, so the draw-in animation in landing.js set a dash a factor of the
   render scale too short: at 470px against a 400-unit viewBox, a 179.45px dash
   covered 152.7 of the 179.45 units and every wire stopped 27 units clear of its
   own arrowhead. The stroke now scales with the drawing, 1.9px at the widest and
   1.4px on a phone, which is a difference nobody can see. */
.works-svg .wk-wire {
	fill: none;
	stroke: color-mix(in srgb, var(--text-3) 72%, transparent);
	stroke-width: 1.6;
}
.works-svg .wk-head { fill: color-mix(in srgb, var(--text-3) 72%, transparent); stroke: none; }
/* Set by landing.js while the wires are drawing, and only ever set there, so a
   reader without JavaScript never meets a diagram with its arrowheads hidden.
   A marker is painted whole at the end of its path regardless of the dash that
   is animating the path, so the heads have to be held back separately. */
.works-svg.wk-armed .wk-head { opacity: 0; }
.works-svg .wk-head { transition: opacity 260ms ease; }
@media (prefers-reduced-motion: reduce) {
	.works-svg .wk-head { transition: none; }
}

/* The routes. What the reader chooses on the left, what it means on the right. */
.routes { list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; padding: 0; }
.route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	gap: clamp(1.2rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 3vw, 2.1rem);
	border-top: 1px solid var(--border);
}
.route:last-child { border-bottom: 1px solid var(--border); }
.route-lead h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.08rem, 1.9vw, 1.32rem);
	margin-bottom: 0.5rem;
}
.route-who { color: var(--accent-text); font-size: 0.96rem; line-height: 1.5; }
.route-who-none { color: var(--good); }
.route-body p { color: var(--text-2); font-size: 1rem; line-height: 1.66; }
.route-body p + p { margin-top: 0.8rem; }

/* The rule all three share, said once, after all three have been read. */
.works-foot {
	margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
	max-width: 64ch;
	color: var(--text);
	font-size: clamp(1.02rem, 1.7vw, 1.16rem);
	line-height: 1.6;
}
/* The one developer line, quieter than the rule above it: a note, not a route. */
.works-dev {
	margin-top: 1.1rem;
	max-width: 64ch;
	color: var(--text-2);
	font-size: 0.98rem;
	line-height: 1.62;
}
.works-dev strong { color: var(--text); font-weight: 600; }
.works-dev a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.works-dev a:hover { color: var(--text); }

/* ---- Getting started: four steps ----
   Intro on the left, steps on the right, the reverse of the band above it. The
   steps are numbered on a spine rule rather than boxed into cards. */
.how-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0 0 0 1px; }
.step {
	counter-increment: step;
	position: relative;
	padding: 0 0 1.7rem 2.9rem;
	border-left: 1px solid var(--border-2);
}
/* The spine stops at the last number rather than running past it into nothing. */
.step:last-child { padding-bottom: 0; border-left-color: transparent; }
.step::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--bg);
	border: 1px solid var(--border-2);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	color: var(--accent-text);
}
.step h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.14rem;
	margin: 0.3rem 0 0.4rem;
}
.step p { color: var(--text-2); font-size: 0.99rem; line-height: 1.66; }
.step em { color: var(--accent-text); font-style: normal; font-weight: 600; }

/* ---- Pricing ---- */
/* The beta line, between the lead and the cards: a price a reader cannot pay
   today has to say so before it is read as an offer. On the page background
   rather than the hero's scene, so it takes a light wash of the accent. */
.price-beta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	flex-wrap: wrap;
	max-width: 660px;
	margin: 1.4rem auto 0;
	padding: 0.75rem 1.1rem;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--text);
	font-size: 0.98rem;
}

.price-grid {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem;
	max-width: 780px;
	margin-inline: auto;
}
.price-card {
	position: relative;
	background: var(--bg-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem 1.8rem;
	display: flex;
	flex-direction: column;
}
.price-card-feature {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.ribbon {
	position: absolute;
	top: -0.8rem;
	right: 1.4rem;
	background: var(--accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}
.price-card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.price { margin-bottom: 1.2rem; }
.price-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; }
.price-per { margin-left: 0.3rem; color: var(--text-3); font-size: 1rem; font-weight: 600; }
.price-list {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	flex: 1;
}
.price-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
	color: var(--text-2);
	font-size: 0.97rem;
}
.price-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.5em;
	width: 11px; height: 6px;
	border-left: 2px solid var(--accent-text);
	border-bottom: 2px solid var(--accent-text);
	transform: rotate(-45deg);
}

.price-note {
	margin: 1.9rem auto 0;
	max-width: 660px;
	text-align: left;
	color: var(--text-2);
	font-size: 0.98rem;
	line-height: 1.6;
}
.price-note strong { color: var(--text); font-weight: 600; }
/* The one thing a page selling privacy would leave out, so it is said here, in
   the section where the money is, and given an edge so it is not skimmed past. */
.price-note-say {
	margin-top: 1.2rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-2);
	color: var(--text-2);
	text-align: left;
}

/* ---- Comparison ---- */
.compare { border-top: 1px solid var(--border); background: var(--bg); }
.cmp-wrap { overflow-x: auto; margin: 1.6rem 0 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cmp {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 0.96rem;
	font-variant-numeric: tabular-nums;
}
.cmp thead td { background: transparent; border: none; }
.cmp th[scope="col"] {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--text-2);
	text-align: center;
	vertical-align: bottom;
	padding: 16px 14px 14px;
	line-height: 1.2;
	border-bottom: 1px solid var(--border-2);
}
/* The best-known products of each archetype, under the archetype's name. They
   were a footnote below the table, which is the wrong place for them: a reader
   meeting "Hosted BYOK app" needs the example at that moment, not after eight
   rows of comparison. Lighter and lighter-weight than the heading it sits under,
   so it reads as a gloss rather than as a second heading.

   Left out of the mobile stack on purpose. Below 620px every cell already
   repeats its column name through data-label, and repeating three product names
   with it would triple the length of every row for nothing. */
.cmp-eg {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--font);
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--text-3);
	white-space: normal;
}
.cmp th.cmp-us {
	color: var(--good);
	background: color-mix(in srgb, var(--good) 12%, transparent);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.cmp th[scope="row"] {
	text-align: left;
	font-weight: 500;
	color: var(--text);
	padding: 13px 16px 13px 20px;
	white-space: nowrap;
}
.cmp tbody tr { border-top: 1px solid var(--border); }
.cmp td {
	text-align: center;
	padding: 13px 14px;
	color: var(--text-3);
	white-space: nowrap;
}
.cmp td.y { color: var(--good); font-weight: 600; }
.cmp td.p { color: var(--accent-text); }
.cmp td.n { color: var(--text-3); }
.cmp td.us {
	color: var(--good);
	font-weight: 700;
	background: color-mix(in srgb, var(--good) 10%, transparent);
}
.cmp tbody tr:last-child td.us { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.cmp-note { color: var(--text-3); font-size: 0.9rem; max-width: 70ch; }
.cmp-note + .cmp-note { margin-top: 0.8rem; }

/* ---- Verify ----
   Four claims, each with the way to test it. Hairline rules and a wide measure,
   with no card and no icon: the section's whole point is that it is checkable,
   and a decorated box is the wrong register for that. */
.verify-inner { max-width: 940px; }
.verify-lede {
	margin-top: 0.9rem;
	max-width: 64ch;
	color: var(--text-2);
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	line-height: 1.62;
}
.verify-list {
	list-style: none;
	margin: clamp(2rem, 4vw, 2.8rem) 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.6rem, 4vw, 3.4rem);
}
.verify-list li { padding: 1.3rem 0; border-top: 1px solid var(--border); }
.verify-list h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.06rem;
	margin-bottom: 0.4rem;
}
.verify-list p { color: var(--text-2); font-size: 0.98rem; line-height: 1.62; }
.verify-list a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.verify-list a:hover { color: var(--text); }
.verify-foot { color: var(--text-3); font-size: 0.92rem; max-width: 64ch; }

/* ---- The triad: what Daimond is, in three parts ----
   Three columns under hairline rules, with no box around any of them. That is a
   third shape on the page and it has to be: the routes below are two-column
   rows and the steps are a numbered spine, so a third band of either would read
   as the same section again.

   The icons are line marks in the stroke language of the How it works drawing,
   not filled badges. Three of them mark a structure; the ten that used to sit
   on the old feature grid were decoration, and a grid of icon-topped cards is
   the most template-looking arrangement on the web, which is what we spent a
   rewrite getting away from. Three, unboxed and left-aligned, is a different
   thing from ten in cards. */
/* Statement and triad share the page ground, so a hairline divides them. */
.triad { background: var(--bg); border-top: 1px solid var(--border); }
.triad-h { max-width: 20ch; }
.triad-grid {
	list-style: none;
	margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3vw, 2.6rem);
}
.tri { padding-top: 1.5rem; border-top: 1px solid var(--border); }
/* The mark is the brand's own: a rounded square turned 45 degrees, which is the
   diamond in the wordmark. The glyph inside is turned back the other way so it
   stays upright.

   A 44px square on its corner spans 62px across, and its left point sits 9px
   further out than the square's own edge, so the margin puts that point on the
   column's text edge rather than the box's. */
.tri-ic {
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	margin: 10px 0 1.6rem 9px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
	transform: rotate(45deg);
}
.tri-ic svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--accent-text);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: rotate(-45deg);
}
.tri .eyebrow { margin-bottom: 0.45rem; }
.tri h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.08rem, 1.7vw, 1.26rem);
	margin-bottom: 0.6rem;
}
.tri p { color: var(--text-2); font-size: 0.99rem; line-height: 1.66; }

/* ---- Statement: one idea, on its own ----
   The page's largest text and its widest margins, between the hero and the first
   section that explains anything. One of only two centred bands on the page. */
.statement { background: var(--bg); }
.statement-inner { max-width: 900px; margin-inline: auto; text-align: center; }
.statement h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.85rem, 4.2vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.statement p {
	margin: 1.4rem auto 0;
	max-width: 56ch;
	color: var(--text-2);
	font-size: clamp(1.04rem, 1.8vw, 1.22rem);
	line-height: 1.6;
}

/* ---- Closing: who made it, and the way in ----
   The page's second and last centred band, answering the statement near the top.
   The Oxedyne logo is the only mark on it. */
.closing {
	text-align: center;
	background:
		radial-gradient(62% 120% at 50% 100%, color-mix(in srgb, var(--accent) 17%, transparent) 0%, transparent 70%),
		var(--bg-2);
	border-top: 1px solid var(--border);
}
.closing-inner { max-width: 680px; }
.closing-logo { display: block; width: fit-content; margin: 0 auto 1.7rem; transition: opacity 0.15s ease; }
.closing-logo:hover { opacity: 0.82; }
.closing-logo img { height: 62px; width: auto; }
.logo-on-dark  { display: var(--word-dark); }
.logo-on-light { display: var(--word-light); }
.closing-who { color: var(--text-2); font-size: 1.02rem; line-height: 1.68; }
.closing-who + .closing-who { margin-top: 1rem; }
.closing h2 {
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
	margin-bottom: 0.7rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.closing-say { color: var(--text-2); font-size: 1.07rem; margin-bottom: 2rem; }
/* The hero's row, centred, and last on the page so it carries no bottom margin. */
.closing-cta { justify-content: center; margin-bottom: 0; }

/* ---- Footer ---- */
.site-footer {
	background: var(--bg);
	border-top: 1px solid var(--border);
	padding-block: 2.4rem;
}
.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
}
.footer-brand { display: inline-flex; align-items: center; gap: 9px; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); font-size: 0.95rem; }
.footer-links a:hover { color: var(--accent-text); }
/* The last row: who owns this on the left, what it says about its own making on
   the right. One rule above them both, so the declaration is part of the footer
   rather than a strip tacked under it. */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.6rem;
	width: 100%;
	border-top: 1px solid var(--border);
	padding-top: 1.2rem;
	margin-top: 0.2rem;
}
.footer-legal {
	color: var(--text-3);
	font-size: 0.85rem;
	line-height: 1.7;
}
.footer-legal-links { display: flex; gap: 1.1rem; }
.footer-legal-links a {
	color: var(--text-3);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.footer-legal-links a:hover { color: var(--accent-text); }

/* ---- AI declaration mark ----
   The need2know mark, once, for the site itself. Drawn the way Steel draws it
   (fe2o3_steel publish/declare.rs) and the way oxedyne.com styles it
   (www/css/marks.css): the artwork is one black SVG used as a MASK over
   currentColor, so the shape comes from the file and the colour from the text
   it sits in, and the light and dark schemes need no second copy of it.

   48px, which is the scheme's own size. A level is read by counting the pins
   around the chip and the floor for that is 40px, so nothing here may shrink it.
   The words carry the subject: this is a declaration about the website, not
   about the app it describes. */
.foot-declare {
	display: flex;
	align-items: center;
	color: var(--text-2);
	font-size: 0.85rem;
}
.ai-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
}
.ai-mark-ink {
	display: inline-block;
	flex: none;
	width: var(--ai-mark-size, 48px);
	height: var(--ai-mark-size, 48px);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ai-mark-words { letter-spacing: 0.01em; }
.ai-mark:hover,
.ai-mark:focus-visible { color: var(--accent-text); }
.ai-mark:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 3px;
	border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
	.ai-mark { transition: color 0.18s ease; }
}

/* ---- Responsive ---- */
/* Four columns of prose stop being readable well before the page runs out of
   width, so this set breaks to two-up earlier than the split bands below. */
@media (max-width: 1000px) {
	/* Each split band collapses to one column, art first where the art sets up
	   the words and words first where it illustrates them. */
	.works-head { grid-template-columns: 1fr; gap: 2.2rem; }
	.works-svg { margin-inline: auto; }
	.how-inner { grid-template-columns: 1fr; gap: 2rem; }
	.diamonds-inner { grid-template-columns: 1fr; gap: 2.2rem; }
	.diamonds-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.verify-list { grid-template-columns: 1fr; column-gap: 0; }
	/* Two up, then one: three narrow columns of prose stop being readable well
	   before the page runs out of width. */
	.triad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 760px) {
	.route { grid-template-columns: 1fr; gap: 0.75rem; }
	.triad-grid { grid-template-columns: 1fr; row-gap: 1.8rem; }
	.price-grid { grid-template-columns: 1fr; }
	.diamonds-shots { grid-template-columns: 1fr; max-width: 320px; }
	.cta-row .btn { flex: 1 1 auto; }
	.footer-inner { justify-content: center; text-align: center; }
	.footer-bottom { justify-content: center; }
	.brand-word { height: 20px; }
}
/* Under this width the comparison stops being a table the reader scrolls and
   becomes one labelled block per row, which is why every cell carries a
   data-label. The page body never scrolls sideways either way. */
@media (max-width: 620px) {
	.cmp-wrap { overflow-x: visible; border: 0; border-radius: 0; }
	.cmp { min-width: 0; display: block; }
	.cmp thead { display: none; }
	.cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
	.cmp tbody tr {
		margin-bottom: 0.9rem;
		padding: 0.3rem 0 0.5rem;
		border: 1px solid var(--border);
		border-radius: var(--radius);
	}
	.cmp th[scope="row"] { white-space: normal; padding: 0.7rem 1rem 0.5rem; }
	.cmp td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.35rem 1rem;
		text-align: right;
		white-space: normal;
	}
	.cmp td::before {
		content: attr(data-label);
		flex: 0 1 auto;
		color: var(--text-3);
		font-size: 0.86rem;
		text-align: left;
	}
	.cmp td.us { border-radius: 0; }
	.cmp tbody tr:last-child td.us { border-radius: 0; }
}

/* The points of light live inside the artwork now, in splash.svg, so that the
   figure and the gem pass in front of them. Nothing behind the <img> can show:
   the artwork carries its own opaque background. */