/* Silverback order form.
   Tokens → layout → controls → components. No framework, no build step.
   Dark theme redefines tokens only; nothing below :root hard-codes a colour. */

:root {
	color-scheme: light;
	--ink:    #15181A;   --ink-2:  #5A6266;   --ink-3: #868E92;
	--bg:     #F2F4F3;   --card:   #FFF;      --line:  #E1E5E4;  --line-2: #C6CCCB;
	--pine:   #12484E;   --pine-2: #0C3438;   --pine-w:#E2EDED;  --on-pine:#FFF;
	--brass:  #8A6220;   --brass-w:#F7F0E1;
	--bad:    #A3251F;   --bad-w:  #FBEDEC;
	--r: 6px;
	--ui: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--display: 'Instrument Serif', ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--ink: #E9EDEC; --ink-2: #9BA4A6; --ink-3: #737C7E;
		--bg: #0E1112; --card: #171A1B; --line: #282E2F; --line-2: #3A4142;
		--pine: #6FB6B8; --pine-2: #93CFCF; --pine-w: #15302F; --on-pine: #0A1E20;
		--brass: #D6A752; --brass-w: #2B2316;
		--bad: #F0918A; --bad-w: #2E1A19;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #E9EDEC; --ink-2: #9BA4A6; --ink-3: #737C7E;
	--bg: #0E1112; --card: #171A1B; --line: #282E2F; --line-2: #3A4142;
	--pine: #6FB6B8; --pine-2: #93CFCF; --pine-w: #15302F; --on-pine: #0A1E20;
	--brass: #D6A752; --brass-w: #2B2316;
	--bad: #F0918A; --bad-w: #2E1A19;
}

* { box-sizing: border-box; }
body {
	margin: 0; background: var(--bg); color: var(--ink);
	font: 400 14px/1.5 var(--ui); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
:where(a,button,input,select,textarea,summary):focus-visible {
	outline: 2px solid var(--pine); outline-offset: 1px;
}

.skip { position: absolute; left: -9999px; background: var(--pine); color: var(--on-pine); padding: .6rem 1rem; }
.skip:focus { left: 0; top: 0; z-index: 30; }

/* ── app bar ─────────────────────────────────────────────────────────── */
.bar {
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
	background: var(--card); border-bottom: 1px solid var(--line);
}
.bar__in {
	max-width: 68rem; margin: 0 auto; padding: .7rem 1.25rem;
	/* Centred rather than on the baseline: there is a logo in here now, and an
	   image has no baseline worth sitting on. */
	display: flex; align-items: center; gap: .6rem;
}

/* The letterhead, and the way back to the main site beside it.
   Both open in a new tab: somebody half-way through an order should not lose
   it to a click on the logo. */
.brand { flex: none; display: inline-flex; }
.brand img { display: block; height: 2rem; width: auto; }
.bar__home {
	/* What pushes everything after it to the far end of the bar. */
	margin-right: auto; flex: none;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .6rem;
	font-size: .78rem; font-weight: 600; color: var(--ink-2);
	border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.bar__home svg {
	width: .85rem; height: .85rem; fill: none; stroke: currentColor;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bar__home:hover, .bar__home:focus-visible {
	color: var(--brass); border-color: var(--brass); background: var(--brass-w);
	text-decoration: none;
}
/* Drawn as a control rather than as small print. It is the only way back out
   of a part-filled form, and at --ink-3 on a thin line it read as a caption. */
.bar__title {
	padding: .3rem .6rem;
	font-size: .78rem; font-weight: 600; color: var(--ink-2);
	border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.bar__title:hover, .bar__title:focus-visible {
	color: var(--brass); border-color: var(--brass); background: var(--brass-w);
	text-decoration: none;
}

/* ── theme toggle ────────────────────────────────────────────────────── */
.theme-toggle {
	align-self: center; flex: none; margin-left: .75rem;
	display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
	border: 1px solid var(--line-2); border-radius: 50%;
	background: transparent; color: var(--ink-2); cursor: pointer;
	transition: border-color .12s, color .12s;
}
.theme-toggle:hover { border-color: var(--pine); color: var(--pine); }
.theme-toggle svg {
	width: 1rem; height: 1rem; fill: none; stroke: currentColor;
	stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* The icon shows the theme it switches to, so it follows whatever is actually
   in force -- including the operating system's, which is what this page
   obeys until somebody chooses otherwise. */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

/* ── shell ───────────────────────────────────────────────────────────── */
.shell {
	max-width: 68rem; margin: 0 auto;
	padding: 1.75rem 1.25rem 4rem;
	display: grid; grid-template-columns: minmax(0,1fr) 18rem;
	gap: 2rem; align-items: start;
}
.lede { grid-column: 1 / -1; margin: 0 0 .25rem; }
.lede h1 {
	margin: 0 0 .3rem; font-family: var(--display); font-weight: 400;
	font-size: clamp(1.7rem, 3.6vw, 2.2rem); line-height: 1.1; text-wrap: balance;
}
.lede p { margin: 0; color: var(--ink-2); max-width: 56ch; }

form { min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }

/* ── section ─────────────────────────────────────────────────────────── */
.sec { display: flex; flex-direction: column; gap: .85rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.sec:first-of-type { padding-top: 0; border-top: 0; }
.sec__h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
/* A line of explanation under a section heading, clear of the grid below it. */
.sec__note { margin: -.35rem 0 1rem; max-width: 56ch; }
.sec__h h2 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; }
.kicker { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.opt-tag { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* Required is the state worth noticing, so it carries a little more weight
   than optional -- but only a little: on a form where most sections are
   required, a loud tag on each would be noise and the optional ones are what
   somebody is actually scanning for. */
.opt-tag--req { color: var(--ink-2); font-weight: 600; }

/* ── 12-column field grid ────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .8rem .7rem; }
.f { grid-column: span 12; display: flex; flex-direction: column; min-width: 0; }
.f-2 { grid-column: span 2; } .f-3 { grid-column: span 3; } .f-4 { grid-column: span 4; }
.f-5 { grid-column: span 5; } .f-6 { grid-column: span 6; }
.f-7 { grid-column: span 7; } .f-8 { grid-column: span 8; }
.f-9 { grid-column: span 9; } .f-10 { grid-column: span 10; }

label { margin-bottom: .28rem; font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.opt { font-weight: 400; color: var(--ink-3); }

input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
	width: 100%; padding: .48rem .6rem; font: inherit; color: var(--ink);
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
	outline: 0; border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-w);
}
[aria-invalid="true"] { border-color: var(--bad); }
textarea { resize: vertical; }
select {
	appearance: none; padding-right: 1.7rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - .85rem) 54%, calc(100% - .58rem) 54%;
	background-size: .3rem .3rem; background-repeat: no-repeat;
}
.hint { margin: .25rem 0 0; font-size: .73rem; color: var(--ink-3); }
.err { margin: 0; font-size: .73rem; color: var(--bad); }
.err:not(:empty) { margin-top: .25rem; }

.f-12 { grid-column: span 12; }
.badge {
	font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--pine); margin-left: .35rem;
}

/* ── plan cards ──────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
/* Sized to sit alongside the property-type pills; at the old size the plan
   cards read as secondary to the choice above them, which they are not. */
.plan {
	position: relative; display: grid; gap: .15rem; align-content: center;
	padding: 1rem .9rem; min-height: 5.5rem;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
	cursor: pointer; margin: 0; transition: border-color .12s, background .12s;
}
.plan:hover { border-color: var(--pine); }
.plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan b { font-size: .95rem; font-weight: 600; }
.plan i {
	font-family: var(--display); font-style: normal; font-size: 1.75rem;
	line-height: 1.1; color: var(--brass); font-variant-numeric: tabular-nums;
}
.plan small { font-size: .72rem; color: var(--ink-2); line-height: 1.35; }
.plan:has(input:checked) { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); background: var(--brass-w); }
.plan:has(input:checked) .info { border-color: var(--brass); color: var(--brass); }
.plan:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 1px; }

/* ── toggles: large property + optional coverage ─────────────────────── */
.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem; }
.tog {
	position: relative; display: flex; align-items: center; gap: .5rem;
	margin: 0; padding: .45rem .7rem; font-size: .8rem; cursor: pointer;
	background: var(--card); border: 1px solid var(--line); border-radius: 999px;
	transition: border-color .12s, background .12s;
}
.tog:hover { border-color: var(--line-2); }
.tog input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The label absorbs the slack so the price and the info button form straight
   columns down the grid, rather than floating with the label's length. */
.tog > span { flex: 1; min-width: 0; }
.tog em {
	flex: none; min-width: 4.25rem; text-align: right;
	font-style: normal; color: var(--ink-3);
	font-variant-numeric: tabular-nums; font-size: .76rem;
}
.tog:has(input:checked) { background: var(--brass-w); border-color: var(--brass); font-weight: 500; }
.tog:has(input:checked) em { color: var(--brass); font-weight: 600; }
.tog:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 1px; }
.tog--wide { border-radius: var(--r); justify-content: flex-start; gap: .6rem; }

.toggles--dense { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Over-budget options stay visible but unselectable — the price is the point.
   Still clickable, so the click can explain itself rather than doing nothing. */
.tog--over { opacity: .45; cursor: pointer; }
.tog--over:hover { border-color: var(--line-2); opacity: .6; }

/* Before a plan is picked there is nothing for a la carte coverage to attach
   to. The chips stay visible so the range is known, and stay clickable so the
   click can say why — the handler is what refuses it. */
.toggles--locked .tog { opacity: .45; }
.toggles--locked .tog:hover { border-color: var(--line-2); opacity: .6; }

/* ── summary rail ────────────────────────────────────────────────────── */
.rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4rem); }
.rail__in {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.rail h2 { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tally { margin: 0; display: grid; gap: .35rem; font-size: .82rem; }
.tally div { display: flex; justify-content: space-between; gap: 1rem; }
.tally dt { color: var(--ink-2); }
/* The label may wrap; the figure never splits off its minus sign. */
.tally dt { min-width: 0; }
.tally dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.chips li { font-size: .68rem; padding: .12rem .45rem; border-radius: 999px; background: var(--brass-w); color: var(--brass); font-weight: 500; }
.sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.sum span:first-child { font-size: .78rem; font-weight: 600; }
.sum b { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }

.go {
	width: 100%; padding: .6rem 1rem; border: 0; border-radius: var(--r);
	background: var(--pine); color: var(--on-pine); font: inherit; font-weight: 600; cursor: pointer;
}
.go:hover:not(:disabled) { background: var(--pine-2); }
/* Disabled almost always means "not yet" now, so the cursor says refused, not
   busy. Only an order actually in flight earns the waiting cursor. */
.go:disabled { opacity: .55; cursor: not-allowed; }
.go--busy:disabled { cursor: progress; }
.note { margin: 0; font-size: .72rem; color: var(--ink-3); }
.actions { display: grid; gap: .35rem; }
.go--alt { background: var(--brass); color: var(--card); }
.go--alt:hover:not(:disabled) { filter: brightness(1.08); }
.or { margin: .1rem 0; text-align: center; font-size: .72rem; color: var(--ink-3); }

/* ── budget meter (only when arriving with an amount) ────────────────── */
.budget { display: grid; gap: .3rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.budget__row { display: flex; justify-content: space-between; font-size: .78rem; }
.budget__row b { font-variant-numeric: tabular-nums; }
/* One colour, and the figure beside it. A second colour inside the bar reads
   as progress still to make, however it is meant. */
.budget__meter { display: flex; align-items: center; gap: .45rem; }
.budget__bar { flex: 1; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.budget__fill { height: 100%; background: var(--pine); transition: width .15s ease; }
.budget__pct {
	flex: none; min-width: 2.2rem; text-align: right;
	font-size: .68rem; font-weight: 600; color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.budget--over .budget__fill { background: var(--bad); }
.budget--over .budget__pct { color: var(--bad); }
.budget--over .budget__row b { color: var(--bad); }
.alert { margin: 0; padding: .5rem .65rem; border-radius: var(--r); background: var(--bad-w); color: var(--bad); font-size: .78rem; }

.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── confirmation ────────────────────────────────────────────────────── */
.done {
	grid-column: 1 / -1; background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r); padding: 2.2rem 1.5rem; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.done__tick { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pine-w); color: var(--pine); font-size: 1.1rem; }
.done h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.7rem; }
.done p { margin: 0; color: var(--ink-2); max-width: 42ch; }
.done dl { margin: .8rem 0 0; display: grid; gap: .3rem; min-width: min(18rem, 100%); text-align: left; font-size: .85rem; }
.done dl div { display: flex; justify-content: space-between; gap: 1rem; }
.done dt { color: var(--ink-2); }
.done dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay { margin-top: 1rem; display: grid; gap: .4rem; justify-items: center; }
.pay a { padding: .55rem 1.4rem; border-radius: var(--r); background: var(--brass); color: var(--card); font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Their copies of the two documents. Quieter than Pay now, which is the one
   thing on this screen that might still be owed. */
.keep { margin-top: 1.4rem; display: grid; gap: .5rem; justify-items: center; }
.keep h3 { margin: 0; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.keep__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.keep__file {
	display: inline-flex; align-items: baseline; gap: .4rem;
	padding: .45rem .9rem; font-size: .82rem; font-weight: 600; color: var(--ink);
	border: 1px solid var(--line-2); border-radius: var(--r); text-decoration: none;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.keep__file span { font-size: .68rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.keep__file:hover, .keep__file:focus-visible {
	color: var(--brass); border-color: var(--brass); background: var(--brass-w);
}
.keep__file:hover span, .keep__file:focus-visible span { color: var(--brass); }

/* The receipt reads left-aligned even though the heading above it is centred:
   it is a list of facts, and centred facts are hard to scan. */
.done__ref { font-size: .82rem; letter-spacing: .02em; color: var(--ink-3); }
.done__ref b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.done__lead { max-width: 44ch; }

.receipt {
	margin: 1.4rem 0 0; width: min(34rem, 100%); text-align: left;
	display: grid; gap: 1rem;
	border-top: 1px solid var(--line); padding-top: 1.2rem;
}
.receipt__block { display: grid; gap: .35rem; }
.receipt__block h3 {
	margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-3);
}
.receipt__block p { margin: 0; max-width: none; color: var(--ink); font-size: .9rem; }
.receipt__note { color: var(--ink-3) !important; font-size: .8rem !important; }
.receipt__list { margin: .2rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.receipt__list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--ink-2); }
.receipt__list b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.done .receipt dl { margin: 0; min-width: 0; }
.receipt__total { margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.receipt__total dt { color: var(--ink) !important; font-weight: 600; }
.receipt__total dd { font-size: 1rem; }
.receipt__pairs dt { min-width: 9rem; }

/* What happens next, numbered because it is a sequence and the order matters. */
.next { margin: 1.3rem 0 0; width: min(34rem, 100%); text-align: left; }
.next h3 {
	margin: 0 0 .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-3);
}
.next ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.next li { font-size: .85rem; line-height: 1.55; color: var(--ink-2); }

/* ── adjustable amounts in the rail ──────────────────────────────────── */
.adjust { display: grid; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.adjust__row { display: flex; align-items: center; gap: .6rem; }
.adjust__row label { margin: 0; flex: 1; font-size: .8rem; font-weight: 400; color: var(--ink-2); }
.adjust__row input {
	flex: none; width: 6.5rem; padding: .3rem .45rem; text-align: right;
	font-size: .82rem; font-variant-numeric: tabular-nums;
}
.adjust .err:empty, .adjust .hint:empty { display: none; }

.sum--quote { font-size: 1.15rem !important; color: var(--pine) !important; }

/* Desktop: nothing is collapsed, so the opener has no job. */
.rail__toggle { display: none; }

/* ── property type pills ─────────────────────────────────────────────── */
/* Sized for three across in the form column, so five pills land 3 + 2 rather
   than 4 + 1 — a single pill stranded on its own row reads as an afterthought. */
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.type {
	position: relative; display: grid; justify-items: center; text-align: center;
	gap: .3rem; margin: 0; padding: .9rem .7rem .8rem; cursor: pointer;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .12s, background .12s, color .12s;
	color: var(--ink);
}
.type:hover { border-color: var(--brass); }
.type input { position: absolute; opacity: 0; width: 0; height: 0; }
.type svg {
	width: 2rem; height: 2rem; stroke: currentColor; fill: none;
	stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
	color: var(--ink-3); transition: color .12s;
}
.type span { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.type small { font-size: .68rem; color: var(--ink-3); line-height: 1.3; }
.type:has(input:checked) {
	border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass);
	background: var(--brass-w);
}
.type:has(input:checked) svg { color: var(--brass); }
.type:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 1px; }

/* ── where the leftover budget goes ──────────────────────────────────── */
/* Only shown when a budget was set and coverage leaves something over, so it
   reads as a question about that specific amount rather than a standing field. */
.allocate { display: grid; gap: .3rem; margin: 0; padding: .6rem 0 0; border: 0; }
.allocate legend { padding: 0; font-size: .78rem; color: var(--ink-2); }
.allocate legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.alloc {
	display: flex; align-items: center; gap: .45rem; margin: 0;
	font-size: .78rem; font-weight: 400; color: var(--ink-2); cursor: pointer;
}
.alloc input { flex: none; margin: 0; accent-color: var(--brass); }
.alloc:has(input:checked) { color: var(--ink); font-weight: 600; }
.allocate .err:empty { display: none; }

/* ── RE Pros suggestions ─────────────────────────────────────────────── */
/* The .f wrapper is the positioning context, so each list tracks its own input
   rather than the page.

   The list opens upward. Safari fills contact fields from the address book and
   ignores autocomplete="off" doing it -- that is Apple's call, not something
   the markup can switch off -- and its panel drops directly beneath the field
   and paints above the page. A list hanging below the input is therefore a
   list Safari can bury. Above it, the two never meet. `bottom` is measured in
   render(): the label sits between the block's top and the field, so 100% is
   too far up to look attached. Where there is no room above, --down puts it
   back underneath, a covered list being better than a clipped one. */
.f { position: relative; }
.pros {
	position: absolute; left: 0; z-index: 12;
	/* Wider than the name field it hangs from: the second line carries a
	   brokerage and an email, which the field's own width would clip. Capped
	   against the viewport so it cannot push the page sideways on a phone. */
	min-width: 100%; width: max-content; max-width: min(26rem, calc(100vw - 2.5rem));
	padding: 0; list-style: none; max-height: 15rem; overflow-y: auto;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
}
.pros--up { margin: 0 0 2px; box-shadow: 0 -6px 20px rgb(0 0 0 / 12%); }
.pros--down { top: 100%; margin: 2px 0 0; box-shadow: 0 6px 20px rgb(0 0 0 / 12%); }
.pros__item {
	display: grid; gap: .1rem; padding: .45rem .6rem; cursor: pointer;
	border-top: 1px solid var(--line);
}
.pros__item:first-child { border-top: 0; }
.pros__item b { font-size: .82rem; font-weight: 600; color: var(--ink); }
.pros__item span {
	font-size: .72rem; color: var(--ink-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pros__item:hover, .pros__item--on { background: var(--brass-w); }

/* ── Google Places dropdown ──────────────────────────────────────────── */
/* Google injects .pac-container into <body> with its own look. These rules
   bring it into the form's palette; without them it arrives as a white box
   with blue highlights that ignores dark mode entirely. */
.pac-container {
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
	box-shadow: 0 6px 20px rgb(0 0 0 / 12%); font-family: var(--ui);
	margin-top: 2px; overflow: hidden;
}
.pac-item {
	padding: .45rem .6rem; font-size: .82rem; color: var(--ink-2);
	border-top: 1px solid var(--line); cursor: pointer;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--brass-w); }
.pac-item-query { font-size: .82rem; color: var(--ink); }
.pac-matched { font-weight: 700; }
/* Their logo row renders as an empty strip against our background. */
.pac-logo::after { display: none; }
.pac-icon { display: none; }

/* ── narrow: rail docks to a bar ─────────────────────────────────────── */
@media (max-width: 60rem) {
	.shell { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding-bottom: 7rem; }
	.rail { position: fixed; inset: auto 0 0 0; top: auto; z-index: 15; }
	.rail__in {
		flex-direction: row; align-items: center; gap: 1rem;
		max-width: 68rem; margin: 0 auto; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
		padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom, 0px));
	}
	/* Collapsed by default: total and actions only. The opener reveals the
	   rest, including the amounts that can still be changed. */
	.rail h2, .tally, .chips, .note, .budget, .budget-add, .adjust { display: none; }
	.rail--open .tally, .rail--open .budget, .rail--open .adjust { display: grid; }
	.rail--open .budget-add { display: block; }
	.rail--open .chips { display: flex; }
	.rail--open .note { display: block; }
	.rail--open .rail__in { flex-direction: column; align-items: stretch; }
	.rail--open .actions { grid-auto-flow: row; margin-left: 0; }
	.rail--open .actions .or { display: block; }
	.rail--open .go { width: 100%; }

	.rail__toggle {
		display: block; order: -1; width: 100%; padding: .1rem 0 .35rem;
		border: 0; background: transparent; color: var(--ink-3);
		font: inherit; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
		cursor: pointer; text-align: center;
	}
	.rail__toggle::after { content: " \25B2"; }
	.rail--open .rail__toggle::after { content: " \25BC"; }

	.sum { border-top: 0; padding-top: 0; display: grid; gap: 0; }
	.sum span:first-child { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
	.sum b { font-size: 1.4rem; }
	.actions { grid-auto-flow: column; align-items: center; margin-left: auto; }
	.actions .or { display: none; }
	.go { width: auto; font-size: .8rem; padding: .55rem .8rem; }
	.alert { position: fixed; left: 1.25rem; right: 1.25rem; bottom: 5rem; }
}
@media (max-width: 48rem) {
	.f-2, .f-3 { grid-column: span 4; }
	.f-4, .f-5 { grid-column: span 6; }
	.f-6, .f-7, .f-8, .f-9, .f-10 { grid-column: span 12; }
}
@media (max-width: 30rem) {
	.f-2, .f-3, .f-4, .f-5 { grid-column: span 6; }
	.bar__title { display: none; }
	/* The bar is three things wide on a phone; the logo gives up the room. */
	.brand img { height: 1.4rem; }
	.bar__home { padding: .3rem .45rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* ── landing page ────────────────────────────────────────────────────── */
.start { max-width: 68rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.start__lede { max-width: 48ch; margin-bottom: 1.8rem; }
.start__lede h1 {
	margin: 0 0 .35rem; font-family: var(--display); font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 2.7rem); line-height: 1.08; text-wrap: balance;
}
.start__lede p { margin: 0; color: var(--ink-2); }

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.route {
	display: flex; flex-direction: column; gap: .5rem;
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r); padding: 1.3rem;
}
/* The middle route is the one being pitched, so it carries the emphasis. */
.route--lead { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.route h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.route__fig {
	margin: 0; font-family: var(--display); font-size: 2.6rem; line-height: 1;
	color: var(--brass); font-variant-numeric: tabular-nums;
}
.route__note { margin: 0; font-size: .78rem; color: var(--ink-2); }
.route__go {
	margin-top: auto; display: block; width: 100%; padding: .58rem 1rem; border: 0;
	border-radius: var(--r); background: var(--pine); color: var(--on-pine);
	font: inherit; font-weight: 600; font-size: .85rem; text-align: center;
	text-decoration: none; cursor: pointer;
}
.route__go:hover { background: var(--pine-2); }
.route__go[aria-disabled="true"] { background: var(--line-2); color: var(--ink-3); cursor: not-allowed; }

.budget-entry { display: grid; gap: .3rem; }
.money-input { display: flex; align-items: center; gap: .35rem; border-bottom: 1px solid var(--line-2); padding-bottom: .2rem; }
.money-input span { font-family: var(--display); font-size: 1.9rem; color: var(--ink-3); }
.money-input input {
	border: 0; background: transparent; padding: 0; width: 100%;
	font-family: var(--display); font-size: 2.2rem; line-height: 1.1; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.money-input input:focus { outline: 0; box-shadow: none; }
.money-input:focus-within { border-bottom-color: var(--pine); }
.budget-entry .route__go { margin-top: .5rem; }

/* The way past the two routes above, for somebody who wants neither. It was a
   line of grey text under them and read as a footnote rather than a third way
   in, which for anyone who already knows what they want is the quickest one. */
.start__skip { margin: 2rem 0 0; font-size: .88rem; text-align: center; }
.start__skip a {
	display: inline-block; padding: .55rem 1.1rem;
	font-weight: 600; color: var(--ink);
	border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.start__skip a:hover, .start__skip a:focus-visible {
	color: var(--brass); border-color: var(--brass); background: var(--brass-w);
	text-decoration: none;
}

/* ── concessions, and what they are for ──────────────────────────────── */
.concession { margin: .1rem 0 .2rem; padding: .6rem .7rem;
	border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); }
.concession > label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink); }
.concession .hint { margin: .15rem 0 .35rem; }
.concession textarea { width: 100%; }
/* A disclosure, not a hint: it says money may be taken, so it is drawn to be
   read rather than skimmed past. Brass rather than red -- it is a term of the
   deal, not a warning. */
.concession__fee {
	margin: .5rem 0 0; padding: .4rem .6rem;
	font-size: .78rem; font-weight: 450; line-height: 1.45; color: var(--ink-2);
	background: var(--brass-w); border-left: 2px solid var(--brass);
	border-radius: 0 var(--r) var(--r) 0;
}
/* The fee is the term; the review and the call-back are the detail. */
.concession__fee b { font-weight: 650; color: var(--ink); }

/* Plans that no longer fit the stated budget. */
.plan--over { opacity: .42; cursor: not-allowed; }
.plan--over:hover { border-color: var(--line-2); }

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

/* ── coverage terms ──────────────────────────────────────────────────── */
.info {
	flex: none; width: 1.05rem; height: 1.05rem; padding: 0;
	display: grid; place-items: center;
	border: 1px solid var(--line-2); border-radius: 50%;
	background: transparent; color: var(--ink-3);
	font: italic 600 .68rem/1 var(--display); cursor: pointer;
}
.info:hover { border-color: var(--pine); color: var(--pine); }
.tog:has(input:checked) .info { border-color: var(--brass); color: var(--brass); }

#terms {
	width: min(38rem, calc(100vw - 2rem));
	padding: 0; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--card); color: var(--ink);
}
#terms::backdrop { background: rgba(10, 14, 15, .45); }
#terms article { padding: 1.2rem 1.4rem 1.5rem; }
/* Title and dismiss on one line, in every dialog. Scoped to ids before, which
   is the other half of why a new dialog came out looking like neither. */
dialog header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
dialog header h2 { flex: 1; margin: 0; }
#terms h2 { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 1; }
#terms h3 {
	margin: 1rem 0 .3rem; font-size: .68rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
#terms h3:first-child { margin-top: 0; }
#terms p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
/* Every dialog's header carries the same dismiss button; one rule for all of
   them rather than one per id, which is how the third dialog arrived unstyled. */
dialog header button {
	flex: none; width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
	border: 0; border-radius: var(--r); background: transparent;
	color: var(--ink-3); font-size: 1.3rem; cursor: pointer;
}
dialog header button:hover { background: var(--surface-2, var(--bg)); color: var(--ink); }
/* A phone number to call, not a stray default-blue link. */
dialog a { color: var(--pine); font-weight: 600; }

.info--plan { position: absolute; top: .5rem; right: .5rem; }
.cover { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: baseline; }
.cover dt { font-size: .82rem; color: var(--ink); }
.cover dd { margin: 0; font-size: .82rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cover dd small { display: block; font-weight: 400; font-size: .7rem; color: var(--ink-3); }
.cover .cover--out { color: var(--ink-3); font-weight: 400; }

.also {
	margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
	font-size: .82rem; line-height: 1.55; color: var(--ink-2);
}

/* ── budget shortfall ────────────────────────────────────────────────── */
#shortfall {
	width: min(28rem, calc(100vw - 2rem));
	padding: 0; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--card); color: var(--ink);
}
#shortfall::backdrop { background: rgba(10, 14, 15, .45); }
#shortfall article { padding: 1.2rem 1.4rem 1.4rem; }
#shortfall header { margin-bottom: .6rem; }
#shortfall h2 { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 1; }
#shortfall > article > p { margin: 0 0 1rem; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
#shortfall .money-input { margin-bottom: 1rem; }
#area > article > p { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
#area > article > p:last-of-type { margin-bottom: 1rem; }

.shortfall__actions { display: flex; gap: .5rem; }
.shortfall__actions .go { flex: 1; }
.go--ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.go--ghost:hover:not(:disabled) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ── promo code ──────────────────────────────────────────────────────────── */
.promo { display: flex; gap: .35rem; flex: none; }
.promo input { width: 4.8rem; }
.promo__go {
	flex: none; padding: 0 .55rem; border: 1px solid var(--line-2); border-radius: var(--r);
	background: var(--card); color: var(--ink-2); font: inherit; font-size: .78rem;
	font-weight: 600; cursor: pointer;
}
.promo__go:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.promo__go:disabled { opacity: .55; cursor: progress; }

/* Two ways to take the same money; neither is the default, so they read as a
   pair of equals rather than a primary and a secondary. */
.promo__choices { display: grid; gap: .5rem; margin-bottom: .9rem; }
.promo__choice {
	display: grid; gap: .15rem; text-align: left; padding: .7rem .8rem;
	background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
	font: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.promo__choice:hover { border-color: var(--brass); background: var(--brass-w); }
.promo__choice b { font-size: .9rem; font-weight: 600; color: var(--ink); }
.promo__choice span { font-size: .78rem; color: var(--ink-2); }
#promo-detail { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
#promo-basis { margin: 0; }

/* The amount came from the landing page; this is the way back to it. */
.budget__edit {
	flex: none; padding: 0 .4rem; border: 1px solid var(--line-2); border-radius: var(--r);
	background: transparent; color: var(--ink-3); font: inherit; font-size: .68rem;
	font-weight: 600; cursor: pointer;
}
.budget__edit:hover { border-color: var(--brass); color: var(--brass); }
.budget__row { display: flex; align-items: center; gap: .5rem; }
.budget__row b { margin-left: auto; }

/* The amount available reads as the quieter of the two figures; what is left
   of it is the one being watched. */
.budget__row--own { font-size: .76rem; color: var(--ink-3); }
.budget__row--own b { font-weight: 600; color: var(--ink-2); }
#promo-budget { display: flex; align-items: center; gap: .4rem; }

/* Removing the amount is a rarer and heavier action than changing it. */
.budget__drop {
	flex: none; width: 1.25rem; height: 1.25rem; padding: 0; line-height: 1;
	border: 1px solid var(--line-2); border-radius: var(--r);
	background: transparent; color: var(--ink-3); font-size: .9rem; cursor: pointer;
}
.budget__drop:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-w); }
/* Stands in for the whole block once the amount is gone, so it is drawn as an
   empty slot waiting to be filled rather than as another control. */
.budget-add {
	width: 100%; padding: .45rem; border: 1px dashed var(--line-2); border-radius: var(--r);
	background: transparent; color: var(--ink-3); font: inherit; font-size: .74rem;
	font-weight: 600; cursor: pointer;
}
.budget-add:hover { border-color: var(--brass); color: var(--brass); }

#drop-budget > article > p { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
#drop-budget > article > p:last-of-type { margin-bottom: 1rem; }
#drop-budget .go { background: var(--bad); }
#drop-budget .go--ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }

/* ---------- The form has been redeployed while you had it open ---------- */

/* Pinned to the bottom rather than the top: the header carries the logo and
   the theme toggle, and a bar pushed in above a part-filled form moves every
   field down under whoever is reading one. Fixed, so it does not join the
   scroll of a long form and get lost. */
.fresh {
	position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
	bottom: calc(1rem + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: .7rem;
	width: calc(100% - 2rem); max-width: 30rem;
	padding: .6rem .7rem .6rem .85rem;
	background: var(--card); color: var(--ink);
	border: 1px solid var(--line-2); border-radius: var(--r);
	box-shadow: 0 6px 24px rgb(0 0 0 / .14);
}
.fresh__say { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.fresh__go {
	flex: none; margin-left: auto; padding: .34rem .7rem;
	font: inherit; font-size: .76rem; font-weight: 600;
	background: var(--pine); color: var(--on-pine);
	border: 0; border-radius: var(--r); cursor: pointer;
}
.fresh__go:hover { background: var(--pine-2); }
/* Dismissing is the quieter of the two, and the one that costs nothing. */
.fresh__no {
	flex: none; width: 1.4rem; height: 1.4rem; padding: 0; line-height: 1;
	font: inherit; font-size: 1rem; color: var(--ink-3);
	background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
	cursor: pointer;
}
.fresh__no:hover { border-color: var(--ink-2); color: var(--ink); }

/* ---------- While an order is being placed ---------- */

/* Covers everything, because that is the point: no second press from any
   field, any button, or the keyboard. */
.placing {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	padding: 1.25rem;
	background: rgb(0 0 0 / .45);
	backdrop-filter: blur(2px);
}
.placing[hidden] { display: none; }
.placing__card {
	width: 100%; max-width: 22rem; padding: 1.5rem 1.4rem;
	text-align: center;
	background: var(--card); color: var(--ink);
	border: 1px solid var(--line-2); border-radius: var(--r);
	box-shadow: 0 12px 40px rgb(0 0 0 / .28);
}
.placing__spin {
	width: 1.9rem; height: 1.9rem; margin: 0 auto .9rem;
	border: 2px solid var(--line-2); border-top-color: var(--pine);
	border-radius: 50%;
	animation: placing-spin .8s linear infinite;
}
@keyframes placing-spin { to { transform: rotate(360deg); } }
.placing__say { margin: 0; font-size: 1rem; font-weight: 700; }
.placing__note { margin: .4rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
/* Only after it has taken long enough to worry somebody. */
.placing__wait {
	margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line);
	font-size: .8rem; font-weight: 600; color: var(--brass);
}
.placing__wait[hidden] { display: none; }

/* A spinner that never stops is worse than none for somebody who cannot look
   away from it; the words are what carry the message anyway. */
@media (prefers-reduced-motion: reduce) {
	.placing__spin { animation: none; border-top-color: var(--line-2); }
	.placing { backdrop-filter: none; }
}

/* A named block inside a section, so four fields whose requiredness varies can
   say which they are. The section heading cannot: the buyer above them is
   always required and the agent beside them is not. */
.subhead {
	flex-direction: row; align-items: baseline; gap: .5rem;
	margin-top: .3rem; padding-top: .7rem; border-top: 1px solid var(--line);
}
.subhead__name {
	font-size: .66rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-3);
}

/* What the form is for, on its own line under the title. A warranty written
   into a sale and a warranty on a house somebody already owns are different
   products sold through different forms, and the wrong one is a wasted order
   for them and a refund for us -- so it is said once, plainly, before anything
   the form asks. */
p.lede__for {
	display: inline-block; align-self: flex-start;
	/* Not the 56ch the paragraphs take: the line is one phrase and reads as
	   one, so it keeps its own width and wraps only when the screen is
	   narrower than it is. */
	max-width: 100%;
	margin: 0 0 .5rem; padding: .3rem .8rem;
	font-size: .8rem; font-weight: 600; line-height: 1.4;
	background: var(--pine-w); color: var(--pine);
	border-radius: 999px;
}