/*
 * get.lyriks.io, both pages.
 *
 * This is the lyriks.io design system, not a page that merely borrows its
 * colors: the tokens and the logo idiom come from the site's brand sheet
 * (assets/brand/brand.css) and the layout atoms below are ported from the
 * site's own stylesheet, so a visitor who arrives here from lyriks.io lands on
 * the same product. Sticky blurred nav, near-black code blocks, near-black
 * footer, and for the guide the ink-ruled hero closing on the three colored
 * bands: all of it is the site's rhythm, applied to the two jobs this host has.
 *
 * The two jobs are shaped differently on purpose. The GUIDE is a document and
 * reads like the site. The LANDING PAGE is a worksheet: one narrow column of
 * panels in the order the visitor does them, same palette, same faces, denser.
 * It used to be a hero with the form beside it, a three-step banner, three step
 * tiles and a closing call to action, which said the same three sentences three
 * times over; what is left is only what someone needs in order to end up with
 * Lyriks running.
 *
 * One file rather than a <style> block per page, so the landing page and the
 * guide cannot drift apart. Served by Caddy from /srv/get-lyriks under a CSP
 * with style-src 'self' and no external host anywhere (the fonts are local:
 * see fonts/README.md), which is why nothing here is inline and nothing here
 * is remote.
 *
 * The @font-face rules are NOT imported from here. An @import would chain the
 * two requests, so the browser would not learn which faces to use until this
 * file had already arrived, wasting the preload in each page's <head>. Both
 * pages link /fonts/fonts.css themselves, next to this file, and the two
 * download at once.
 */
:root {
	/* --- brand core (assets/brand/brand.css, verbatim) --- */
	--violet: #8047f4;
	--violet-deep: #7e3ff2;
	--purple: #bb46f5;
	--magenta: #fa5fb2;
	--orange: #ffa101;
	--green: #1fa98a;
	--royal: #0066ff;
	--logo-purple: #bb46f5;

	--ink: #0a0a0a;
	--ink-soft: #1a1a1a;
	--ink-2: #535462;
	--ink-3: #9296a6;
	--paper: #fafafc;
	--soft: #f7f7fa;
	--line: #ececf1;
	--line-2: #eef0f5;
	--white: #ffffff;

	--grad: linear-gradient(105deg, #8047f4 0%, #bb46f5 48%, #fa5fb2 100%);
	--grad-viva: linear-gradient(105deg, #8047f4 0%, #bb46f5 38%, #fa5fb2 72%, #ffa101 130%);

	--r-sm: 10px;
	--r: 16px;
	--r-lg: 22px;

	--shadow-card: 0 1px 2px rgba(16, 18, 40, 0.04), 0 8px 24px -12px rgba(16, 18, 40, 0.12);
	--shadow-float: 0 40px 100px -30px rgba(8, 6, 20, 0.55);

	--font: 'Montserrat', system-ui, -apple-system, sans-serif;
	--display: 'Space Grotesk', 'Montserrat', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, monospace;

	/* --- page rhythm (lyriks.io stylesheet, verbatim) --- */
	--maxw: 1200px;
	--gut: clamp(28px, 6vw, 72px); /* standard gutter */
	/* The gutter a FULL-BLEED block needs for its content to line up with the
	   maxw-constrained ones. The colored bands and the hero run edge to edge,
	   but their text must sit on the same left rule as the nav and the section
	   heads, or the page reads as two grids fighting. */
	--gut-bleed: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
	--grid-bg: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
/* On a wide screen the site breathes at 1380 rather than 1200. It is a token
   rather than a per-page override so that every container reading --maxw
   moves together: the nav, the hero, the coloured bands, the guide and the
   footer, which --gut-bleed positions from the same number. Below 1300px
   nothing changes. */
@media (min-width: 1300px) {
	:root { --maxw: 1380px; }
}


* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a {
	color: var(--violet-deep);
}
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gut);
}
:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}

/* Skip link: the guide is long and the nav is sticky, so a keyboard visitor
   needs a way past both. Visible only once focused. */
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: #fff;
	padding: 12px 18px;
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.skip:focus {
	left: 12px;
	top: 12px;
}

/* ============================================================
   LOGO: the official mark plus the wordmark
   ============================================================ */
/*
 * The mark is the SHIPPED logo file, not a copy of it: the same three gradient
 * bars the product draws in src/lib/ui/design-system/Logo.svelte, inlined once
 * per page as a <symbol> and pointed at by every lockup. It used to be three
 * CSS <i> bars in flat colours, which is close enough to pass a glance and
 * wrong in the two ways that matter: the real bars carry a vertical gradient,
 * and a hand-made copy drifts the day the logo is redrawn.
 *
 * The wordmark is MONTSERRAT, not the display face. Measured against the brand
 * lockup (lyriks.io/assets/lyriks-logo-light.png) letter by letter: the y with
 * its curved tail, the r with its short curved arm and the s are Montserrat's,
 * and Space Grotesk's flat-footed y is visibly not what the logo carries.
 */
.lk-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.lk-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.42em;
	/* The display face, not the body one: the wordmark is a piece of the brand
	   rather than a piece of the text, and it is set in Space Grotesk everywhere
	   the product shows it. Montserrat here made this page's logo the only one
	   that did not match. */
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	white-space: nowrap;
	color: var(--ink);
	text-decoration: none;
}
/* Sized in em so one rule serves the nav, the hero and the footer. The box is
   the logo's own square; the bars fill its left two thirds. */
.lk-svg {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	display: block;
}
.lk-logo .dot {
	color: inherit;
}
.lk-logo.on-dark {
	color: #fff;
}

/* ============================================================
   Shared atoms
   ============================================================ */
.display {
	font-family: var(--display);
	letter-spacing: -0.04em;
}
.grad {
	background: var(--grad-viva);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.kick {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.btn-sq {
	background: var(--ink);
	color: #fff;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 12px 20px;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
	border: 0;
	cursor: pointer;
}
.btn-sq:hover {
	filter: brightness(1.4);
}
.btn-out {
	border: 1px solid var(--ink);
	color: var(--ink);
	background: transparent;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 12px 20px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.btn-out:hover {
	background: var(--ink);
	color: #fff;
}
.btn-dark {
	background: #0a0a0a;
	color: #fff;
	padding: 14px 26px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
}
.btn-glass {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 14px 26px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
}
.btn-glass:hover {
	background: rgba(255, 255, 255, 0.28);
}
.pill-green {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.42em 0.9em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: rgba(31, 169, 138, 0.14);
	color: #0f7d65;
}

/*
 * Scroll reveal, the site's [data-reveal] effect, with its failure mode removed
 * twice over.
 *
 * First, it is driven by the scroll timeline rather than by an
 * IntersectionObserver: hiding an element in CSS and waiting for JavaScript to
 * un-hide it means the page is blank for anyone whose script did not run, and
 * a blocked file or a parse error is not a rare event.
 *
 * Second, and this is the part worth stating, the animation moves the element
 * and does NOT fade it. An opacity ramp keyed to scroll position is invisible
 * content whenever the timeline never advances, which is not hypothetical:
 * printing the page renders every element at its start value, so a fade would
 * print sections blank. Motion cannot do that. The effect is smaller; the page
 * is always readable, on screen, on paper, and in whatever a reader mode makes
 * of it.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-reveal] {
			animation: reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}
@media print {
	[data-reveal] {
		animation: none;
	}
}
@keyframes reveal-in {
	from {
		transform: translateY(16px);
	}
	to {
		transform: none;
	}
}

/* ============================================================
   NAV: sticky, blurred, with the burger and mobile sheet
   ============================================================ */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--line);
}
.nav-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: 72px;
	gap: 20px;
}
.nav-l {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-self: start;
}
.nav .lk-logo {
	font-size: 21px;
}
.nav-links {
	display: flex;
	gap: 28px;
	justify-self: center;
}
.nav-links a {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}
.nav-links a:hover {
	color: var(--ink);
}
.nav-r {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 18px;
}
.nav-r .home {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	text-decoration: none;
	white-space: nowrap;
}
.nav-r .home:hover {
	color: var(--ink);
}
.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ink);
	margin: 0 auto;
	transition: transform 0.25s, opacity 0.2s;
}
.nav.open .burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav.open .burger span:nth-child(2) {
	opacity: 0;
}
.nav.open .burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
.mnav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 49;
	flex-direction: column;
	border-top: 1px solid var(--line);
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: saturate(160%) blur(14px);
	padding: 8px 24px 18px;
}
.nav.open .mnav {
	display: flex;
}
.mnav a {
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	padding: 13px 2px;
	border-bottom: 1px solid var(--line);
}
.mnav a:last-child {
	border-bottom: 0;
}
.mnav .m-try {
	color: #fff;
	background: var(--ink);
	text-align: center;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 16px;
	margin-top: 10px;
	border-bottom: 0;
}
@media (max-width: 860px) {
	.nav-in {
		display: flex;
		justify-content: space-between;
	}
	.nav-links {
		display: none;
	}
	.nav-r .btn-sq,
	.nav-r .home {
		display: none;
	}
	.burger {
		display: flex;
	}
}

/* ============================================================
   HERO: ink-ruled, closing on the three bands
   ============================================================ */
.hero {
	border-bottom: 1px solid var(--ink);
}
.hero-top {
	padding: 64px var(--gut-bleed) 60px;
}
.hero .kick {
	display: block;
	margin-bottom: 28px;
}
.hero h1 {
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 1;
	font-weight: 700;
	margin: 0 0 24px;
	max-width: 15ch;
	letter-spacing: -0.03em;
}
.hero .promise {
	font-family: var(--display);
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 18px;
	max-width: 40ch;
}
.hero .promise .em {
	color: var(--violet-deep);
}
.hero .sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 50ch;
	margin: 0 0 36px;
}
.hero-cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.bands {
	border-top: 1px solid var(--ink);
}
.band {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 var(--gut-bleed);
	height: 74px;
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
}
.bands .band:last-child {
	border-bottom: 0;
}
.band .no {
	font-family: var(--mono);
	font-size: 12px;
	opacity: 0.8;
	white-space: nowrap;
}
.band .nm {
	font-family: var(--display);
	font-size: clamp(17px, 2.4vw, 22px);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.band .meta {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
	text-align: right;
}
.b1 {
	background: var(--orange);
	color: #1a1a1a;
}
.b2 {
	background: var(--logo-purple);
	color: #fff;
}
.b3 {
	background: var(--royal);
	color: #fff;
}

/* ============================================================
   THE INSTALL COLUMN: one narrow column, in the order it is done
   ============================================================ */
/*
 * The landing page is a WORKSHEET, not a brochure. Its visitor has one errand
 * (end up with Lyriks running) and the page is the ordered list of what that
 * takes: the key, the command for their system, what the command will do, the
 * small print they need before piping anything into a shell. So it is one
 * column of panels rather than a hero with cards fanned out beside it, and
 * nothing on it is said twice: the three-steps banner, the three step tiles and
 * the closing call to action all repeated the same three sentences, which is
 * exactly what made the page feel like a landing page instead of an install
 * page.
 *
 * The palette is unchanged. This is the same lyriks.io design system as the
 * guide next door (same tokens, same fonts, same ink-on-white ground, same
 * near-black code blocks): only the shape is denser.
 */
.one {
	width: min(880px, 100%);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 76px) var(--gut) clamp(56px, 8vw, 96px);
	display: grid;
	/* minmax(0, 1fr), not 1fr: a grid track sizes itself to its items' content
	   minimum, and a command block's minimum is the whole un-wrappable command.
	   Left at 1fr, the column grows to ~470px on a 390px phone and the entire
	   page scrolls sideways. The command scrolls inside its own block instead,
	   which is what .code was built to do. */
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
/* the panels, in their reading order; on a wide screen this is the left column */
.col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
/*
 * Wide enough for two columns: the form leaves the stack, sits at the top right
 * and STAYS there while the rest scrolls. It is what the visitor came for, and
 * a key they cannot see is a key they postpone. Its grid area spans both rows,
 * which is what gives position: sticky somewhere to travel; align-self keeps
 * the panel its own height instead of stretching down that area.
 *
 * Narrower than this, nothing sticks and nothing floats: the form is simply the
 * first panel of the one column, right under the title, which on a phone is
 * exactly where it should be.
 */
@media (min-width: 1000px) {
	.one {
		width: min(1180px, 100%);
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
		column-gap: clamp(24px, 3vw, 40px);
		align-items: start;
	}
	.top {
		grid-column: 1;
		grid-row: 1;
	}
	.side {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		position: sticky;
		top: 88px;
	}
	.col {
		grid-column: 1;
		grid-row: 2;
	}
}
/* the sticky nav must not land on top of whatever an anchor scrolled to */
.one [id] {
	scroll-margin-top: 92px;
}
.top {
	margin-bottom: 6px;
}
.top h1 {
	font-size: clamp(30px, 4.6vw, 50px);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.035em;
	margin: 0 0 18px;
	max-width: 20ch;
}
.top .sub {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 62ch;
	margin: 0;
}

/* A panel: white, ruled, under the mono label the design system uses for "what
   this box is". Every panel is the same panel, the form included: on the page
   this one is modelled on, nothing was ranked above anything else, and that
   evenness is most of why it reads quickly. */
.block,
.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: clamp(20px, 2.6vw, 26px);
	box-shadow: var(--shadow-card);
}
.block > h2,
.lbl {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 14px;
}
/* the sentence under a command */
.said {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 12px 0 0;
}
/*
 * On a narrow screen the command WRAPS instead of scrolling, and the button
 * drops below it. Someone deciding whether to pipe a script into their shell
 * has to be able to read the whole of it, and a command clipped at the edge of
 * a phone with the rest behind a sideways drag is the opposite of that.
 */
@media (max-width: 640px) {
	.block .code {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.block .code code {
		white-space: pre-wrap;
		word-break: break-word;
		overflow-x: visible;
	}
	.block .code .copy {
		align-self: flex-start;
	}
}

/* What the command does, numbered. The step number is the brand gradient on a
   disc: the one ornament on the page, and it is doing a job (it counts). */
ol.flow {
	list-style: none;
	counter-reset: n;
	padding: 0;
	margin: 0;
}
ol.flow li {
	counter-increment: n;
	position: relative;
	padding: 15px 0 15px 46px;
	border-top: 1px solid var(--line-2);
}
ol.flow li:first-child {
	border-top: 0;
	padding-top: 2px;
}
ol.flow li::before {
	content: counter(n, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--grad-viva);
	color: #fff;
	font: 700 11px/30px var(--mono);
	letter-spacing: 0.02em;
	text-align: center;
}
ol.flow li:first-child::before {
	top: 2px;
}
ol.flow b {
	display: block;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--ink);
}
ol.flow .d {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}
ol.flow code {
	font-family: var(--mono);
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1px 5px;
}

/* the pipe-to-shell paragraph, last, quiet, and complete */
.smallprint {
	color: var(--ink-3);
	font-size: 13px;
	line-height: 1.62;
	margin: 6px 0 0;
	max-width: 78ch;
}
.smallprint a {
	color: var(--violet-deep);
}
.smallprint code {
	font-family: var(--mono);
	font-size: 12px;
}

/* ============================================================
   FINAL CTA: full-bleed brand gradient
   ============================================================ */
.final {
	text-align: center;
	padding: clamp(72px, 9vw, 116px) var(--gut);
	background: var(--grad-viva);
	color: #fff;
}
.final h2 {
	font-family: var(--display);
	font-size: clamp(30px, 4.6vw, 56px);
	letter-spacing: -0.035em;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 20px;
}
.final p {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.88);
	max-width: 56ch;
	margin: 0 auto 36px;
}
.final .btns {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
   FOOTER: near-black, three columns
   ============================================================ */
footer {
	background: #0a0f1e;
	color: #fff;
	/* --gut-bleed, not --gut: the hero and the coloured bands are positioned
	   with it, so a plain gutter left the footer starting 40 to 64px further
	   left than everything above it on any screen wider than --maxw. Below
	   that width the two are equal, so narrow screens are untouched. */
	padding: 64px var(--gut-bleed) 36px;
}
.foot {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 40px;
}
.foot .brand p {
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	line-height: 1.6;
	max-width: 32ch;
	margin: 12px 0 0;
}
.foot .brand .lk-logo {
	font-size: 19px;
}
.foot h5 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 16px;
	font-weight: 500;
}
.foot ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.foot li {
	margin-bottom: 9px;
}
.foot a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
.foot a:hover {
	color: #fff;
}
.foot-bottom {
	max-width: var(--maxw);
	margin: 44px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   THE KEY FORM: one more panel, with fields in it
   ============================================================ */
/*
 * The form takes the panel shape above (.card is styled with .block) and adds
 * nothing but what you type into. The one thing it needs of its own is
 * position: relative, so the honeypot input can be parked off-screen without
 * widening the page.
 */
.card {
	position: relative;
}
/* the answered state, once the key is on its way */
.card .sent h2 {
	font-family: var(--display);
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 14px 0 10px;
}
.lab {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin: 16px 0 7px;
}
.lab .opt {
	color: var(--ink-3);
	font-weight: 500;
}
/* The mandatory mark. The `required` attribute already tells assistive tech,
   so the star is visual only (aria-hidden in the markup). */
.lab .req {
	color: var(--violet);
	font-weight: 700;
}
/* The newsletter notice under the button: legally required, visually quiet
   (.fine sets the size and tone; only the link needs saying). */
.card .legal a {
	color: var(--ink-2);
	text-decoration: underline;
}
/* The line under the company field (why it is mandatory): tight to its input,
   where .fine's own top margin would read as a new block. */
.card .why {
	margin: 7px 0 0;
}
.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.card input[type='text'],
.card input[type='email'] {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: var(--r-sm);
	padding: 13px 15px;
	font-family: var(--font);
	font-size: 14px;
	color: var(--ink);
}
.card input::placeholder {
	color: var(--ink-3);
}
.card input:focus {
	outline: none;
	border-color: var(--violet);
	box-shadow: 0 0 0 3px rgba(128, 71, 244, 0.14);
}
/* Honeypot: off-screen, never focusable, never announced. A bot that fills it
   gets a cheerful 200 and nothing happens (see signup-api.mjs). */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
/*
 * VIOLET, not the page's ink. The one thing the visitor is meant to press sat
 * in the same black as the command blocks above it and the nav's own button,
 * so the eye had three equal blacks to sort out and the real action was not the
 * loudest of them. Brand violet on white clears 5:1, so the label stays legible
 * at 12px uppercase, and nothing else on the page carries this colour as a
 * fill.
 */
.card .go {
	width: 100%;
	margin-top: 22px;
	background: var(--violet);
	color: #fff;
	border: 0;
	border-radius: var(--r-sm);
	padding: 16px 18px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.card .go:hover:not(:disabled) {
	background: var(--violet-deep);
	box-shadow: 0 8px 20px -10px rgba(128, 71, 244, 0.9);
}
.card .go:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* the "did you mean" line: present enough to notice, quiet enough to ignore */
.hint {
	display: none;
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ink-2);
}
.hint.on {
	display: block;
}
.hint .fix {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--violet-deep);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.fine {
	color: var(--ink-3);
	font-size: 12.5px;
	margin-top: 14px;
	line-height: 1.55;
}
.error {
	display: none;
	margin-top: 14px;
	border: 1px solid #f3c2c2;
	background: #fdf3f3;
	color: #8c2f2f;
	border-radius: var(--r-sm);
	padding: 10px 12px;
	font-size: 13.5px;
}
.error.on {
	display: block;
}
.is-hidden {
	display: none;
}
.sent p {
	color: var(--ink-2);
	font-size: 15px;
	margin: 0 0 12px;
}
.sent .addr {
	font-family: var(--mono);
	font-size: 13.5px;
	color: var(--ink);
	word-break: break-all;
}
.sent .again {
	margin-top: 8px;
}

/* ============================================================
   CODE BLOCKS, shared by the landing page and the guide
   ============================================================ */
.code {
	display: flex;
	gap: 12px;
	align-items: center;
	background: var(--ink);
	border-radius: var(--r);
	padding: 14px 16px;
}
.code code {
	font: 13px/1.6 var(--mono);
	color: #ececf6;
	overflow-x: auto;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	scrollbar-width: thin;
	display: block;
}
.code code .p {
	color: var(--magenta);
	user-select: none;
}
.copy {
	flex: none;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font: 500 11px/1 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 12px;
	cursor: pointer;
	border-radius: 6px;
}
.copy:hover {
	background: rgba(255, 255, 255, 0.24);
}
.copy.done {
	background: var(--green);
	border-color: var(--green);
}

/* ============================================================
   THE GUIDE
   ============================================================ */
.guide {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 48px var(--gut) clamp(48px, 6vw, 88px);
	align-items: start;
}
/* A grid item's automatic minimum is its CONTENT, so one long command would
   widen the whole page rather than scroll inside its own block. */
.guide > * {
	min-width: 0;
}
.toc {
	position: sticky;
	top: 96px; /* clears the sticky nav */
	display: grid;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.toc a {
	color: var(--ink-2);
	text-decoration: none;
	padding: 4px 0 4px 12px;
	border-left: 2px solid var(--line);
}
.toc a:hover {
	color: var(--ink);
	border-color: var(--violet);
}
/* One entry sits under its step rather than beside it: the failure path is
   part of "your key", not a fourth step. */
.toc a.sub {
	margin-left: 12px;
	font-size: 11px;
	color: var(--ink-3);
}
/* An h3 inside the guide is a landing target of its own (the TOC and the
   landing page both point at #nokey), so it clears the sticky nav too. */
.doc h3[id] {
	scroll-margin-top: 96px;
}
.doc > section {
	margin-bottom: clamp(36px, 5vw, 56px);
	scroll-margin-top: 96px;
}
.doc .kick {
	display: block;
	margin-bottom: 10px;
}
.doc h2 {
	font-family: var(--display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 8px 0 12px;
}
.doc h3 {
	font-family: var(--display);
	font-size: 17px;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 26px 0 8px;
}
.doc p {
	color: var(--ink-2);
	margin: 0 0 12px;
	max-width: 68ch;
}
.doc ul,
.doc ol {
	color: var(--ink-2);
	margin: 0 0 14px;
	padding-left: 20px;
	max-width: 68ch;
}
.doc li {
	margin: 6px 0;
}
.doc b,
.doc strong {
	color: var(--ink);
	font-weight: 600;
}
.doc code {
	font-family: var(--mono);
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1px 5px;
}
.doc .code code {
	background: none;
	border: 0;
	padding: 0;
}
.doc .code {
	margin: 12px 0;
}
.doc h4 {
	font-family: var(--display);
	font-size: 14px;
	letter-spacing: 0.01em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 28px 0 10px;
}
/* the client's name, under the command it belongs to */
.doc .tiny {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: -6px 0 18px;
}
.note {
	border-left: 3px solid var(--violet);
	background: var(--paper);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 14px 16px;
	margin: 16px 0;
	font-size: 14.5px;
	color: var(--ink-2);
	max-width: 68ch;
}
.note b {
	color: var(--ink);
}
.steps {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	counter-reset: step;
}
.steps li {
	counter-increment: step;
	position: relative;
	padding-left: 42px;
	margin: 0 0 16px;
	color: var(--ink-2);
	max-width: 68ch;
}
.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.steps b {
	display: block;
	color: var(--ink);
	font-family: var(--display);
	font-size: 16px;
	letter-spacing: -0.02em;
	margin-bottom: 3px;
}

/* platform tabs: radios plus :has(), so the guide needs no JavaScript to work */
.tabs {
	margin: 16px 0 0;
}
.tabs input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tabs .labels {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tabs .labels label {
	cursor: pointer;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: 8px 16px;
}
.tabs .labels label:hover {
	border-color: var(--ink-3);
}
.tabs .panel {
	display: none;
	padding-top: 6px;
}
.tabs:has(#tab-unix:checked) label[for='tab-unix'],
.tabs:has(#tab-win:checked) label[for='tab-win'] {
	border-color: var(--violet);
	color: var(--violet-deep);
	background: rgba(128, 71, 244, 0.06);
}
.tabs:has(#tab-unix:checked) #panel-unix,
.tabs:has(#tab-win:checked) #panel-win {
	display: block;
}
.tabs input:focus-visible + label {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}

.faq {
	display: grid;
	gap: 0;
	margin-top: 12px;
	border-top: 1px solid var(--line);
	max-width: 68ch;
}
.faq details {
	border-bottom: 1px solid var(--line);
}
.faq summary {
	cursor: pointer;
	padding: 14px 0;
	font-weight: 600;
	font-size: 15px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::before {
	content: '+';
	font-family: var(--mono);
	color: var(--violet-deep);
	font-size: 15px;
	flex: none;
}
.faq details[open] summary::before {
	content: '\2212';
}
.faq .body {
	padding: 0 0 16px 24px;
}
.faq .body p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.hero h1,
	.top h1 {
		max-width: none;
	}
	.guide {
		grid-template-columns: minmax(0, 1fr);
	}
	.toc {
		position: static;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
		padding-bottom: 6px;
	}
	.toc a {
		border-left: 0;
		border-bottom: 2px solid var(--line);
		padding: 4px 0;
	}
	.band .meta {
		display: none;
	}
	.foot {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.duo {
		grid-template-columns: 1fr;
	}
	.foot {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* The terms tick box. Unlike the newsletter notice, this one asks rather than
   announces, so the control and its sentence read as one line and the link
   stays inside the sentence the visitor is agreeing to. */
.fine.consent { margin: 0 0 14px; }
.fine.consent label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.fine.consent input { margin: 2px 0 0; flex: none; }

/* The install guide, on a wide screen. Its column is 960px here while the
   prose stopped at 68ch, about 720: the wider container simply made those
   240 empty pixels visible. The cap goes and the column becomes the measure.
   It is bounded anyway, since the column stops growing with --maxw at 1380,
   so a line never runs longer than that however wide the screen. Placed at
   the end of the file on purpose: `.doc p` below carries the same
   specificity, so only source order settles it. */
@media (min-width: 1300px) {
	/* The wide container gave this column 960px, and prose stretched to fill
	   it reads at about 110 characters a line: the eye loses the start of the
	   next line. A line cannot be both 960px wide and comfortable at this
	   size, so the two are separated. Running text keeps a measure; the type
	   grows with the page, which spends the width on legibility rather than
	   on longer lines. */
	.doc { font-size: 17px; }
	/* 63ch, not the 68 this page used to carry: `ch` is the width of a "0",
	   which in this face runs 1.4x the average letter, so 68ch was landing at
	   97 characters a line. 63ch lands at 90, the measure first-steps already
	   reads at. Counted on the rendered page, not converted on paper. */
	.doc p,
	.doc ol,
	.doc .steps li,
	.doc .faq { max-width: 63ch; }
	/* Boxes and anything monospaced are not read line after line: a note is
	   glanced at, a command is copied. They take the column. */
	.doc .note,
	.doc pre,
	.doc table { max-width: none; }
}
