/* Loendur site styles — Loendur 2.0 design system.
   Colour, spacing and radius tokens come from tokens.css, which is a verbatim
   copy of the design handoff. Do not redeclare them here except in the
   inverted-band scope below, which is documented. */

/* ---- Site-only tokens -------------------------------------------------
   Values the app token scale does not cover: the two marketing display
   sizes, and band padding (the mock uses 72/80/56px; the space scale stops
   at 56). Declared here so tokens.css stays a clean copy. */
:root {
	--site-wrap:            1040px;
	--site-wrap-prose:      720px;
	--site-nav-h:           64px;
	--site-band-pad-y:      clamp(3rem, 2rem + 4vw, 4.5rem);
	--site-band-pad-x:      clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
	--site-hero-pad-top:    clamp(3rem, 1.5rem + 6vw, 5rem);
	--site-text-display:    700 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem)/1.07 var(--lo-font);
	--site-text-page-title: 700 clamp(2rem, 1.7rem + 1.2vw, 2.5rem)/1.1 var(--lo-font);
	--site-space-5:         20px;
}

/* ---- Base ---- */
:root {
	color-scheme: light dark;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--lo-surface-base);
	color: var(--lo-content-primary);
	/* --lo-text-body is 17/24px; re-stated in rem so it honours the
	   reader's browser font-size preference. */
	font-family: var(--lo-font);
	font-size: 1.0625rem;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--lo-accent);
	text-decoration: none;
	word-break: break-word;
}

a:hover {
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--lo-accent);
	outline-offset: 2px;
	border-radius: var(--lo-radius-sm);
}

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

/* ---- Type ----
   rem equivalents of the handoff type tokens, named after their token. */
h1,
h2,
h3 {
	margin: 0;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 {
	font: var(--site-text-page-title);
	letter-spacing: -0.02em;
}

h2 {
	font: 600 1.75rem/1.21 var(--lo-font);
	/* --lo-text-title-1  28/34 */
}

h3 {
	font: 600 1.25rem/1.25 var(--lo-font);
	/* --lo-text-title-3  20/25 */
}

p {
	margin: 0;
	text-wrap: pretty;
}

.lede {
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--lo-content-secondary);
}

.muted {
	color: var(--lo-content-secondary);
}

.small {
	font-size: 0.9375rem;
	line-height: 1.47;
	/* --lo-text-subheadline */
}

.tiny {
	font-size: 0.8125rem;
	line-height: 1.38;
	/* --lo-text-footnote */
}

.eyebrow {
	font: 600 0.6875rem/1.45 var(--lo-font);
	/* --lo-text-caption */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lo-accent);
}

.card-key {
	font: 600 1.375rem/1.18 var(--lo-font-rounded);
	/* --lo-num-stat */
	color: var(--lo-accent);
}

/* ---- Bands ----
   Sections alternate two surfaces. --card-surface derives from the band so
   a card nests one step further without a specificity fight. */
.band {
	--band-surface: var(--lo-surface-base);
	--card-surface: var(--lo-surface-raised);
	background: var(--band-surface);
	color: var(--lo-content-primary);
	padding: var(--site-band-pad-y) var(--site-band-pad-x);
}

.band-raised {
	--band-surface: var(--lo-surface-raised);
	--card-surface: var(--lo-surface-sunken);
	border-block: 1px solid var(--lo-content-separator);
}

/* Two base bands in a row would merge into one slab. Only needed where the
   band above is also a .band — .band-raised already draws its own edges. */
.band-hairline-top {
	border-top: 1px solid var(--lo-content-separator);
}

/* The inverted band is the always-dark scope. The home privacy band and the
   Support hidden-counters card are deliberate inversions, not themed
   surfaces, so they stay dark in light *and* dark mode — handoff r17.3, which
   names the set --invert-*. They must not flip: this file used to redeclare
   the light palette under prefers-color-scheme: dark, which turned both
   blocks white on an otherwise dark page. These hexes are the one sanctioned
   set in this file; they mirror the dark half of tokens.css, so if that file
   changes, change them too. */
.band-inverted {
	--lo-surface-base:      #1A1A1C;
	--lo-surface-raised:    #1C1C1E;
	--lo-surface-sunken:    #2C2C2E;
	--lo-content-primary:   #FFFFFF;
	--lo-content-secondary: #A1A1A6;
	--lo-content-separator: #48484C;
	--lo-accent:            #6BA6FF;
	--lo-accent-wash:       rgba(107, 166, 255, .20);
	/* On this surface the warning reads yellow over an amber wash, not the
	   orange-on-orange the ordinary tokens would give: --invert-warn and
	   --invert-warn-bg in the handoff. */
	--lo-warning:           #F2C744;
	--warn-wash:            rgba(255, 159, 10, .14);
	--band-surface: var(--lo-surface-base);
	--card-surface: var(--lo-surface-raised);
	background: var(--band-surface);
	color: var(--lo-content-primary);
	border-block: 0;
}

.wrap {
	max-width: var(--site-wrap);
	margin: 0 auto;
}

.wrap-prose {
	max-width: var(--site-wrap-prose);
	margin: 0 auto;
}

/* ---- Nav ---- */
.nav {
	background: var(--lo-surface-base);
	border-bottom: 1px solid var(--lo-content-separator);
	padding: 0 var(--site-band-pad-x);
}

.nav > .wrap {
	min-height: var(--site-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-space-4);
	flex-wrap: wrap;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: var(--lo-space-3);
	min-height: 44px;
	color: var(--lo-content-primary);
	font: 600 1.0625rem/1.29 var(--lo-font);
	letter-spacing: -0.01em;
}

.nav-brand:hover {
	text-decoration: none;
}

.nav-mark {
	width: 28px;
	height: 28px;
	border-radius: var(--lo-radius-sm);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: var(--lo-space-6);
	flex-wrap: wrap;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--lo-content-primary);
	font-size: 0.9375rem;
}

.nav-link[aria-current="page"] {
	color: var(--lo-accent);
	font-weight: 600;
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--lo-space-4);
	border-radius: var(--lo-radius-pill);
	background: var(--lo-accent);
	color: var(--lo-surface-raised);
	font: 600 0.9375rem/1 var(--lo-font);
}

.nav-cta:hover {
	text-decoration: none;
	opacity: 0.9;
}

/* ---- Hero ---- */
.hero {
	padding-top: var(--site-hero-pad-top);
}

.hero > .wrap,
.wrap.hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--lo-space-14);
	align-items: center;
}

.hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lo-space-6);
}

.hero-text h1 {
	font: var(--site-text-display);
	letter-spacing: -0.025em;
}

.hero-text .lede {
	max-width: 36ch;
}

.hero-cta {
	display: flex;
	align-items: center;
	gap: var(--lo-space-4);
	flex-wrap: wrap;
}

.hero-cta img {
	width: 196px;
	height: auto;
}

.trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lo-space-3);
	font-size: 0.8125rem;
	color: var(--lo-content-secondary);
}

.hero-shot {
	display: flex;
	justify-content: center;
}

/* The frame takes its proportions from whatever image it holds — the hero
   and widget shots come from different devices. Each img carries width and
   height attributes, so there is no layout shift. */
.phone {
	width: min(300px, 78vw);
	padding: 10px;
	border-radius: 44px;
	background: var(--lo-surface-raised);
	box-shadow: var(--lo-elevation-floating);
}

.phone img {
	border-radius: 34px;
}

/* Slightly smaller frame for the secondary shot, so the hero stays the
   biggest device on the page. */
.phone-sm {
	width: min(280px, 74vw);
	padding: 9px;
	border-radius: 42px;
}

.phone-sm img {
	border-radius: 33px;
}

/* ---- Pills ---- */
.pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--lo-radius-pill);
	background: var(--lo-accent-wash);
	color: var(--lo-accent);
	font: 600 0.6875rem/1.45 var(--lo-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Cards ---- */
.card {
	background: var(--card-surface);
	border-radius: var(--lo-radius-lg);
	padding: var(--lo-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
}

.card h3 {
	font: 600 1.0625rem/1.29 var(--lo-font);
	/* --lo-text-headline */
}

.card p {
	font-size: 0.9375rem;
	line-height: 1.47;
	color: var(--lo-content-secondary);
}

.card-hairline {
	box-shadow: var(--lo-elevation-hairline);
}

.card ul {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.9375rem;
	line-height: 1.47;
	color: var(--lo-content-secondary);
}

.card li {
	margin: 0.25rem 0;
}

/* An inverted block that is a card rather than a full-bleed band. Inherits
   the flipped palette from .band-inverted. */
.inverted-card {
	border-radius: var(--lo-radius-lg);
	padding: var(--lo-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-4);
}

.inverted-card h2 {
	font: 600 1.25rem/1.25 var(--lo-font);
	/* --lo-text-title-3; a section heading at the mock's card-title size */
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lo-space-4);
}

.contact-card h2 {
	font: 600 1.25rem/1.25 var(--lo-font);
	/* --lo-text-title-3; a section heading at the mock's card-title size */
}

.contact-card {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--lo-space-8);
}

/* ---- Story rows (home: what an entry can carry) ---- */
.wrap.story {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--lo-space-14);
	align-items: center;
}

.story-lede {
	max-width: 52ch;
}

.story-rows {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-3);
}

.story-row {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--lo-space-4);
}

/* The 64px row glyphs are drawn in CSS, not image slots: at this size a
   screenshot has no room to read as anything. Every colour is a token, so
   they invert with the rest of the page. */
.story-thumb {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: var(--lo-radius-md);
	background: var(--lo-surface-sunken);
	position: relative;
	overflow: hidden;
}

/* photo — a sun over two hills. The sun sits left and the taller hill right,
   so the two never stack into something that reads as a person. */
.story-thumb-photo::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	width: 12px;
	height: 12px;
	border-radius: var(--lo-radius-pill);
	background: var(--lo-content-separator);
}

.story-thumb-photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 28px;
	background:
		radial-gradient(22px 26px at 44px 100%, var(--lo-neutral) 99%, transparent 100%),
		radial-gradient(17px 17px at 17px 100%, var(--lo-content-separator) 99%, transparent 100%);
}

/* location — a pin on hatched ground */
.story-thumb-location {
	background:
		repeating-linear-gradient(135deg,
			color-mix(in srgb, var(--lo-content-separator) 45%, var(--lo-surface-sunken)) 0 6px,
			var(--lo-surface-sunken) 6px 12px);
}

/* A square with three corners rounded off, turned 45° so the sharp one
   points down — the standard map-pin teardrop. */
.story-thumb-location::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -62%) rotate(-45deg);
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 2px;
	background: var(--lo-counter-blue);
}

/* custom fields — two text rows and a switch */
.story-thumb-fields {
	background-color: var(--lo-surface-sunken);
	background-image:
		linear-gradient(var(--lo-content-separator) 0 0),
		linear-gradient(var(--lo-content-separator) 0 0),
		linear-gradient(var(--lo-content-separator) 0 0);
	background-size: 46px 6px, 32px 6px, 20px 6px;
	background-position: 9px 19px, 9px 30px, 31px 42px;
	background-repeat: no-repeat;
}

.story-thumb-fields::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 39px;
	width: 18px;
	height: 12px;
	border-radius: var(--lo-radius-pill);
	background: var(--lo-accent);
}

/* ---- Home Screen widget mock (home) ----
   r17.1 replaced the two widget screenshots with drawn tiles: widgets live
   outside the app, so there is no state fastlane can capture reliably. The
   sizes are the real widget point sizes — 170 x 170 and 364 x 170 — and the
   tiles wrap instead of scaling, because a widget does not resize. Each tile
   sets --counter to its counter colour; everything else is a token. */
.wrap.widgets {
	display: grid;
	/* 0.75/1.25 of a 1040px wrap leaves the right column 615px: the 170 and
	   364 tiles plus their gap and the wall padding need 590, so they hold
	   one row on desktop instead of wrapping at the last pixel. */
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: var(--lo-space-14);
	align-items: center;
}

.widget-col {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-3);
	min-width: 0;
}

/* The wallpaper the tiles sit on. Tinted from counter tokens instead of a
   photograph, so it follows the appearance like the rest of the page. The
   flat background is the fallback where color-mix is unsupported. */
.widget-wall {
	border-radius: 26px;
	padding: var(--site-space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lo-space-4);
	background: var(--lo-surface-sunken);
	background:
		linear-gradient(150deg,
			color-mix(in srgb, var(--lo-counter-blue) 20%, var(--lo-surface-sunken)),
			color-mix(in srgb, var(--lo-counter-brown) 14%, var(--lo-surface-sunken)) 60%,
			color-mix(in srgb, var(--lo-counter-indigo) 18%, var(--lo-surface-sunken)));
}

.widget {
	height: 170px;
	max-width: 100%;
	flex: none;
	border-radius: var(--lo-radius-xl);
	padding: 14px;
	display: flex;
	background: var(--lo-surface-raised);
	background: color-mix(in srgb, var(--lo-surface-raised) 88%, transparent);
	box-shadow: var(--lo-elevation-floating);
}

/* Which counter a tile belongs to. The two shown match the counters in the
   hero screenshot, so the page tells one consistent story. */
.widget-c-blue {
	--counter: var(--lo-counter-blue);
}

.widget-c-green {
	--counter: var(--lo-counter-green);
}

.widget-sm {
	width: 170px;
	flex-direction: column;
}

.widget-md {
	width: 364px;
	gap: 18px;
	padding: var(--lo-space-4);
}

/* The counter's name carries its identity; the colour bar only supports it.
   Same rule as the app's list rows. */
.widget-id {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.widget-bar {
	width: 4px;
	height: 16px;
	flex: none;
	border-radius: 2px;
	background: var(--counter);
}

.widget-name {
	font: 600 0.8125rem/1.2 var(--lo-font);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.widget-total {
	display: block;
	font: 600 2.875rem/1 var(--lo-font-rounded);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.widget-mode {
	display: block;
	font: 400 0.75rem/1.3 var(--lo-font);
	color: var(--lo-content-secondary);
}

/* The + logs an entry without opening the app, so it gets the full 44pt
   target even in a 170pt tile. */
.widget-figure {
	min-width: 0;
}

.widget-figure .widget-mode {
	margin-top: 2px;
}

.widget-add {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--lo-radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 3px;
	font: 300 1.625rem/1 var(--lo-font);
	color: var(--counter);
	background: color-mix(in srgb, var(--counter) 14%, transparent);
}

.widget-sm .widget-foot {
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--lo-space-2);
	min-width: 0;
}

.widget-md-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.widget-md-figure {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}

.widget-md-side {
	width: 150px;
	max-width: 45%;
	flex: none;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Seven days, the last one today. */
.widget-spark {
	height: 64px;
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.widget-spark span {
	flex: 1;
	border-radius: 3px;
	background: color-mix(in srgb, var(--counter) 30%, transparent);
}

/* An illustrative week. The heights are data, but they live here rather than
   inline so the markup keeps its no-style-attributes rule. */
.widget-spark span:nth-child(1) { height: 34%; }
.widget-spark span:nth-child(2) { height: 58%; }
.widget-spark span:nth-child(3) { height: 22%; }
.widget-spark span:nth-child(4) { height: 76%; }
.widget-spark span:nth-child(5) { height: 46%; }
.widget-spark span:nth-child(6) { height: 64%; }
.widget-spark span:nth-child(7) { height: 100%; }

.widget-spark span:last-child {
	background: var(--counter);
}

.widget-spark-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--lo-space-2);
	min-width: 0;
}

/* ---- Lock Screen accessories ----
   Always dark, in both appearances: the accessories only ever render on the
   Lock Screen, and they are monochrome there by platform rule — so this plate
   borrows the inverted scope rather than a themed surface. */
.lock-plate {
	border-radius: var(--lo-radius-xl);
	padding: 18px var(--site-space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-space-3);
	background:
		linear-gradient(165deg,
			color-mix(in srgb, var(--lo-counter-indigo) 14%, var(--lo-surface-base)),
			var(--lo-surface-sunken) 60%,
			var(--lo-surface-base));
}

/* Circular accessory: a progress ring at 6 of 8. The conic gradient is the
   ring, the radial mask punches the middle out so the plate shows through. */
.lock-ring {
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--lo-radius-pill);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--lo-content-primary) 14%, transparent);
}

.lock-ring::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: var(--lo-radius-pill);
	background:
		conic-gradient(var(--lo-content-primary) 0deg 270deg,
			color-mix(in srgb, var(--lo-content-primary) 28%, transparent) 270deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent 27px, black 27px);
	mask: radial-gradient(circle, transparent 27px, black 27px);
}

.lock-ring strong {
	font: 600 1.375rem/1 var(--lo-font-rounded);
	font-variant-numeric: tabular-nums;
}

.lock-ring span {
	font: 500 0.625rem/1 var(--lo-font);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lo-content-secondary);
}

/* Rectangular accessory, at its real 153 x 72. */
.lock-rect {
	width: 153px;
	height: 72px;
	flex: none;
	border-radius: var(--lo-radius-lg);
	padding: 6px var(--lo-space-2);
	display: flex;
	align-items: center;
	gap: 6px;
	background: color-mix(in srgb, var(--lo-content-primary) 14%, transparent);
}

.lock-rect-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lock-rect-name {
	font: 500 0.6875rem/1.2 var(--lo-font);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lock-rect-figure {
	display: flex;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
}

.lock-rect-figure strong {
	font: 600 1.5rem/1 var(--lo-font-rounded);
	font-variant-numeric: tabular-nums;
}

.lock-rect-figure span {
	font: 400 0.625rem/1.1 var(--lo-font);
	color: var(--lo-content-secondary);
}

.lock-add {
	width: 44px;
	height: 60px;
	flex: none;
	border-radius: var(--lo-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 3px;
	font: 300 1.5rem/1 var(--lo-font);
	background: color-mix(in srgb, var(--lo-content-primary) 22%, transparent);
}

.lock-note {
	flex: 1;
	min-width: 150px;
	font: 400 0.8125rem/1.46 var(--lo-font);
	color: var(--lo-content-secondary);
}

/* ---- Statistics sample (support) ---- */
.stat-body {
	padding: var(--lo-space-4) var(--lo-space-6) var(--lo-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-4);
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lo-space-2);
}

.stat-tile {
	background: var(--lo-surface-sunken);
	border-radius: var(--lo-radius-md);
	padding: var(--lo-space-3);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stat-value {
	font: 600 1.25rem/1.2 var(--lo-font-rounded);
	font-variant-numeric: tabular-nums;
}

.stat-value-up {
	color: var(--lo-success);
}

.stat-label {
	font-size: 0.75rem;
	line-height: 1.33;
	color: var(--lo-content-secondary);
}

.stat-notes {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
}

.stat-notes p {
	font-size: 0.9375rem;
	line-height: 1.47;
}

/* ---- Numbered steps ---- */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lo-space-4);
}

.step-num {
	width: 28px;
	height: 28px;
	border-radius: var(--lo-radius-pill);
	background: var(--lo-accent-wash);
	color: var(--lo-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 0.9375rem/1 var(--lo-font-rounded);
}

/* ---- Split (support: main + sidebar) ---- */
.split {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--lo-space-8);
	align-items: start;
}

.split-col,
.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-4);
}

/* ---- List groups ---- */
.list-group {
	background: var(--card-surface);
	border-radius: var(--lo-radius-lg);
	overflow: hidden;
	box-shadow: var(--lo-elevation-hairline);
}

.list-group-head {
	padding: var(--lo-space-4) var(--lo-space-6);
	border-bottom: 1px solid var(--lo-content-separator);
	font: 600 1.0625rem/1.29 var(--lo-font);
}

.list-group-head h3 {
	font: 600 1.0625rem/1.29 var(--lo-font);
	/* --lo-text-headline; a real heading kept at the mock's row-title size */
}

.list-group-head p {
	font-size: 0.8125rem;
	line-height: 1.38;
	font-weight: 400;
	color: var(--lo-content-secondary);
	margin-top: 4px;
}

.list-group-row {
	padding: var(--lo-space-3) var(--lo-space-6);
	border-bottom: 1px solid var(--lo-surface-sunken);
	font-size: 0.9375rem;
	line-height: 1.47;
}

.list-group-row:last-child {
	border-bottom: 0;
}

.list-group-row strong {
	font-weight: 600;
}

.mode-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mode-grid .list-group-row:nth-child(odd) {
	border-right: 1px solid var(--lo-surface-sunken);
}

.mode-grid .span-2 {
	grid-column: span 2;
	border-right: 0;
}

/* ---- Notes ---- */
.note {
	border-radius: var(--lo-radius-lg);
	padding: var(--lo-space-6);
	background: var(--lo-accent-wash);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
	font-size: 0.9375rem;
	line-height: 1.47;
}

.note-warn {
	/* The inverted scope overrides --warn-wash; everywhere else the wash is
	   mixed from the warning colour itself. */
	background: var(--warn-wash, color-mix(in srgb, var(--lo-warning) 12%, transparent));
}

/* On the inverted surface the warning has no label span to carry the colour,
   so the copy itself reads yellow — the handoff's --invert-warn. */
.band-inverted .note-warn {
	color: var(--lo-warning);
}

.note-label {
	color: var(--lo-warning);
	font-weight: 600;
}

/* ---- Cell grid (hidden-counters band) ---- */
.cell-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--lo-content-separator);
	border-radius: var(--lo-radius-lg);
	overflow: hidden;
}

.cell {
	background: var(--card-surface);
	padding: var(--lo-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-1);
}

.cell strong {
	font: 600 1.0625rem/1.29 var(--lo-font);
}

.cell span {
	font-size: 0.9375rem;
	line-height: 1.47;
	color: var(--lo-content-secondary);
}

/* ---- Legal pages ---- */
.doc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lo-space-4);
	font-size: 0.8125rem;
	color: var(--lo-content-secondary);
}

.doc-section {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
}

.doc-section h2 {
	font: 600 1.25rem/1.25 var(--lo-font);
}

.doc-section p,
.doc-section li {
	font-size: 1.0625rem;
	line-height: 1.53;
}

.doc-section ul {
	margin: 0;
	padding-left: 1.25rem;
}

.doc-section li {
	margin: 0.35rem 0;
}

.summary-card {
	background: var(--card-surface);
	border-radius: var(--lo-radius-lg);
	padding: var(--lo-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
}

.disclaimer {
	border-top: 1px solid var(--lo-content-separator);
	padding-top: var(--lo-space-4);
	font-size: 0.8125rem;
	line-height: 1.54;
	color: var(--lo-content-secondary);
}

/* ---- Footer ---- */
.foot {
	background: var(--lo-surface-base);
	border-top: 1px solid var(--lo-content-separator);
	padding: var(--lo-space-8) var(--site-band-pad-x);
}

.foot > .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-space-6);
	flex-wrap: wrap;
	font-size: 0.8125rem;
	color: var(--lo-content-secondary);
}

.foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--site-space-5);
}

.foot-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.foot-name {
	font-weight: 600;
	color: var(--lo-content-primary);
}

/* ---- Stacks ---- */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-8);
}

.stack-s {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-4);
}

.stack-xs {
	display: flex;
	flex-direction: column;
	gap: var(--lo-space-2);
}

.center {
	text-align: center;
	align-items: center;
}

/* ---- Breakpoints: the two this repo already uses ---- */
@media (max-width: 880px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.cell-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	/* The story rows are long enough that a 280px phone beside them leaves
	   neither column readable — stack before the hero does. */
	.wrap.story {
		grid-template-columns: 1fr;
		gap: var(--lo-space-8);
	}

	/* Same reason as the story rows: the widget strip is wider than a phone
	   shot, so it needs the full column sooner. */
	.wrap.widgets {
		grid-template-columns: 1fr;
		gap: var(--lo-space-8);
	}
}

@media (max-width: 640px) {
	.hero > .wrap,
	.wrap.hero {
		grid-template-columns: 1fr;
		gap: var(--lo-space-8);
	}

	.card-grid,
	.steps,
	.cell-grid,
	.mode-grid,
	.contact-card {
		grid-template-columns: 1fr;
	}

	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mode-grid .list-group-row:nth-child(odd) {
		border-right: 0;
	}

	.nav > .wrap {
		padding: var(--lo-space-2) 0;
	}

	.nav-links {
		gap: var(--lo-space-4);
	}

	.foot > .wrap {
		flex-direction: column;
		align-items: flex-start;
	}

	/* A widget keeps its point size, so the wallpaper gives up its padding
	   first; the 364pt tile only starts shrinking once that is spent. */
	.widget-wall {
		padding: var(--lo-space-3);
		gap: var(--lo-space-3);
	}

	.lock-plate {
		padding: var(--lo-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}