/* The setup stepper (/start) and the setting-up screen (/setting-up/<workspace>). Both sit on the plain
   shell (a white page, no card) and use site.css's tokens and form pieces (.field, .choices,
   .segments, .progress …) and account.css's (the Google button, the honeypot, form messages, notes).
   Mobile first; motion only for visitors who haven't asked for less (site.css carries the
   reduced-motion reset). When a workspace is made, /start becomes the top of /setting-up (the
   same classes on <body>, the same header and markup), so the two pages meet in place. */

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

/* -- the pinned header: the mark and where you are, at the top while the page scrolls under it -- */

.start-header {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: calc(0.875rem + env(safe-area-inset-top)) 1rem 0.875rem;
	background: var(--paper);
	transition: box-shadow 0.2s var(--ease);
}

/* a hairline once the page has moved; a shadow, so nothing shifts */
.start-header.is-scrolled {
	box-shadow: 0 1px 0 var(--line);
}

.start-header-inner {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	max-width: var(--plain-width);
	margin: 0 auto;
}

.start-header .segments {
	flex: 1;
	margin: 0;
}

.start-header .step-count {
	flex: none;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.start-header {
		padding-top: calc(1.75rem + env(safe-area-inset-top));
	}
}

/* the focused field never hides under the pinned header (or the pinned Continue on phones) */
html:has(body.start-page) {
	scroll-padding-top: 5.5rem;
}

/* -- the column: back, the question and its one line ------------------------------------------- */

.start-page .plain-main {
	padding-top: 1.25rem;
}

.start-back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	margin: -0.5rem 0 0.25rem;
	text-decoration: none;
	font-size: 0.9375rem;
}

.start-card [data-heading]:focus,
.start-card [data-account-heading]:focus {
	outline: none;
}

.plain-subtitle:empty {
	display: none;
}

.optional,
.choice small {
	font-weight: 400;
	color: var(--muted);
}

/* a chip is a flex box, which drops the space before its small print */
.choice small {
	margin-left: 0.3em;
}

/* -- what must be fixed first ------------------------------------------------------------------------ */

/* the stamp's red rule all round, not a side stripe */
.error-summary {
	margin-top: 1rem;
	padding: 0.875rem 1rem;
	border: 1.5px solid var(--stamp);
	border-radius: var(--radius);
}

.error-summary:focus {
	outline: 2px solid var(--stamp);
	outline-offset: 2px;
}

.error-summary h2 {
	font: 600 1rem / 1.4 var(--sans);
	letter-spacing: 0;
}

.error-summary ul {
	margin: 0.375rem 0 0;
	padding-left: 1.125rem;
	font-size: 0.9375rem;
}

.error-summary a {
	color: var(--stamp);
	font-weight: 600;
}

/* -- fields -------------------------------------------------------------------------------------- */

.start-step > .field:first-child {
	margin-top: 1.5rem;
}

.sub-field {
	margin-top: 0.875rem;
}

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

.sub-field input[type="number"] {
	max-width: 8rem;
}

.choices-stack {
	flex-direction: column;
}

.choices-stack .choice span {
	width: 100%;
}

.field .domain input:not([type="checkbox"]):not([type="radio"]) {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: 400 1rem var(--sans);
}

.address-line {
	display: grid;
	gap: 0.125rem;
	font-size: 0.9375rem;
}

.address-label {
	font-weight: 600;
}

.address-line .mono {
	overflow-wrap: anywhere;
}

.address-status:empty {
	display: none;
}

.start-note {
	margin-top: 1rem;
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius);
	background: var(--mist);
	color: var(--petrol-mid);
	font-size: 0.9375rem;
}

.start-note:empty {
	display: none;
}

/* how often they'll pay: four tiles, two by two, 12 months first, marked like the size chips (the
   chosen one filled, with the petrol ring). Each total sits at the foot of its tile, so the figures
   of a row line up. Real radios, hidden as the chips' are. */
.pay-period-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

/* .field label would make each tile a block with a gap under it: a tile fills its grid cell instead */
.pay-periods .pay-period {
	position: relative;
	display: flex;
	margin: 0;
	font-weight: 400;
}

.pay-period input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pay-period-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--paper);
	cursor: pointer;
}

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

.pay-period input:focus-visible + .pay-period-box {
	outline: 2px solid var(--petrol);
	outline-offset: 2px;
}

.pay-period-name {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.pay-period-words,
.pay-period-saving {
	font-size: 0.8125rem;
	line-height: 1.35;
}

.pay-period-words {
	color: var(--muted);
	text-wrap: balance;
}

.pay-period-total {
	margin-top: auto;
	padding-top: 0.25rem;
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.pay-period-saving {
	font-weight: 600;
	color: var(--ink-2);
}

/* a very large team's total still stays inside its tile */
.pay-period-total,
.pay-period-saving {
	overflow-wrap: anywhere;
}

.pay-period-total:empty,
.pay-period-saving:empty {
	display: none;
}

/* phones: the team screen, with how often they'll pay, fits one screen above the pinned Continue
   (390 x 844), so its spacing is a little tighter there */
@media (max-width: 639.98px) {
	.start-step[data-screen="team"] > .field + .field {
		margin-top: 0.875rem;
	}

	.start-step[data-screen="team"] > .field:first-child {
		margin-top: 1rem;
	}

	.pay-period-box {
		padding: 0.375rem 0.625rem;
	}

	.start-note {
		margin-top: 0.75rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
	}
}

/* -- what you'll use: one row per optional module, the whole screen on one phone screen ---------- */

.start-page {
	--switch-off: #6b8590;
}

.field legend {
	padding: 0;
}

.switches {
	margin-top: 1.25rem;
}

.switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.75rem;
	padding: 0.625rem 0;
	border-top: 1px solid var(--line);
}

.switch-row:last-child {
	border-bottom: 1px solid var(--line);
}

/* the whole row is the label's, so a tap anywhere on it flips the switch */
.switch-row label {
	flex: 1;
	display: grid;
	gap: 0.125rem;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.switch-row label strong {
	font-weight: 600;
	line-height: 1.35;
}

.switch-row label span {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--muted);
}

/* off: an empty track with a grey knob (3:1 against the page); on: filled petrol, white knob */
input.switch {
	appearance: none;
	position: relative;
	flex: none;
	width: 2.75rem;
	height: 1.625rem;
	margin: 0;
	border: 1.5px solid var(--switch-off);
	border-radius: 999px;
	background: var(--paper);
	cursor: pointer;
	transition:
		background-color 0.16s var(--ease),
		border-color 0.16s var(--ease);
}

input.switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--switch-off);
	transition:
		transform 0.16s var(--ease),
		background-color 0.16s var(--ease);
}

input.switch:checked {
	border-color: var(--petrol);
	background: var(--petrol);
}

input.switch:checked::after {
	background: var(--paper);
	transform: translateX(1.125rem);
}

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

.module-summary {
	margin-top: 0.875rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

.module-summary [data-module-summary] {
	color: var(--ink);
}

.nobreak {
	white-space: nowrap;
}

/* -- the last page: your choices beside the sign-up ------------------------------------------------
   Phones: one column, the choices first and compact. Wide screens: two columns with a hairline
   between, the whole page about 960 px wide (the header follows). */

.is-split {
	--plain-width: 60rem;
}

.start-split {
	display: grid;
	gap: 2.25rem;
}

.split-label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.split-note {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--muted);
}

@media (min-width: 900px) {
	.start-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		margin-top: 0.5rem;
	}

	.split-choices {
		padding: 0.5rem 3.5rem 0 0;
	}

	.split-form {
		padding-left: 3.5rem;
		border-left: 1px solid var(--line);
	}
}

.summary {
	margin: 0.75rem 0 0;
	border-top: 1px solid var(--line);
}

.summary > div {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--line);
}

.summary dt {
	font-size: 0.8125rem;
	color: var(--muted);
}

.summary dd {
	margin: 0;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* what each invoice comes to, under how often (prices shown only) */
.summary-detail {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.summary-edit .link-button {
	min-height: 2.75rem;
	padding: 0 0.25rem;
	font-size: 0.875rem;
}

/* a discount code under "Your choices": a link, then the field with Apply beside it, then the
   code applied with Remove (start.js); the summary's code lines have no Edit link */
.summary > div {
	min-height: 2.75rem;
}

.offer {
	margin-top: 0.5rem;
}

.offer-toggle {
	min-height: 2.75rem;
	font-size: 0.9375rem;
}

.offer-box {
	margin-top: 0.25rem;
}

.offer-row {
	display: flex;
	gap: 0.5rem;
}

.offer-row input:not([type="checkbox"]):not([type="radio"]) {
	flex: 1;
	min-width: 0;
	letter-spacing: 0.04em;
}

.offer-apply {
	flex: none;
	min-height: 2.75rem;
}

.offer-applied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.75rem;
	min-height: 2.75rem;
	margin: 0;
	font-size: 0.9375rem;
}

.offer [hidden] {
	display: none;
}

.split-form .account-note:empty,
[data-account-messages]:empty {
	display: none;
}

.signed-in {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.start-account .field {
	margin-top: 0;
}

.password {
	position: relative;
}

.field .password input:not([type="checkbox"]):not([type="radio"]) {
	padding-right: 4.5rem;
}

.eye {
	position: absolute;
	top: 50%;
	right: 0.25rem;
	transform: translateY(-50%);
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--petrol);
	font: 600 0.875rem var(--sans);
	cursor: pointer;
}

/* the password's rules, one per line; the one the browser can check gets a drawn state mark (an
   empty ring, then a tick) instead of a typed glyph */
.password-rule {
	list-style: none;
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--muted);
}

.password-rule li[data-rule] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.password-rule li[data-rule]::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.password-rule .is-met {
	color: var(--ok);
}

.password-rule li[data-rule].is-met::before {
	width: 0.375rem;
	height: 0.6875rem;
	margin: 0 0.1875rem 0.125rem;
	border-width: 0 1.5px 1.5px 0;
	border-radius: 0;
	transform: rotate(45deg);
}

.terms {
	margin: 0;
}

.field input.code {
	font: 600 1.375rem var(--sans);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.3em;
	text-align: center;
}

/* the code screen's first line reads as its subtitle */
.start-step[data-screen="verify"] > p:first-child {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.verify-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-top: 1rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.link-button:disabled {
	color: var(--muted);
	text-decoration: none;
	cursor: default;
}

.start-aside-link {
	margin-top: 1rem;
}

/* -- Continue: looks disabled until the screen is complete (pressing it says what's missing) ---- */

.step-actions {
	margin-top: 1.5rem;
}

.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
	background: #e3ebed;
	color: #46525b;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.btn:disabled {
	opacity: 0.8;
	cursor: progress;
	transform: none;
}

/* on phones Continue stays at the bottom of the screen, clear of the focused field */
@media (max-width: 639.98px) {
	html:has(body.start-page) {
		scroll-padding-bottom: 6rem;
	}

	body.start-page {
		padding-bottom: 5rem;
	}

	.start-page .step-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		margin: 0;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--paper);
		border-top: 1px solid var(--line);
	}
}

.start-aside {
	display: grid;
	gap: 0.375rem;
	max-width: 27.5rem;
	margin: 1.25rem auto 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--muted);
}

.start-aside p + p {
	margin-top: 0;
}

/* -- "Create my workspace": the button becomes the bar ------------------------------------------
   While its request runs the button squashes into a slim petrol bar in its own box (so nothing
   moves), with what is happening above it ("Sending your code to …", "Creating your workspace…")
   and, after 8 seconds, "Still working…". An error turns it back into the button. Transforms and
   opacity only; with reduced motion the two simply swap and the bar stands still. */

.morph {
	position: relative;
}

.morph-work {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.morph-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--ink-2);
}

/* a long address shortens with an ellipsis rather than wrapping out of the box */
.morph-caption {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Still working…" takes no room until it shows (then the caption gives way with its ellipsis) */
.morph-slow {
	display: none;
	flex: none;
	color: var(--muted);
}

.morph.is-slow .morph-slow {
	display: inline;
}

/* the setting-up bar's own track (.progress), so the two read as one bar */
.morph-bar {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: var(--mist);
	overflow: hidden;
}

/* still: an even petrol band says "working" without claiming how far */
.morph-bar span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--petrol);
	opacity: 0.35;
}

.morph.is-working .morph-button {
	opacity: 0;
	transform: scaleY(0.18);
}

.morph.is-working .morph-button:focus-visible {
	outline-color: transparent;
}

.morph.is-working .morph-label {
	opacity: 0;
}

.morph.is-working .morph-work {
	visibility: visible;
	opacity: 1;
}

/* the page becoming /setting-up: what folds away, and the grounds and rules that go with it */
.is-folding {
	opacity: 0;
	transform: translateY(-6px);
}

.is-clearing {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.morph.is-handing .morph-line > *,
.morph.is-handing .morph-bar span {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	/* squash to the bar's line (its centre, 9 px up from the foot), then cross into the bar */
	.morph-button {
		transform-origin: 50% calc(100% - 9px);
		transition:
			transform 0.26s var(--ease) 0.06s,
			opacity 0.12s linear,
			background-color 0.16s var(--ease);
	}

	.morph.is-working .morph-button {
		transition:
			transform 0.24s var(--ease) 0.06s,
			opacity 0.14s linear 0.22s;
	}

	.morph-label {
		transition: opacity 0.12s linear 0.2s;
	}

	.morph.is-working .morph-label {
		transition: opacity 0.08s linear;
	}

	.morph-work {
		transition:
			opacity 0.12s linear,
			visibility 0s linear 0.12s;
	}

	.morph.is-working .morph-work {
		transition:
			opacity 0.2s linear 0.2s,
			visibility 0s;
	}

	.morph.is-working .morph-line {
		animation: morph-line-in 0.3s var(--ease) 0.22s both;
	}

	/* moving: a short petrol run crosses the track, again and again, until the answer comes */
	.morph-bar span {
		right: auto;
		width: 38%;
		opacity: 1;
		transform: translateX(-100%);
	}

	.morph.is-working .morph-bar span {
		animation: morph-sweep 1.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
	}

	.morph.is-slow .morph-slow {
		animation: morph-slow-in 0.4s var(--ease) both;
	}

	/* folding is an even fade, not the site's quick-out ease: it reads as the page settling */
	.is-folding {
		transition:
			opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.is-clearing {
		transition:
			background-color 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			border-color 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.26s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.morph.is-handing .morph-line > *,
	.morph.is-handing .morph-bar span {
		transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

@keyframes morph-sweep {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(265%);
	}
}

@keyframes morph-line-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@keyframes morph-slow-in {
	from {
		opacity: 0;
	}
}

/* -- the setting-up screen ----------------------------------------------------------------------- */

.setting-up .address {
	margin-top: 0.375rem;
	font: 400 0.9375rem var(--sans);
	color: var(--muted);
	overflow-wrap: anywhere;
}

.setting-up .progress {
	margin-top: 1.75rem;
}

.setting-up .progress {
	position: relative;
}

.setting-up .progress span {
	transition: transform 0.9s linear;
}

/* while the setup runs, a faint petrol sheen crosses the track ahead of the fill: activity, never
   progress (the fill alone says how far) */
@media (prefers-reduced-motion: no-preference) {
	.setting-up .progress.is-live::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 40%;
		background: linear-gradient(
			90deg,
			rgb(43 84 96 / 0),
			rgb(43 84 96 / 0.16),
			rgb(43 84 96 / 0)
		);
		transform: translateX(-100%);
		animation: progress-sheen 2.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
	}
}

@keyframes progress-sheen {
	to {
		transform: translateX(250%);
	}
}

.setup-label {
	margin-top: 0.75rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.setup-open {
	margin-top: 1.25rem;
}

.setup-slow {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--petrol-mid);
}

.tip {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius);
	background: var(--mist);
}

.tip-icon {
	flex: none;
	margin-top: 0.1875rem;
	color: var(--petrol);
}

.tip-text {
	flex: 1;
	font-size: 0.9375rem;
	line-height: 1.55;
	transition: opacity 0.2s var(--ease);
}

.tip-text.is-changing {
	opacity: 0;
}

.tip .link-button {
	flex: none;
	min-height: 2.75rem;
	margin: -0.625rem -0.25rem -0.625rem 0;
	padding: 0 0.25rem;
	font-size: 0.8125rem;
}

.setup-close {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.setup-failed {
	margin-top: 1.5rem;
}

/* focus moves here when a setup stops, for screen readers; no ring around the whole message */
.setup-failed:focus {
	outline: none;
}

.setup-failed .setup-label {
	margin-top: 0;
}

.setup-failed p + p,
.setup-failed .btn {
	margin-top: 1rem;
}

.setup-failed .mono {
	overflow-wrap: anywhere;
}

/* the heading takes the focus when the page opens (and on /start when it becomes this page) */
.setting-up > h1:focus {
	outline: none;
}

/* Arriving from /start, which became this page's top before it came here: the mark, the heading, the
   address, the bar and its label meet in place (a cross-document view transition where the browser
   has one; site.css opts every site page in), and everything else fades in under them (in every
   browser, so it looks the same where there is no transition, Firefox included). */
@media (prefers-reduced-motion: no-preference) {
	.setting-up-page .plain-header .plain-mark {
		view-transition-name: site-mark;
	}

	.setting-up-page .setting-up > h1 {
		view-transition-name: setup-heading;
	}

	.setting-up-page .setting-up > .address {
		view-transition-name: setup-address;
	}

	.setting-up-page .setting-up .progress {
		view-transition-name: setup-bar;
	}

	.setting-up-page .setting-up :is([data-label], [data-setup-label]) {
		view-transition-name: setup-label;
	}

	.setting-up-page .setting-up .tip,
	.setting-up-page .setup-close,
	.setting-up-page .plain-footer {
		animation: setup-rest-in 0.45s var(--ease) 0.15s both;
	}

	/* the same pixels on both pages: no cross-fade (it would dim them for a moment), just the new */
	::view-transition-old(site-mark),
	::view-transition-old(setup-heading),
	::view-transition-old(setup-address),
	::view-transition-old(setup-bar) {
		animation: none;
		opacity: 0;
	}

	::view-transition-new(site-mark),
	::view-transition-new(setup-heading),
	::view-transition-new(setup-address),
	::view-transition-new(setup-bar) {
		animation: none;
	}
}

@keyframes setup-rest-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* -- motion ------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* the screen's pieces slide in, not the screen: a transform on it would carry the pinned
	   Continue bar along with it on phones (a transformed box holds its fixed children) */
	.start-step:not([hidden]) > :not(.step-actions) {
		animation: step-in 0.2s var(--ease);
	}

	.segments span {
		transition: background-color 0.3s var(--ease);
	}
}

@keyframes step-in {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
}

/* v2 (the revamp): the questions in the display face the home page opens with */
.start-page h1 {
	font-family: var(--display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* pieces that sit side by side are spaced, never joined by middle dots */
.address-value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
}

.signed-in .link-button,
[data-start-over-confirm] .link-button + .link-button {
	margin-left: 0.75rem;
}

.verify-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}