/*
 * Text Connects Shopify Store Diagnostic (public site).
 * Brand: textconnects.com (warm paper, ink, terracotta, Instrument Serif
 * headlines, Assistant body). The dark "screen" panels borrow from EV
 * instrument clusters. Mobile-first.
 */

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

@font-face {
	font-family: "Assistant";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/assets/assistant-700.woff2") format("woff2");
}

@font-face {
	font-family: "Instrument Serif";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("/assets/instrument-serif-400.woff2") format("woff2");
}

:root {
	--paper: #f8f5f0;
	--paper-2: #f1ece4;
	--card: #ffffff;
	--ink: #1c1c1c;
	--ink-soft: rgba(28, 28, 28, 0.72);
	--ink-faint: rgba(28, 28, 28, 0.5);
	--line: #e6dfd4;
	--terra: #c04623;
	--terra-dark: #a13a1c;
	--gold: #ebcb5e;

	/* Status colors on light backgrounds. */
	--good: #2f8a4c;
	--warn: #c28400;
	--bad: #c8372d;
	--unknown: #9a9690;

	/* The dark instrument screen. */
	--screen: #0d1823;
	--screen-2: #142636;
	--screen-line: rgba(255, 255, 255, 0.1);
	--screen-text: #e8eef3;
	--screen-muted: #8fa1b1;
	--lit-good: #43d17a;
	--lit-warn: #f6c544;
	--lit-bad: #ff5a4c;
	--lit-info: #7fb2e5;
	--lit-off: #3e4d5b;

	--radius: 6px;
	--sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	letter-spacing: 0.02em;
}

main {
	flex: 1;
}

[hidden] {
	display: none !important;
}

a {
	color: var(--ink);
}

.icon {
	display: inline-flex;
	flex: none;
	width: 24px;
	height: 24px;
}

.icon svg {
	width: 100%;
	height: 100%;
}

.eyebrow {
	margin: 0 0 14px;
	color: var(--ink-soft);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.eyebrow--light {
	color: rgba(255, 255, 255, 0.6);
}

.display {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border: 1px solid var(--terra);
	border-radius: var(--radius);
	background: var(--terra);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.button:hover {
	border-color: var(--terra-dark);
	background: var(--terra-dark);
}

.button--outline {
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
}

.button--outline:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: #ffffff;
}

/* ---------- Brand header and footer ---------- */

.brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.brand__home {
	display: flex;
	color: var(--ink);
}

.brand__logo {
	display: block;
	width: 150px;
	height: auto;
}

.brand__product {
	padding-left: 20px;
	border-left: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 14px;
}

.brand__cta {
	display: none;
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 14px;
	text-decoration: none;
}

.brand__cta:hover {
	color: var(--terra);
}

.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 20px;
	padding: 28px 20px;
	border-top: 1px solid var(--line);
	color: var(--ink-faint);
	font-size: 13px;
	text-align: center;
}

.foot__brand {
	display: flex;
	color: var(--ink);
}

.foot__brand .brand__logo {
	width: 110px;
}

/* ---------- 1. Home ---------- */

.home {
	max-width: 940px;
	margin: 0 auto;
	padding: 56px 20px 48px;
}

.home__title {
	max-width: 760px;
	font-size: clamp(46px, 9vw, 84px);
}

.home__lead {
	max-width: 560px;
	margin: 22px 0 34px;
	color: var(--ink-soft);
	font-size: 19px;
}

.start {
	max-width: 660px;
}

.start__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.start__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--card);
}

.start__row:focus-within {
	box-shadow: 0 0 0 3px rgba(192, 70, 35, 0.25);
}

.start__prefix {
	display: none;
	padding-left: 12px;
	color: var(--ink-faint);
	font-size: 18px;
}

.start__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 12px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 18px;
	outline: none;
}

.start__button {
	flex: 1 1 100%;
	font-size: 17px;
}

.start__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.recover {
	margin-top: 18px;
	color: var(--ink-soft);
	font-size: 15px;
}

.recover__toggle {
	display: inline;
	color: var(--terra);
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.recover__toggle::-webkit-details-marker {
	display: none;
}

.recover__form {
	max-width: 560px;
	margin-top: 12px;
}

.recover__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
}

.recover__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.recover__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--ink);
	font: inherit;
}

.recover__input:focus {
	box-shadow: 0 0 0 3px rgba(192, 70, 35, 0.25);
	outline: none;
}

.recover__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.recover__status {
	min-height: 1.4em;
	margin: 8px 0 0;
}

.start__error {
	margin: 12px 2px 0;
	color: var(--bad);
	font-weight: 700;
}

.checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin: 56px 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--line);
	list-style: none;
}

.checks__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px 18px;
	background: var(--card);
}

.checks__item:last-child,
.fault:last-child {
	grid-column: span 2;
}

.checks__icon {
	width: 28px;
	height: 28px;
	margin-bottom: 10px;
	color: var(--terra);
}

.checks__name {
	font-weight: 700;
}

.checks__blurb {
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- 2. Scan in progress: the dashboard in scanning mode (panel.css) ---------- */

.scan-retry {
	min-height: 44px;
	padding: 10px 20px;
}

/* ---------- 3. Results ---------- */

.results {
	max-width: 1160px;
	margin: 0 auto;
	padding: 36px 16px 24px;
}

.results__loading {
	padding: 80px 0;
	color: var(--ink-soft);
	text-align: center;
}

.rhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.rhead__title {
	font-size: clamp(44px, 8vw, 72px);
	word-break: break-word;
}

.rhead__meta {
	margin: 10px 0 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.section-title {
	margin: 44px 0 14px;
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.1;
}

/* ---------- Instrument panel: see panel.css (EV developer kit) ---------- */

.ev-panel {
	margin-bottom: 8px;
}

/* System check: cards in the kit's solid severity colors (no texture). */

.systems__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.fault {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 200px;
	padding: 18px 18px 16px;
	overflow: hidden;
	border-radius: 9px;
	background: var(--card-bg);
	color: #fff6ed;
	--card-bg: #34688b;
}

.fault--bad {
	--card-bg: #bd3435;
}

.fault--warn {
	--card-bg: #956619;
}

.fault--good {
	--card-bg: #3f7a58;
}

.fault--info {
	--card-bg: #34688b;
}

.fault--off {
	--card-bg: #58665e;
}

.fault__art {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	color: #fff6ed;
}

.fault__art svg {
	width: 100%;
	max-width: 200px;
	height: auto;
	max-height: 116px;
	stroke-width: 1.5;
}

.fault__body {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fault__icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: #fff6ed;
}

.fault__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fault__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.fault__sub {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.3;
	opacity: 0.92;
}

/* Stats */

.stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.stat {
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
}

.stat__value {
	font-family: var(--serif);
	font-size: 44px;
	line-height: 1.05;
}

.stat__label {
	color: var(--ink-soft);
	font-size: 14px;
}

/* Issues */

.issues__list {
	overflow: hidden;
}

.issue {
	border-bottom: 1px solid var(--line);
	--tone: var(--unknown);
}

.issue:last-child {
	border-bottom: 0;
}

.issue--critical,
.issue--major {
	--tone: var(--bad);
}

.issue--minor {
	--tone: var(--warn);
}

.issue__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	cursor: pointer;
	list-style: none;
}

.issue__summary::-webkit-details-marker {
	display: none;
}

.issue__summary:hover {
	background: var(--paper);
}

.issue__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tone);
}

.issue__system {
	color: var(--ink-faint);
}

.issue__title {
	flex: 1;
	min-width: 0;
	font-weight: 700;
}

.issue__severity {
	display: none;
	padding: 2px 10px;
	border: 1px solid color-mix(in srgb, var(--tone) 45%, white);
	border-radius: 999px;
	color: var(--tone);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.issue__chevron {
	width: 18px;
	height: 18px;
	color: var(--ink-faint);
	transition: transform 0.2s;
}

.issue[open] .issue__chevron {
	transform: rotate(90deg);
}

.issue__body {
	padding: 0 16px 16px 58px;
	color: var(--ink-soft);
	font-size: 15px;
}

.issue__body p {
	margin: 2px 0 8px;
	color: var(--ink);
}

.issue__fix-label {
	color: var(--ink-faint);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.issue__code {
	color: var(--ink-faint);
	font-size: 12px;
}

.issues__more {
	margin: 10px 4px 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.issues__clear {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
}

.issues__clear p {
	margin: 0;
	font-weight: 700;
}

.issues__clear-icon {
	width: 32px;
	height: 32px;
	color: var(--good);
}

/* Unlock card */

.unlock {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 32px;
	margin-top: 20px;
	padding: 28px 24px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--card);
}

.unlock__lock {
	width: 30px;
	height: 30px;
	margin-bottom: 12px;
	color: var(--terra);
}

.unlock__title {
	margin-bottom: 10px;
	font-size: clamp(34px, 5vw, 46px);
}

.unlock__lead {
	margin: 0;
	color: var(--ink-soft);
}

.unlock__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.unlock__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--ink);
	font: inherit;
}

.unlock__input:focus {
	box-shadow: 0 0 0 3px rgba(192, 70, 35, 0.25);
	outline: none;
}

.unlock__button {
	flex: 1 1 auto;
}

.unlock__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.unlock__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 15px;
	cursor: pointer;
}

.unlock__check input {
	width: 18px;
	height: 18px;
	accent-color: var(--terra);
}

.unlock__error {
	margin: 10px 0 0;
	color: var(--bad);
	font-weight: 700;
}

.unlock__note {
	margin: 10px 0 0;
	color: var(--ink-faint);
	font-size: 13px;
}

.unlock__note a {
	color: var(--ink-soft);
}

/* Made-up rows, blurred, to show what unlocking reveals. */
.unlock__preview {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	user-select: none;
}

.unlock__preview::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(248, 245, 240, 0) 40%, rgba(248, 245, 240, 0.9));
	content: "";
}

.unlock__preview-row {
	display: flex;
	flex-direction: column;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	filter: blur(4px);
}

.unlock__preview-main {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
}

.unlock__preview-sub {
	color: var(--ink-soft);
	font-size: 13px;
}

/* Export for AI */

.export {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-top: 32px;
	padding: 24px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--terra);
	border-radius: var(--radius);
	background: var(--card);
}

.export__text {
	flex: 1 1 380px;
}

.export__text .eyebrow {
	margin-bottom: 8px;
}

.export__title {
	margin: 0 0 6px;
	font-size: 20px;
}

.export__lead {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.export__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.export__actions .button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.export__status {
	flex-basis: 100%;
	min-height: 1.4em;
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.export__loading {
	margin: 0;
	color: var(--ink-soft);
}

.export__paid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Paid options */

.offers {
	flex-basis: 100%;
}

.offers__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.offer {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}

.offer--featured {
	border-color: var(--ink);
}

.offer__title {
	margin: 0;
	font-weight: 700;
}

.offer__price {
	margin: 4px 0 10px;
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1;
}

.offer__points {
	flex: 1;
	margin: 0 0 16px;
	padding-left: 18px;
	color: var(--ink-soft);
	font-size: 15px;
}

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

.offer__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.offers__email {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
	font-size: 15px;
}

.offers__email-label {
	color: var(--ink-soft);
}

.offers__email .unlock__input {
	flex: 1 1 240px;
	padding: 10px 12px;
}

.offers__note {
	margin: 10px 0 0;
	color: var(--ink-faint);
	font-size: 14px;
}

.offer-call {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 16px;
	padding: 18px 20px;
	border: 1px dashed var(--ink-faint);
	border-radius: var(--radius);
}

.offer-call__icon {
	width: 28px;
	height: 28px;
	color: var(--terra);
}

.offer-call__text {
	flex: 1 1 320px;
}

.offer-call__lead {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.offer-call__button {
	text-decoration: none;
}

/* Rescans and sign-in */

.rescan {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.rescan .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rescan__note {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.export__account,
.signin {
	flex-basis: 100%;
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.export__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--terra);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.signin summary {
	display: inline;
	list-style: none;
}

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

.unlock .signin {
	margin-top: 16px;
}

.signin__form {
	max-width: 520px;
	margin-top: 10px;
}

.signin__status {
	min-height: 1.4em;
	margin: 8px 0 0;
}

.notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left: 4px solid #3f7a58;
	border-radius: var(--radius);
	background: var(--card);
}

/* Detailed issues */

.issues__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
}

.issues__unlocked {
	color: var(--good);
	font-size: 14px;
	font-weight: 700;
}

.issue__detail {
	color: var(--ink);
	font-weight: 700;
}

.examples {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 6px 0 10px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--line);
	list-style: none;
}

.example {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	background: var(--paper);
	min-width: 0;
}

.example__main {
	color: var(--ink);
	font-weight: 700;
	word-break: break-word;
}

a.example__main,
a.example__sub {
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}

a.example__main:hover,
a.example__sub:hover {
	color: var(--terra);
}

.example__sub {
	color: var(--ink-soft);
	font-size: 14px;
	word-break: break-word;
}

.example__mono,
.example__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

.example__code {
	display: block;
	margin-top: 6px;
	padding: 8px 10px;
	overflow-x: auto;
	border-radius: 4px;
	background: #1c1c1c;
	color: #ffb4a6;
	white-space: pre;
}

.examples__more {
	margin: -4px 0 10px;
	color: var(--ink-soft);
	font-size: 14px;
}

/* Under the hood */

.hood__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.hood__card {
	padding: 18px 20px;
	min-width: 0;
}

.hood__title {
	margin: 0 0 12px;
	font-size: 17px;
}

.hood__list {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 16px;
	margin: 0;
}

.hood__list dt {
	color: var(--ink-soft);
}

.hood__list dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

.hood__empty,
.hood__note {
	margin: 0 0 12px;
	color: var(--ink-soft);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	padding: 4px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	font-size: 14px;
}

.trackers__wrap {
	overflow-x: auto;
}

.trackers {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.trackers th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-faint);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.trackers td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.trackers tr:last-child td {
	border-bottom: 0;
}

.trackers__name {
	font-weight: 700;
}

.trackers__cell--on {
	color: var(--bad);
	font-weight: 700;
}

.trackers__cell--fires {
	color: var(--ink);
}

.trackers__cell--off {
	color: var(--good);
}

.trackers__cell--na {
	color: var(--ink-faint);
}

/* Call to action and state messages */

.help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin-top: 44px;
	padding: 34px 28px;
	border-radius: var(--radius);
	background: var(--ink);
	color: #ffffff;
}

.help__text {
	flex: 1 1 380px;
}

.help__title {
	margin-bottom: 10px;
	font-size: clamp(32px, 5vw, 44px);
}

.help__text p:last-child {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 44px 24px;
	text-align: center;
}

.state__icon {
	width: 52px;
	height: 52px;
	color: var(--terra);
}

.state__title {
	margin: 16px 0 8px;
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
}

.state__text {
	max-width: 520px;
	margin: 0 0 24px;
	color: var(--ink-soft);
}

/* ---------- Wider screens ---------- */

@media (min-width: 640px) {
	.brand {
		padding: 20px 32px;
	}

	.brand__logo {
		width: 170px;
	}

	.brand__cta {
		display: inline;
	}

	.home {
		padding: 84px 32px 64px;
	}

	.start__prefix {
		display: inline;
	}

	.start__input {
		padding-left: 0;
	}

	.start__button {
		flex: none;
	}

	.checks {
		grid-template-columns: repeat(5, 1fr);
	}

	.checks__item:last-child,
	.fault:last-child {
		grid-column: auto;
	}

	.stats {
		grid-template-columns: repeat(4, 1fr);
	}

	.issue__severity {
		display: inline;
	}

	.systems__grid {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Three on top, two below, at tablet width. */
	.fault {
		grid-column: span 2;
	}

	.fault:nth-child(4),
	.fault:last-child {
		grid-column: span 3;
	}
}

@media (min-width: 960px) {
	.unlock {
		grid-template-columns: 1fr 1fr;
		padding: 36px;
	}

	.unlock__form {
		grid-column: 1;
	}

	.unlock__preview {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.hood__grid {
		grid-template-columns: 1fr 1fr;
	}

	.hood__card--wide {
		grid-column: 1 / -1;
	}

	.results {
		padding: 48px 32px 32px;
	}

	.systems__grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.fault,
	.fault:nth-child(4),
	.fault:last-child {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}