/* Marketing and legal pages. Same palette as the app, tuned for reading long text. */
:root {
	--bg: #f6f5f2;
	--card: #ffffff;
	--text: #1d1d1b;
	--muted: #6b6a66;
	--line: #dcdad4;
	--accent: #1f5f8b;
	--primary: #0b6bff;
	--primary-text: #ffffff;
	--radius: 10px;
	--band: #eeece7; /* desktop: every other home section's full-width band */
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #161615;
		--card: #21211f;
		--text: #ecebe7;
		--muted: #a3a29c;
		--line: #3a3936;
		--accent: #6fb3e0;
		--primary: #4c9aff;
		--primary-text: #0b1620;
		--band: #1c1c1b;
	}
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: calc(72px + env(safe-area-inset-top)) 20px 64px; }
/* Anything jumped to by anchor stops below the pinned header rather than under it. */
html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }

/* The header is pinned and frosted, the same shell as the app, so a carrier arriving from
   the app reads a page they recognise. Back on a sub-page is the browser's back — it
   returns them to wherever they came from, the app included. */
.site-head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding-top: env(safe-area-inset-top);
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--line); /* always, as in the app */
	transition: box-shadow 0.2s ease;
}
.site-head.scrolled { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06); }
.site-head-inner {
	max-width: 720px;
	min-height: 60px;
	margin: 0 auto;
	padding: 8px 12px 8px 8px;
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 8px;
}
.site-head.home .site-head-inner { grid-template-columns: 1fr auto; padding-left: 20px; }
.site-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--text);
}
@media (hover: hover) {
	.site-back:hover { background: var(--card); }
}
.brand picture, .brand img { display: block; height: 30px; width: auto; max-width: 100%; }
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
/* The one call to action every marketing page carries. */
.site-head .button { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
	.site-head { transition: none; }
}

h1 { font-size: 2rem; line-height: 1.2; margin: 16px 0 8px; }
h2 { font-size: 1.2rem; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 20px 0 4px; }
.updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 28px; }
.lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 24px; }

/* No paragraph ends on one word left alone on its line (Mark, September 30, 2026). */
p, li, figcaption, .cta-note { text-wrap: pretty; }

a { color: var(--accent); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
/* The privacy policy's three-column table: fixed columns so it stays inside a phone's width. */
table.cats { table-layout: fixed; }
table.cats th, table.cats td { padding: 10px 6px; overflow-wrap: break-word; }
table.cats th { font-size: 0.72rem; letter-spacing: 0; }
table.cats th:nth-child(1) { width: 33%; }
table.cats th:nth-child(3) { width: 26%; }

/* A point that must not be skimmed past. */
.callout {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin: 24px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.faq-q { margin: 32px 0 8px; font-size: 1.15rem; }

.site-foot {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 20px 48px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
	text-align: center;
}
.site-foot nav { display: flex; justify-content: center; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.site-foot a { color: var(--muted); }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	background: var(--primary);
	color: var(--primary-text);
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
}

/* The Ask a question form (contact.html). Labels above, full width: these are typed on a phone. */
.form { display: grid; gap: 18px; margin: 8px 0 16px; }
.form-field { display: grid; gap: 6px; }
.form-field span { font-weight: 600; font-size: 0.95rem; }
.form-field small { color: var(--muted); font-size: 0.85rem; }
.form input, .form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font: inherit;
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.form textarea { resize: vertical; line-height: 1.45; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.form .button { width: 100%; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.form .button:disabled { opacity: 0.5; cursor: default; }
.form-alt { color: var(--muted); font-size: 0.95rem; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.callout.error { border-left-color: #b3261e; }
@media (prefers-color-scheme: dark) {
	.callout.error { border-left-color: #f28b82; }
}

/* ---------- Home, Pricing: the selling pages ---------- */
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
@media (hover: hover) { .button.secondary:hover { border-color: var(--muted); } }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 8px; }
.cta-note { color: var(--muted); font-size: 0.9rem; margin: 0; }
.text-link { font-weight: 600; padding: 12px 8px; }

.hero h1 { font-size: clamp(1.95rem, 7vw, 2.9rem); letter-spacing: -0.025em; line-height: 1.08; margin-top: 8px; text-wrap: balance; }
.hero .lead { color: var(--text); opacity: 0.8; max-width: 36em; margin-bottom: 0; }
.hero .cta-row { margin-top: 18px; }
/* On the photo, the second button is light on dark in both themes, like the words there. */
.hero-intro .button.secondary { color: #f4f3ef; border-color: rgba(244, 243, 239, 0.6); background: rgba(10, 10, 12, 0.25); }
@media (hover: hover) { .hero-intro .button.secondary:hover { border-color: #f4f3ef; } }
/* On a phone the intro fills the first screen: headline, sentence and button with room to
   breathe, "Free for 5 quotes a month" along the bottom, and the pricing card just below. */
@media (max-width: 700px) {
	.hero-intro {
		/* Short of the full screen, so the note is still in view on an older phone or inside Facebook's browser. */
		min-height: min(calc(86svh - 72px - env(safe-area-inset-top)), 175vw); /* a tall, narrow window gets no empty gap */
		display: flex;
		flex-direction: column;
		padding-block: 12px 28px;
	}
	/* The headline sits high, not mid-screen; the free space goes above the note. */
	.hero-intro h1 { margin-top: clamp(12px, 5svh, 48px); }
	.hero-intro .lead { margin-top: 18px; }
	.hero-intro .cta-row { margin-top: 32px; }
	.hero-intro .cta-note { margin-top: auto; padding-top: 24px; }
	.hero-intro .cta-row .button { width: 100%; }
}
.hero .app-card { margin-top: 22px; }
/* The hero photo (Mark, September 30, 2026): behind the whole hero, edge to edge and up under
   the header, darkened so the words read on it. It looks the same in light and dark mode, so the
   hero's own text is always light; the pricing card keeps the page's colours. */
html { overflow-x: clip; } /* the photo reaches the window's edges without a sideways scroll */
.hero { position: relative; isolation: isolate; padding-bottom: 56px; }
.hero-bg, .hero::before {
	position: absolute;
	z-index: -1;
	top: calc(-72px - env(safe-area-inset-top));
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
}
.hero-bg { height: calc(100% + 72px + env(safe-area-inset-top)); z-index: -2; overflow: hidden; }
.hero-bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% 60%; }
/* Ambient movement (Mark, October 1, 2026), the same rule Shopify's themes use for it: the photo
   a fifth larger, drifting in a small slow circle, one lap every 30 seconds. The frame clips it,
   and anyone who has asked their device for less motion gets the still photo. */
@media (prefers-reduced-motion: no-preference) {
	.hero-bg img { animation: hero-ambient 30s linear infinite; }
	@keyframes hero-ambient {
		from { transform: rotate(0) translate(1em) rotate(0) scale(1.2); }
		to { transform: rotate(360deg) translate(1em) rotate(-360deg) scale(1.2); }
	}
}
.hero::before {
	content: '';
	background: linear-gradient(rgba(10, 10, 12, 0.72), rgba(10, 10, 12, 0.6) 45%, rgba(10, 10, 12, 0.72));
}
.hero h1, .hero .lead, .hero-intro .cta-note { color: #f4f3ef; }
.hero .lead { opacity: 0.88; }
.hero-intro .cta-note, .hero-media .cta-note { color: rgba(244, 243, 239, 0.78); }
.hero .cta-note a { color: #8cc0ff; }
/* Phone and tablet: behind the whole hero, a square photo would be zoomed in three times on a
   tall column. Instead it sits whole at the foot of the first screen, its sky fading up into the
   dark behind the words, and the pricing card follows on the page. */
@media (max-width: 899px) {
	.hero { padding-bottom: 0; }
	.hero::before { display: none; }
	.hero-media .cta-note { color: var(--muted); } /* the card and its note sit on the page here, not the photo */
	/* The example cards are narrower than a wide phone or a tablet: centred, with their captions,
	   rather than hugging the left edge (Mark, October 2, 2026). */
	.app-card { margin-left: auto; margin-right: auto; }
	.app-card + .cta-note { text-align: center; }
	.hero-intro { position: relative; isolation: isolate; display: flex; flex-direction: column; }
	.hero-intro .cta-note { margin-top: auto; padding-top: 24px; padding-bottom: 4px; }
	.hero-bg { top: auto; bottom: 0; height: auto; aspect-ratio: 1920 / 1759; }
	.hero-intro::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: calc(-72px - env(safe-area-inset-top));
		bottom: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		background: linear-gradient(to bottom, #121214 calc(100% - 92vw), rgba(18, 18, 20, 0.55) calc(100% - 58vw), rgba(18, 18, 20, 0.4) calc(100% - 28vw), rgba(18, 18, 20, 0.82));
	}
}
@media (min-width: 701px) and (max-width: 899px) {
	.hero-intro { min-height: 92vw; padding-bottom: 28px; }
}

/* The quote screen's pricing card, as the app draws it: a real haul, rebuilt in HTML. */
.app-card { margin: 28px 0 8px; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); display: grid; gap: 12px; }
.app-card figcaption { color: var(--muted); font-size: 0.85rem; }
.app-card-title { font-weight: 700; font-size: 1.15rem; }
.opt { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'head price' 'notes notes' 'pick pick'; gap: 6px 12px; align-items: center; }
.opt.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.opt-head { grid-area: head; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opt-name { color: var(--muted); font-weight: 600; }
.opt-badge { background: var(--primary); color: var(--primary-text); border-radius: 999px; padding: 1px 10px; font-size: 0.78rem; font-weight: 700; }
.opt-price { grid-area: price; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.opt ul { grid-area: notes; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.opt li { margin: 2px 0; }
.opt li::before { content: '· '; }
.opt-pick { grid-area: pick; justify-self: end; color: var(--primary); font-weight: 600; font-size: 0.95rem; }


/* The route card on Home (Mark, October 10 and 11, 2026): a trip driven by a dot, again and
   again while it is on screen. As written here it is the finished drawing, which is what shows
   without the script and for anyone who has asked for less motion; site.js moves everything
   from a clock of its own. Deadhead legs are uncovered by a mask whose stroke runs the line. */
.route-card { margin: 0; width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); padding: 18px 18px 16px; overflow: hidden; }
.route-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.route-count { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.route-count b { color: var(--text); letter-spacing: -0.02em; }
.route { display: block; width: 100%; height: auto; }
.route-card .route-count b { font-size: 1.6rem; }
.rt-griddot { fill: var(--muted); opacity: .28; }
.rt-ghost { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.rt-dead { fill: none; stroke: var(--muted); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 10; }
.rt-reveal { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rt-load { fill: none; stroke: var(--primary); stroke-width: 6.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rt-loadglow { fill: none; stroke: var(--primary); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .38; }
.route-card .route text { font: 600 16px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; fill: var(--text); }
.route-card .route text.rt-dh { fill: var(--muted); font-weight: 500; font-size: 14px; letter-spacing: .01em; }
.route-card .route text.rt-ld { fill: var(--primary); font-weight: 700; font-size: 14px; }
.rt-node { fill: var(--card); stroke: var(--primary); stroke-width: 3.5; }
.rt-node.rt-home { stroke: var(--muted); }
.rt-ring { fill: none; stroke: var(--primary); stroke-width: 2; opacity: 0; }
#rt-s0 .rt-ring { stroke: var(--muted); }
.rt-stop { transform-box: fill-box; transform-origin: center; }
#rt-truck { opacity: 0; }
.rt-halo { fill: var(--primary); opacity: .22; }
.rt-core { fill: var(--primary); stroke: var(--card); stroke-width: 2.5; }
.rt-split { margin-top: 4px; }
.rt-bar { display: flex; gap: 3px; height: 8px; }
.rt-bar span { border-radius: 4px; min-width: 0; transform-origin: left center; }
.rt-bar-load { background: var(--primary); }
.rt-bar-dead { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 7px); opacity: .8; }
.rt-legend { display: flex; justify-content: space-between; margin-top: 7px; font-size: .9rem; color: var(--muted); }
.rt-legend b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.rt-k-load b { color: var(--primary); }
/* Phone: the drawing sits right under the heading, before the words. */
@media (max-width: 899px) {
	.route-sec { display: flex; flex-direction: column; }
	.route-sec .split-copy { display: contents; }
	.route-sec h2 { order: 1; font-size: 1.55rem; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 14px; text-wrap: balance; }
	.route-sec .split-media { order: 2; display: grid; justify-items: center; gap: 8px; margin-bottom: 18px; }
	.route-sec .split-copy p { order: 3; margin: 0 0 12px; }
}

section.block { margin: 56px 0 0; }
section.block > h2 { font-size: 1.55rem; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 10px; text-wrap: balance; }
section.block > p { margin: 0 0 12px; }

.parts { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.parts li { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.part-icon { width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.parts b { display: block; }
.parts span { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 640px) { .parts { grid-template-columns: 1fr 1fr; } }

.steps { display: grid; gap: 12px; margin: 16px 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { margin: 0; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--primary-text); display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; }
.steps b { display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.chips li { margin: 0; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 0.95rem; }

.teaser { display: grid; gap: 12px; margin: 16px 0; }
@media (min-width: 640px) { .teaser { grid-template-columns: 1fr 1fr; } }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.plan-card.best { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-card h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-card .amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-card .amount small { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.plan-card ul { margin: 6px 0 10px; padding-left: 18px; }
.plan-card li { margin: 3px 0; }
.plan-card .button { width: 100%; margin-top: auto; }
.badge { font-size: 0.72rem; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 1px 8px; }

.qa { margin: 14px 0 0; }
.qa h3 { margin: 18px 0 4px; font-size: 1.05rem; }
.qa p { margin: 0 0 8px; }

.guarantees { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.guarantees li { margin: 0; padding-left: 26px; position: relative; }
.guarantees li::before { content: '✓'; position: absolute; left: 2px; color: var(--primary); font-weight: 700; }

.final { margin: 64px 0 0; padding: 28px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.final h2 { margin: 0 0 6px; font-size: 1.5rem; text-wrap: balance; }
.final .cta-row { justify-content: center; }
.table-wrap { overflow-x: auto; }
/* FAQ (Mark, September 30, 2026): each group a section with a real heading, a row of jumps
   to them at the top, and a hairline between questions so each one reads as its own. */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.faq-jump a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; }
@media (hover: hover) { .faq-jump a:hover { border-color: var(--primary); color: var(--primary); } }
.faq-section { margin-top: 48px; }
.faq-jump + .faq-section { margin-top: 32px; } /* the first group follows the jumps closely */
.faq-group { margin: 0 0 4px; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); text-wrap: balance; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item .faq-q { margin: 22px 0 8px; }
.faq-item > :last-child { margin-bottom: 22px; }

/* Real app screenshots, in a phone frame. Two sit side by side even on a phone. */
.phones { display: flex; justify-content: center; gap: 14px; margin: 22px 0 6px; }
.phone { margin: 0; flex: 0 1 250px; min-width: 0; border: 7px solid #0d0d0c; border-radius: 30px; overflow: hidden; background: #0d0d0c; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
.phone img { display: block; width: 100%; height: auto; }
.phones:has(.phone:only-child) .phone { flex-basis: 280px; }

/* "See the numbers", as the quote screen shows it: a total, two tabs, rows of label and amount. */
.numbers-card { gap: 0; padding: 18px 18px 8px; }
.nc-total { text-align: center; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nc-sub { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 4px 0 2px; }
.nc-profit { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; }
.nc-profit b { color: var(--text); font-weight: 600; }
.nc-label { text-align: center; font-weight: 600; font-size: 0.95rem; color: var(--primary); padding: 8px; border: 1px solid var(--primary); border-radius: 10px; margin-bottom: 6px; }
.nc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-bottom: 6px; }
.nc-tabs button { min-height: 40px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.nc-tabs button[aria-selected='true'] { border-color: var(--primary); color: var(--primary); background: var(--card); }
.nc-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.nc-row:last-child { border-bottom: 0; }
.nc-row span { display: grid; gap: 2px; }
.nc-row small { color: var(--muted); font-size: 0.85rem; }
.nc-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ======================================================================================
   Desktop (Mark, September 30, 2026). The phone layout above is the design; everything
   below applies only from 900px wide, so no phone ever sees it. Selling pages (Home,
   Pricing: <main class="wide">) open up to two columns; reading pages keep a comfortable
   line length and simply get more room around them.
   ====================================================================================== */
.site-nav { display: none; }
.desk-only { display: none; }

@media (min-width: 900px) {
	/* Header: logo, the site's pages, the one call to action. Back is the browser's own on a
	   computer, so the arrow steps aside for the page links. */
	.site-head-inner,
	.site-head.home .site-head-inner { max-width: 1160px; padding: 10px 32px; grid-template-columns: auto 1fr auto; gap: 24px; }
	.site-back { display: none; }
	.site-nav { display: flex; justify-content: flex-end; gap: 4px; }
	.site-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 10px 14px; border-radius: 999px; }
	.site-nav a[aria-current='page'] { color: var(--primary); }
	@media (hover: hover) { .site-nav a:hover { background: var(--card); } }
	.site-nav a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

	main { max-width: 760px; padding: calc(112px + env(safe-area-inset-top)) 32px 96px; }
	main.wide { max-width: 1160px; }
	h1 { font-size: 2.6rem; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
	.lead { font-size: 1.2rem; max-width: 40em; }

	/* On a selling page, text-only sections stay at reading width, centred. */
	main.wide > section.block:not(.split),
	main.wide > .qa,
	main.wide > section.block > p { max-width: 760px; }
	main.wide > section.block:not(.split) { margin-inline: auto; }

	/* Hero: the promise on the left, the product on the right. */
	.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; padding-top: 24px; }
	.hero h1 { font-size: clamp(2.9rem, 4.4vw, 4rem); letter-spacing: -0.03em; line-height: 1.04; margin-top: 0; }
	.hero .lead { font-size: 1.3rem; margin-top: 20px; }
	.hero .cta-row { margin-top: 32px; }
	.hero .cta-row .button { min-height: 54px; padding: 0 28px; font-size: 1.05rem; }
	.hero-intro .cta-note { margin-top: 18px; }
	.hero-media { display: grid; justify-items: center; gap: 10px; }
	.hero .app-card { margin: 0; width: 100%; max-width: 460px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16); }
	/* The photo fills the column; the card rests on its pavement, bottom left, reaching a little
	   into the gap, and the note sits under the card. */
	/* The photo runs down to the next section's band and ends on its hairline: no fade into the
	   page (Mark, October 1, 2026). The band starts 60px above its section, so the photo reaches
	   60px below the hero. */
	.hero { padding: 64px 0 72px; }
	.hero-bg, .hero::before { top: calc(-112px - env(safe-area-inset-top)); bottom: -60px; }
	.hero-bg { height: auto; }
	/* Darker behind the words on the left, so the rig shows through on the right. */
	.hero::before { background: linear-gradient(90deg, rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.62) 55%, rgba(10, 10, 12, 0.5)); }

	/* Two-column sections: the words on one side, the screen on the other. */
	/* Selling pages get big breaks between their stories; reading pages a calmer one. */
	section.block { margin-top: 64px; }
	main.wide section.block { margin-top: 120px; }
	section.block > h2, .split-copy > h2 { font-size: 2.05rem; letter-spacing: -0.02em; line-height: 1.15; }
	.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 72px; align-items: center; }
	.split.flip .split-copy { order: 2; }
	.split-media { display: grid; justify-items: center; gap: 10px; }
	.split-media .app-card { margin: 0; width: 100%; max-width: 440px; }
	.split .phones { margin: 0; }
	.split .phone { flex-basis: 280px; }
	.split.flip .phones { gap: 20px; }
	.split .parts { grid-template-columns: 1fr 1fr; }
	/* An odd last card spans both columns rather than sitting alone. */
	.split .parts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.desk-only { display: flex; }
	.phone-only { display: none; }

	/* Two short sections side by side, top-aligned. */
	.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 120px; }
	.duo > section.block { margin: 0; max-width: none; }
	.duo .teaser { grid-template-columns: 1fr 1fr; }

	/* Pricing: all three plans in a row. */
	main.wide > .teaser { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
	main.wide > h1, main.wide > .lead { text-align: center; margin-inline: auto; max-width: 820px; }

	.faq-section { margin-top: 120px; }
	.faq-jump + .faq-section { margin-top: 56px; } /* no band above the first group, so no room needed for one */
	.faq-group { font-size: 1.9rem; letter-spacing: -0.02em; }
	.faq-jump { margin-top: 12px; }
	.final { margin-top: 120px; padding: 56px 40px; }
	.final h2 { font-size: 2.1rem; letter-spacing: -0.02em; }
	.final .button { min-height: 54px; padding: 0 28px; font-size: 1.05rem; }

	/* Footer: the copyright on the left, the pages on the right. */
	.site-foot { max-width: 1160px; padding: 28px 32px 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; }
	.site-foot nav { margin: 0; justify-content: flex-end; order: 2; }
}

/* Bands (Mark, September 30, 2026): zoomed out, the home page's sections ran together.
   Every other section sits on a full-width band, a shade off the page, reaching halfway
   into the gap on each side so the bands meet the plain sections evenly. Desktop only. */
@media (min-width: 900px) {
	html { overflow-x: clip; } /* the band reaches the window's edges without a sideways scroll */
	.band { position: relative; isolation: isolate; }
	.band::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: -60px;
		bottom: -60px;
		left: calc(50% - 50vw);
		right: calc(50% - 50vw);
		background: var(--band);
		border-block: 1px solid var(--line);
	}
	/* On a reading page (About), a band and the sections either side of it get the selling
	   pages' wider gap, so the band's edges sit halfway between them. */
	section.block.band, .band + section.block, .band + .final { margin-top: 120px; }
	/* The centred text section's band spans the page, not just its 760px column. */
	main.wide > section.block.band:not(.split)::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }
}

/* A wide screen gets a little more air, never a wider line of text. */
@media (min-width: 1280px) {
	.hero { gap: 96px; }
	.split { gap: 96px; }
}