/* ==========================================================================
   MediCall theme styles

   Shape rule for the whole site: buttons and nav links are pills,
   containers / cards / photos are 16px (24px for large frames), inputs 12px.
   One accent (the MediCall green) everywhere. Light and dark follow the OS.

   1. Fonts and tokens   2. Base   3. Type   4. Layout   5. Buttons and links
   6. Header   7. Hero   8. Photo band   9. Feature grid   10. How it works
   11. Privacy   12. FAQ   13. CTA band   14. Footer   15. Subpages
   16. Blog, prose, forms   17. Motion   18. Dark mode
   ========================================================================== */

/* 1. Fonts and tokens ----------------------------------------------------- */

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

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

@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-var-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

:root {
	color-scheme: light;

	--brand: #00a67a;        /* MediCall green: icons, highlights, large text */
	--brand-strong: #007a5a; /* buttons and links (AA with white text) */
	--brand-deep: #025a41;   /* the logo ring; hover state */
	--brand-light: #4ddbb0;  /* accents on dark surfaces */
	--brand-soft: #d6f5ea;   /* tinted containers */
	--brand-tint: #eef9f5;   /* tinted section bands */
	--on-brand: #ffffff;

	--ink: #16241f;
	--ink-2: #3f514a;
	--muted: #5b6b64;
	--line: #dfe7e3;
	--bg: #ffffff;
	--surface: #ffffff;
	--surface-2: #f4faf7;
	--night: #0b261c;        /* dark cells and panels */
	--band: #0b261c;         /* closing CTA band */
	--device-bezel: #132b22;

	--shadow: 0 12px 32px -8px rgba(2, 90, 65, 0.18);
	--shadow-lg: 0 32px 64px -24px rgba(2, 90, 65, 0.4);

	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
	--font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--section: clamp(28px, 3.5vw, 44px);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Base ----------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 92px;
}

body {
	margin: 0;
	font: 400 1rem/1.6 var(--font-body);
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--brand-strong);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--brand-deep);
}

button {
	font: inherit;
}

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

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

section[id],
.section[id] {
	scroll-margin-top: 84px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	background: var(--brand-strong);
	color: var(--on-brand);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	top: 12px;
	color: var(--on-brand);
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: -0.25em;
}

/* 3. Type ----------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: balance;
}

h2 {
	font-size: 1.75rem;
}

h3 {
	font-size: 1.25rem;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

.display {
	font-size: clamp(2.5rem, 1.4rem + 3.4vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin-bottom: 0.45em;
}

.display-2 {
	font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.lead {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 44ch;
	text-wrap: pretty;
}

.section-title {
	max-width: 26ch;
	margin-bottom: clamp(16px, 2vw, 24px);
}

.section-foot {
	margin-top: clamp(20px, 3vw, 28px);
}

/* 4. Layout --------------------------------------------------------------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section {
	padding-block: var(--section);
}

.section-tight {
	padding-block: calc(var(--section) * 0.65);
}

.band-tint {
	background: var(--brand-tint);
}

/* 5. Buttons and links ---------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font: 600 1rem/1.2 var(--font-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 0.25s,
		color 0.25s,
		border-color 0.25s,
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

.btn .icon {
	width: 20px;
	height: 20px;
}

.btn:hover {
	transform: translateY(-1px);
}

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

.btn-primary {
	background: var(--brand-strong);
	color: var(--on-brand);
}

.btn-primary:hover {
	background: var(--brand-deep);
	color: var(--on-brand);
	box-shadow: var(--shadow);
}

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

.btn-ghost:hover {
	border-color: var(--brand-strong);
	color: var(--brand-strong);
}

.btn-lg {
	padding: 0.9rem 1.5rem;
	font-size: 1.0625rem;
}

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

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--brand-strong);
	text-decoration: none;
}

.link-arrow .icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--ease);
}

.link-arrow:hover {
	text-decoration: underline;
}

.link-arrow:hover .icon {
	transform: translateX(3px);
}

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

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	line-height: 1.4;
}

.checklist .icon {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--surface);
	color: var(--brand-strong);
	margin-top: 1px;
}

.checklist-lg {
	gap: 14px;
	margin-top: 16px;
	font-size: 1.0625rem;
}

.checklist-lg .icon {
	background: var(--brand-soft);
}

.inline-facts {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.inline-facts li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--ink-2);
}

.inline-facts .icon {
	width: 22px;
	height: 22px;
	color: var(--brand-strong);
}

.inline-facts-lg {
	gap: 14px 32px;
	font-size: 1.0625rem;
}

/* 6. Header --------------------------------------------------------------- */

.header-sentinel {
	position: absolute;
	top: 0;
	width: 1px;
	height: 1px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 84%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s;
}

.site-header.is-scrolled {
	border-color: var(--line);
}

.admin-bar .site-header {
	top: 32px;
}

.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 68px;
}

.brand,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.brand img,
.custom-logo-link img {
	display: block;
	height: 38px;
	width: auto;
}

.brand .logo-dark {
	display: none;
}

.site-nav {
	margin-left: auto;
}

.nav-list {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	color: var(--ink-2);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	color: var(--ink);
	background: var(--surface-2);
}

.header-cta {
	flex-shrink: 0;
}

.nav-toggle {
	display: none;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 899px) {
	.site-nav {
		position: absolute;
		left: calc(-1 * var(--gutter));
		right: calc(-1 * var(--gutter));
		top: 100%;
		margin: 0;
		padding: 8px var(--gutter) 16px;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
	}

	body.nav-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.nav-list {
		flex-direction: column;
		gap: 2px;
	}

	.nav-list a {
		display: block;
		padding: 12px 14px;
		font-size: 1.0625rem;
	}

	.header-cta {
		margin-left: auto;
		padding: 0.6rem 1rem;
		font-size: 0.95rem;
	}

	.nav-toggle {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid var(--line);
		background: var(--surface);
		color: var(--ink);
		cursor: pointer;
		flex-shrink: 0;
	}

	.nav-toggle .icon {
		width: 22px;
		height: 22px;
	}

	.nav-toggle .icon-x {
		display: none;
	}

	body.nav-open .nav-toggle .icon-menu-2 {
		display: none;
	}

	body.nav-open .nav-toggle .icon-x {
		display: block;
	}
}

@media (max-width: 560px) {
	.header-cta {
		display: none; /* the hero button is right below */
	}

	.nav-toggle {
		margin-left: auto;
	}

	.brand img,
	.custom-logo-link img {
		height: 32px;
	}
}

/* 7. Hero ----------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(60% 55% at 88% 12%, var(--brand-tint) 0%, transparent 70%);
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
	padding-block: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
}

.hero-copy .lead {
	margin-top: 4px;
}

.hero-visual {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1.08;
	margin-inline: auto;
}

.hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 76%;
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-device {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46%;
	max-width: 250px;
}

.device {
	margin: 0;
	border-radius: 34px;
	padding: 8px;
	background: var(--device-bezel);
	box-shadow: var(--shadow-lg);
}

.device img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 26px;
}

@media (max-width: 899px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero-visual {
		max-width: 440px;
		aspect-ratio: 1 / 1.02;
	}
}

/* 7b. Download strip ------------------------------------------------------ */

.download {
	padding-block:  0 clamp(16px, 3vw, 28px);
}

.download-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: clamp(20px, 3vw, 28px);
}

.download h2 {
	margin: 0;
	font-size: 1.25rem;
}

.store-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.btn-store .icon,
.btn-store .brand-logo {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.btn-store .brand-logo {
	border-radius: 4px; /* the App Store mark is a rounded square; keeps its corners soft at this size */
}

.inline-facts-stack {
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.desk .store-buttons {
	margin-top: 24px;
}

/* The Windows window is shown exactly as captured: native size, no panel, no frame. */
.desk-stage {
	display: grid;
	place-items: center;
}

.desk-shot {
	width: min(100%, 256px);
	height: auto;
}

.step-note {
	margin-top: 14px;
	max-width: 60ch;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.setup-body .store-buttons {
	margin-top: 4px;
}

/* 8. Photo band ----------------------------------------------------------- */

.band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 36vw, 440px);
	color: #fff;
}

.band-media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -1;
}

.band-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

.band-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 32, 23, 0.9) 0%, rgba(5, 32, 23, 0.62) 42%, rgba(5, 32, 23, 0.18) 100%);
}

.band-content {
	max-width: 640px;
	padding-block: clamp(28px, 4vw, 48px);
}

.band .display-2 {
	color: #fff;
}

.band-list {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	gap: 12px 36px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	font-weight: 600;
	font-size: 1.0625rem;
}

.band-list li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.band-list .icon {
	width: 24px;
	height: 24px;
	color: var(--brand-light);
}

@media (max-width: 640px) {
	.band-media::after {
		background: linear-gradient(180deg, rgba(5, 32, 23, 0.55) 0%, rgba(5, 32, 23, 0.9) 100%);
	}
}

/* 9. Feature grid --------------------------------------------------------- */

.bento {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"a a c"
		"b d e";
}

.cell-a { grid-area: a; }
.cell-b { grid-area: b; }
.cell-c { grid-area: c; }
.cell-d { grid-area: d; }
.cell-e { grid-area: e; }

.cell {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.cell:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.cell figure {
	margin: 0;
	overflow: hidden;
}

.cell figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--ease);
}

.cell:hover figure img {
	transform: scale(1.04);
}

.cell-body {
	padding: 20px 24px 24px;
}

.cell h3 {
	margin-bottom: 0.35rem;
	font-size: 1.2rem;
}

.cell p {
	color: var(--ink-2);
}

.cell-a figure {
	aspect-ratio: 16 / 9;
}

.cell-d figure {
	aspect-ratio: 4 / 3;
}

.cell-tint {
	background: var(--brand-soft);
	border-color: transparent;
}

.cell-dark {
	background: var(--night);
	border-color: transparent;
	color: #fff;
}

.cell-dark h3 {
	color: #fff;
}

.cell-dark p {
	color: rgba(255, 255, 255, 0.78);
}

.cell-screen {
	height: 380px;
	margin: auto 28px 0;
	padding: 6px 6px 0;
	border-radius: 28px 28px 0 0;
	background: #22433a;
}

.cell .cell-screen img {
	height: auto;
	object-fit: fill;
	object-position: top;
	border-radius: 22px 22px 0 0;
}

.cell:hover .cell-screen img {
	transform: none;
}

@media (max-width: 899px) {
	.bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"a a"
			"c b"
			"d e";
	}
}

@media (max-width: 599px) {
	.bento {
		grid-template-columns: 1fr;
		grid-template-areas: "a" "c" "b" "d" "e";
	}

	.cell-screen {
		height: 300px;
	}
}

/* 10. How it works -------------------------------------------------------- */

.how-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.how-intro {
	position: sticky;
	top: 96px;
}

.steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.steps::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 36px;
	bottom: 36px;
	width: 2px;
	background: var(--line);
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding-block: 12px;
}

.step-num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand-deep);
	font: 600 1.375rem/1 var(--font-display);
	box-shadow: 0 0 0 6px var(--bg);
}

.step h3 {
	margin: 14px 0 4px;
}

.step p {
	color: var(--ink-2);
}

.how-aside {
	margin: 20px 0 0 76px;
	padding: 18px 22px;
	border-radius: var(--radius);
	background: var(--surface-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.how-aside p {
	margin: 0;
	font-weight: 500;
}

@media (max-width: 899px) {
	.how-grid {
		grid-template-columns: 1fr;
	}

	.how-intro {
		position: static;
	}

	.how-aside {
		margin-left: 0;
	}
}

/* 11. Privacy ------------------------------------------------------------- */

.privacy-head {
	max-width: 56ch;
	margin-bottom: clamp(16px, 2vw, 24px);
}

.facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px clamp(24px, 4vw, 48px);
}

.facts li {
	padding-top: 18px;
	border-top: 2px solid var(--brand-soft);
}

.facts > li > .icon {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--brand-strong);
	margin-bottom: 10px;
}

.facts h3 {
	font-size: 1.125rem;
	margin-bottom: 4px;
}

.facts p {
	color: var(--ink-2);
}

@media (max-width: 599px) {
	.facts {
		grid-template-columns: 1fr;
	}
}

/* 12. FAQ ----------------------------------------------------------------- */

.faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(24px, 5vw, 64px);
	align-items: start;
}

.faq-intro {
	position: sticky;
	top: 96px;
}

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

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

.faq-item summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	font: 600 1.0625rem/1.35 var(--font-display);
	color: var(--ink);
}

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

.faq-item summary > span {
	flex: 1;
}

.faq-item summary:hover {
	color: var(--brand-strong);
}

.faq-item .chev {
	width: 22px;
	height: 22px;
	color: var(--brand-strong);
	transition: transform 0.3s var(--ease);
}

.faq-item[open] .chev {
	transform: rotate(180deg);
}

.faq-body {
	overflow: hidden;
}

.faq-body p {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--ink-2);
}

.faq-note {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--line);
}

.faq-note h3 {
	font-size: 1.05rem;
	margin-bottom: 4px;
}

.faq-note p {
	color: var(--ink-2);
	font-size: 0.95rem;
}

@media (max-width: 899px) {
	.faq-grid {
		grid-template-columns: 1fr;
	}

	.faq-intro {
		position: static;
	}
}

/* 13. CTA band ------------------------------------------------------------ */

.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--band);
	color: #fff;
	padding-block: clamp(40px, 5vw, 60px);
	text-align: center;
}

.cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: min(90vw, 760px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(0, 196, 142, 0.28), transparent 72%);
	pointer-events: none;
}

.cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
}

.cta-mark {
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	border-radius: 18px;
	filter: drop-shadow(0 0 22px rgba(0, 214, 154, 0.7));
}

.cta .display-2 {
	color: #fff;
}

.cta .lead {
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.cta .btn-primary {
	background: var(--brand);
	color: #06110d;
}

.cta .btn-primary:hover {
	background: var(--brand-light);
	color: #06110d;
}

.cta .btn-ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.32);
}

.cta .btn-ghost:hover {
	color: #fff;
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.cta .store-buttons {
	justify-content: center;
}

.cta-or {
	margin: 24px 0 8px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.95rem;
}

.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
}

.contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.contact-list a:hover {
	color: #fff;
	text-decoration: underline;
}

.contact-list .icon {
	width: 20px;
	height: 20px;
	color: var(--brand);
}

/* 14. Footer -------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--line);
	padding-block: clamp(24px, 4vw, 36px) 20px;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
}

.footer-brand .brand img,
.footer-brand .custom-logo-link img {
	height: 34px;
}

.footer-brand p {
	max-width: 38ch;
	margin: 14px 0 0;
}

.site-footer h2 {
	font-size: 0.95rem;
	margin: 0 0 10px;
}

.site-footer .nav-list {
	flex-direction: column;
	gap: 4px;
}

.site-footer .nav-list a {
	padding: 4px 0;
	border-radius: 4px;
	color: var(--ink-2);
}

.site-footer .nav-list a:hover {
	background: none;
	color: var(--ink);
	text-decoration: underline;
}

.footer-contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-2);
	text-decoration: none;
}

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

.footer-contact .icon {
	width: 18px;
	height: 18px;
	color: var(--brand-strong);
}

.footer-legal {
	margin-top:  20px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 0.875rem;
	color: var(--muted);
}

.footer-legal p {
	margin: 0;
}

@media (max-width: 720px) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 420px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* 15. Subpages ------------------------------------------------------------ */

.page-hero {
	padding-block: clamp(16px, 3vw, 32px) clamp(8px, 2vw, 16px);
}

.page-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 5vw, 56px);
	align-items: center;
}

.page-hero .display {
	margin-bottom: 0.3em;
}

.page-hero-media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	box-shadow: var(--shadow-lg);
}

.page-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
}

.split.is-reversed > .split-media {
	order: -1;
}

.device-stage {
	display: grid;
	justify-items: center;
	padding: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px) 0;
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	overflow: hidden;
	max-height: 520px;
}

.device-stage .device {
	width: min(100%, 250px);
	border-radius: 34px 34px 0 0;
	padding-bottom: 0;
}

.device-stage .device img {
	border-radius: 26px 26px 0 0;
}

.icon-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.icon-grid li {
	padding: 22px 22px 24px;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--line);
}

.icon-grid h3 {
	font-size: 1.1rem;
	margin-bottom: 4px;
}

.icon-grid p {
	color: var(--ink-2);
	font-size: 0.97rem;
}

.icon-badge {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--brand-soft);
	color: var(--brand-deep);
	margin-bottom: 14px;
}

.icon-badge .icon {
	width: 24px;
	height: 24px;
}

.panel-dark {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background: var(--night);
	color: #fff;
	overflow: hidden;
}

.panel-dark h2 {
	color: #fff;
}

.panel-dark .checklist .icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--brand-light);
}

.panel-note {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.95rem;
}

.panel-device {
	width: min(100%, 260px);
	justify-self: center;
	margin-bottom: -180px;
}

.audio-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px clamp(24px, 5vw, 64px);
	align-items: center;
}

.audio-row .display-2 {
	margin: 0;
}

.setup-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.setup-step {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px clamp(20px, 3vw, 32px);
	align-items: start;
	padding-block: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--line);
}

.setup-step.has-screen {
	grid-template-columns: 56px minmax(0, 1fr) 220px;
}

.setup-step h2 {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
	margin: 10px 0 6px;
}

.setup-body > p {
	color: var(--ink-2);
	max-width: 60ch;
}

.setup-screen {
	width: 220px;
	justify-self: end;
	max-height: 380px;
	overflow: hidden;
	padding-bottom: 0;
	border-radius: 34px 34px 0 0;
}

.setup-screen img {
	border-radius: 26px 26px 0 0;
}

.field-list {
	margin: 16px 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

.field-list div {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--surface-2);
}

.field-list dt {
	font-weight: 600;
}

.field-list dd {
	margin: 2px 0 0;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.perm-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
}

.perm-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ink-2);
	font-size: 0.97rem;
	line-height: 1.45;
}

.perm-list strong {
	display: block;
	color: var(--ink);
}

.perm-list .icon {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand-strong);
	margin-top: 2px;
}

.callout {
	margin-top: clamp(24px, 3vw, 36px);
	padding: 24px 28px;
	border-radius: var(--radius);
	background: var(--brand-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.callout h2 {
	font-size: 1.35rem;
	margin-bottom: 4px;
}

.callout p {
	margin: 0;
	color: var(--ink-2);
}

.contact-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.contact-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border-radius: var(--radius);
	background: var(--brand-soft);
	color: var(--ink);
	font-weight: 600;
	font-size: 1.125rem;
	text-decoration: none;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.contact-card:hover {
	color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.contact-card > .icon {
	width: 28px;
	height: 28px;
	color: var(--brand-deep);
}

.contact-card small {
	display: block;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--ink-2);
}

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

@media (max-width: 899px) {
	.page-hero-grid,
	.split,
	.audio-row {
		grid-template-columns: 1fr;
	}

	.page-hero-media {
		aspect-ratio: 16 / 9;
	}

	.split.is-reversed > .split-media {
		order: 0;
	}

	.device-stage {
		max-height: 420px;
	}

	.icon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.panel-dark {
		grid-template-columns: 1fr;
	}

	.panel-device {
		margin-bottom: -220px;
	}

	.setup-step.has-screen {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.setup-screen {
		grid-column: 2;
		justify-self: start;
	}
}

@media (max-width: 599px) {
	.icon-grid,
	.field-list,
	.perm-list,
	.contact-cards {
		grid-template-columns: 1fr;
	}
}

/* 16. Blog, prose, forms -------------------------------------------------- */

.prose {
	max-width: 72ch;
	padding-block:  8px 40px;
}

.prose h2 {
	font-size: 1.5rem;
	margin: 2.2em 0 0.5em;
	padding-top: 1em;
	border-top: 1px solid var(--line);
}

.prose h3 {
	font-size: 1.15rem;
	margin: 1.6em 0 0.4em;
}

.prose p,
.prose li {
	color: var(--ink-2);
}

.prose p {
	margin: 0 0 1em;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
	margin: 0 0 1em;
}

.prose li {
	margin: 0.4em 0;
}

.prose strong {
	color: var(--ink);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 0.95rem;
}

.prose th,
.prose td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.prose th {
	color: var(--muted);
	font-weight: 600;
}

.prose .note {
	margin: 18px 0;
	padding: 14px 16px;
	border-left: 3px solid var(--brand);
	border-radius: 0 10px 10px 0;
	background: var(--brand-tint);
	color: var(--ink-2);
}

.prose .sub {
	color: var(--muted);
	margin: -0.5em 0 2em;
}

.prose .fine-print {
	margin-top: 3em;
	padding-top: 1.25em;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.prose blockquote {
	margin: 1.5em 0;
	padding-left: 1.25em;
	border-left: 3px solid var(--brand-soft);
	font-style: italic;
}

.prose pre {
	overflow: auto;
	padding: 16px;
	border-radius: 12px;
	background: var(--surface-2);
}

.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin: 1em auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.9rem;
	color: var(--muted);
}

.page-links {
	margin-top: 2em;
}

.post-list {
	max-width: 72ch;
	padding-block:  8px 40px;
}

.post-summary {
	display: grid;
	gap: 16px 24px;
	padding-block: 24px;
	border-top: 1px solid var(--line);
}

.post-summary:has(.post-summary-thumb) {
	grid-template-columns: 200px minmax(0, 1fr);
}

.post-summary-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.post-summary h2 {
	font-size: 1.5rem;
	margin-bottom: 0.2em;
}

.post-summary h2 a {
	color: var(--ink);
	text-decoration: none;
}

.post-summary h2 a:hover {
	color: var(--brand-strong);
	text-decoration: underline;
}

.post-summary p {
	color: var(--ink-2);
}

.post-meta {
	color: var(--muted);
	font-size: 0.925rem;
}

.post-thumb {
	margin: 0 0 24px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 72ch;
	padding-block: 24px 48px;
}

.post-nav-next {
	margin-left: auto;
	text-align: right;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	text-decoration: none;
	color: var(--ink);
}

.page-numbers.current {
	background: var(--brand-soft);
	border-color: transparent;
}

.empty-state {
	padding-block: 24px;
	color: var(--ink-2);
}

.search-wrap {
	max-width: 480px;
}

.search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.search-field {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

.search-field::placeholder {
	color: var(--muted);
}

.comment-list {
	list-style: none;
	padding: 0;
}

/* 17. Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Reveal on scroll (JS adds .is-visible). Only when JS is running, so
	   content is never hidden if the script fails to load. */
	.js .reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
		transition-delay: calc(var(--d, 0) * 90ms);
	}

	.js .reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Entry sequence for content that is on screen at load. */
	.reveal-in {
		animation: rise 0.8s var(--ease) both;
		animation-delay: calc(var(--d, 0) * 110ms);
	}

	@keyframes rise {
		from {
			opacity: 0;
			transform: translateY(16px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* The app icon on the closing band breathes, like a status light. */
	.cta-mark {
		animation: glow 4s ease-in-out infinite;
	}

	@keyframes glow {
		0%,
		100% {
			filter: drop-shadow(0 0 16px rgba(0, 214, 154, 0.5));
		}

		50% {
			filter: drop-shadow(0 0 32px rgba(0, 214, 154, 0.95));
		}
	}

	/* Scroll-driven parallax: no JS, no scroll listener, runs on the compositor. */
	@supports (animation-timeline: view()) {
		.parallax-slow {
			animation: drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		@keyframes drift {
			from {
				transform: translateY(28px);
			}

			to {
				transform: translateY(-28px);
			}
		}

		.hero-device {
			animation: drift-up linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		@keyframes drift-up {
			from {
				transform: translateY(-12px);
			}

			to {
				transform: translateY(26px);
			}
		}

		.kenburns img {
			animation: kenburns linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		@keyframes kenburns {
			from {
				transform: scale(1.02) translateY(2%);
			}

			to {
				transform: scale(1.14) translateY(-3%);
			}
		}
	}
}

@media (prefers-reduced-transparency: reduce) {
	.site-header {
		background: var(--bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* 18. Dark mode ----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--brand: #22c993;
		--brand-strong: #22c993;
		--brand-deep: #4ddbb0;
		--brand-light: #4ddbb0;
		--brand-soft: #113d2e;
		--brand-tint: #0e1f19;
		--on-brand: #06110d;

		--ink: #e8f1ec;
		--ink-2: #b9cac1;
		--muted: #93a89e;
		--line: #203b30;
		--bg: #0a1612;
		--surface: #0e1d17;
		--surface-2: #122620;
		--night: #0f2e22;
		--band: #0c2a1f;
		--device-bezel: #223a31;

		--shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
		--shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.6);
	}

	.brand .logo-light {
		display: none;
	}

	.brand .logo-dark {
		display: block;
	}

	.hero {
		background: radial-gradient(60% 55% at 88% 12%, rgba(0, 166, 122, 0.14) 0%, transparent 70%);
	}

	.step-num {
		color: var(--brand-light);
	}

	.cell-screen {
		background: #2a4a40;
	}

	.cta::before {
		background: radial-gradient(closest-side, rgba(0, 196, 142, 0.2), transparent 72%);
	}

	.checklist .icon {
		background: var(--surface-2);
	}

	.checklist-lg .icon,
	.perm-list .icon {
		background: var(--brand-soft);
	}

	.prose .note {
		background: var(--surface-2);
	}
}

/* ==========================================================================
   19. Motion edition
   Pinned hero with the page sliding over it, drifting light, floating phone
   with cycling screens, cycling headline, ringing logo mark.
   Everything in here is off under prefers-reduced-motion.
   ========================================================================== */

.brand {
	gap: 6px;
}

.brand picture {
	display: inline-flex;
}

.brand-mark {
	transform-origin: 50% 55%;
}

.rotator {
	display: inline-block;
	position: relative;
	vertical-align: top;
	color: var(--brand-strong);
}

.rotator-word {
	display: inline-block;
}

.screens {
	position: relative;
}

.screens .screen-2 {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.over-hero {
	position: relative;
	z-index: 1;
	background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
	/* The hero stays put; the rest of the page slides over it as a rounded sheet. */
	.is-front .hero {
		position: sticky;
		top: 0;
		z-index: 0;
		isolation: isolate;
	}

	.is-front .over-hero {
		padding-top: 8px;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: 0 -24px 60px -28px rgba(2, 90, 65, 0.35);
	}

	@supports (animation-timeline: scroll()) {
		.is-front .hero-grid {
			animation: hero-sink linear both;
			animation-timeline: scroll(root);
			animation-range: 0 90vh;
		}

		@keyframes hero-sink {
			to {
				transform: translateY(-40px) scale(0.94);
				opacity: 0.25;
			}
		}
	}

	/* Soft light drifting behind the hero. */
	.hero::before,
	.hero::after {
		content: "";
		position: absolute;
		z-index: -1;
		border-radius: 50%;
		pointer-events: none;
	}

	.hero::before {
		width: min(46vw, 640px);
		height: min(46vw, 640px);
		right: -10vw;
		top: -14vw;
		background: radial-gradient(closest-side, rgba(0, 166, 122, 0.16), transparent 70%);
		animation: blob-a 18s ease-in-out infinite alternate;
	}

	.hero::after {
		width: min(40vw, 560px);
		height: min(40vw, 560px);
		left: -12vw;
		bottom: -18vw;
		background: radial-gradient(closest-side, rgba(77, 219, 176, 0.16), transparent 70%);
		animation: blob-b 24s ease-in-out infinite alternate;
	}

	@keyframes blob-a {
		to {
			transform: translate(-70px, 50px) scale(1.15);
		}
	}

	@keyframes blob-b {
		to {
			transform: translate(60px, -50px) scale(1.1);
		}
	}

	/* The hero photo breathes. */
	.hero-photo img {
		animation: slow-zoom 24s ease-in-out infinite alternate;
	}

	@keyframes slow-zoom {
		to {
			transform: scale(1.08);
		}
	}

	/* The phone floats and gives a short ring once a cycle. */
	.device-live {
		animation: phone-live 8s ease-in-out infinite;
	}

	@keyframes phone-live {
		0% { transform: translateY(0) rotate(0); }
		25% { transform: translateY(-8px) rotate(0); }
		50% { transform: translateY(0) rotate(0); }
		52% { transform: translateY(-1px) rotate(-1.6deg); }
		54% { transform: translateY(-1px) rotate(1.6deg); }
		56% { transform: translateY(-1px) rotate(-1.2deg); }
		58% { transform: translateY(-1px) rotate(1.2deg); }
		60% { transform: translateY(0) rotate(0); }
		80% { transform: translateY(-8px) rotate(0); }
		100% { transform: translateY(0) rotate(0); }
	}

	/* The phone screen cycles between app views. */
	.screens .screen-2 {
		animation: screen-swap 10s ease-in-out infinite;
	}

	@keyframes screen-swap {
		0%, 42% { opacity: 0; }
		50%, 86% { opacity: 1; }
		94%, 100% { opacity: 0; }
	}

	/* Cycling headline words. */
	.rotator-word {
		transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
	}

	.rotator-word.is-out {
		transform: translateY(-0.5em);
		opacity: 0;
	}

	.rotator-word.is-in {
		transform: translateY(0.5em);
		opacity: 0;
		transition: none;
	}

	/* The logo handset rings on load and on hover. */
	.brand-mark.ring {
		animation: ring 1s ease-in-out;
	}

	@keyframes ring {
		0%, 100% { transform: rotate(0); }
		15% { transform: rotate(-12deg); }
		30% { transform: rotate(10deg); }
		45% { transform: rotate(-8deg); }
		60% { transform: rotate(6deg); }
		75% { transform: rotate(-3deg); }
	}

	/* The step connector draws itself in. */
	.steps.reveal::before {
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 1.4s var(--ease) 0.2s;
	}

	.steps.reveal.is-visible::before {
		transform: scaleY(1);
	}

	/* The app icon in the closing band bobs while it glows. */
	.cta-mark {
		animation: glow 4s ease-in-out infinite, bob 6s ease-in-out infinite;
	}

	@keyframes bob {
		50% {
			transform: translateY(-8px);
		}
	}

	/* Store logos spring under the pointer; the Windows window floats. */
	.btn-store .brand-logo {
		transition: transform 0.35s var(--ease);
	}

	.btn-store:hover .brand-logo {
		transform: scale(1.18) rotate(-8deg);
	}

	.desk-shot {
		animation: float-soft 7s ease-in-out infinite;
	}

	@keyframes float-soft {
		50% {
			transform: translateY(-6px);
		}
	}
}

/* NetLayers cloud above the logo in the footer, as on faxdirect.ca */
.footer-cloud {
	display: block;
	width: 150px;
	height: auto;
	margin-bottom: 14px;
}

.footer-cloud {
	margin: 20px 0 10px;
}

.footer-parent {
	display: inline-block;
	margin-bottom: 14px;
}

.footer-parent img {
	display: block;
	height: 22px;
	width: auto;
}

@media (max-width: 899px) {
	.band-list {
		grid-template-columns: repeat(2, max-content);
	}
}

@media (max-width: 420px) {
	.band-list {
		grid-template-columns: 1fr;
	}
}

/* The last audience entry sits on its own row, directly under "Labs". */
.band-list li:last-child {
	grid-column: 1 / -1;
}

/* Feature graphic at the foot of the "rings even when the screen is off" cell */
.cell-banner {
	margin: 20px 0 0;
	border-radius: 12px;
	overflow: hidden;
}

.cell-banner img {
	width: 100%;
	height: auto;
	display: block;
}

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

/* Contact bar above the header */
.topbar {
	background: var(--band);
	color: #fff;
	font-size: 0.875rem;
}

.topbar-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 36px;
}

.topbar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar a:first-child {
	border-left: 0;
}

.topbar a:hover {
	color: var(--brand-light);
}

.topbar .icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 560px) {
	.topbar a span {
		display: none;
	}

	.topbar a {
		padding: 9px 12px;
	}

	.topbar .icon {
		width: 18px;
		height: 18px;
	}
}

/* Feature graphic: pinned to the foot of its cell with more room above it, slightly smaller
   so the cell keeps its height */
.cell-banner {
	margin-top: auto;
	padding-top: 32px;
	width: 92%;
	margin-inline: auto;
}

/* EN / FR dropdown in the contact bar */
.lang {
	position: relative;
}

.lang summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px 6px 14px;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

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

.lang summary .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.25s var(--ease);
}

.lang[open] summary {
	background: rgba(255, 255, 255, 0.1);
}

.lang[open] summary .icon {
	transform: rotate(180deg);
}

.lang ul {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 60;
	min-width: 76px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
}

.topbar .lang li a {
	display: block;
	padding: 8px 16px;
	color: var(--ink);
	border-left: 0;
}

.topbar .lang li a:hover,
.topbar .lang li a[aria-current] {
	color: var(--ink);
	background: var(--surface-2);
}

/* Closing band: tighter */
.cta {
	padding-block: clamp(28px, 3.5vw, 40px);
}

.cta-mark {
	margin-bottom: 14px;
}

.cta .actions {
	margin-top: 18px;
}

.cta-or {
	margin: 16px 0 6px;
}

/* <picture> wrappers stay out of the layout; the <img> inside behaves as before */
picture {
	display: contents;
}