/**
 * Our Next Step — onboarding flow.
 *
 * Every token below is taken from the live site so the flow is visually
 * continuous with the rest of the theme. No new fonts are loaded: Montserrat
 * and Poppins are already enqueued by the theme.
 */

.ons-onboarding {
	--ons-bg: #f9f8f6;
	--ons-surface: #ffffff;
	--ons-surface-sunken: #f4f3ef;
	--ons-ink: #28420f;
	--ons-ink-soft: #55634a;
	--ons-muted: #7f8a76;
	--ons-line: #e5e3dd;
	--ons-line-strong: #d3d0c7;
	--ons-accent: #3d5a1f;
	--ons-danger: #8f2f1d;
	--ons-danger-bg: #fbf2f0;

	--ons-font-body: Montserrat, sans-serif;
	--ons-font-display: Poppins, sans-serif;

	--ons-radius: 16px;
	--ons-radius-sm: 10px;
	--ons-pill: 9999px;

	--ons-shadow: 0 1px 2px rgba(40, 66, 15, .04), 0 12px 32px -12px rgba(40, 66, 15, .12);
}

/* ---------------------------------------------------------------- Layout - */

.ons-shell {
	background: var(--ons-bg);
	padding: clamp(28px, 5vw, 72px) 20px clamp(48px, 7vw, 96px);
}

.ons-card {
	max-width: 1120px;
	margin: 0 auto;
	background: var(--ons-surface);
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	box-shadow: var(--ons-shadow);
	overflow: hidden;
}

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

.ons-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px clamp(20px, 4vw, 40px);
	border-bottom: 1px solid var(--ons-line);
}

.ons-eyebrow {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ons-muted);
}

.ons-stepcount {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ons-ink-soft);
	white-space: nowrap;
}

.ons-stepcount__badge {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--ons-pill);
	background: var(--ons-ink);
	color: var(--ons-surface);
	font-size: 12px;
	letter-spacing: 0;
}

/* --------------------------------------------------------- Progress rail - */

.ons-progress {
	padding: 26px clamp(20px, 4vw, 40px) 22px;
	border-bottom: 1px solid var(--ons-line);
	background: linear-gradient(180deg, #fdfdfc, var(--ons-surface));
}

.ons-progress__list {
	display: grid;
	/* One equal column per step, however many steps the journey has. */
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ons-progress__item {
	position: relative;
	min-width: 0;
}

/* Wrapper is an <a> for steps the member may open, a <span> otherwise. */
.ons-progress__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
	min-width: 0;
	padding: 4px 2px;
	border-radius: var(--ons-radius-sm);
	text-decoration: none;
	color: inherit;
}

a.ons-progress__link {
	cursor: pointer;
}

a.ons-progress__link:hover .ons-progress__dot,
a.ons-progress__link:focus-visible .ons-progress__dot {
	border-color: var(--ons-ink);
	color: var(--ons-ink);
}

.ons-progress__item.is-done a.ons-progress__link:hover .ons-progress__dot {
	background: var(--ons-ink);
	border-color: var(--ons-ink);
	color: #fff;
}

a.ons-progress__link:hover .ons-progress__label,
a.ons-progress__link:focus-visible .ons-progress__label {
	color: var(--ons-ink);
}

a.ons-progress__link:focus-visible {
	outline: 2px solid var(--ons-accent);
	outline-offset: 2px;
}

/* Steps still ahead of the member are inert, and look it. */
.ons-progress__link.is-locked {
	cursor: default;
}

/* Connector line, drawn between dots only. */
.ons-progress__item::before {
	content: "";
	position: absolute;
	top: 13px;
	right: 50%;
	left: -50%;
	height: 1px;
	background: var(--ons-line-strong);
}

.ons-progress__item:first-child::before {
	display: none;
}

.ons-progress__item.is-done::before {
	background: var(--ons-accent);
}

.ons-progress__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: var(--ons-pill);
	border: 1px solid var(--ons-line-strong);
	background: var(--ons-surface);
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--ons-muted);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ons-progress__item.is-done .ons-progress__dot {
	background: var(--ons-accent);
	border-color: var(--ons-accent);
	color: #fff;
}

.ons-progress__item.is-current .ons-progress__dot {
	background: var(--ons-ink);
	border-color: var(--ons-ink);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(40, 66, 15, .1);
}

.ons-progress__label {
	font-family: var(--ons-font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.35;
	color: var(--ons-muted);
	overflow-wrap: anywhere;
}

.ons-progress__item.is-current .ons-progress__label {
	color: var(--ons-ink);
	font-weight: 600;
}

.ons-progress__item.is-done .ons-progress__label {
	color: var(--ons-ink-soft);
}

/* Compact bar shown on narrow screens instead of the full rail. */
.ons-progress__compact {
	display: none;
}

.ons-progress__track {
	height: 4px;
	border-radius: var(--ons-pill);
	background: var(--ons-line);
	overflow: hidden;
}

.ons-progress__fill {
	height: 100%;
	border-radius: var(--ons-pill);
	background: var(--ons-ink);
	transition: width .3s ease;
}

/* ----------------------------------------------------------- Card body - */

.ons-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
}

.ons-card__main {
	padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
	min-width: 0;
}

.ons-card__aside {
	position: relative;
	border-left: 1px solid var(--ons-line);
	background: var(--ons-surface-sunken);
	min-height: 420px;
	overflow: hidden;
}

.ons-card__aside svg,
.ons-card__aside img,
.ons-figure svg,
.ons-figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The same artwork used inline within a column rather than as a side panel. */
.ons-figure {
	position: relative;
	margin-top: 28px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	background: var(--ons-surface-sunken);
	overflow: hidden;
}

@supports not (aspect-ratio: 4 / 3) {
	.ons-figure {
		min-height: 260px;
	}
}

/* Single-column steps: informational screens with no side panel. */
.ons-card__body--single {
	grid-template-columns: 1fr;
}

.ons-center {
	max-width: 46ch;
	margin: 0 auto;
	padding: clamp(8px, 3vw, 32px) 0;
	text-align: center;
}

.ons-center .ons-lede {
	margin-bottom: 20px;
}

/* Circled step icon with a confirmation tick. */
.ons-badge {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin-bottom: 26px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-ink-soft);
}

.ons-badge__tick {
	position: absolute;
	top: 2px;
	right: 2px;
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: var(--ons-pill);
	border: 2px solid var(--ons-surface);
	background: var(--ons-accent);
	color: #fff;
}

.ons-address {
	display: block;
	margin-top: 6px;
	font-weight: 600;
	color: var(--ons-ink);
	overflow-wrap: anywhere;
}

.ons-body {
	margin: 0 0 26px;
	font-family: var(--ons-font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--ons-ink-soft);
}

.ons-actions {
	display: grid;
	justify-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.ons-actions .ons-btn {
	min-width: 260px;
}

.ons-resend {
	margin: 0;
}

.ons-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ons-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* The theme sets `button:hover { background: #3d5a1f }` globally, which paints a
   solid block behind these text links. Reset it explicitly on every state. */
.ons-linkbtn:hover,
.ons-linkbtn:focus,
.ons-linkbtn:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--ons-accent);
	text-decoration: underline;
}

.ons-linkbtn:focus-visible {
	outline: 2px solid var(--ons-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.ons-hint--center {
	display: block;
	text-align: center;
}

/* Centred forms on informational steps. */
.ons-form--center {
	max-width: 340px;
	margin: 0 auto;
	text-align: left;
}

.ons-label--left {
	display: block;
	text-align: left;
}

/* Dial code + number presented as one control. */
.ons-phone {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.ons-phone .ons-select {
	min-width: 0;
}

/* Single market: fixed dialling prefix sits inline with the number. */
.ons-phone--fixed {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}

.ons-phone__prefix {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ons-line-strong);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface-sunken);
	font-family: var(--ons-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ons-ink-soft);
	white-space: nowrap;
}

/* Six-digit code entry. */
.ons-input--code {
	text-align: center;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: .42em;
	text-indent: .42em;
	padding-top: 14px;
	padding-bottom: 14px;
}

.ons-input--code::placeholder {
	letter-spacing: .3em;
	font-weight: 400;
}

.ons-sublinks {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.ons-sublinks form {
	margin: 0;
}

.ons-linkbtn--muted {
	font-weight: 500;
	color: var(--ons-muted);
	text-decoration-color: var(--ons-line-strong);
}

.ons-linkbtn--muted:hover,
.ons-linkbtn--muted:focus,
.ons-linkbtn--muted:active {
	background: none;
	color: var(--ons-ink-soft);
}

.ons-center .ons-alert {
	text-align: left;
}

/* ------------------------------------- Informational two-column steps - */

.ons-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.ons-split__intro {
	min-width: 0;
}

.ons-split__panel {
	min-width: 0;
	padding: clamp(20px, 2.6vw, 30px);
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	background: var(--ons-surface-sunken);
}

.ons-panel-title {
	margin: 0 0 18px;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ons-muted);
}

/* Icon + title + description rows, shared by steps 4 and 5. */
.ons-list {
	display: grid;
	gap: 18px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.ons-list__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.ons-list__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface);
	border: 1px solid var(--ons-line);
	color: var(--ons-ink-soft);
}

.ons-list__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.ons-list__title {
	font-family: var(--ons-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-list__text {
	font-family: var(--ons-font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ons-ink-soft);
}

/* Agreement checkbox. */
.ons-check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	cursor: pointer;
}

.ons-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ons-check__box {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-top: 1px;
	border: 1px solid var(--ons-line-strong);
	border-radius: 6px;
	background: var(--ons-surface);
	color: transparent;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ons-check input:checked + .ons-check__box {
	background: var(--ons-ink);
	border-color: var(--ons-ink);
	color: #fff;
}

.ons-check input:focus-visible + .ons-check__box {
	outline: 2px solid var(--ons-accent);
	outline-offset: 2px;
}

.ons-check__label {
	font-family: var(--ons-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ons-ink-soft);
}

.ons-check__label a {
	color: var(--ons-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Founder introduction. */
.ons-founder {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 24px;
}

.ons-founder__photo {
	width: 82px;
	height: 82px;
	flex: 0 0 auto;
	border-radius: var(--ons-pill);
	object-fit: cover;
	object-position: top center;
	background: var(--ons-surface-sunken);
}

.ons-founder__photo--initial {
	display: grid;
	place-items: center;
	font-family: var(--ons-font-display);
	font-size: 30px;
	font-weight: 600;
	color: var(--ons-ink-soft);
}

/* Matches the italic display treatment used in the site's hero. */
.ons-script {
	margin: 0;
	font-family: var(--ons-font-display);
	font-size: clamp(24px, 2.8vw, 32px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.15;
	color: var(--ons-ink);
}

.ons-prose {
	margin: 0 0 15px;
	font-family: var(--ons-font-body);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ons-ink-soft);
}

.ons-signature {
	margin: 18px 0 0;
	font-family: var(--ons-font-display);
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
	color: var(--ons-ink);
}

@media (max-width: 860px) {
	.ons-split {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ Typography - */

.ons-title {
	margin: 0 0 6px;
	font-family: var(--ons-font-display);
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--ons-ink);
}

.ons-lede {
	margin: 0 0 28px;
	font-family: var(--ons-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ons-ink-soft);
}

/* ---------------------------------------------------------------- Forms - */

.ons-form {
	display: grid;
	gap: 18px;
}

.ons-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ons-field {
	display: grid;
	/* Keep label and box at the top. Without this, a field beside one showing
	   an error stretches to match it and its input grows taller. */
	align-content: start;
	gap: 7px;
	min-width: 0;
}

.ons-label {
	font-family: var(--ons-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ons-ink-soft);
}

.ons-label__optional {
	font-weight: 400;
	color: var(--ons-muted);
	letter-spacing: 0;
}

.ons-input,
.ons-select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: var(--ons-font-body);
	font-size: 14px;
	color: var(--ons-ink);
	background: var(--ons-surface);
	border: 1px solid var(--ons-line-strong);
	border-radius: var(--ons-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ons-input::placeholder {
	color: #a8b0a0;
}

.ons-input:focus,
.ons-select:focus {
	outline: none;
	border-color: var(--ons-accent);
	box-shadow: 0 0 0 3px rgba(61, 90, 31, .12);
}

.ons-field.has-error .ons-input,
.ons-field.has-error .ons-select,
.ons-field.has-error .ons-dob {
	border-color: var(--ons-danger);
}

.ons-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355634a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

/* Password field with a reveal toggle. */
.ons-inputgroup {
	position: relative;
	display: block;
}

.ons-inputgroup .ons-input {
	padding-right: 46px;
}

.ons-reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--ons-pill);
	background: transparent;
	color: var(--ons-muted);
	cursor: pointer;
}

.ons-reveal:hover {
	color: var(--ons-ink);
	background: var(--ons-surface-sunken);
}

/* Date of birth: three selects presented as one control. */
.ons-dob {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr 1fr;
	align-items: center;
	border: 1px solid var(--ons-line-strong);
	border-radius: var(--ons-radius-sm);
	overflow: hidden;
	background: var(--ons-surface);
}

.ons-dob:focus-within {
	border-color: var(--ons-accent);
	box-shadow: 0 0 0 3px rgba(61, 90, 31, .12);
}

.ons-dob .ons-select {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
}

.ons-dob .ons-select + .ons-select {
	border-left: 1px solid var(--ons-line);
}

.ons-hint {
	font-family: var(--ons-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ons-muted);
}

.ons-error {
	font-family: var(--ons-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ons-danger);
}

/* --------------------------------------------------------------- Alerts - */

.ons-alert {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid rgba(143, 47, 29, .25);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-danger-bg);
	font-family: var(--ons-font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--ons-danger);
}

.ons-alert ul {
	margin: 0;
	padding-left: 18px;
}

.ons-alert li + li {
	margin-top: 4px;
}

/* Success variant. Declared after the base so it wins on source order — both
   selectors have the same specificity. */
.ons-alert--success {
	border-color: rgba(61, 90, 31, .3);
	background: #f2f5ec;
	color: var(--ons-accent);
}

/* -------------------------------------------------------------- Buttons - */

.ons-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--ons-pill);
	font-family: var(--ons-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.45;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	text-wrap: balance;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ons-btn--primary {
	width: 100%;
	background: var(--ons-ink);
	color: var(--ons-bg);
}

.ons-btn--primary:hover,
.ons-btn--primary:focus {
	background: var(--ons-accent);
	color: #fff;
}

.ons-btn--ghost {
	background: transparent;
	border-color: var(--ons-line-strong);
	color: var(--ons-ink);
}

.ons-btn--ghost:hover {
	border-color: var(--ons-ink);
	background: var(--ons-surface-sunken);
}

.ons-btn:focus-visible {
	outline: 2px solid var(--ons-accent);
	outline-offset: 2px;
}

.ons-formfoot {
	margin: 4px 0 0;
	font-family: var(--ons-font-body);
	font-size: 13px;
	color: var(--ons-ink-soft);
	text-align: center;
}

.ons-formfoot a {
	color: var(--ons-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------- Card footer - */

.ons-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px clamp(20px, 4vw, 40px);
	border-top: 1px solid var(--ons-line);
	background: var(--ons-surface-sunken);
}

.ons-privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--ons-muted);
	max-width: 62ch;
}

.ons-privacy svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--ons-ink-soft);
}

.ons-help {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 11.5px;
	color: var(--ons-muted);
	white-space: nowrap;
}

.ons-help a {
	color: var(--ons-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- Screen reader */

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

/* ----------------------------------------------------------- Breakpoints - */

@media (max-width: 900px) {
	.ons-card__body {
		grid-template-columns: 1fr;
	}

	.ons-card__aside {
		display: none;
	}
}

@media (max-width: 760px) {
	.ons-progress__list {
		display: none;
	}

	.ons-progress__compact {
		display: grid;
		gap: 10px;
	}

	.ons-progress__compact-label {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		font-family: var(--ons-font-body);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--ons-ink-soft);
	}

	.ons-card__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ons-card__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ons-help {
		white-space: normal;
	}
}

@media (max-width: 520px) {
	.ons-field-row {
		grid-template-columns: 1fr;
	}

	.ons-shell {
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ons-progress__dot,
	.ons-progress__fill,
	.ons-input,
	.ons-select,
	.ons-btn {
		transition: none;
	}
}

/* ------------------------------------------------- Step 6: about you - */

.ons-narrow {
	max-width: 560px;
	margin: 0 auto;
}

.ons-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ons-muted);
}

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

/* The four areas listed on the hub. */
.ons-areas {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.ons-areas__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface);
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.ons-areas__link:hover,
.ons-areas__link:focus-visible {
	border-color: var(--ons-ink);
	background: var(--ons-surface-sunken);
}

.ons-areas__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-ink-soft);
}

.ons-areas__item.is-done .ons-areas__icon {
	background: #eef2e6;
	color: var(--ons-accent);
}

.ons-areas__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ons-areas__title {
	font-family: var(--ons-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-areas__desc {
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	color: var(--ons-muted);
}

.ons-areas__meta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ons-muted);
}

.ons-areas__count {
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	white-space: nowrap;
}

.ons-areas__tick {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--ons-pill);
	background: var(--ons-accent);
	color: #fff;
}

.ons-areas__chevron {
	flex: 0 0 auto;
	color: var(--ons-line-strong);
}

.ons-areas__link:hover .ons-areas__chevron {
	color: var(--ons-ink);
}

.ons-btn--block {
	display: flex;
	width: 100%;
}

/* About you hub: the primary action, the skip beneath it, and a note. */
.ons-areas__actions {
	display: grid;
	gap: 10px;
}

.ons-areas__actions form {
	margin: 0;
}

.ons-areas__note {
	margin: 2px 0 0;
	text-align: center;
}

/* Marks the sections holding questions the client has set as Required. */
.ons-areas__required {
	padding: 3px 8px;
	border: 1px solid rgba(143, 47, 29, .25);
	border-radius: var(--ons-pill);
	background: var(--ons-danger-bg);
	font-family: var(--ons-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ons-danger);
	white-space: nowrap;
}

/* Free-text answers. */
.ons-textarea {
	min-height: 110px;
	resize: vertical;
	line-height: 1.6;
}

/* Multiple-select answers. */
.ons-choices {
	display: grid;
	gap: 10px;
}

.ons-choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	cursor: pointer;
}

.ons-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ons-choice__box {
	width: 19px;
	height: 19px;
	border: 1px solid var(--ons-line-strong);
	border-radius: 5px;
	background: var(--ons-surface);
	transition: background-color .15s ease, border-color .15s ease;
}

.ons-choice input:checked + .ons-choice__box {
	background: var(--ons-ink);
	border-color: var(--ons-ink);
	box-shadow: inset 0 0 0 3px var(--ons-surface);
}

.ons-choice input:focus-visible + .ons-choice__box {
	outline: 2px solid var(--ons-accent);
	outline-offset: 2px;
}

.ons-choice__label {
	font-family: var(--ons-font-body);
	font-size: 13.5px;
	color: var(--ons-ink-soft);
}

/* ------------------------------------------------- Step 7: earn trust - */

.ons-trust {
	display: grid;
	gap: 2px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.ons-trust__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 13px 15px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface);
}

.ons-trust__item.is-done {
	border-color: rgba(61, 90, 31, .28);
	background: #f7faf3;
}

.ons-trust__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ons-trust__title {
	font-family: var(--ons-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-trust__text {
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	color: var(--ons-muted);
}

.ons-trust__pending {
	justify-self: start;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	font-family: var(--ons-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ons-ink-soft);
}

/* Empty circle until the item is complete, then a filled tick. */
.ons-trust__mark {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--ons-pill);
	border: 1px solid var(--ons-line-strong);
	background: var(--ons-surface);
	color: transparent;
}

.ons-trust__item.is-done .ons-trust__mark {
	border-color: var(--ons-accent);
	background: var(--ons-accent);
	color: #fff;
}

/* Current level badge. */
.ons-levelchip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 6px;
	padding: 7px 15px 7px 12px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	font-family: var(--ons-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ons-ink);
}

.ons-levelchip__dot {
	width: 9px;
	height: 9px;
	border-radius: var(--ons-pill);
	background: var(--ons-accent);
}

/* ------------------------------------------------ Step 8: first photo - */

.ons-guidance {
	display: grid;
	gap: 11px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ons-guidance__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	font-family: var(--ons-font-body);
	font-size: 13.5px;
	color: var(--ons-ink-soft);
}

.ons-guidance__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--ons-pill);
	background: var(--ons-accent);
}

.ons-upload {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 30px 20px;
	margin-bottom: 4px;
	border: 1px dashed var(--ons-line-strong);
	border-radius: var(--ons-radius);
	background: var(--ons-surface);
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease;
}

.ons-upload.is-dragover {
	border-color: var(--ons-accent);
	background: #f7faf3;
}

.ons-upload__icon {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-ink-soft);
}

.ons-upload__preview {
	width: 116px;
	height: 116px;
	border-radius: var(--ons-pill);
	object-fit: cover;
	background: var(--ons-surface-sunken);
}

.ons-upload__label {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ons-ink);
	overflow-wrap: anywhere;
}

.ons-upload__choose {
	cursor: pointer;
}

.ons-continue {
	margin: 14px 0 0;
	text-align: center;
}

/* ----------------------------------------------------- Front-end sign in - */

.ons-card--narrow {
	max-width: 880px;
}

.ons-loginrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: -2px 0 4px;
}

.ons-check--inline {
	grid-template-columns: auto auto;
	align-items: center;
}

.ons-check--inline .ons-check__label {
	font-size: 12.5px;
}

.ons-forgot {
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ons-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.ons-login-page .ons-card__aside {
	min-height: 380px;
}

/* Sign in, Forgotten password and Reset password share one card size.

   Left to itself the card is only as tall as its form, so the shorter
   forgotten-password screen produced a shorter card — and because the artwork
   is object-fit: cover, a shorter frame crops to a different part of the
   photograph. Fixing the height keeps the image identical across all three.

   Only applied where the artwork is actually on screen: below 900px the aside
   is hidden and the card should hug its content. */
@media (min-width: 901px) {
	.ons-login-page .ons-card__body {
		min-height: 520px;
	}

	/* With a fixed height the shorter forms need centring, or they sit at the
	   top of the card above a large empty gap. */
	.ons-login-page .ons-card__main {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ------------------------------------------------- Account area layout - */

/* Three columns of equal height, so the cards in the outer two finish level
   with the bottom of the panel in the middle rather than floating part-way
   down it. The cards themselves decide whether to grow or sit at the bottom. */
.ons-account__layout {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 260px;
	gap: 22px;
	max-width: 1180px;
	margin: 0 auto;
	align-items: stretch;
}

/* Left column: navigation at the top, Our Promise pushed to the bottom. */
.ons-account__side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.ons-account__side .ons-promisecard-wrap {
	margin-top: auto;
}

/* The closing cancellation screens drop the navigation and centre themselves. */
.ons-account__layout--solo {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
}

.ons-account__main {
	min-width: 0;
}

.ons-account__panel {
	overflow: visible;
}

.ons-account__body {
	padding: clamp(20px, 3vw, 30px);
}

/* Sidebar */
.ons-sidenav {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	background: var(--ons-surface);
	box-shadow: var(--ons-shadow);
}

.ons-sidenav__link {
	display: block;
	padding: 10px 14px;
	border-radius: var(--ons-radius-sm);
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--ons-ink-soft);
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.ons-sidenav__link:hover {
	background: var(--ons-surface-sunken);
	color: var(--ons-ink);
}

.ons-sidenav__item.is-current .ons-sidenav__link {
	background: var(--ons-ink);
	color: #fff;
	font-weight: 600;
}

/* Card grid */
.ons-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.ons-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface);
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.ons-tile:hover {
	border-color: var(--ons-ink);
	background: var(--ons-surface-sunken);
}

.ons-tile__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-ink-soft);
}

.ons-tile:hover .ons-tile__icon {
	background: var(--ons-surface);
}

.ons-tile__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.ons-tile__title {
	font-family: var(--ons-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-tile__text {
	font-family: var(--ons-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ons-muted);
}

/* Cancel block */
.ons-account__cancel {
	padding-top: 22px;
	border-top: 1px solid var(--ons-line);
}

.ons-account__cancel .ons-btn {
	margin-top: 14px;
	width: auto;
	min-width: 220px;
}

/* Promise card */
.ons-promisecard {
	padding: 20px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	background: var(--ons-surface);
	box-shadow: var(--ons-shadow);
}

.ons-promisecard__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-ink-soft);
}

.ons-promisecard__title {
	margin: 0 0 10px;
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-promisecard__list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ons-ink-soft);
}

/* ------------------------------------------- Cancellation journey - */

/* Label/value pairs: the membership summary and the cancellation review. */
.ons-summary {
	display: grid;
	gap: 0;
	margin: 0 0 26px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface-sunken);
}

.ons-summary__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: baseline;
	padding: 13px 16px;
	border-bottom: 1px solid var(--ons-line);
}

.ons-summary__row:last-child {
	border-bottom: 0;
}

.ons-summary dt {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	color: var(--ons-muted);
}

.ons-summary dd {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ons-ink);
	text-align: right;
}

/* Days left, given its own weight so it is impossible to miss. */
.ons-remaining {
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface);
	text-align: center;
}

.ons-remaining__label {
	margin: 0 0 4px;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ons-muted);
}

.ons-remaining__value {
	margin: 0;
	font-family: var(--ons-font-display);
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.1;
	color: var(--ons-ink);
}

.ons-panelnote {
	display: grid;
	gap: 8px;
	margin: 0 0 22px;
	padding: 16px;
	border-left: 3px solid var(--ons-accent);
	border-radius: 0 var(--ons-radius-sm) var(--ons-radius-sm) 0;
	background: var(--ons-surface-sunken);
}

.ons-panelnote .ons-hint {
	margin: 0;
}

/* The closing screen's dark "what happens next" panel. */
.ons-split__panel--dark {
	border-color: var(--ons-ink);
	background: var(--ons-ink);
}

.ons-split__panel--dark .ons-panel-title,
.ons-split__panel--dark .ons-list__text {
	color: rgba(255, 255, 255, .78);
}

.ons-split__panel--dark .ons-list__icon {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
}

.ons-split__panel--dark .ons-list {
	margin-bottom: 0;
}

@media (max-width: 1080px) {
	.ons-account__layout {
		grid-template-columns: 200px minmax(0, 1fr);
		align-items: start;
	}

	.ons-account__aside {
		grid-column: 1 / -1;
	}

}

@media (max-width: 720px) {
	.ons-account__layout {
		grid-template-columns: 1fr;
	}

	.ons-sidenav {
		display: flex;
		flex-wrap: wrap;
	}
}

/* Actionable follow-up inside an alert — the log-out link offered when a
   signed-in visitor submits the create-account form. */
.ons-alert__action {
	margin: 10px 0 0;
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 600;
}

.ons-alert__action a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------- Account level card - */

/* "Your level" — the trust checklist from step 7, kept visible in the account
   area so members can see where they stand and what would raise it. */

.ons-account__aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* The level card fills its column so it ends level with the panel beside it. */
.ons-levelcard {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius);
	background: var(--ons-surface);
	box-shadow: var(--ons-shadow);
}

/* With the card stretched, the call to action sits at its foot rather than
   leaving a gap beneath it. */
.ons-levelcard__cta,
.ons-levelcard__complete {
	margin-top: auto;
}

.ons-levelcard__eyebrow {
	margin: 0 0 6px;
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ons-muted);
}

.ons-levelcard__level {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-family: var(--ons-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-levelcard__dot {
	width: 9px;
	height: 9px;
	border-radius: var(--ons-pill);
	background: var(--ons-accent);
}

.ons-levelcard__blurb {
	margin: 0 0 16px;
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ons-ink-soft);
}

.ons-levelcard__meter {
	margin-bottom: 16px;
}

.ons-levelcard__track {
	height: 5px;
	border-radius: var(--ons-pill);
	background: var(--ons-line);
	overflow: hidden;
}

.ons-levelcard__fill {
	height: 100%;
	border-radius: var(--ons-pill);
	background: var(--ons-accent);
	transition: width .3s ease;
}

.ons-levelcard__count {
	margin: 7px 0 0;
	font-family: var(--ons-font-body);
	font-size: 11.5px;
	color: var(--ons-muted);
}

.ons-levellist {
	display: grid;
	gap: 2px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.ons-levellist__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 7px 8px;
	border-radius: var(--ons-radius-sm);
	text-decoration: none;
	color: inherit;
}

a.ons-levellist__link:hover,
a.ons-levellist__link:focus-visible {
	background: var(--ons-surface-sunken);
}

.ons-levellist__mark {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: var(--ons-pill);
	border: 1px solid var(--ons-line-strong);
	background: var(--ons-surface);
	color: transparent;
}

.ons-levellist__item.is-done .ons-levellist__mark {
	border-color: var(--ons-accent);
	background: var(--ons-accent);
	color: #fff;
}

.ons-levellist__body {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.ons-levellist__label {
	font-family: var(--ons-font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ons-ink);
}

.ons-levellist__item:not(.is-done) .ons-levellist__label {
	color: var(--ons-ink-soft);
	font-weight: 500;
}

.ons-levellist__optional {
	font-weight: 500;
	color: var(--ons-muted);
}

.ons-levellist__text {
	font-family: var(--ons-font-body);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--ons-muted);
}

.ons-levelcard__cta {
	width: 100%;
	font-size: 11px;
}

.ons-levelcard__complete {
	margin: 0;
	font-family: var(--ons-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ons-muted);
}

/* Kept at the end of the file so it overrides the level card's own rules
   above: once the three columns collapse there is nothing left to align to,
   and stretching would only leave the cards floating at the foot of a tall
   empty column. */
@media (max-width: 1080px) {
	.ons-account__side .ons-promisecard-wrap {
		margin-top: 0;
	}

	.ons-levelcard {
		flex: 0 0 auto;
	}

	.ons-levelcard__cta,
	.ons-levelcard__complete {
		margin-top: 0;
	}
}

/* Inline "(7 days)" beside the access-until date, and the date range printed
   under the day count on the review screen. */
.ons-summary__note {
	font-weight: 500;
	color: var(--ons-muted);
}

.ons-remaining__range {
	margin: 4px 0 0;
	font-family: var(--ons-font-body);
	font-size: 12px;
	color: var(--ons-muted);
}

.ons-alert__sep {
	margin: 0 8px;
	opacity: .5;
}

/* ---------------------------------------------------------- Pre-launch - */

.ons-prelaunch {
	margin: 0 0 26px;
}

.ons-prelaunch .ons-lede + .ons-lede {
	margin-top: 12px;
}

.ons-prelaunch__date {
	display: inline-block;
	margin: 18px 0 0;
	padding: 8px 16px;
	border-radius: var(--ons-pill);
	background: var(--ons-surface-sunken);
	color: var(--ons-accent);
	font-family: var(--ons-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
}

.ons-prelaunch__subhead {
	margin: 0 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--ons-line);
}

.ons-prelaunch-banner {
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid rgba(61, 90, 31, .3);
	border-radius: var(--ons-radius-sm);
	background: #f2f5ec;
}

.ons-prelaunch-banner .ons-tile__title {
	margin: 0 0 4px;
}

.ons-prelaunch-banner .ons-hint {
	margin: 0;
}

.ons-prelaunch-banner a {
	color: var(--ons-accent);
	font-weight: 600;
}

/* ------------------------------------------ Finish profile to activate - */

.ons-todo {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.ons-todo__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--ons-line);
	border-radius: var(--ons-radius-sm);
	background: var(--ons-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease;
}

.ons-todo__link:hover,
.ons-todo__link:focus-visible {
	border-color: var(--ons-line-strong);
}

.ons-todo__body {
	display: grid;
	flex: 1;
	gap: 2px;
}

.ons-todo__chevron {
	flex: none;
	color: var(--ons-muted);
}

/* ---------------------------------------------------------- Selfie check - */

/* "Works best on your phone": only for devices whose main pointer is a
   mouse or trackpad. Phones and tablets never match, so they never see it. */
.ons-selfie__computer {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.ons-selfie__computer {
		display: block;
	}
}

.ons-selfie__pose {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px dashed rgba(61, 90, 31, .45);
	border-radius: var(--ons-radius-sm);
	background: #f2f5ec;
	text-align: center;
}

.ons-selfie__pose-label {
	margin: 0 0 4px;
	color: var(--ons-muted);
	font-family: var(--ons-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ons-selfie__pose-text {
	margin: 0;
	color: var(--ons-accent);
	font-family: var(--ons-font-display);
	font-size: 17px;
	font-weight: 600;
}

.ons-trust__action {
	display: inline-block;
	margin-top: 4px;
	color: var(--ons-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Photo step: the upload button waits until a photo has been chosen. The
   class's own display rule would otherwise override the hidden attribute. */
.ons-btn[hidden] {
	display: none;
}

/* "3 of 10 required" and "0 of 10 answered" stay on one line each. */
.ons-areas__required,
.ons-areas__count {
	white-space: nowrap;
}

/* Hub cards on phones: three columns left the title a few letters wide and
   pushed the badge and count over it and off the card, especially with the
   phone's larger text setting. The badge and count move to their own line
   under the title, with the arrow kept on the right. */
@media (max-width: 600px) {
	.ons-areas__link {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 10px;
		padding: 14px 16px;
	}

	.ons-areas__icon {
		grid-row: 1 / span 2;
		align-self: start;
	}

	.ons-areas__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 10px;
		grid-column: 2;
		min-width: 0;
	}

	.ons-areas__chevron {
		margin-left: auto;
	}
}