/* Vetmira marketing site.
 *
 * Plain CSS, no build step, no framework. The whole site is four HTML files and
 * this stylesheet, served straight off disk by Caddy, a marketing page that
 * needs a toolchain is a marketing page that stops getting edited.
 *
 * The palette is the product's own blue, so a practice that sees the site and
 * then sees the software is looking at the same thing.
 */

:root {
	--ink: #0f172a;
	--ink-soft: #475569;
	--ink-faint: #64748b;
	--line: #e2e8f0;
	--bg: #ffffff;
	--bg-soft: #f8fafc;
	--brand: #0284c7;
	--brand-dark: #0369a1;
	--brand-wash: #f0f9ff;
	--measure: 68ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	      "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--brand-dark); }

.wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

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

header {
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(8px);
	position: sticky;
	top: 0;
	z-index: 10;
}

.bar {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 66px;
}

/* The lockup, as a file rather than as type.
 *
 * It was set in the system font with a coloured second syllable, which is a
 * stand-in and reads as one: the letterforms changed between macOS and Windows,
 * and it did not match the mark anywhere else. The real thing is outlined Inter
 * Display, so it needs no font and cannot reflow.
 *
 * Sized by height. The intrinsic width follows the aspect ratio, so nothing has
 * to be kept in sync with the file, and the brand's 110px minimum for this
 * lockup is comfortably cleared at 30px tall (about 127px wide).
 */
.logo {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
	/* Focus lands on the link, and the link is now a picture: without this the
	   ring hugs the baseline of an inline box instead of the artwork. */
	line-height: 0;
}
.logo img {
	height: 30px;
	width: auto;
	display: block;
}

nav a {
	color: var(--ink-soft);
	text-decoration: none;
	font-size: 15px;
}
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

nav {
	display: flex;
	gap: 24px;
	align-items: center;
}

/* ---- type ------------------------------------------------------------ */

h1 {
	font-size: clamp(34px, 5.2vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 660;
	margin: 0 0 20px;
}

h2 {
	font-size: clamp(24px, 3vw, 31px);
	line-height: 1.2;
	letter-spacing: -0.022em;
	font-weight: 640;
	margin: 0 0 14px;
}

h3 {
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.012em;
	font-weight: 620;
	margin: 0 0 8px;
}

p { margin: 0 0 18px; max-width: var(--measure); }

.lead {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.55;
	color: var(--ink-soft);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 12.5px;
	font-weight: 640;
	color: var(--brand);
	margin: 0 0 14px;
}

/* ---- layout ---------------------------------------------------------- */

section { padding: 76px 0; }
section.tight { padding: 52px 0; }
section.soft { background: var(--bg-soft); border-block: 1px solid var(--line); }

.hero { padding: 88px 0 72px; }

.grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 40px;
}

.card {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 26px;
	background: var(--bg);
}
.card p:last-child { margin-bottom: 0; }
.card .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 8px;
	background: var(--brand-wash);
	color: var(--brand-dark);
	font-size: 14px;
	font-weight: 660;
	margin-bottom: 14px;
}

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

.btn {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	padding: 13px 24px;
	border-radius: 10px;
	border: 1px solid transparent;
}
.btn:hover { background: var(--brand-dark); }

.btn.ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.btn.ghost:hover { background: var(--bg-soft); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- the walkthrough ------------------------------------------------- */

.shot {
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
}
.shot img { display: block; width: 100%; height: auto; }

.steps { counter-reset: step; margin-top: 40px; display: grid; gap: 44px; }

.step {
	display: grid;
	gap: 26px;
	align-items: center;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.step:nth-child(even) .step-text { order: 2; }

.step-text .tag {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 640;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 10px;
}

/* ---- honest limits --------------------------------------------------- */

.limits {
	display: grid;
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	margin-top: 32px;
	max-width: var(--measure);
}
.limit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 20px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px;
}
.limit:last-child { border-bottom: 0; }
.limit dt { font-weight: 600; margin: 0; }
.limit dd { margin: 0; color: var(--ink-soft); }

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

footer {
	border-top: 1px solid var(--line);
	padding: 44px 0;
	color: var(--ink-faint);
	font-size: 15px;
}
footer .bar { height: auto; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer nav { flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 760px) {
	.step { grid-template-columns: 1fr; }
	.step:nth-child(even) .step-text { order: 0; }
	.limit { grid-template-columns: 1fr; gap: 4px; }
	nav { gap: 16px; }
	nav a.hide-sm { display: none; }
	section { padding: 56px 0; }
	.hero { padding: 60px 0 48px; }
}

/* The viewer's own preference wins. A clinic looking at this at 7am with the
   lights off should not be flashed. */
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e9eef5;
		--ink-soft: #a9b6c7;
		--ink-faint: #8b99ab;
		--line: #24303f;
		--bg: #0c131c;
		--bg-soft: #111a25;
		--brand: #38bdf8;
		--brand-dark: #7dd3fc;
		--brand-wash: #10263a;
	}
	header { background: rgba(12, 19, 28, 0.9); }
	.btn { color: #06202f; }
	.shot { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); }
}

/* ---- the walkthrough film -------------------------------------------- */

.film { margin: 36px 0 0; }
.film video {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #000;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
}
.film figcaption {
	margin-top: 12px;
	font-size: 15px;
	color: var(--ink-faint);
	max-width: var(--measure);
}
@media (prefers-color-scheme: dark) {
	.film video { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); }
}