/* =========================================================================
   Face Symmetry Test — "Axis"
   A measuring instrument, not a beauty app. Near-black plate, one magenta
   measurement line, everything built around a visible vertical midline.
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Azeret Mono';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/azeret-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Azeret Mono';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/azeret-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------ */
:root {
	/* Light page. The instrument green carries the brand; the measurement
	   line itself only ever appears inside a .instrument scope. */
	--bg: oklch(1 0 0);
	--surface: oklch(0.976 0.004 160);
	--raise: oklch(0.95 0.006 160);
	--line: oklch(0.875 0.006 160);
	--line-soft: oklch(0.93 0.005 160);

	--ink: oklch(0.22 0.012 160);
	--ink-2: oklch(0.4 0.01 160);
	--muted: oklch(0.505 0.01 160);

	--primary: oklch(0.47 0.115 155);
	--primary-hover: oklch(0.415 0.11 155);
	--primary-ink: oklch(0.44 0.115 155);
	--signal: oklch(0.78 0.185 152);
	--bar-mid: oklch(0.58 0.145 155);
	--accent: oklch(0.68 0.17 50);

	--on-primary: oklch(1 0 0);
	--on-accent: oklch(0.22 0.012 160);

	/* families */
	--sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* type scale */
	--t-display: clamp(2.5rem, 6.6vw, 4.75rem);
	--t-h2: clamp(1.7rem, 3.4vw, 2.6rem);
	--t-h3: clamp(1.2rem, 1.9vw, 1.5rem);
	--t-lead: clamp(1.05rem, 1.35vw, 1.2rem);
	--t-body: 1.0625rem;
	--t-sm: 0.9375rem;
	--t-xs: 0.8125rem;
	--t-mono-label: 0.75rem;

	/* space */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4rem;
	--band: clamp(3.5rem, 8vw, 6.5rem);

	/* measure */
	--wrap: 71rem;
	--wrap-mid: 56rem;
	--wrap-narrow: 40rem;

	/* z scale */
	--z-rail: 0;
	--z-base: 1;
	--z-raised: 5;
	--z-sticky: 20;
	--z-nav: 30;
	--z-overlay: 40;
	--z-dialog: 50;

	/* motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--dur-1: 140ms;
	--dur-2: 260ms;
	--dur-3: 520ms;

	color-scheme: dark;
}


/* ---------- Instrument scope -------------------------------------------- */
/* A dark plate on the light page: the uploader, the specimen frames and the
   result readout. Re-declaring the palette here means every component inside
   inherits it without a single component-level override. */
.instrument {
	--bg: oklch(0.175 0 0);
	--surface: oklch(0.215 0 0);
	--raise: oklch(0.262 0 0);
	--line: oklch(0.36 0 0);
	--line-soft: oklch(0.28 0 0);

	--ink: oklch(0.975 0 0);
	--ink-2: oklch(0.86 0 0);
	--muted: oklch(0.73 0 0);

	--primary: oklch(0.75 0.175 152);
	--primary-hover: oklch(0.81 0.17 152);
	--primary-ink: oklch(0.8 0.17 152);
	--signal: oklch(0.78 0.185 152);
	--bar-mid: oklch(0.78 0.185 152);
	--accent: oklch(0.845 0.155 78);

	--on-primary: oklch(0.18 0.02 160);
	--on-accent: oklch(0.175 0 0);

	background: var(--bg);
	color: var(--ink);
	color-scheme: dark;
}

/* Full dark-page variant, kept for side-by-side comparison. Same brand
   colours, only the page mode differs. */
[data-theme='dark'] {
	--bg: oklch(0.175 0 0);
	--surface: oklch(0.215 0 0);
	--raise: oklch(0.262 0 0);
	--line: oklch(0.36 0 0);
	--line-soft: oklch(0.28 0 0);

	--ink: oklch(0.975 0 0);
	--ink-2: oklch(0.86 0 0);
	--muted: oklch(0.73 0 0);

	--primary: oklch(0.75 0.175 152);
	--primary-hover: oklch(0.81 0.17 152);
	--primary-ink: oklch(0.8 0.17 152);
	--signal: oklch(0.78 0.185 152);
	--bar-mid: oklch(0.78 0.185 152);
	--accent: oklch(0.845 0.155 78);

	--on-primary: oklch(0.18 0.02 160);
	--on-accent: oklch(0.175 0 0);

	color-scheme: dark;
}

/* On a dark page the plates are already the page colour, so drop the inner
   frame that only makes sense against white. */
[data-theme='dark'] .band--instrument {
	background: transparent;
	border-block: 0;
}

/* A dark band that runs the full width of a light page. */
.band--instrument {
	background: var(--bg);
	color: var(--ink);
	border-block: 1px solid var(--line-soft);
}

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-body);
	font-weight: 400;
	font-stretch: 100%;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

a {
	color: var(--ink);
	text-decoration-color: color-mix(in oklab, var(--primary) 55%, transparent);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--dur-1) var(--ease-out);
}

a:hover {
	color: var(--primary-ink);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

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

::selection {
	background: var(--primary);
	color: var(--on-primary);
}

/* ---------- Typography -------------------------------------------------- */
h1,
h2,
h3,
h4 {
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.018em;
	text-wrap: balance;
	font-stretch: 112%;
}

h1 {
	font-size: var(--t-display);
	font-weight: 800;
	font-stretch: 118%;
	line-height: 1.02;
}

h2 {
	font-size: var(--t-h2);
	font-stretch: 115%;
}

h3 {
	font-size: var(--t-h3);
	line-height: 1.25;
	font-stretch: 108%;
}

h4 {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-stretch: 106%;
	letter-spacing: -0.008em;
}

p {
	text-wrap: pretty;
	max-width: 68ch;
}

.lead {
	font-size: var(--t-lead);
	color: var(--ink-2);
	line-height: 1.6;
}

.muted {
	color: var(--muted);
}

.tiny {
	font-size: var(--t-xs);
	color: var(--muted);
	line-height: 1.55;
}

/* the measurement layer: numbers, units, index labels. never body copy. */
.mono {
	font-family: var(--mono);
	font-weight: 400;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

.label {
	font-family: var(--mono);
	font-size: var(--t-mono-label);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- Layout ------------------------------------------------------ */
.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}

.wrap-mid {
	width: min(100% - 2.5rem, var(--wrap-mid));
	margin-inline: auto;
}

.wrap-narrow {
	width: min(100% - 2.5rem, var(--wrap-narrow));
	margin-inline: auto;
}

.band {
	padding-block: var(--band);
	position: relative;
	z-index: var(--z-base);
}

.band--tight {
	padding-block: calc(var(--band) * 0.62);
}

.band--plate {
	background: var(--surface);
	border-block: 1px solid var(--line-soft);
}

main {
	flex: 1;
	position: relative;
}

/* The page's midline. Faint enough to sit behind everything, present enough
   that the whole layout reads as measured against it. */
.rail {
	position: fixed;
	inset-block: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-0.5px);
	background: linear-gradient(180deg, transparent, var(--line-soft) 8%, var(--line-soft) 92%, transparent);
	z-index: var(--z-rail);
	pointer-events: none;
}

@media (max-width: 60rem) {
	.rail {
		display: none;
	}
}

/* section marker: a short axis tick. this is the brand's section grammar,
   used instead of an uppercase eyebrow. */
.tick {
	width: 1px;
	height: 30px;
	margin-inline: auto;
	background: linear-gradient(180deg, transparent, var(--primary));
}

.tick--start {
	margin-inline: 0;
}

.section-head {
	text-align: center;
	display: grid;
	gap: var(--s4);
	justify-items: center;
	margin-bottom: var(--s7);
}

.section-head p {
	max-width: 54ch;
}

.section-head h1 {
	font-size: var(--t-h2);
	font-stretch: 115%;
}

/* calibration ruling: a strip of index marks with a taller centre tick */
.ruler {
	height: 12px;
	opacity: 0.55;
	position: relative;
	background-image: repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px 14px);
	background-position: center bottom;
	background-size: auto 6px;
	background-repeat: repeat-x;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.ruler::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 12px;
	background: var(--primary);
	transform: translateX(-0.5px);
}

/* ---------- Header ------------------------------------------------------ */
.masthead {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: var(--bg);
	border-bottom: 1px solid var(--line-soft);
}

.masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--s5);
	min-height: 4.25rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--ink);
	flex: none;
}

.brand:hover {
	color: var(--ink);
}

.brand__mark {
	width: 30px;
	height: 30px;
	flex: none;
}

.brand__name {
	font-stretch: 118%;
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1;
}

.brand__name em {
	font-style: normal;
	color: var(--primary-ink);
}

.brand--center {
	margin-inline: auto;
}

.nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--s5);
}

.nav a {
	text-decoration: none;
	font-size: var(--t-sm);
	color: var(--muted);
	font-stretch: 104%;
}

.nav a:hover {
	color: var(--ink);
}

.nav__toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 0.45rem 0.7rem;
	font-size: var(--t-xs);
	font-family: var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 46rem) {
	.nav__toggle {
		display: block;
	}

	.nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line-soft);
		padding: var(--s2) 1.25rem var(--s4);
	}

	.nav[data-open='true'] {
		display: flex;
	}

	.nav a {
		padding: 0.7rem 0;
		border-top: 1px solid var(--line-soft);
		font-size: 1rem;
	}
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	background: var(--primary);
	color: var(--on-primary);
	font-stretch: 108%;
	font-weight: 600;
	font-size: var(--t-sm);
	letter-spacing: 0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out),
		border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.btn:hover {
	background: var(--primary-hover);
	color: var(--on-primary);
}

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

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

.btn--lg {
	padding: 1.05rem 2rem;
	font-size: 1rem;
}

.btn--block {
	width: 100%;
}

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

.btn--ghost:hover {
	background: var(--raise);
	border-color: var(--muted);
	color: var(--ink);
}

.btn--quiet {
	background: transparent;
	border-color: transparent;
	color: var(--muted);
	padding-inline: 0;
}

.btn--quiet:hover {
	background: transparent;
	color: var(--primary-ink);
}

.btn__arrow {
	width: 1em;
	height: 1em;
	flex: none;
	transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .btn__arrow {
	transform: translateX(3px);
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
	z-index: var(--z-base);
	text-align: center;
}

.hero__copy {
	display: grid;
	gap: var(--s5);
	justify-items: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero h1 {
	max-width: 16ch;
}

.hero h1 .axis-word {
	position: relative;
	color: var(--primary-ink);
}

.hero__sub {
	font-size: var(--t-lead);
	color: var(--ink-2);
	max-width: 52ch;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s2) var(--s5);
	list-style: none;
	padding: 0;
	font-family: var(--mono);
	font-size: var(--t-xs);
	color: var(--muted);
	letter-spacing: 0.02em;
}

.hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.hero__meta li::before {
	content: '';
	width: 4px;
	height: 4px;
	background: var(--primary);
	flex: none;
}

/* ---------- Instrument panel (upload) ----------------------------------- */
.panel {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	text-align: left;
}

.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: 0.7rem 1.1rem;
	border-bottom: 1px solid var(--line-soft);
}

.panel__body {
	padding: clamp(1.1rem, 3vw, 1.75rem);
}

.uploader {
	display: grid;
	gap: var(--s4);
}

.drop {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--s3);
	min-height: 13.5rem;
	padding: var(--s6) var(--s4);
	text-align: center;
	border: 1px dashed var(--line);
	background: linear-gradient(180deg, color-mix(in oklab, var(--raise) 55%, transparent), transparent);
	cursor: pointer;
	transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

/* the midline runs through the drop zone */
.drop::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 12%;
	bottom: 12%;
	width: 1px;
	transform: translateX(-0.5px);
	background: linear-gradient(180deg, transparent, var(--line), transparent);
	pointer-events: none;
}

.drop:hover,
.drop:focus-within,
.drop[data-drag='true'] {
	border-color: var(--signal);
	background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 12%, transparent), transparent);
}

.drop input[type='file'] {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.drop__idle {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
}

.drop__icon {
	width: clamp(72px, 11vw, 94px);
	height: clamp(72px, 11vw, 94px);
	color: var(--signal);
	margin-bottom: 0.35rem;
}

.drop__title {
	font-stretch: 110%;
	font-weight: 650;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}

.drop__hint {
	font-size: var(--t-sm);
	color: var(--muted);
}

/* chosen-file state */
.drop__preview {
	display: none;
	align-items: center;
	gap: var(--s4);
	width: 100%;
	text-align: left;
}

.drop[data-state='ready'] .drop__idle {
	display: none;
}

.drop[data-state='ready'] .drop__preview {
	display: flex;
}

.drop[data-state='ready'] {
	border-style: solid;
	border-color: var(--line);
	place-items: stretch;
	min-height: 0;
	padding: var(--s4);
}

.drop__thumb {
	position: relative;
	width: 88px;
	height: 88px;
	flex: none;
	object-fit: cover;
	border: 1px solid var(--line);
	background: var(--bg);
}

.drop__thumbwrap {
	position: relative;
	flex: none;
}

.drop__thumbwrap::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: var(--signal);
	opacity: 0.85;
	transform: translateX(-0.5px);
}

.drop__swap {
	display: block;
	font-size: var(--t-sm);
	color: var(--muted);
}

.uploader__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
}

@media (max-width: 34rem) {

	/* the panel header is a two-column readout; below this it just wraps badly */
	.panel__head .label + .label {
		display: none;
	}

	.uploader__foot .btn {
		width: 100%;
	}

	.uploader__note {
		max-width: none;
	}
}

.uploader__note {
	font-size: var(--t-xs);
	color: var(--muted);
	max-width: 34ch;
}

/* ---------- Notices ----------------------------------------------------- */
.notice {
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
	padding: 0.9rem 1.1rem;
	border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
	background: color-mix(in oklab, var(--accent) 9%, transparent);
	font-size: var(--t-sm);
	margin-bottom: var(--s4);
	text-align: left;
}

.notice__icon {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	color: var(--accent);
	margin-top: 0.18rem;
}

.notice strong {
	font-stretch: 108%;
}

/* ---------- Specimen triptych ------------------------------------------- */
.triptych {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: clamp(0.5rem, 1.6vw, 1.1rem);
	align-items: start;
}

.spec {
	position: relative;
	display: grid;
	gap: var(--s3);
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: var(--s3);
}

.spec__frame {
	position: relative;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--line);
}

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

/* registration marks: an instrument frames its subject */
.spec__frame::before,
.spec__frame::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--line);
	pointer-events: none;
}

.spec__frame::before {
	top: 8px;
	left: 8px;
	border-right: 0;
	border-bottom: 0;
}

.spec__frame::after {
	bottom: 8px;
	right: 8px;
	border-left: 0;
	border-top: 0;
}

.spec__axis {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-0.5px);
	background: var(--signal);
	opacity: 0.7;
	pointer-events: none;
}

.spec--true .spec__axis {
	opacity: 1;
	box-shadow: 0 0 12px color-mix(in oklab, var(--signal) 55%, transparent);
}

.spec__caption {
	display: grid;
	gap: 0.15rem;
	align-content: start;
}

.spec__name {
	font-stretch: 108%;
	font-weight: 650;
	font-size: var(--t-sm);
	letter-spacing: -0.005em;
}

.spec--true .spec__name {
	color: var(--primary-ink);
}

.spec__note {
	font-size: var(--t-xs);
	color: var(--muted);
	line-height: 1.5;
}

@media (max-width: 40rem) {
	.triptych {
		gap: 0.4rem;
	}

	.spec__note {
		display: none;
	}

	.spec__name {
		font-size: var(--t-xs);
	}
}

/* ---------- Mirror pair (symmetrical / asymmetrical) -------------------- */
.pair {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 0;
	border: 1px solid var(--line-soft);
	background: var(--surface);
}

.pair__divider {
	background: linear-gradient(180deg, transparent, var(--line), transparent);
}

.pair__side {
	padding: clamp(1.4rem, 3vw, 2.25rem);
	display: grid;
	gap: var(--s4);
	align-content: start;
}

.pair__side h3 {
	color: var(--ink);
}

.pair__side:first-child {
	text-align: right;
	justify-items: end;
}

.pair__side:first-child p,
.pair__side:first-child ul {
	text-align: right;
}

.pair__side:first-child .flag {
	direction: rtl;
}

.flag {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--s3);
	font-size: var(--t-sm);
	color: var(--ink-2);
}

.flag li {
	display: grid;
	grid-template-columns: 6px 1fr;
	gap: 0.7rem;
	align-items: start;
}

.flag li::before {
	content: '';
	width: 6px;
	height: 1px;
	background: var(--primary);
	margin-top: 0.72em;
}

@media (max-width: 46rem) {
	.pair {
		grid-template-columns: 1fr;
	}

	.pair__divider {
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--line), transparent);
	}

	.pair__side:first-child {
		text-align: left;
		justify-items: start;
	}

	.pair__side:first-child p,
	.pair__side:first-child ul {
		text-align: left;
	}

	.pair__side:first-child .flag {
		direction: ltr;
	}
}

/* ---------- Feature list (what gets measured) --------------------------- */
/* Seven items never fill a rectangle cleanly, so this is two parallel lists
   rather than a grid: row rules only, and a short last row reads as an ending. */
.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	column-gap: clamp(2rem, 6vw, 5rem);
	max-width: var(--wrap-mid);
	margin-inline: auto;
}

.feature {
	padding: var(--s4) 0;
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: 0.2rem;
	align-content: start;
}

.feature__name {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-stretch: 110%;
	font-weight: 650;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}

.feature__pair {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary-ink);
}

.feature p {
	font-size: var(--t-sm);
	color: var(--muted);
}

.feature:last-child {
	border-bottom: 1px solid var(--line-soft);
}

/* ---------- Process steps ----------------------------------------------- */
.steps {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: step;
	max-width: var(--wrap-mid);
	margin-inline: auto;
}

.step {
	counter-increment: step;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--s5);
	padding: var(--s5) 0;
	border-top: 1px solid var(--line-soft);
	align-items: start;
}

.step:last-child {
	border-bottom: 1px solid var(--line-soft);
}

.step::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--primary-ink);
	padding-top: 0.28rem;
	letter-spacing: 0.04em;
}

.step h3 {
	font-size: 1.125rem;
	margin-bottom: 0.35rem;
}

.step p {
	color: var(--muted);
	font-size: var(--t-sm);
}

/* ---------- Checklist (photo guidance) ---------------------------------- */
.checklist {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--s6) clamp(2rem, 6vw, 4.5rem);
	max-width: var(--wrap-mid);
	margin-inline: auto;
}

.check {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--s4);
	align-items: start;
}

.check svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--primary);
	margin-top: 0.1rem;
}

.check h4 {
	margin-bottom: 0.2rem;
}

.check p {
	font-size: var(--t-sm);
	color: var(--muted);
}

/* ---------- Score bands (how to read a number) -------------------------- */
.bands {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line-soft);
}

.scoreband {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--s5);
	padding: var(--s4) 0;
	border-bottom: 1px solid var(--line-soft);
	align-items: baseline;
}

.scoreband__range {
	font-family: var(--mono);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--primary-ink);
	letter-spacing: -0.01em;
}

.scoreband p {
	font-size: var(--t-sm);
	color: var(--ink-2);
}

@media (max-width: 34rem) {
	.scoreband {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* ---------- FAQ --------------------------------------------------------- */
.faq {
	border-top: 1px solid var(--line-soft);
}

.faq details {
	border-bottom: 1px solid var(--line-soft);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
	font-stretch: 108%;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1.4;
	transition: color var(--dur-1) var(--ease-out);
}

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

.faq summary:hover {
	color: var(--primary-ink);
}

.faq summary::after {
	content: '';
	width: 11px;
	height: 11px;
	flex: none;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dur-2) var(--ease-out);
	color: var(--muted);
}

.faq details[open] summary {
	color: var(--primary-ink);
}

.faq details[open] summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.faq__body {
	padding-bottom: 1.35rem;
	color: var(--muted);
	font-size: var(--t-sm);
	max-width: 72ch;
}

/* ---------- Result page ------------------------------------------------- */
.readout {
	display: grid;
	justify-items: center;
	gap: clamp(1.25rem, 2.4vw, 1.9rem);
	text-align: center;
}

/* the score and its breakdown are one thought; don't put a full band between them */
.band--readout {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.band--breakdown {
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem) var(--band);
}

.band--breakdown .section-head {
	margin-bottom: var(--s5);
}

.plate {
	position: relative;
	width: min(100%, 19rem);
	border: 1px solid var(--line);
	background: var(--bg);
	overflow: hidden;
}

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

.plate__axis {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-0.5px);
	background: var(--signal);
	opacity: 0.9;
	box-shadow: 0 0 14px color-mix(in oklab, var(--signal) 60%, transparent);
	pointer-events: none;
}

.plate__scan {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 22%;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--signal) 26%, transparent) 70%, var(--signal));
	opacity: 0;
	animation: scan 2.1s var(--ease-out-quart) 0.15s 1 both;
}

@keyframes scan {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	82% {
		opacity: 1;
	}

	100% {
		transform: translateY(460%);
		opacity: 0;
	}
}

.plate__corner {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1px solid var(--line);
	pointer-events: none;
}

.plate__corner--tl {
	top: 7px;
	left: 7px;
	border-right: 0;
	border-bottom: 0;
}

.plate__corner--tr {
	top: 7px;
	right: 7px;
	border-left: 0;
	border-bottom: 0;
}

.plate__corner--bl {
	bottom: 7px;
	left: 7px;
	border-right: 0;
	border-top: 0;
}

.plate__corner--br {
	bottom: 7px;
	right: 7px;
	border-left: 0;
	border-top: 0;
}

.total {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
}

.total__num {
	font-family: var(--mono);
	font-weight: 500;
	font-size: clamp(3.75rem, 14vw, 6rem);
	line-height: 0.95;
	letter-spacing: -0.045em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.total__num span {
	color: var(--signal);
	font-size: 0.42em;
	letter-spacing: 0;
	margin-left: 0.1em;
	vertical-align: 0.55em;
}

.total__verdict {
	font-size: var(--t-lead);
	color: var(--ink-2);
	max-width: 46ch;
}

/* the seven pairs, each bar growing outward from the midline */
.measures {
	display: grid;
	gap: var(--s4);
	width: 100%;
	max-width: var(--wrap-mid);
	margin-inline: auto;
	text-align: left;
}

.meas__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	margin-bottom: 0.4rem;
}

.meas__name {
	font-stretch: 108%;
	font-weight: 600;
	font-size: var(--t-sm);
	letter-spacing: -0.005em;
}

.meas__val {
	font-family: var(--mono);
	font-size: var(--t-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--primary-ink);
}

.meas__val span {
	color: var(--muted);
	font-size: 0.8em;
}

.meas__track {
	position: relative;
	height: 18px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
}

/* quarter index marks */
.meas__track::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 5px;
	background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12.5%);
	pointer-events: none;
	z-index: 3;
}

/* The bar overhangs the baseline slightly, so it needs its own padding box. */
.meas__gauge {
	position: relative;
	padding-block: 6px 7px;
}

.meas__fill {
	position: absolute;
	bottom: 0;
	height: 12px;
	left: calc(50% - var(--v) * 0.5%);
	width: calc(var(--v) * 1%);
	background: linear-gradient(90deg, var(--primary), var(--bar-mid) 50%, var(--primary));
	transform-origin: center;
	animation: grow 700ms var(--ease-out-quart) both;
	animation-delay: calc(var(--i, 0) * 65ms + 250ms);
	z-index: 1;
}

@keyframes grow {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* the midline sits on top of every bar */
.meas__track::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: 1px;
	transform: translateX(-0.5px);
	background: var(--ink);
	opacity: 0.55;
	z-index: 4;
}

/* ---------- Tool index -------------------------------------------------- */
.tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.tool {
	display: flex;
	align-items: center;
	gap: var(--s4);
	padding: 1.15rem 0;
	border-top: 1px solid var(--line-soft);
	text-decoration: none;
	color: var(--ink);
	transition: background var(--dur-1) var(--ease-out);
}

.tool>* {
	transition: transform var(--dur-2) var(--ease-out);
}

.tool:hover {
	background: var(--surface);
	color: var(--ink);
}

.tool:hover .tool__text {
	transform: translateX(5px);
}

.tool::before {
	content: '';
	width: 1px;
	height: 1.5rem;
	flex: none;
	background: var(--primary);
	opacity: 0.55;
	transition: opacity var(--dur-1) var(--ease-out);
}

.tool:hover::before {
	opacity: 1;
}

.tool__text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.tool__name {
	font-stretch: 108%;
	font-weight: 650;
	font-size: var(--t-sm);
	letter-spacing: -0.005em;
}

.tool__desc {
	font-size: var(--t-xs);
	color: var(--muted);
}

.tool__arrow {
	margin-left: auto;
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--muted);
	transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.tool:hover .tool__arrow {
	transform: translateX(3px);
	color: var(--primary);
}

.tool:last-child {
	border-bottom: 1px solid var(--line-soft);
}

/* ---------- Sticky offer ------------------------------------------------ */
/* keep the last section clear of the fixed bar */
body:has(.offer) {
	padding-bottom: 6.5rem;
}

@media (max-width: 46rem) {
	body:has(.offer) {
		padding-bottom: 9.5rem;
	}
}

.offer {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--z-sticky);
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding: 0.8rem 1.25rem;
}

.offer__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s5);
	max-width: var(--wrap);
	margin-inline: auto;
}

.offer__text {
	font-size: var(--t-sm);
	color: var(--ink-2);
	margin: 0;
}

.offer .btn {
	flex: none;
	padding-block: 0.6rem;
}

.offer__close {
	position: absolute;
	top: 0.4rem;
	right: 0.6rem;
	background: none;
	border: 0;
	color: var(--muted);
	cursor: pointer;
	line-height: 1;
	padding: 0.35rem;
	font-size: 1.05rem;
}

.offer__close:hover {
	color: var(--ink);
}

@media (max-width: 46rem) {
	.offer__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s3);
		text-align: center;
	}

	.offer .btn {
		width: 100%;
	}

	.offer__text {
		padding-right: 1.5rem;
	}
}

/* ---------- Prose (legal / long form) ----------------------------------- */
.prose {
	max-width: 68ch;
}

.prose h1 {
	font-size: clamp(2rem, 4.5vw, 3rem);
	margin-bottom: var(--s5);
}

.prose h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	margin-top: var(--s7);
	margin-bottom: var(--s3);
}

.prose h3,
.prose h4 {
	margin-top: var(--s5);
	margin-bottom: var(--s2);
	font-size: 1.0625rem;
}

.prose p,
.prose li {
	color: var(--ink-2);
	font-size: var(--t-sm);
	line-height: 1.7;
	margin-bottom: var(--s3);
}

.prose ul,
.prose ol {
	padding-left: 1.15rem;
	margin-bottom: var(--s4);
}

.prose li::marker {
	color: var(--primary);
}

.prose a {
	color: var(--primary-ink);
}

.prose strong {
	color: var(--ink);
	font-weight: 650;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--s4);
	font-size: var(--t-xs);
}

.prose td,
.prose th {
	border-bottom: 1px solid var(--line-soft);
	padding: 0.5rem 0.75rem 0.5rem 0;
	text-align: left;
	vertical-align: top;
	color: var(--muted);
}

.prose .index {
	list-style: none;
	padding-left: 0;
	columns: 2;
	column-gap: var(--s6);
}

@media (max-width: 40rem) {
	.prose .index {
		columns: 1;
	}
}

/* ---------- Interstitial ------------------------------------------------ */
.gate {
	display: grid;
	justify-items: center;
	gap: var(--s5);
	text-align: center;
	padding-block: clamp(3rem, 9vw, 6rem);
}

.gate h1 {
	font-size: var(--t-h2);
	max-width: 18ch;
}

.gate .btn {
	white-space: nowrap;
	font-size: clamp(0.875rem, 3.2vw, 1rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
	max-width: 100%;
}

.gate__status {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: var(--t-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--primary-ink);
}

.gate__dot {
	width: 7px;
	height: 7px;
	background: var(--primary);
	animation: blink 1.4s steps(1, end) infinite;
}

@keyframes blink {

	0%,
	55% {
		opacity: 1;
	}

	56%,
	100% {
		opacity: 0.15;
	}
}

.spinner {
	width: 1.05em;
	height: 1.05em;
	border: 2px solid color-mix(in oklab, var(--on-primary) 35%, transparent);
	border-top-color: var(--on-primary);
	border-radius: 50%;
	animation: spin 700ms linear infinite;
	flex: none;
}

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

.veil {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: grid;
	place-items: center;
	gap: var(--s4);
	background: color-mix(in oklab, var(--bg) 92%, transparent);
	color: var(--ink);
	font-family: var(--mono);
	font-size: var(--t-sm);
}

.veil .spinner {
	width: 2rem;
	height: 2rem;
	border-color: var(--line);
	border-top-color: var(--primary);
}

.is-hidden {
	display: none !important;
}

/* ---------- Footer ------------------------------------------------------ */
.foot {
	margin-top: auto;
	border-top: 1px solid var(--line-soft);
	padding-block: var(--s6);
	background: var(--bg);
	position: relative;
	z-index: var(--z-base);
}

.foot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
}

.foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s5);
	list-style: none;
	padding: 0;
	font-size: var(--t-sm);
}

.foot__links a {
	color: var(--muted);
	text-decoration: none;
}

.foot__links a:hover {
	color: var(--ink);
}

/* ---------- Utilities --------------------------------------------------- */
.stack-5 {
	display: grid;
	gap: var(--s5);
}

.stack-6 {
	display: grid;
	gap: var(--s6);
}

.center {
	text-align: center;
	/* p carries a 68ch measure; without this, "centred" centres inside that measure */
	max-width: none;
}

.center p {
	max-width: 68ch;
	margin-inline: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -120%);
	z-index: var(--z-dialog);
	background: var(--primary);
	color: var(--on-primary);
	padding: 0.65rem 1.1rem;
	font-size: var(--t-sm);
	text-decoration: none;
	transition: transform var(--dur-2) var(--ease-out);
}

.skip:focus {
	transform: translate(-50%, 0);
	color: var(--on-primary);
}

/* Ezoic placeholders should never collapse the layout or fight the palette */
[id^='ezoic-pub-ad-placeholder'] {
	margin-block: var(--s5);
}

/* `.dnda` ("do not display ads") marks regions Ezoic must not auto-insert into:
   the hero + uploader, and the rewarded-ad interstitial. It is a hook only and
   carries no styles by design. Ezoic has no built-in class for this, so it does
   nothing until `.dnda` is registered once under
   EzoicAds > Ad Configuration > Exclusion Filters (type: Class).
   It does not affect explicit ezstandalone.showAds() placeholders. */

/* ---------- Motion preferences ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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

	.plate__scan {
		display: none;
	}

	.meas__fill {
		animation: none;
		transform: none;
	}
}