/* Hallmark · v2.0.0 · redesign: full (home, features, pricing, calculators, legal, header and footer; the plain shell: start, log in, account, setting up) · genre: modern-minimal · theme: brand (petrol; Archivo in two widths) · signature: the due-date stamp */
/* critique: the old site was the Cold Paddy anatomy (eyebrow, serif two-liner, two pill buttons, an object on the right with a stat card, mist bands, a dark close). v2 leads with one payslip row worked out live, then GRA's own form on the one deep petrol field; structure comes from ledger rules (a 2 px rule opens a table, hairlines between rows, a double rule under a total), not cards */
/* waive 58 · the headline is 8 words (45 characters): "returns" is the differentiator; answered 67 · "SSNIT", "PAYE" and "GRA" are acronyms, not typed capitals */

/* Salary Muse public website: home, features, pricing, calculators, legal pages and the plain shell
   (start, log in, account, setting up). Mobile first: base styles for 360 px, then 640, 960, 1200.

   One family in two widths, self-hosted subsets (Latin, the cedi sign and a few symbols; OFL,
   licence beside them): Archivo 400 and 600 for text, and Archivo's SemiExpanded cut (wdth 112.5,
   wght 600) for headlines and money (with tabular figures). Each is a static instance of the
   variable font with hinting kept (without the `prep` table Chrome on Linux spaces Archivo
   unevenly) and a fallback face sized to its metrics, so the swap doesn't move the page. A test
   checks that every file named in a `src:` below is shipped and carries the cedi sign. */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo Wide";
	src: url("../fonts/archivo-semiexpanded-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* fallbacks measured against Liberation Sans (Arial metrics) */
@font-face {
	font-family: "Archivo fallback";
	src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Roboto");
	size-adjust: 98.63%;
	ascent-override: 89.02%;
	descent-override: 21.29%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Wide fallback";
	src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arial"), local("Liberation Sans");
	font-weight: 600;
	size-adjust: 110.13%;
	ascent-override: 79.72%;
	descent-override: 19.07%;
	line-gap-override: 0%;
}


:root {
	--paper: #ffffff;
	--mist: #f2f7f8;
	--line: #e3ebed;
	--ink: #16202a;
	--muted: #5b6770;
	--petrol: #2b5460;
	--petrol-hover: #274751;
	--petrol-mid: #234650;
	--petrol-deep: #13262c;
	--on-deep: #c9dade;
	--highlight: #f1dc5c;
	--stamp: #b42318;
	--ok: #1f7a4d;

	--sans: "Archivo", "Archivo fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--display: "Archivo Wide", "Archivo Wide fallback", "Archivo", system-ui, sans-serif;
	--ink-2: #36424c;
	--on-deep-strong: #ffffff;
	--deep-line: rgb(201 218 222 / 0.18);
	--shadow-sheet: 0 24px 48px -28px rgb(0 0 0 / 0.55);

	--radius: 10px;
	--radius-card: 16px;
	--shadow-frame: 0 1px 2px rgb(19 38 44 / 0.05), 0 12px 32px -16px rgb(19 38 44 / 0.14);
	--shadow-float: 0 16px 40px -16px rgb(19 38 44 / 0.22);
	--scrim: rgb(19 38 44 / 0.5);
	--field: #7d939b;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--band: 4rem;
}

@media (min-width: 960px) {
	:root {
		--band: 6rem;
	}
}

/* -- base ------------------------------------------------------------------------------------- */

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

[hidden] {
	display: none !important;
}

/* controls take the page's type, not the browser's */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}

[id] {
	scroll-margin-top: 5rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

@media (min-width: 640px) {
	body {
		font-size: 1.0625rem;
		line-height: 1.65;
	}
}

h1,
h2 {
	font-family: var(--display);
	font-weight: 600;
	color: var(--ink);
	text-wrap: balance;
	overflow-wrap: break-word;
	min-width: 0;
	margin: 0;
}

h1 {
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

h2 {
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

h3 {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.45;
	margin: 0;
}

p {
	margin: 0;
}

p + p {
	margin-top: 0.75rem;
}

a {
	color: var(--petrol);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--petrol-hover);
}

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

/* addresses, codes and figures: the text face with tabular figures (no monospace costume) */
code,
.figure,
.mono {
	font-family: var(--sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

code {
	font-size: 0.9em;
}

::selection {
	background: var(--highlight);
	color: var(--ink);
}

input,
textarea {
	caret-color: var(--petrol);
}

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

.wrap {
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 640px) {
	.wrap {
		padding: 0 1.5rem;
	}
}

@media (min-width: 1200px) {
	.wrap {
		padding: 0 2rem;
	}
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0.75rem;
	z-index: 60;
	padding: 0.5rem 0.875rem;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow-float);
}

.skip:focus {
	left: 0.75rem;
}

.lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 62ch;
	text-wrap: pretty;
}

@media (min-width: 640px) {
	.lead {
		font-size: 1.1875rem;
		line-height: 1.58;
	}
}

.micro,
.note {
	font-size: 0.875rem;
	line-height: 1.57;
	color: var(--muted);
}

/* links in running text: underlined at rest, heavier on hover */
.link {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.link:hover {
	text-decoration-thickness: 2px;
}

/* -- buttons ---------------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: 600 0.9375rem / 1.2 var(--sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.16s var(--ease),
		border-color 0.16s var(--ease),
		transform 0.12s var(--ease);
}

.btn:active {
	transform: scale(0.98);
}

.btn-sm {
	min-height: 2.5rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
}

.btn-lg {
	min-height: 3rem;
	padding: 0.75rem 1.375rem;
	font-size: 1rem;
}

.btn-primary {
	background: var(--petrol);
	color: var(--paper);
}

.btn-primary:hover {
	background: var(--petrol-deep);
	color: var(--paper);
}

.btn-outline {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--field);
}

.btn-outline:hover {
	color: var(--ink);
	border-color: var(--petrol);
	background: var(--mist);
}

.btn:focus-visible {
	outline-offset: 3px;
}

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

/* -- header ----------------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.header-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 4rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

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

.brand img {
	width: 28px;
	height: 28px;
}

.nav {
	display: none;
	align-items: center;
	gap: 0.25rem;
	margin-left: 1.5rem;
}

.nav > a,
.nav summary,
.login {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 8px;
	color: var(--ink-2);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

.nav > a:hover,
.nav summary:hover,
.login:hover {
	color: var(--ink);
	background: var(--mist);
}

.nav [aria-current="page"] {
	color: var(--petrol-mid);
	box-shadow: inset 0 -2px 0 var(--petrol);
	border-radius: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-left: auto;
}

.login {
	display: none;
}

summary {
	list-style: none;
}

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

.caret {
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s var(--ease);
}

details[open] > summary .caret {
	transform: translateY(1px) rotate(225deg);
}

.dropdown {
	position: relative;
}

.dropdown-panel,
.menu-panel {
	position: absolute;
	top: calc(100% + 0.375rem);
	min-width: 13rem;
	padding: 0.375rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-float);
	display: grid;
	z-index: 40;
}

.dropdown-panel {
	left: 0;
}

.menu-panel {
	right: 0;
	min-width: 16rem;
}

.dropdown-panel a,
.menu-panel a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.9375rem;
}

.dropdown-panel a:hover,
.menu-panel a:hover {
	background: var(--mist);
	color: var(--ink);
}

.menu {
	position: relative;
}

.menu summary {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 8px;
	color: var(--ink);
	cursor: pointer;
}

.menu summary:hover {
	background: var(--mist);
}

@media (min-width: 400px) {
	.login {
		display: inline-flex;
	}
}

@media (min-width: 960px) {
	.nav {
		display: flex;
	}

	.menu {
		display: none;
	}
}

/* -- the staff door (menu and footer): staff open their company's own workspace ---------------- */

.staff-door {
	font-size: 0.9375rem;
}

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

.staff-door a > span {
	color: var(--petrol);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.staff-door a:hover > span {
	text-decoration-thickness: 2px;
}

/* -- sections: whitespace first, then a hairline where the subject changes -------------------- */

.band {
	padding: var(--band) 0;
}

.band + .band {
	border-top: 1px solid var(--line);
}

.band-head {
	max-width: 46rem;
}

.band-head .lead,
.band-head > p {
	margin-top: 1rem;
}

.split {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 960px) {
	.split {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 4rem;
	}

	.split.flip {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}

	.split.flip > :first-child {
		order: 2;
	}

	.split.narrow-shot {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	}

	.split.narrow-shot.flip {
		grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	}
}

.split .lead {
	margin-top: 1rem;
}

/* a ruled list: each line on its own row of the ledger */
.lines {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 38rem;
	border-top: 1px solid var(--line);
}

.lines li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.55;
}

.lines strong {
	font-weight: 600;
}

/* a real app screen of the demo company */
.shot {
	margin: 0;
}

.shot img {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-frame);
}

.shot figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.shot-phone {
	max-width: 17.5rem;
	margin: 0 auto;
}

.shot-phone img {
	border-radius: 24px;
}

/* -- home: the month in four moves (a real sequence, so numbered) ----------------------------- */

.moves {
	counter-reset: move;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	border-top: 2px solid var(--ink);
}

.moves li {
	counter-increment: move;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line);
}

.moves li::before {
	content: counter(move);
	grid-row: span 2;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--petrol);
	font-variant-numeric: tabular-nums;
}

.moves h3 {
	font-family: var(--display);
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.moves p {
	margin-top: 0.375rem;
	color: var(--ink-2);
	max-width: 34ch;
}

@media (min-width: 960px) {
	.moves {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
		border-top: 0;
	}

	.moves li {
		display: block;
		padding: 1.25rem 0 0;
		border-top: 2px solid var(--ink);
		border-bottom: 0;
	}

	.moves li::before {
		display: block;
		margin-bottom: 2rem;
		font-size: 2.5rem;
	}
}

/* -- home: staff, trust and the rest ---------------------------------------------------------- */

.staff-split .shot-phone {
	margin: 0;
}

@media (min-width: 960px) {
	.staff-split {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	}

	.staff-split .shot-phone {
		justify-self: center;
	}
}

/* what Salary Muse will not do: a two-column ledger of plain promises the code keeps */
.wont {
	display: grid;
	margin: 2.5rem 0 0;
	border-top: 2px solid var(--ink);
}

.wont div {
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}

.wont dt {
	font-weight: 600;
}

.wont dd {
	margin: 0.25rem 0 0;
	color: var(--ink-2);
	max-width: 48ch;
}

@media (min-width: 960px) {
	.wont {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4rem;
	}
}

.built-here {
	margin-top: 2rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.word-row {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.word-row a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.16s var(--ease);
}

.word-row a:hover {
	text-decoration-color: var(--petrol);
}

.after-row {
	margin-top: 1.5rem;
	color: var(--ink-2);
	max-width: 60ch;
}

.tool-row {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	border-top: 1px solid var(--line);
}

.tool-row li {
	border-bottom: 1px solid var(--line);
}

.tool-row a {
	display: grid;
	gap: 0.25rem;
	padding: 1rem 0;
	color: var(--ink);
	text-decoration: none;
}

.tool-row a b {
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.tool-row a:hover b {
	text-decoration-thickness: 2px;
}

.tool-row a span {
	color: var(--ink-2);
	font-size: 0.9375rem;
}

.tools-grid {
	display: grid;
	gap: 3.5rem;
}

.tools-grid .lead {
	margin-top: 1rem;
}

@media (min-width: 960px) {
	.tools-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 5rem;
	}
}

/* -- questions -------------------------------------------------------------------------------- */

.faq {
	margin-top: 1.5rem;
	border-top: 1px solid var(--line);
	max-width: 48rem;
}

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

.faq summary {
	position: relative;
	padding: 1.125rem 2.5rem 1.125rem 0;
	font-weight: 600;
	cursor: pointer;
}

.faq summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 1.5rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	transform: rotate(45deg);
	transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
	transform: translateY(4px) rotate(225deg);
}

.faq details p {
	padding: 0 0 1.25rem;
	color: var(--ink-2);
	max-width: 62ch;
}

/* -- the close and the footer: on paper. The close is the page's total line: a rule above, the
   action, and the accountant's double rule under it ------------------------------------------- */

.closing {
	padding: 0 0 var(--band);
}

/* a page that ends without a band still gets air above its total line */
main > .closing:first-child,
.page-head + .closing {
	padding-top: var(--band);
}

.closing-row {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	padding: 2rem 0;
	border-top: 1px solid var(--ink);
	border-bottom: 3px double var(--ink);
}

.closing h2 {
	max-width: 20em;
}

.closing .micro {
	margin-top: 0.75rem;
}

@media (min-width: 960px) {
	.closing-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4rem;
		padding: 2.5rem 0;
	}
}

.site-footer {
	padding: 3rem 0 2.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.footer-top {
	display: grid;
	gap: 2rem;
}

.wordmark {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
}

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

.footer-brand p {
	margin-top: 0.375rem;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.footer-cols h2 {
	margin: 0 0 0.375rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--ink);
}

.footer-cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-cols a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--ink-2);
	text-decoration: none;
}

.footer-cols a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.site-footer .staff-door {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.facts-line {
	margin-top: 1rem;
}

.site-footer .legal {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted);
}

@media (min-width: 640px) {
	.footer-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.footer-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 4rem;
	}
}

/* -- the staff door's dialog ------------------------------------------------------------------ */

dialog.workspace {
	width: min(28rem, calc(100% - 2rem));
	padding: 1.75rem;
	border: 0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-float);
	color: var(--ink);
}

/* without JavaScript the staff door still opens it as a page anchor */
dialog.workspace:target {
	display: block;
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	z-index: 70;
}

dialog.workspace::backdrop {
	background: var(--scrim);
}

dialog.workspace h2 {
	font-size: 1.375rem;
}

dialog.workspace p {
	margin-top: 0.5rem;
	color: var(--ink-2);
	font-size: 0.9375rem;
}

dialog.workspace label {
	display: block;
	margin-top: 1.25rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.domain {
	display: flex;
	align-items: stretch;
	margin-top: 0.375rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	overflow: hidden;
}

.domain:focus-within {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
}

.domain input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0.75rem;
	font: 400 1rem var(--sans);
	outline: none;
}

.domain span {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	background: var(--mist);
	color: var(--ink-2);
	font: 400 0.9375rem var(--sans);
	white-space: nowrap;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* -- page heads (features, pricing, calculators, legal) --------------------------------------- */

.page-head {
	padding: 3rem 0 2.5rem;
}

.page-head h1 {
	max-width: 18em;
}

.page-head .lead {
	margin-top: 1.25rem;
}

@media (min-width: 960px) {
	.page-head {
		padding: 4.5rem 0 3rem;
	}
}

/* what's on this page: plain links on one ruled line, not pills */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-top: 2rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--line);
}

.chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--ink-2);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.chips a:hover {
	color: var(--petrol);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

/* -- features --------------------------------------------------------------------------------- */

.feature {
	padding: 4rem 0;
	border-top: 1px solid var(--line);
}

@media (min-width: 960px) {
	.feature {
		padding: 6rem 0;
	}

	.feature .split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.feature .split.narrow-shot {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	}

	.feature .split.narrow-shot.flip {
		grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	}
}

.feature h2 {
	max-width: 16em;
}

.optional-note {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* -- pricing: two questions first, the billing periods as a ruled list, "Your price" closed like an
   invoice's total (the double rule, the highlighter on the figure), then the free line and the
   packages as the columns of one ruled statement, not a card kit. The column that fits is marked
   "Your size": a petrol rule over it and mist behind it. ------------------------------------------ */

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

.pricing {
	padding-bottom: var(--band);
}

.sizer {
	display: grid;
	gap: 2.5rem;
	padding-top: 2rem;
	border-top: 2px solid var(--ink);
}

@media (min-width: 960px) {
	.sizer {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}
}

.questions {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.questions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem;
	}
}

.question label {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

.question-inputs {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 0.625rem;
}

.question input[type="number"] {
	width: 7rem;
	min-height: 3rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--paper);
	font: 600 1.25rem / 1.2 var(--display);
	font-variant-numeric: tabular-nums;
}

.question input[type="number"]:focus {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
	border-color: var(--petrol);
}

.question input[type="range"] {
	flex: 1;
	min-width: 0;
	height: 2.75rem;
	accent-color: var(--petrol);
}

.question .hint {
	margin-top: 0.5rem;
	max-width: 38ch;
}

.periods {
	min-width: 0;
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
}

.periods legend {
	padding: 0;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.periods-hint {
	margin: -0.5rem 0 0.75rem;
}

/* one billing period a row: name and what it gets you on the left, the total and saving on the right */
.period {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 0.875rem;
	row-gap: 0.125rem;
	align-items: baseline;
	padding: 0.875rem 0.75rem;
	border-top: 1px solid var(--line);
	cursor: pointer;
	transition: background-color 0.16s var(--ease);
}

.period:last-of-type {
	border-bottom: 1px solid var(--line);
}

.period input {
	grid-row: 1 / span 2;
	align-self: center;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--petrol);
}

.period-name {
	font-weight: 600;
}

.period-note {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--muted);
}

.period-total {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
	font-family: var(--display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.period-saving {
	grid-column: 3;
	grid-row: 2;
	text-align: right;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
}

.period:hover,
.period:has(input:checked) {
	background: var(--mist);
}

.sizer-form > .btn {
	margin-top: 1.5rem;
}

/* "Your price": the lines an invoice would carry, closed by the total */
.your-price h2 {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

@media (min-width: 960px) {
	.your-price {
		position: sticky;
		top: 5.5rem;
	}
}

.your-size {
	margin-top: 0.375rem;
	color: var(--muted);
}

.price-lines {
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--line);
}

.price-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9375rem;
}

.price-line dt {
	min-width: 0;
	color: var(--ink-2);
}

.price-line dd {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.line-monthly dt,
.line-period dt {
	font-weight: 600;
	color: var(--ink);
}

.price-line.line-total {
	padding: 0.875rem 0 0.75rem;
	border-bottom: 3px double var(--ink);
	font-size: 1.0625rem;
}

.line-total dt {
	font-weight: 600;
	color: var(--ink);
}

.line-total dd {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	line-height: 1.15;
}

.line-total mark,
.your-free-figure mark {
	background: var(--highlight);
	color: inherit;
	padding: 0 0.2rem;
}

.your-free-figure {
	margin-top: 1.25rem;
	font: 600 2.25rem / 1.1 var(--display);
	letter-spacing: -0.03em;
}

.your-free-figure + p {
	margin-top: 0.75rem;
	color: var(--ink-2);
}

.your-saving {
	margin-top: 0.875rem;
	color: var(--ink-2);
}

/* a promotion under the pricing page's intro: its due-date stamp, then its sentence, on a ruled line */
.offer-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	max-width: 46rem;
	margin-top: 1.5rem;
	padding: 0.875rem 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.offer-line + .offer-line {
	margin-top: 0;
	border-top: 0;
}

.offer-words {
	min-width: 0;
	flex: 1 1 18rem;
	color: var(--ink-2);
}

/* "Your price" with an offer: what comes off, then the price after it, or why it doesn't apply */
.your-then {
	margin-top: 0.875rem;
	color: var(--ink-2);
}

.your-offer-note {
	margin-top: 0.875rem;
	color: var(--muted);
}

.your-price .btn {
	margin-top: 1.5rem;
}

.your-price .micro {
	margin-top: 0.75rem;
	max-width: 42ch;
}

/* the free tier, then the packages: one statement opened by a 2 px rule */
.free-line {
	display: grid;
	gap: 0.375rem;
	padding: 1.25rem 1rem;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--line);
}

.sizer + .free-line {
	margin-top: 4rem;
}

.free-line p {
	margin: 0;
	color: var(--ink-2);
	max-width: 75ch;
}

.free-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.free-head strong {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.packages-note {
	padding: 1rem;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
}

.yours-tag {
	display: none;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	background: var(--petrol);
	color: var(--paper);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.is-yours .yours-tag {
	display: inline-block;
}

.free-line.is-yours,
.package.is-yours {
	background: var(--mist);
}

.packages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
	.packages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.packages {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.package {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1rem 1.75rem;
	border-top: 1px solid var(--line);
	container-type: inline-size;
}

.package:first-child {
	border-top: 0;
}

@media (min-width: 640px) {
	.package {
		padding: 1.75rem 1.25rem 2rem;
	}

	.package:nth-child(2) {
		border-top: 0;
	}

	.package:nth-child(even) {
		border-left: 1px solid var(--line);
	}
}

@media (min-width: 1200px) {
	.package {
		border-top: 0;
	}

	.package:not(:first-child) {
		border-left: 1px solid var(--line);
	}
}

/* the column that fits: a petrol rule across its top */
.package.is-yours::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--petrol);
}

.package-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
}

.package h3 {
	font-family: var(--display);
	font-size: 1.375rem;
	letter-spacing: -0.02em;
}

.package-size {
	margin-top: 0.25rem;
	color: var(--muted);
	font-size: 0.9375rem;
}

.package-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.5rem;
	margin-top: 1.25rem;
}

.package-figure {
	font: 600 min(2.25rem, 11cqi) / 1.1 var(--display);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* side by side, every column states its price the same way: the figure, then "a month" under it */
@media (min-width: 640px) {
	.package-price {
		display: grid;
		gap: 0.125rem;
	}
}

.package-unit {
	color: var(--muted);
	font-size: 0.9375rem;
}

.package-total {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink-2);
}

.package-reference {
	margin-top: 0.125rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.package-lines {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--line);
	font-size: 0.9375rem;
}

.package-lines li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.5;
}

.package-yours {
	margin-top: 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.package-action {
	margin-top: auto;
	padding-top: 1.5rem;
}

.package-action .btn {
	width: 100%;
}

.package-action .micro {
	margin-top: 0.5rem;
	text-align: center;
}

.package-custom .custom-for {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.package-custom .custom-price {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* trust, next to the price */
.pay-line {
	margin-top: 1.25rem;
	max-width: 75ch;
	font-size: 0.875rem;
	color: var(--muted);
}

/* phones: the price rides along the bottom while the packages are on screen (pricing.js) */
.price-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background: var(--paper);
	border-top: 1px solid var(--ink);
	padding-bottom: env(safe-area-inset-bottom);
}

.price-bar-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 3.75rem;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.3;
}

.price-bar-row:hover {
	color: var(--ink);
}

.price-bar-what,
.price-bar-figure {
	display: grid;
	min-width: 0;
}

.price-bar-figure {
	text-align: right;
}

.price-bar-what b {
	font-weight: 600;
}

.price-bar-what span,
.price-bar-figure span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8125rem;
	color: var(--muted);
}

.price-bar-figure strong {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 960px) {
	.price-bar {
		display: none;
	}
}

.split.included {
	align-items: start;
}

.included .lines {
	margin-top: 0;
}

.bundles-title {
	margin-top: 2.5rem;
}

.not-charged {
	margin-top: 2rem;
	display: grid;
	border-top: 2px solid var(--ink);
}

.not-charged div {
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--line);
}

.not-charged dt {
	font-weight: 600;
}

.not-charged dd {
	margin: 0.25rem 0 0;
	color: var(--ink-2);
	max-width: 60ch;
}

@media (min-width: 960px) {
	.not-charged div {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 2rem;
	}

	.not-charged dd {
		margin: 0;
	}
}

.made-here {
	margin-top: 2rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

/* -- calculators ------------------------------------------------------------------------------ */

.calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding-bottom: var(--band);
}

@media (min-width: 960px) {
	.calc {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 2.5rem;
	}
}

.panel {
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper);
}

@media (min-width: 640px) {
	.panel {
		padding: 2rem;
	}
}

.form label {
	display: block;
	margin: 1.125rem 0 0.375rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.form label:first-child {
	margin-top: 0;
}

.hint {
	font-weight: 400;
	color: var(--muted);
	font-size: 0.875rem;
}

.form input[type="number"],
.form select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: 400 1rem var(--sans);
}

.form input[type="number"] {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.form input:focus,
.form select:focus {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
	border-color: var(--petrol);
}

.money-input {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
}

.money-input:focus-within {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
	border-color: var(--petrol);
}

.money-input span {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	background: var(--mist);
	color: var(--ink-2);
	font: 600 0.9375rem var(--sans);
}

.form .money-input input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.form .check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 400;
	min-height: 2.75rem;
	margin: 0.5rem 0 0;
}

.check input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--petrol);
}

.more {
	margin-top: 1.5rem;
	border-top: 1px solid var(--line);
	padding-top: 0.5rem;
}

.more summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--petrol);
	cursor: pointer;
}

.result h2 {
	font-size: 1.375rem;
}

.big {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 1.5rem;
}

.stat {
	display: grid;
	gap: 0.125rem;
}

.stat span {
	font-size: 0.875rem;
	color: var(--muted);
}

.stat strong {
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* the one figure that matters, highlighted once, with the double rule under a total */
.stat.primary strong {
	justify-self: start;
	font-size: 2rem;
	line-height: 1.2;
	padding: 0 0.25rem;
	margin-left: -0.25rem;
	background: var(--highlight);
	border-bottom: 3px double var(--ink);
}

@media (min-width: 640px) {
	.big {
		grid-template-columns: 1.4fr 1fr 1fr;
		align-items: end;
	}
}

.result .row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9375rem;
}

.result .row > span:last-child {
	font-family: var(--display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* deductions carry a real minus sign; red stays for deadlines and errors */
.result .row.minus > span:last-child:not(:empty)::before {
	content: "\2212";
}

.result .row.total {
	font-weight: 600;
	border-top: 1px solid var(--ink);
	border-bottom: 0;
}

.result h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.25rem;
}

.result[aria-busy="true"] [data-out] {
	opacity: 0.55;
	transition: opacity 0.2s;
}

.error-box {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--stamp);
	border-radius: var(--radius);
	color: var(--stamp);
	font-size: 0.9375rem;
}

.run-all {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-weight: 600;
}


.table-scroll {
	overflow-x: auto;
}

table.bands {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin-top: 0.75rem;
}

table.bands th,
table.bands td {
	padding: 0.5rem 0.625rem 0.5rem 0;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

table.bands th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

table.bands td:not(:first-child) {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

table.bands tr.idle td {
	color: var(--muted);
}

table.bands tr:not(.idle) td:last-child {
	color: var(--ink);
}

table.bands tr.total td {
	font-weight: 600;
}

.prose {
	max-width: 48rem;
}

/* a prose band keeps the page's left edge; only its lines are narrow */
.wrap.prose {
	max-width: 84rem;
}

.wrap.prose > * {
	max-width: 48rem;
}

.prose ul,
.prose ol {
	padding-left: 1.25rem;
}

.legal-band {
	padding-bottom: var(--band);
}

.prose h2 {
	margin-top: 3rem;
}

.prose h2:first-child {
	margin-top: 0;
}

.prose h3 {
	margin-top: 2rem;
}

.prose p,
.prose ul,
.prose ol {
	margin-top: 0.875rem;
}

.prose li + li {
	margin-top: 0.375rem;
}

.pair {
	display: grid;
	gap: 2rem;
	margin-top: 1rem;
}

@media (min-width: 640px) {
	.pair {
		grid-template-columns: 1fr 1fr;
	}
}

/* -- legal pages ------------------------------------------------------------------------------ */

/* a draft says so: the stamp's red rule round the note, not a coloured side stripe */
.draft-note {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1.5px solid var(--stamp);
	border-radius: var(--radius);
	color: var(--stamp);
	font-weight: 600;
	max-width: 48rem;
}

.draft-note span {
	display: block;
	font-weight: 400;
	color: var(--ink-2);
	margin-top: 0.25rem;
}

.to-confirm {
	background: var(--highlight);
	border-radius: 3px;
	padding: 0 0.2em;
	font-style: normal;
}

/* -- the plain shell (start, log in, account, setting up) -------------------------------------
   After Frappe Cloud's minimal pages: a plain white page, the small mark at the top, then one narrow
   column with the title, a one-line subtitle, the fields and one full-width button. No card, no mist. */

:root {
	--plain-width: 26.5rem;
}

body.plain {
	background: var(--paper);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.plain-header {
	width: 100%;
	max-width: calc(var(--plain-width) + 2rem);
	margin: 0 auto;
	padding: 2rem 1rem 0;
}

.plain-mark {
	display: inline-flex;
	border-radius: 8px;
}

.plain-main {
	flex: 1;
	width: 100%;
	padding: 1.75rem 1rem 3rem;
}

.plain-card {
	width: 100%;
	max-width: var(--plain-width);
	margin: 0 auto;
}

@media (min-width: 640px) {
	.plain-header {
		padding-top: 3.5rem;
	}

	.plain-main {
		padding-top: 2.25rem;
	}
}

.plain-card h1 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
	line-height: 1.15;
}

.plain-subtitle {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.plain-footer {
	padding: 1rem 1rem 2rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--muted);
}

.plain-footer a {
	color: var(--muted);
}

/* the footer's links side by side, spaced rather than joined by dots */
.plain-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
}

/* -- forms on the plain card (start, log in, account, setting up) ------------------------------
   .field > label + input/select (+ .field-hint, .field-error); .btn-block; .or; .segments with
   .is-done/.is-current spans; .step-count; .choices of label.choice > input + span; .progress > span;
   .link-button; .ok and .bad for availability words. */

.field {
	margin-top: 1.125rem;
}

.field label,
.field legend {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: 400 1rem var(--sans);
}

.field input:focus,
.field select:focus {
	outline: 2px solid var(--petrol);
	outline-offset: 1px;
	border-color: var(--petrol);
}

.field [aria-invalid="true"] {
	border-color: var(--stamp);
}

.field-hint {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.field-error {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--stamp);
}

fieldset.field {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}

.btn-block {
	width: 100%;
}

.or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.or::before,
.or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.segments {
	display: flex;
	gap: 8px;
	margin-bottom: 0.625rem;
}

.segments span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--line);
	transition: background-color 0.3s var(--ease);
}

.segments .is-done,
.segments .is-current {
	background: var(--petrol);
}

.step-count {
	font-size: 0.8125rem;
	color: var(--muted);
}

.choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.choice {
	position: relative;
}

.choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choice span {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--paper);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

.choice input:checked + span {
	border-color: var(--petrol);
	background: var(--mist);
	color: var(--petrol-mid);
	box-shadow: inset 0 0 0 1px var(--petrol);
}

.choice input:focus-visible + span {
	outline: 2px solid var(--petrol);
	outline-offset: 2px;
}

.progress {
	height: 8px;
	border-radius: 4px;
	background: var(--mist);
	overflow: hidden;
}

.progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--petrol);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s var(--ease);
}

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--petrol);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	cursor: pointer;
}

.link-button:hover {
	text-decoration-thickness: 2px;
}

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

.bad {
	color: var(--stamp);
}

/* -- home ---------------------------------------------------------------------------------------
   One idea per screen. The opening is a headline over one payslip row the payroll engine works out
   on each visit; GRA's own form sits on the page's one deep petrol field; month end is a ledger
   table. Headlines and money are Archivo SemiExpanded (money with tabular figures), text is Archivo,
   and the due-date stamp (stamp red) is the one signature. Spacing on the 4 px scale. */

.quiet-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.quiet-link:hover {
	text-decoration-thickness: 2px;
}

/* the due-date stamp: a deadline, in stamp red, wherever a date is the point */
.stamp {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	padding: 0.25rem 0.625rem;
	border: 1.5px solid var(--stamp);
	border-radius: 4px;
	color: var(--stamp);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.stamp time {
	font-variant-numeric: tabular-nums;
}

/* 1. the opening ---------------------------------------------------------------------------------- */

.opening {
	padding: 2.5rem 0 3rem;
}

.opening h1 {
	font-size: clamp(2.25rem, 1.05rem + 4.8vw, 4.5rem);
	max-width: 17em;
}

.opening-row {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.opening-sentence {
	max-width: 34ch;
	font-size: 1.1875rem;
	line-height: 1.45;
	color: var(--ink-2);
	text-wrap: pretty;
}

.action-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.opening-actions .micro {
	margin-top: 0.5rem;
}

@media (min-width: 960px) {
	.opening {
		padding: 4rem 0 3.5rem;
	}

	.opening-row {
		margin-top: 1.75rem;
	}

	.opening-sentence {
		font-size: 1.3125rem;
	}
}

/* the payslip row: a column sum on phones, one row of the register on wide screens. Deductions carry
   their own minus; the + and = between columns are drawn by CSS and hidden from screen readers. */

.ledger {
	margin: 2.5rem 0 0;
}

.ledger-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--ink);
}

.ledger-head p:first-child {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.ledger-head b {
	font-weight: 600;
}

.ledger-head span {
	color: var(--muted);
}

.ledger-row {
	display: grid;
	margin: 0;
}

.ledger-row .cell {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--line);
}

.ledger-row dt {
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.ledger-row dd {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ledger-row .sum dt,
.ledger-row .total dt {
	font-weight: 600;
	color: var(--ink);
}

.ledger-row .total {
	border-bottom: 0;
	padding-top: 0.875rem;
}

.ledger-row .total dd {
	font-size: 1.5rem;
}

/* the one bright element: the take-home figure, highlighted, with the double rule under a total */
.ledger-row .total dd span {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: 0 0.25rem 0.125rem;
	border-bottom: 3px double var(--ink);
}

.ledger-row .total dd span::before {
	content: "";
	position: absolute;
	inset: 0.1em 0 0.18em;
	z-index: -1;
	background: var(--highlight);
	transform-origin: left center;
}

.ledger figcaption {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-2);
}

/* below the row layout: a payslip's column sum, at a payslip's width */
.ledger {
	max-width: 36rem;
}

@media (min-width: 1100px) {
	.ledger {
		max-width: none;
	}

	.ledger-head p:first-child {
		font-size: 1rem;
	}

	.ledger-row {
		grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
		padding: 1rem 0;
		border-bottom: 1px solid var(--line);
	}

	.ledger-row .cell {
		position: relative;
		display: grid;
		align-content: start;
		justify-content: stretch;
		gap: 0.375rem;
		padding: 0 0 0 2rem;
		border: 0;
	}

	.ledger-row .cell:first-child {
		padding-left: 0;
	}

	.ledger-row dt {
		font-size: 0.875rem;
	}

	.ledger-row dd {
		font-size: clamp(1.25rem, 0.3rem + 1.4vw, 1.625rem);
		line-height: 1.25;
	}

	/* the operator sits in the gap before its figure, on the figure's own baseline */
	.ledger-row .add dd::before,
	.ledger-row .sum dd::before,
	.ledger-row .total dd::before {
		display: inline-block;
		width: 2rem;
		margin-left: -2rem;
		text-align: center;
		color: var(--muted);
	}

	.ledger-row .add dd::before {
		content: "+" / "";
	}

	.ledger-row .sum dd::before,
	.ledger-row .total dd::before {
		content: "=" / "";
	}

	.ledger-row .total dd::before {
		width: auto;
		margin: 0 0.75rem 0 0;
	}

	.ledger-row .total {
		justify-items: end;
		text-align: right;
		padding-top: 0;
	}

	.ledger-row .total dd {
		font-size: clamp(1.75rem, 0.6rem + 1.8vw, 2.25rem);
		line-height: 1.1;
	}

	.ledger figcaption {
		margin-top: 0.875rem;
	}
}

/* 2. GRA's own form, on the page's one deep petrol field ------------------------------------------- */

.returns {
	padding: 4rem 0;
	background: var(--petrol-deep);
	color: var(--on-deep);
}

.returns h2 {
	color: var(--on-deep-strong);
}

.returns-head {
	display: grid;
	gap: 1rem;
}

.returns-head p {
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.returns-shot {
	margin: 2rem 0 0;
}

.returns-shot img {
	width: 100%;
	aspect-ratio: 1600 / 1000;
	object-fit: cover;
	object-position: top left;
	border-radius: 12px;
	background: var(--paper);
	box-shadow: var(--shadow-sheet);
}

.returns-shot figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--on-deep);
}

.returns-facts {
	list-style: none;
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--deep-line);
}

.returns-facts li {
	display: grid;
	justify-items: start;
	gap: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* on the deep field the stamp is inked in: white on stamp red keeps its contrast */
.returns .stamp {
	background: var(--stamp);
	color: var(--on-deep-strong);
}

.returns-plain {
	font-weight: 600;
	color: var(--on-deep-strong);
	padding: 0.25rem 0;
}

@media (min-width: 960px) {
	.returns {
		padding: 6rem 0 5rem;
	}

	.returns-head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: 2rem;
	}

	.returns-shot {
		margin-top: 3rem;
	}

	.returns-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
		margin-top: 2.5rem;
	}
}

/* 3. month end, chore by chore: a ledger table ------------------------------------------------------- */

.month-end {
	padding: 4rem 0 3rem;
}

.compare {
	width: 100%;
	margin-top: 2rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.55;
}

.compare thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.compare,
.compare tbody,
.compare tr,
.compare th,
.compare td {
	display: block;
}

.compare tbody tr {
	padding: 1.25rem 0;
	border-top: 1px solid var(--line);
}

.compare tbody tr:first-child {
	border-top: 2px solid var(--ink);
}

.compare tbody th {
	margin-bottom: 0.5rem;
	font-weight: 600;
	font-size: 1.0625rem;
	text-align: left;
}

.compare td + td {
	margin-top: 0.75rem;
}

.compare td::before {
	content: attr(data-label);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

.compare td:nth-of-type(1) {
	color: var(--muted);
}

@media (min-width: 720px) {
	.compare {
		display: table;
		font-size: 1.0625rem;
	}

	.compare thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		display: table-header-group;
	}

	.compare tbody {
		display: table-row-group;
	}

	.compare tr {
		display: table-row;
	}

	.compare th,
	.compare td {
		display: table-cell;
		padding: 1.25rem 2rem 1.25rem 0;
		vertical-align: top;
		text-align: left;
	}

	.compare thead th {
		padding-top: 0;
		padding-bottom: 0.75rem;
		font-size: 0.9375rem;
		font-weight: 600;
		border-bottom: 2px solid var(--ink);
	}

	.compare thead th:first-of-type {
		color: var(--muted);
	}

	.compare thead td {
		border-bottom: 2px solid var(--ink);
	}

	.compare tbody tr,
	.compare tbody tr:first-child {
		border: 0;
	}

	.compare tbody th,
	.compare tbody td {
		border-bottom: 1px solid var(--line);
	}

	.compare tbody th {
		width: 16%;
		margin: 0;
	}

	.compare tbody td:nth-of-type(1) {
		width: 36%;
	}

	.compare td + td {
		margin: 0;
	}

	.compare td::before {
		content: none;
	}
}

@media (min-width: 960px) {
	.month-end {
		padding: 7rem 0 4rem;
	}

	.compare {
		margin-top: 3rem;
	}
}

/* the one authored moment: the payslip row fills in once, left to right, then the highlighter */
@media (prefers-reduced-motion: no-preference) {
	.ledger-row .cell {
		animation: ledger-in 0.4s var(--ease) both;
		animation-delay: calc(var(--i, 0) * 60ms + 120ms);
	}

	.ledger-row .total dd span::before {
		animation: highlight 0.4s var(--ease) 0.6s both;
	}
}

@keyframes ledger-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* -- motion: quiet, once, and only for visitors who haven't asked for less --------------------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: 180ms var(--ease) both page-out;
	}

	::view-transition-new(root) {
		animation: 320ms var(--ease) both page-in;
	}

	.reveal-on [data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity 0.6s var(--ease),
			transform 0.6s var(--ease);
	}

	.reveal-on [data-reveal].is-in {
		opacity: 1;
		transform: none;
	}
}

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

@keyframes page-out {
	to {
		opacity: 0;
	}
}

@keyframes page-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}