/* CostLoad site styles. Tokens and rules from DESIGN.md (hand-owned) and 03-UI-SPEC.md; one file for every page. */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 700;
	font-stretch: 87.5%;
	font-display: swap;
	src: url("/fonts/archivo-700-sc-latin-v25.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/fonts/public-sans-400-600-latin-v21.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/ibm-plex-mono-400-latin-v23.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light;
	--bg: oklch(97.6% 0.008 95);
	--surface: oklch(99.2% 0.004 95);
	--line: oklch(86% 0.012 95);
	--text: oklch(26% 0.02 250);
	--muted: oklch(46% 0.02 250);
	--primary: oklch(47% 0.11 155);
	--primary-ink: oklch(98.5% 0.01 155);
	--surface-2: color-mix(in oklch, var(--primary) 7%, var(--bg));
	--success: var(--primary);
	--exception: oklch(52% 0.13 65);
	--exception-bg: oklch(94% 0.05 80);
	--danger: oklch(50% 0.17 27);

	--step--1: 0.85rem;
	--step-0: 1.0625rem;
	--step-1: 1.328rem;
	--step-2: 1.66rem;
	--step-3: 2.075rem;
	--step-4: 2.594rem;
	--step-5: 3.242rem;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 3.5rem;
	--space-10: 4.5rem;

	--radius: 4px;
	--radius-sm: 2px;
	--elev-report: 0 0.5px 1px oklch(40% 0.03 95 / 0.18), 0 2px 6px -2px oklch(40% 0.03 95 / 0.16);
	--elev-button: inset 0 1px 0 oklch(99% 0.01 95 / 0.22), inset 0 -2px 0 oklch(20% 0.02 95 / 0.16), 0 1px 2px oklch(30% 0.05 155 / 0.3), 0 6px 14px -6px oklch(47% 0.11 155 / 0.5);
	--elev-pressed: inset 0 2px 4px oklch(20% 0.02 95 / 0.25);
	--elev-toast: 0 1px 2px oklch(30% 0.03 95 / 0.2), 0 8px 24px -8px oklch(30% 0.03 95 / 0.35);

	--font-display: "Archivo", "Arial Narrow", sans-serif;
	--font-body: "Public Sans", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;
	--display-stretch: 87.5%;
}

/* Base and native details */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; accent-color: var(--primary); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 var(--step-0)/1.6 var(--font-body);
	font-synthesis: none;
}
::selection { background: color-mix(in oklch, var(--primary) 28%, transparent); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-sm); }
input, select, textarea { font-size: max(16px, 1rem); }
h1, h2, h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-stretch: var(--display-stretch);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); max-width: 30ch; }
h3 { font-size: var(--step-1); }
p { margin: 0; max-width: 60ch; text-wrap: pretty; }
li, dd { text-wrap: pretty; }
a { color: var(--text); text-underline-offset: 0.18em; }
ul, ol, dl, figure { margin: 0; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Skip link: visible on focus only */
.skip { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-2) var(--space-4); background: var(--surface); border-radius: var(--radius); z-index: 2; }
.skip:focus { top: var(--space-2); }

/* Header (not sticky) */
header.top { background: var(--surface); border-bottom: 1px solid var(--line); }
header.top > .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.mark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font: 700 var(--step-1)/1 var(--font-display); font-stretch: var(--display-stretch); }
.mark svg { width: 22px; height: 22px; flex: none; }
nav.nav { display: flex; gap: var(--space-5); }
nav.nav a { color: var(--muted); text-decoration: none; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius);
	font: 600 var(--step-0)/1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: transform 120ms ease-out;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: var(--elev-button); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--elev-pressed); }
.btn-quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:active { transform: translateY(1px); }
.btn[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
	.btn-primary:hover { background: color-mix(in oklch, var(--primary) 88%, black); }
	.btn-quiet:hover { background: var(--surface-2); }
	nav.nav a:hover { color: var(--text); }
}

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-9); align-items: center; padding: var(--space-10) 0 4rem; }
.hero .sub { margin-top: var(--space-4); max-width: 34ch; font-size: var(--step-1); color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.micro { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }

/* Sample report: the figure holds the card and the caption under it */
.sheet-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--elev-report); overflow: hidden; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sheet-head strong { font: 700 var(--step-0)/1.2 var(--font-display); font-stretch: var(--display-stretch); }
.sheet-head span { font-size: var(--step--1); color: var(--muted); }
ul.counts { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
ul.counts li { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--line); }
ul.counts li:last-child { border-right: 0; }
ul.counts strong { display: block; font: 700 var(--step-1)/1.1 var(--font-display); font-stretch: var(--display-stretch); font-variant-numeric: tabular-nums; }
ul.counts span { font-size: var(--step--1); color: var(--muted); }
.sheet-table { overflow-x: auto; }
table.report { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
table.report caption { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; }
table.report th { padding: var(--space-2) var(--space-3); text-align: left; font-weight: 600; color: var(--muted); }
table.report td { padding: var(--space-2) var(--space-3); line-height: 1.4; }
table.report th:nth-child(n+2), table.report td:nth-child(n+2) { text-align: right; white-space: nowrap; }
table.report tbody tr:nth-child(even) td { background: var(--surface-2); }
.sheet-foot { max-width: none; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }
figure.sheet figcaption { margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted); }

/* Sections */
section.block { padding: var(--space-10) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--space-5); }
section.band { background: var(--surface-2); }
#sample { scroll-margin-top: var(--space-5); }
.kicker { margin-bottom: var(--space-3); font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.block h2 + * { margin-top: var(--space-6); }
.block h2 + ol.steps, .block h2 + dl.faq { margin-top: var(--space-7); }

/* How it works: numbered rows on rules, not cards */
ol.steps { padding: 0; list-style: none; counter-reset: step; }
ol.steps li { counter-increment: step; display: grid; grid-template-columns: 4rem 14rem 1fr; gap: var(--space-5); align-items: baseline; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
ol.steps li::before { content: counter(step, decimal-leading-zero); font: 700 var(--step-1)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--primary); }

/* Fit band */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.split h3 { margin-bottom: var(--space-5); }
.split ul { display: grid; gap: var(--space-2); padding-left: 20px; }

/* Price box */
.price { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.price-line { font: 700 var(--step-3)/1.1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-line + p { margin-top: var(--space-3); font-variant-numeric: tabular-nums; }
.price-actions { display: grid; gap: var(--space-4); }
.price-actions .btn { width: 100%; }

/* Questions */
dl.faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); }
dl.faq dt { margin-bottom: var(--space-2); font-weight: 600; }
dl.faq dd { margin: 0; color: var(--muted); }

/* Final CTA */
.final { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5); }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 400 var(--step-0)/1 var(--font-mono); user-select: all; }
.send-legal { margin-top: var(--space-5); font-size: var(--step--1); color: var(--muted); }

/* Toast: the only floating element; no box while empty */
.toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-5);
	z-index: 3;
	margin: 0;
	max-width: calc(100% - 32px);
	translate: -50% 0;
	border-radius: var(--radius);
	font-size: var(--step--1);
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease-out;
}
.toast.is-ok, .toast.is-err { padding: var(--space-3) var(--space-4); box-shadow: var(--elev-toast); }
.toast.is-ok { background: var(--success); color: var(--primary-ink); }
.toast.is-err { background: var(--text); color: var(--bg); }
.toast.is-on { opacity: 1; }

/* Footer */
footer { padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }
footer > .wrap { display: grid; gap: var(--space-2); }
footer nav { display: flex; gap: var(--space-5); }
footer nav a { display: inline-block; padding-block: var(--space-2); }
footer a { color: var(--muted); }
footer p { max-width: none; }

/* Legal pages and 404 */
main.legal { padding: var(--space-10) 0; }
main.legal > * { max-width: 70ch; }
main.legal h1 { font-size: var(--step-4); }
main.legal .effective { margin-top: var(--space-3); color: var(--muted); }
main.legal .summary { margin-top: var(--space-6); }
main.legal h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--step-2); max-width: none; }
main.legal p + p, main.legal p + ul, main.legal ul + p { margin-top: var(--space-4); }
main.legal ul { display: grid; gap: var(--space-2); padding-left: 20px; }
main.notfound { padding: var(--space-10) 0; }
main.notfound p { margin-top: var(--space-4); }

@media (max-width: 900px) {
	nav.nav { display: none; }
	h1 { font-size: var(--step-4); }
	h2 { font-size: var(--step-2); }
	.hero { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-8) 0; }
	ul.counts { grid-template-columns: repeat(2, 1fr); }
	ul.counts li:nth-child(2) { border-right: 0; }
	ul.counts li:nth-child(n+3) { border-top: 1px solid var(--line); }
	ol.steps li { grid-template-columns: 2.5rem 1fr; }
	ol.steps li p { grid-column: 2; }
	.split, dl.faq, .price { grid-template-columns: 1fr; }
	.price-line { font-size: var(--step-2); }
	section.block, main.legal, main.notfound { padding: 3.25rem 0; }
}
@media (max-width: 520px) {
	header.top .btn { padding: 0 var(--space-4); }
	.hero .cta-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 380px) {
	.mark { font-size: var(--step-0); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
}
.final h2 + .micro { margin-top: var(--space-3); }