/**
 * Everything the site looks like. Sizes and colours come from tokens.css;
 * nothing here writes a literal for either, so the ninth page cannot quietly
 * introduce a thirteenth font size.
 */

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family:
		ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;
	font-size: var(--fs-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
}

.icon {
	width: var(--sp-5);
	height: var(--sp-5);
	flex: none;
}

.hidden {
	display: none !important;
}

.skip {
	position: absolute;
	left: var(--sp-4);
	top: calc(var(--sp-4) * -4);
	z-index: 30;
	padding: var(--sp-2) var(--sp-4);
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: top 150ms ease-out;
}

.skip:focus {
	top: var(--sp-4);
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg-veil);
	backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 1px solid var(--border);
}

.bar {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	max-width: var(--w-content);
	margin: 0 auto;
	padding: var(--sp-3) var(--sp-4);
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text);
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.wordmark-mark {
	width: var(--sp-5);
	height: var(--sp-5);
	color: var(--accent);
}

.wordmark b {
	color: var(--accent);
	font-weight: 600;
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin-right: auto;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	/* A label that wraps leaves its chevron on a line of its own. */
	white-space: nowrap;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		color 150ms ease-out,
		background-color 150ms ease-out;
}

.nav-link:hover {
	background: var(--bg-soft);
	color: var(--text);
}

.nav-link.is-current {
	color: var(--text);
}

/* The language switch sits at the end of the nav rather than in it: it is not
   another destination, it is the same one said differently. */
.nav-lang {
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color 150ms ease-out,
		border-color 150ms ease-out;
}

.nav-lang:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* The tools menu is a <details>, so it opens from the keyboard with no script
   and stays usable if the script never arrives. */
.menu {
	position: relative;
}

.menu summary {
	list-style: none;
}

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

.menu summary .icon {
	width: var(--sp-4);
	height: var(--sp-4);
	transition: transform 150ms ease-out;
}

.menu[open] summary .icon {
	transform: rotate(180deg);
}

.menu-panel {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 0;
	z-index: 20;
	display: grid;
	gap: var(--sp-1);
	width: max-content;
	max-width: min(92vw, var(--w-content));
	padding: var(--sp-2);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
}

.menu-panel a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: var(--fs-sm);
	text-decoration: none;
}

.menu-panel a:hover {
	background: var(--bg-soft);
}

.menu-panel span {
	display: block;
	font-weight: 600;
}

.menu-panel small {
	display: block;
	color: var(--text-dim);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	height: var(--ctl-md);
	padding: 0 var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 150ms ease-out,
		border-color 150ms ease-out;
}

.btn-sm {
	height: var(--ctl-sm);
	padding: 0 var(--sp-4);
}

.btn-lg {
	height: var(--ctl-lg);
	padding: 0 var(--sp-6);
	font-size: var(--fs-md);
}

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

.btn-primary:hover:not(:disabled) {
	background: var(--accent-strong);
}

.btn-quiet {
	background: var(--bg-elevated);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn-quiet:hover:not(:disabled) {
	background: var(--bg-soft);
}

.btn-go {
	background: var(--ok);
	color: var(--accent-ink);
}

.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

.drop:focus-within {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---- Page rhythm -------------------------------------------------------- */

main {
	margin: 0 auto;
	padding: 0 var(--sp-4) var(--sp-7);
}

/* One column, one width. Every block on every page starts at the same left
   edge and runs to the same right edge — the header, the hero, the tool, the
   text, the pictures, the grids, the footer. */
main {
	max-width: var(--w-content);
}

.hero {
	padding: var(--sp-7) 0 var(--sp-6);
}

.band {
	padding-top: var(--sp-7);
}

.band-lede {
	margin: calc(var(--sp-3) * -1) 0 var(--sp-5);
	color: var(--text-muted);
}

h1 {
	font-size: var(--fs-2xl);
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 var(--sp-4);
}

h2 {
	font-size: var(--fs-xl);
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 var(--sp-4);
}

h3 {
	font-size: var(--fs-md);
	line-height: 1.4;
	margin: 0 0 var(--sp-2);
}

.lede {
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

.prose p {
	margin: 0 0 var(--sp-4);
	color: var(--text-muted);
}

.prose h2 {
	margin-top: var(--sp-6);
}

.prose h2:first-child {
	margin-top: 0;
}

.prose h3 {
	margin-top: var(--sp-5);
	color: var(--text);
}

.prose strong {
	color: var(--text);
	font-weight: 600;
}

.prose a,
.note a,
.qa a {
	color: var(--accent);
}

.prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--fs-sm);
	overflow-wrap: anywhere;
}

.limits {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
	color: var(--text-muted);
}

.limits li {
	margin-bottom: var(--sp-3);
}

.note {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	margin: var(--sp-3) 0 0;
}

.note.bad {
	color: var(--danger);
}

.hint {
	font-size: var(--fs-sm);
	color: var(--text-dim);
	margin: var(--sp-4) 0 0;
}

.chars {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--fs-xs);
	overflow-wrap: anywhere;
}

/* ---- Promises ----------------------------------------------------------- */

.promises {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Three across needs the full width; the reading column does not. */
	gap: var(--sp-4);
	padding-top: var(--sp-7);
}

.promise {
	padding: var(--sp-5);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.promise .icon {
	color: var(--accent);
	margin-bottom: var(--sp-3);
}

.promise h2 {
	font-size: var(--fs-md);
	margin-bottom: var(--sp-2);
}

.promise p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

/* ---- Before/after comparison -------------------------------------------- */

.compare {
	margin: 0;
	padding-top: var(--sp-6);
}

.compare-frame {
	position: relative;
	cursor: col-resize;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--bg-elevated);
	line-height: 0;
	touch-action: pan-y;
	/* Dragging the wipe is a drag, not a selection: without this the browser
	   decides you are picking up the picture and highlights it blue. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.compare-frame img {
	pointer-events: none;
	-webkit-user-drag: none;
}

.compare-frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Clipping with clip-path rather than a narrowing box keeps the original at
   the frame's own width: the two images stay in register at every position,
   which is the whole claim the picture is making. */
.compare-clip {
	position: absolute;
	inset: 0;
	/* The starting position comes from the figure, which knows where the change
	   is. Without it the page renders at halfway for a moment and then jumps. */
	clip-path: inset(0 calc(100% - var(--start, 50%)) 0 0);
}

.compare-clip img {
	width: 100%;
	height: 100%;
}

.compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--start, 50%);
	width: 2px;
	margin-left: -1px;
	background: var(--accent);
}

.compare-handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ctl-sm);
	height: var(--ctl-sm);
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
	background: var(--accent);
	box-shadow: var(--shadow-pop);
}

.compare-handle span::before,
.compare-handle span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-top: -6px;
}

.compare-handle span::before {
	left: var(--sp-2);
	border-right: 6px solid var(--accent-ink);
}

.compare-handle span::after {
	right: var(--sp-2);
	border-left: 6px solid var(--accent-ink);
}

/* The highlight over the changed words. It is clipped the opposite way to the
   original underneath, so dragging the handle reveals the edit and its marker
   together — on a page of body text one corrected word is otherwise easy to
   look straight past. */
.compare-marks {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--start, 50%));
	pointer-events: none;
}

.compare-marks-before {
	clip-path: inset(0 calc(100% - var(--start, 50%)) 0 0);
}

.compare-marks-before .compare-mark {
	background: var(--mark-was);
	box-shadow: 0 0 0 3px var(--mark-was);
}

.compare-mark {
	position: absolute;
	border-radius: var(--radius-sm);
	background: var(--mark);
	/* No spread: on consecutive lines a halo is what makes two marks touch. */
	mix-blend-mode: multiply;
}

.compare-legend span::before {
	content: "";
	display: inline-block;
	width: var(--sp-3);
	height: var(--sp-3);
	margin-right: var(--sp-2);
	border-radius: var(--radius-sm);
	background: var(--mark-was-solid);
	vertical-align: baseline;
}

.compare-legend .is-after::before {
	background: var(--mark-solid);
}

/* Under the frame rather than over it. A document has text to its own margin,
   so a chip in the corner of the picture lands on top of a line of it. */
.compare-legend {
	display: flex;
	justify-content: space-between;
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--text-dim);
}

.compare-legend .is-after {
	color: var(--accent);
}

/* The range is the real control — dragging the frame just drives it. Visually
   it sits under the image so the picture is the thing you reach for, but it
   stays operable from the keyboard. */
.compare-range {
	display: block;
	width: 100%;
	margin: var(--sp-3) 0 0;
	accent-color: var(--accent);
	cursor: ew-resize;
}

.compare figcaption {
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--text-dim);
}

.compare + * {
	margin-top: var(--sp-5);
}

/* ---- The tool ----------------------------------------------------------- */

.tool {
	margin-top: var(--sp-7);
	scroll-margin-top: var(--sp-7);
}

.tool-title {
	margin-bottom: var(--sp-5);
}

.tool-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}

.tool-step {
	padding: var(--sp-5);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.tool-step.is-locked {
	opacity: 0.5;
	box-shadow: none;
	pointer-events: none;
}

.tool-step-head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.tool-step-head h3 {
	margin: 0;
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
}

.step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--ctl-sm);
	height: var(--ctl-sm);
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.tool-step.is-done .step {
	background: var(--ok-soft);
	color: var(--ok);
}

.fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}

.field-narrow {
	grid-column: span 1;
}

label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: var(--sp-1);
}

input[type="text"],
input[type="number"],
select,
textarea {
	width: 100%;
	height: var(--ctl-md);
	padding: 0 var(--sp-3);
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: var(--fs-sm);
}

/* One line until there is more than one. It grows with what is pasted into
   it, because an address is three or four lines and a box that shows one of
   them hides most of what is about to change. */
textarea {
	display: block;
	height: auto;
	/* Two lines before anything is typed, so the box says out loud that it
	   takes more than one — and so a two-line placeholder is not cut in half. */
	min-height: calc(var(--ctl-md) + var(--sp-5));
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.5;
	resize: vertical;
	overflow: hidden;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.choice {
	display: flex;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--text-muted);
	cursor: pointer;
}

.choice input {
	margin-top: var(--sp-1);
	accent-color: var(--accent);
	flex: none;
}

.choice strong {
	color: var(--text);
	font-weight: 600;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.drop {
	display: block;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-soft);
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition:
		border-color 150ms ease-out,
		background-color 150ms ease-out;
}

.drop-small {
	padding: var(--sp-5) var(--sp-4);
	margin-bottom: var(--sp-4);
}

.drop:hover,
.drop.is-over {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--text);
}

.drop input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.drop strong {
	display: block;
	color: var(--text);
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: var(--sp-1);
}

/* ---- Verdicts and results ----------------------------------------------- */

.verdict {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.verdict.ready,
.verdict.editable {
	background: var(--ok-soft);
	color: var(--ok);
}

.verdict.check,
.verdict.limited {
	background: var(--warn-soft);
	color: var(--warn);
}

.verdict.cannot,
.verdict.not_editable {
	background: var(--danger-soft);
	color: var(--danger);
}

.places {
	list-style: none;
	padding: 0;
	margin: var(--sp-3) 0 0;
}

.places li {
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: var(--sp-2);
	font-size: var(--fs-sm);
}

.places li.no {
	border-color: var(--danger-soft);
	background: var(--danger-soft);
}

.places .where {
	color: var(--text-dim);
	font-size: var(--fs-xs);
	margin-top: var(--sp-1);
}

.places .arrow {
	color: var(--text-dim);
}

/* Work in progress has to look like work: a still grey line reads as nothing
   happening at all. */
.note.busy::before {
	content: "";
	display: inline-block;
	width: var(--sp-3);
	height: var(--sp-3);
	margin-right: var(--sp-2);
	vertical-align: -2px;
	border: 2px solid var(--accent-soft);
	border-top-color: var(--accent);
	border-radius: var(--radius-pill);
	animation: busy-turn 0.7s linear infinite;
}

@keyframes busy-turn {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.note.busy::before {
		animation: none;
	}
}

.places .became {
	font-weight: 600;
}

.stage {
	position: relative;
	margin-top: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: crosshair;
}

.stage img {
	display: block;
	width: 100%;
}

.marker {
	position: absolute;
	border: 2px solid var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	pointer-events: none;
}

/* ---- Paying with USDT/USDC ----------------------------------------------
   Our own address and an exact amount. The amount's last digits identify the
   order, so they are shown big and copied whole. */

.pay-area {
	margin-top: var(--sp-4);
}

.pay {
	display: grid;
	gap: var(--sp-3);
}

.pay-row {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.pay-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	margin: 0;
}

.pay-chips {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.pay-chip {
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--bg-elevated);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
}

.pay-chip.is-on {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}

.pay-sheet {
	padding: var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-elevated);
	display: grid;
	gap: var(--sp-2);
}

.pay-amount {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.pay-note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-dim);
}

.pay-where {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.pay-qr {
	flex: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-elevated);
}

.pay-address {
	margin: 0 0 var(--sp-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--fs-sm);
	word-break: break-all;
}

.pay-state {
	margin: 0;
}

.pay-timer {
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
}

.pay-code-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--fs-lg);
	letter-spacing: 0.04em;
	word-break: break-all;
}

.pay-redeem {
	margin-top: var(--sp-3);
}

.pay-code {
	flex: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	text-transform: uppercase;
}

.pay-claim summary {
	font-size: var(--fs-sm);
	color: var(--text-dim);
	cursor: pointer;
}

.pay-claim-row {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.pay-txid {
	flex: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The gate under the result: what was checked, then what it costs. */
.unlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-4);
	padding: var(--sp-4);
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.unlock .icon {
	color: var(--text-dim);
}

.unlock p {
	flex: 1 1 14rem;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.proof {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--ok);
}

.proof .icon {
	flex: none;
	margin-top: 1px;
}

/* ---- Steps, questions, task cards --------------------------------------- */

.steps {
	list-style: none;
	counter-reset: step;
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
}

.steps li {
	counter-increment: step;
	padding-left: calc(var(--ctl-sm) + var(--sp-4));
	position: relative;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ctl-sm);
	height: var(--ctl-sm);
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.steps h3 {
	padding-top: var(--sp-1);
}

.steps p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.qa {
	border-bottom: 1px solid var(--border);
}

.qa summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.qa summary::after {
	content: "";
	flex: none;
	width: var(--sp-2);
	height: var(--sp-2);
	border-right: 2px solid var(--text-dim);
	border-bottom: 2px solid var(--text-dim);
	transform: rotate(45deg);
	transition: transform 150ms ease-out;
}

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

.qa summary:hover {
	color: var(--accent);
}

.qa > div {
	padding: 0 0 var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.task-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}

.task-card {
	display: block;
	padding: var(--sp-4);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	transition:
		border-color 150ms ease-out,
		box-shadow 150ms ease-out;
}

.task-card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow);
}

/* The one you are already on: present so the grid is whole, not a link back
   to where you are. */
.task-card.is-here {
	background: var(--bg-soft);
	border-style: dashed;
}

.task-card.is-here h3 {
	color: var(--text-muted);
}

.task-card h3 {
	margin-bottom: var(--sp-1);
	color: var(--accent);
}

.task-card p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

/* ---- Price -------------------------------------------------------------- */

.price-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}

.price-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--sp-6);
	background: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.price-card.is-featured {
	border-color: var(--accent);
	box-shadow: var(--shadow-pop);
}

.price-card .btn {
	margin-top: var(--sp-5);
}

.pill {
	margin-left: var(--sp-2);
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--fs-xs);
	letter-spacing: 0;
	text-transform: none;
}

.price-eyebrow {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.price-figure {
	display: flex;
	align-items: baseline;
	gap: var(--sp-1);
	margin: var(--sp-2) 0 var(--sp-4);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.price-figure span,
.price-figure small {
	letter-spacing: normal;
}

.price-figure span {
	align-self: flex-start;
	padding-top: var(--sp-1);
	font-size: var(--fs-lg);
	color: var(--text-dim);
}

.price-figure small {
	align-self: flex-end;
	padding-bottom: var(--sp-1);
	margin-left: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--text-muted);
}

.ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.ticks li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.ticks .icon {
	color: var(--ok);
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
	margin-top: var(--sp-7);
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 0.8fr;
	gap: var(--sp-6) var(--sp-5);
	max-width: var(--w-content);
	margin: 0 auto;
	padding: var(--sp-7) var(--sp-4) var(--sp-6);
}

.footer-brand p {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.footer-grid h2 {
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	margin-bottom: var(--sp-3);
}

.footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.footer-grid a {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-decoration: none;
}

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

.footer-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-5);
	max-width: var(--w-content);
	margin: 0 auto;
	padding: var(--sp-4);
	border-top: 1px solid var(--border);
}

.footer-base p {
	margin: 0;
	max-width: 44rem;
	font-size: var(--fs-xs);
	color: var(--text-dim);
}

/* ---- Narrower -------------------------------------------------------------
   Three breakpoints, matching the ones tokens.css names. */

@media (max-width: 900px) {
	.promises,
	.task-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 720px) {
	.price-cards {
		grid-template-columns: 1fr;
	}

	.fields {
		grid-template-columns: 1fr;
	}

	.bar {
		flex-wrap: wrap;
		gap: var(--sp-2) var(--sp-3);
	}

	.nav {
		order: 3;
		flex-wrap: wrap;
		width: 100%;
		margin-right: 0;
		margin-left: calc(var(--sp-3) * -1);
	}

	.nav-cta {
		margin-left: auto;
	}

	.menu-panel {
		max-width: calc(100vw - var(--sp-6));
	}

	h1 {
		font-size: var(--fs-xl);
	}

	.steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.promises,
	.task-grid,
	.fields {
		grid-template-columns: 1fr;
	}

	.hero {
		padding-top: var(--sp-6);
	}

	.tool-step {
		padding: var(--sp-4);
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}