/*
Theme Name: Built By Micah
Theme URI: https://built-by-micah.com
Author: Built By Micah
Author URI: https://built-by-micah.com
Description: Dark-tech marketing theme for Built By Micah, a Wisconsin AI automation and web design studio. Fully editable from Appearance > Customize. No page builder, no paid plugins.
Version: 5.4.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: built-by-micah-v5
*/

/* =========================================================
   SOURCE: tokens.css
   ========================================================= */
:root {
	/* Dark grounds */
	--ink-900: #070c16;
	--ink-850: #0a1120;
	--ink-800: #0e1728;

	/* Brand */
	--navy: #1a2b4a;
	--navy-lift: #22375c;
	--gold: #c9a84c;
	--gold-hi: #e9cd85;
	--gold-deep: #a8862f;
	/* Small text on the light grounds. --gold-deep is 3.2:1 on cream, which is
	   fine for a 2px rule and a contrast failure for an 11px label. */
	--gold-ink: #7d6119;
	--cream: #faf7f2;
	--sand: #f0e9dd;

	/* Text */
	--ink: #13203a;
	--slate: #8b98ad;
	--slate-dim: #7a8598;  /* tertiary on DARK grounds, 5.1:1 on --ink-900 */
	--slate-ink: #5b6678;  /* secondary on CREAM grounds only; fails AA on dark */

	/* Lines */
	--line-cool: rgba(139, 152, 173, .14);
	--line-warm: #e3dccf;

	/* Type */
	--display: "Fraunces", Georgia, "Times New Roman", serif;
	--body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	/* Spacing */
	--s-1: .5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2rem;
	--s-6: 3rem;
	--s-8: 4rem;
	--s-12: 6rem;
	--s-16: 8rem;

	/* Shape: one radius system, 2px throughout, pills nowhere */
	--r: 2px;
	--r-lg: 5px;

	--ease: cubic-bezier(.2, .7, .3, 1);
	--wrap: 1220px;
}

/* =========================================================
   SOURCE: fonts.css
   Self-hosted, latin subset. No Google Fonts request, so the hero text
   does not wait on a third-party round trip.
   Deliberately four faces, not six: Fraunces 700 was carrying a single
   number and JetBrains 500 a tab state already marked by colour.
   ========================================================= */
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-600.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dmsans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dmsans-500.woff2") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("assets/fonts/jetbrains-400.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}

/* =========================================================
   SOURCE: base.css
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--ink-900);
	color: var(--cream);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -.022em;
	line-height: 1.06;
	margin: 0;
}

h1 { font-size: clamp(2.4rem, 4.9vw, 4.05rem); }
h2 { font-size: clamp(1.95rem, 3.5vw, 2.9rem); line-height: 1.1; }
h3 { font-size: 1.4rem; line-height: 1.2; }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: var(--r);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--gold);
	color: var(--ink-900);
	padding: .8rem 1.2rem;
	font-weight: 500;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* =========================================================
   SOURCE: components.css
   ========================================================= */
.wrap { width: min(var(--wrap), 90vw); margin-inline: auto; }
.wrap--narrow { width: min(760px, 90vw); margin-inline: auto; }

.section { padding: var(--s-12) 0; }
.section > .wrap > h2 { max-width: 26ch; }
.section--tall { padding: var(--s-16) 0; }

/* Grounds. The page is one dark theme; cream bands are a deliberate,
   repeated counter-ground, not a mid-page theme flip. */
.ground-dark { background: var(--ink-900); color: var(--cream); }
.ground-dark-alt { background: var(--ink-850); color: var(--cream); }
.ground-navy { background: var(--navy); color: var(--cream); }
.ground-cream { background: var(--cream); color: var(--ink); }
.ground-sand { background: var(--sand); color: var(--ink); }

/* Kicker. Replaces v4's pulsing dot: a rule and a label, no animation.
   Rationed to at most one per three sections. */
.kicker {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--slate);
	margin: 0 0 1.7rem;
}
.kicker::before {
	content: "";
	width: 38px;
	height: 1px;
	margin-top: .62em; /* aligns the rule to the first line, not the block centre */
	background: var(--gold);
	flex: none;
}
.ground-cream .kicker,
.ground-sand .kicker { color: var(--slate-ink); }
.ground-cream .kicker::before,
.ground-sand .kicker::before { background: var(--gold-deep); }

.lede {
	color: var(--slate);
	font-size: clamp(1rem, 1.2vw, 1.14rem);
	line-height: 1.68;
	max-width: 54ch;
}
.ground-cream .lede,
.ground-sand .lede { color: var(--slate-ink); }

/* Buttons. Gold fill on ink text passes AA; ghost gets a real border. */
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--body);
	font-weight: 500;
	font-size: .96rem;
	line-height: 1;
	white-space: nowrap;
	padding: 15px 27px;
	border: 1px solid transparent;
	border-radius: var(--r);
	text-decoration: none;
	cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease),
	            border-color .25s var(--ease), box-shadow .25s var(--ease),
	            transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--gold); color: var(--ink-900); }
.btn--primary:hover { background: var(--gold-hi); box-shadow: 0 14px 42px -12px rgba(201, 168, 76, .5); }

.btn--ghost { border-color: rgba(250, 247, 242, .22); color: var(--cream); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(201, 168, 76, .06); }

.ground-cream .btn--ghost,
.ground-sand .btn--ghost { border-color: var(--line-warm); color: var(--ink); }
.ground-cream .btn--ghost:hover,
.ground-sand .btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); background: rgba(201, 168, 76, .07); }

.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--navy); }

.btn--lg { padding: 17px 32px; font-size: 1rem; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; }
}

/* =========================================================
   SOURCE: header-footer.css
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(7, 12, 22, .82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line-cool);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	height: 70px;
}
.site-header__logo { display: flex; align-items: center; text-decoration: none; }
.site-header__logo img { max-height: 34px; width: auto; }
.site-header__logo-text {
	font-family: var(--display);
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--cream);
	letter-spacing: -.01em;
}

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a {
	font-size: .92rem;
	color: var(--slate);
	text-decoration: none;
	transition: color .2s var(--ease);
	white-space: nowrap;
}
.site-nav a:hover { color: var(--cream); }
.site-nav a[aria-current="page"] { color: var(--gold); }
/* .site-nav a wins on specificity over .btn--primary, which would leave the
   header CTA gold-on-gold. Restate the button colours at nav specificity. */
.site-nav a.btn { margin-left: .4rem; }
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover { color: var(--ink-900); }
.site-nav a.btn--ghost { color: var(--cream); }
.site-nav a.btn--ghost:hover { color: var(--gold); }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line-cool);
	border-radius: var(--r);
	color: var(--cream);
	width: 42px; height: 38px;
	cursor: pointer;
	position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 50%; translate: -50% 0;
	width: 17px; height: 1.5px;
	background: currentColor;
}
.nav-toggle span { top: 50%; margin-top: -.75px; }
.nav-toggle span::before { top: -5.5px; left: 0; translate: none; }
.nav-toggle span::after { top: 5.5px; left: 0; translate: none; }

@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.site-nav {
		position: fixed;
		inset: 70px 0 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--s-4) 5vw;
		background: var(--ink-900);
		border-top: 1px solid var(--line-cool);
		transform: translateX(100%);
		transition: transform .32s var(--ease);
		overflow-y: auto;
	}
	.site-nav.is-open { transform: none; }
	.site-nav a {
		width: 100%;
		padding: 1.05rem 0;
		font-size: 1.06rem;
		border-bottom: 1px solid var(--line-cool);
	}
	.site-nav .btn { margin: var(--s-3) 0 0; border-bottom: 0; width: auto; }
}

.site-footer {
	background: var(--ink-850);
	border-top: 1px solid var(--line-cool);
	padding: var(--s-8) 0 var(--s-6);
	color: var(--slate);
	font-size: .92rem;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--s-6);
}
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.site-footer h3 {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--slate-dim);
	font-weight: 500;
	margin-bottom: .9rem;
}
.site-footer a { color: var(--slate); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__legal { display: inline-block; margin-left: .9rem; }
.site-footer__legal a { color: var(--slate); text-decoration: none; }
.site-footer__legal a:hover { color: var(--gold); }
@media (max-width: 560px) { .site-footer__legal { display: block; margin: .6rem 0 0; } }

.site-footer__bottom {
	margin-top: var(--s-6);
	padding-top: var(--s-3);
	border-top: 1px solid var(--line-cool);
	font-size: .82rem;
	color: var(--slate-dim);
}

/* =========================================================
   SOURCE: home.css
   ========================================================= */

/* --- 1. Hero: asymmetric split ------------------------------------- */
.hero {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	padding: 5rem 0 var(--s-8);
	overflow: hidden;
	background: radial-gradient(115% 88% at 76% 44%, rgba(26, 43, 74, .82) 0%, var(--ink-900) 60%);
}
.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: .85;
	pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: 4.1rem;
	align-items: center;
}
.hero__accent { color: var(--gold); }
.hero__lede { margin-top: 1.4rem; max-width: 46ch; }
.hero .btn-row { margin-top: 2.3rem; }

@media (max-width: 920px) {
	.hero { min-height: auto; padding: var(--s-8) 0; }
	.hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Tri-tab demo */
.demo {
	background: linear-gradient(158deg, rgba(26, 43, 74, .6), rgba(10, 17, 32, .8));
	border: 1px solid rgba(201, 168, 76, .15);
	border-radius: var(--r-lg);
	backdrop-filter: blur(16px);
	box-shadow: 0 46px 100px -34px rgba(0, 0, 0, .95);
	overflow: hidden;
}
.demo__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-cool); }
.demo__tab {
	position: relative;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--slate-dim);
	padding: 17px 6px;
	transition: color .22s var(--ease), background .22s var(--ease);
}
.demo__tab:hover { color: var(--slate); }
.demo__tab[aria-selected="true"] { color: var(--gold); background: rgba(201, 168, 76, .055); }
.demo__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--gold);
}
.demo__panes { padding: 1.6rem; min-height: 302px; }
.pane[hidden] { display: none; }

.pane__meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--slate-dim);
	padding-bottom: .95rem;
	border-bottom: 1px solid var(--line-cool);
	margin-bottom: 1.2rem;
}
.pane__meta b { color: var(--gold); font-weight: 500; }

.bubble {
	max-width: 82%;
	padding: 13px 17px;
	border-radius: 14px;
	font-size: .93rem;
	line-height: 1.52;
	margin-bottom: 11px;
	opacity: 0;
	transform: translateY(12px);
}
.pane.on .bubble { animation: bubbleIn .55s var(--ease) forwards; }
/* nth-child, not nth-of-type: .pane__meta and .pane__stamp are also <p>,
   so nth-of-type counted them and played the thread out of order.
   Pane children are: 1 meta, 2 bubble, 3 bubble, 4 stamp, 5 bubble. */
.pane.on > .bubble:nth-child(2) { animation-delay: .15s; }
.pane.on > .bubble:nth-child(3) { animation-delay: 1.05s; }
.pane.on > .bubble:nth-child(5) { animation-delay: 2.1s; }
@keyframes bubbleIn { to { opacity: 1; transform: none; } }

.bubble--in { background: rgba(139, 152, 173, .13); color: var(--cream); border-bottom-left-radius: 4px; }
.bubble--out { background: var(--gold); color: var(--ink-900); margin-left: auto; border-bottom-right-radius: 4px; font-weight: 500; }

.pane__stamp {
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .08em;
	color: var(--gold);
	text-align: right;
	margin: -4px 0 13px;
	opacity: 0;
}
.pane.on > .pane__stamp { animation: bubbleIn .5s var(--ease) 1.65s forwards; }

@media (prefers-reduced-motion: reduce) {
	.bubble, .pane__stamp { opacity: 1; transform: none; animation: none; }
}

/* --- 2. The Machine: full-width centered pipeline -------------------- */
.machine { text-align: center; }
.machine h2 { max-width: 20ch; margin-inline: auto; }
.machine .lede { margin: 1.3rem auto 0; text-align: center; }
.machine__svg { width: 100%; max-width: 960px; margin: 3.2rem auto 0; display: block; }
.machine__track { stroke: rgba(139, 152, 173, .18); stroke-width: 1.5; fill: none; }
.machine__live { stroke: var(--gold); stroke-width: 2; fill: none; stroke-linecap: round; }
.machine__node circle { fill: var(--ink-800); stroke: rgba(139, 152, 173, .3); stroke-width: 1.5; }
.machine__node text {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	fill: var(--slate);
	text-anchor: middle;
}
.machine__node--hot circle { stroke: var(--gold); filter: drop-shadow(0 0 12px rgba(201, 168, 76, .5)); }
.machine__node--hot text { fill: var(--gold); }

/* --- 3. Automations: one divided panel, not three cards -------------- */
.system {
	margin-top: 0;
	border: 1px solid var(--line-warm);
	border-radius: var(--r-lg);
	background: #fff;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
}
.system__item {
	display: flex;
	flex-direction: column;
	padding: 2.2rem 1.9rem 1.9rem;
	border-right: 1px solid var(--line-warm);
	position: relative;
	transition: background .3s var(--ease);
}
.system__item:last-child { border-right: 0; }
.system__item:hover { background: var(--cream); }
.system__item::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--gold-deep);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ease);
}
.system__item:hover::before { transform: scaleX(1); }

.system__num {
	display: block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	color: var(--gold-ink);
	margin-bottom: 1rem;
}
.system__item h3 { color: var(--ink); }
.system__item p { color: var(--slate-ink); font-size: .96rem; line-height: 1.62; margin-top: .8rem; }
.system__price {
	margin-top: auto;
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--ink);
	padding-top: 1.1rem;
	border-top: 1px solid var(--line-warm);
}
.system__price span { color: var(--slate-ink); }

@media (max-width: 900px) {
	.system { grid-template-columns: 1fr; }
	.system__item { border-right: 0; border-bottom: 1px solid var(--line-warm); }
	.system__item:last-child { border-bottom: 0; }
}

/* The offer. Suite-first: this is the thing being sold, so it outranks the
   three components visually and carries the only price on the page. */
.offer {
	margin-top: 2.8rem;
	background: linear-gradient(140deg, var(--navy), var(--ink-850));
	color: var(--cream);
	border: 1px solid rgba(201, 168, 76, .28);
	border-radius: var(--r-lg);
	padding: 2.6rem 2.8rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2.4rem;
	align-items: center;
	box-shadow: 0 34px 70px -34px rgba(19, 32, 58, .55);
}
.offer__name {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1rem;
}
.offer__price {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.9rem, 3.2vw, 2.65rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--cream);
}
.offer__price span { display: block; color: var(--gold); }
.offer__text { color: var(--slate); line-height: 1.65; margin-top: 1.1rem; max-width: 46ch; }
.offer .btn { white-space: nowrap; }

@media (max-width: 780px) {
	.offer { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.9rem 1.6rem; }
}

.included {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--slate-ink);
	margin: 3rem 0 1.2rem;
}
.included::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--line-warm);
}

/* --- 4. Proof: stat band over an illustrative log --------------------- */
.proof { text-align: center; }
.proof__stat {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(3.4rem, 9vw, 6.6rem);
	line-height: .92;
	letter-spacing: -.035em;
	color: var(--gold);
	text-shadow: 0 0 90px rgba(201, 168, 76, .24);
}
.proof__caption { margin: 1.3rem auto 0; max-width: 46ch; text-align: center; }

.log {
	margin: 3rem auto 0;
	max-width: 720px;
	border: 1px solid var(--line-cool);
	border-radius: var(--r);
	background: rgba(7, 12, 22, .7);
	overflow: hidden;
	font-family: var(--mono);
	font-size: .78rem;
	text-align: left;
}
.log__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line-cool);
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--slate-dim);
}
.log__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 13px 18px;
	border-bottom: 1px solid rgba(139, 152, 173, .07);
	color: var(--slate);
}
.log__row:last-child { border-bottom: 0; }
.log__row b { color: var(--cream); font-weight: 400; }
.log__row--missed span { color: #e0685f; }
.log__row--handled { background: rgba(201, 168, 76, .055); }
.log__row--handled span { color: var(--gold); }
.log__note {
	margin-top: .9rem;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--slate-dim);
	text-align: center;
}

/* --- 5. Case studies: 2-up editorial --------------------------------- */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; margin-top: 3rem; }
@media (max-width: 860px) { .work { grid-template-columns: 1fr; } }

.work__item { display: flex; flex-direction: column; }
.work__media {
	aspect-ratio: 16 / 10;
	background: var(--sand);
	border: 1px solid var(--line-warm);
	border-radius: var(--r-lg);
	overflow: hidden;
	position: relative;
}
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work__item:hover .work__media img { transform: scale(1.03); }
.work__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-ink);
}
/* One real anchor per card, stretched over the whole card as the hit area.
   Keeps a single tab stop and one accessible name instead of nesting links. */
.work__item { position: relative; }
.work__item h3 { margin-top: 1.4rem; color: var(--ink); }
.work__item h3 a { color: inherit; text-decoration: none; }
.work__item h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work__item h3 a:hover { color: var(--gold-ink); }
.work__item:focus-within .work__media { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.work__item h3 a:focus-visible { outline: none; }
.work__visit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-top: 1.1rem;
}
.work__visit svg { width: 11px; height: 11px; flex: none; }
.work__item:hover .work__visit { gap: 11px; }
.work__visit { transition: gap .25s var(--ease); }
.work__item p { color: var(--slate-ink); margin-top: .6rem; font-size: .98rem; line-height: 1.6; }
.work__meta {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-ink);
	margin-top: .9rem;
}

/* --- 6. Websites teaser: inset navy band ------------------------------ */
.teaser {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 2.4rem 2.6rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--r-lg);
	background: linear-gradient(140deg, var(--navy), var(--ink-850));
}
.teaser h3 { color: var(--cream); }
.teaser p { color: var(--slate); margin-top: .55rem; max-width: 52ch; }

/* --- 7. FAQ: narrow single column ------------------------------------- */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--line-warm); }
.faq details { border-bottom: 1px solid var(--line-warm); }
.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 2.6rem 1.35rem 0;
	position: relative;
	font-family: var(--display);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	position: absolute;
	right: .5rem; top: 50%;
	width: 11px; height: 11px;
	border-right: 1.5px solid var(--gold-deep);
	border-bottom: 1.5px solid var(--gold-deep);
	translate: 0 -60%;
	rotate: 45deg;
	transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq p { color: var(--slate-ink); padding: 0 3rem 1.5rem 0; max-width: 68ch; }

/* --- 8. Final CTA ------------------------------------------------------ */
.cta { text-align: center; }
.cta h2 { max-width: 25ch; margin-inline: auto; }
.cta .lede { margin: 1.3rem auto 0; text-align: center; }
.cta .btn-row { margin-top: 2.2rem; }

/* =========================================================
   SOURCE: pages.css
   Inner pages: Systems, Websites, About, Contact.
   ========================================================= */

/* --- Inner-page hero: shorter than the home hero, same grammar ---------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding: var(--s-12) 0 var(--s-8);
	background: radial-gradient(120% 100% at 70% 0%, rgba(26, 43, 74, .8) 0%, var(--ink-900) 62%);
}
/* Inner pages sit a step below the home hero in scale, otherwise long
   headlines run to three lines and orphan a word. */
.page-hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.25rem); max-width: 21ch; }
.page-hero .lede { margin-top: 1.4rem; }
.page-hero .btn-row { margin-top: 2.1rem; }

/* --- Suite offer with a savings badge (Systems pricing) ----------------- */
.badge {
	display: inline-block;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-900);
	background: var(--gold);
	padding: 6px 12px;
	border-radius: var(--r);
	margin-bottom: 1.2rem;
}

/* --- A la carte table --------------------------------------------------- */
.ala { margin-top: 3.4rem; }
.ala h3 { color: inherit; }
.ala__note { margin-top: .7rem; }
.ala__table {
	margin-top: 1.6rem;
	border: 1px solid var(--line-warm);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #fff;
}
.ground-dark .ala__table,
.ground-dark-alt .ala__table { background: rgba(7, 12, 22, .5); border-color: var(--line-cool); }
.ala__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1.05rem 1.5rem;
	border-bottom: 1px solid var(--line-warm);
}
.ground-dark .ala__row,
.ground-dark-alt .ala__row { border-bottom-color: var(--line-cool); }
.ala__row:last-child { border-bottom: 0; }
.ala__row span { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.ala__row--total { background: var(--sand); font-weight: 500; }
.ground-dark .ala__row--total,
.ground-dark-alt .ala__row--total { background: rgba(139, 152, 173, .07); }

/* --- The three, in depth: stacked rows, not a card trio ----------------- */
.detail { margin-top: 3rem; border-top: 1px solid var(--line-cool); }
.ground-cream .detail { border-top-color: var(--line-warm); }
.detail__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 2.4rem;
	padding: 3rem 0;
	border-bottom: 1px solid var(--line-cool);
}
.ground-cream .detail__row { border-bottom-color: var(--line-warm); }
.detail__num {
	font-family: var(--mono);
	font-size: .8rem;
	letter-spacing: .16em;
	color: var(--gold);
	padding-top: .45rem;
}
.ground-cream .detail__num { color: var(--gold-deep); }
.detail__body p { margin-top: .9rem; line-height: 1.7; }
.detail__note {
	margin-top: 1.3rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--gold);
	color: var(--slate);
	font-size: .93rem;
}
.ground-cream .detail__note { border-left-color: var(--gold-deep); color: var(--slate-ink); }
.detail__stat {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(2.6rem, 6vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--gold);
	margin-top: 1.4rem;
}
@media (max-width: 720px) {
	.detail__row { grid-template-columns: 1fr; gap: .9rem; padding: 2.2rem 0; }
	.detail__num { padding-top: 0; }
}

/* --- Website plans: a featured tier, not three identical cards ---------- */
.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	margin-top: 3rem;
	align-items: start;
}
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

.plan {
	background: #fff;
	border: 1px solid var(--line-warm);
	border-radius: var(--r-lg);
	padding: 2.1rem 1.9rem;
	display: flex;
	flex-direction: column;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(19, 32, 58, .3); }
.plan__name {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--slate-ink);
}
.plan__amt {
	font-family: var(--display);
	font-weight: 600;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--ink);
	margin-top: 1rem;
}
.plan__per { font-family: var(--mono); font-size: .74rem; color: var(--slate-ink); margin-top: .5rem; }
.plan__desc { color: var(--slate-ink); font-size: .96rem; line-height: 1.62; margin-top: 1.2rem; }

/* The featured tier is a different object, so the row is not three clones. */
.plan--featured {
	background: var(--navy);
	border-color: var(--navy);
	position: relative;
	padding-block: 2.7rem;
}
.plan--featured .plan__name { color: var(--gold); }
.plan--featured .plan__amt { color: var(--cream); }
.plan--featured .plan__per,
.plan--featured .plan__desc { color: var(--slate); }
.plan__ribbon {
	position: absolute;
	top: 0;
	right: 1.6rem;
	transform: translateY(-50%);
	background: var(--gold);
	color: var(--ink-900);
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--r);
}

.addon {
	margin-top: 1.4rem;
	border: 1px dashed var(--line-warm);
	border-radius: var(--r-lg);
	padding: 1.7rem 1.9rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.6rem;
	flex-wrap: wrap;
}
.addon h3 { font-size: 1.18rem; color: var(--ink); }
.addon p { color: var(--slate-ink); font-size: .95rem; margin-top: .5rem; max-width: 58ch; }
.addon__amt { font-family: var(--mono); font-size: .86rem; color: var(--gold-ink); white-space: nowrap; }

/* --- Process: numbered rail, not three cards ---------------------------- */
.steps { margin-top: 2.8rem; display: grid; gap: 0; }
.step {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 1.6rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--line-warm);
}
.ground-dark .step, .ground-dark-alt .step { border-bottom-color: var(--line-cool); }
.step:last-child { border-bottom: 0; }
.step__n {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .14em;
	color: var(--gold-deep);
	padding-top: .3rem;
}
.ground-dark .step__n, .ground-dark-alt .step__n { color: var(--gold); }
.step h3 { font-size: 1.22rem; }
.step p { margin-top: .45rem; color: var(--slate-ink); }
.ground-dark .step p, .ground-dark-alt .step p { color: var(--slate); }

/* --- About: portrait beside the story ----------------------------------- */
.about {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 3.4rem;
	align-items: start;
	margin-top: 2.6rem;
}
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 2rem; } }
.about__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line-cool);
	background: var(--ink-800);
	position: relative;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1.5rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--slate-dim);
}
.ground-cream .about__media { border-color: var(--line-warm); background: var(--sand); }
.ground-cream .about__placeholder { color: var(--slate-ink); }
.ground-cream .about__body p { color: var(--slate-ink); }
.ground-cream .about__sign { border-top-color: var(--line-warm); }
.ground-cream .about__sign b { color: var(--ink); }
.ground-cream .about__sign span { color: var(--slate-ink); }
.about__body p + p { margin-top: 1.2rem; }
.about__body p { color: var(--slate); line-height: 1.78; font-size: 1.04rem; }
.about__sign { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-cool); }
.about__sign b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--cream); }
.about__sign span { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-dim); }

/* --- Contact form -------------------------------------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 3.4rem;
	align-items: start;
	margin-top: 2.6rem;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.field { display: grid; gap: .5rem; margin-bottom: 1.15rem; }
.field label {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate);
}
.field input,
.field select,
.field textarea {
	font-family: var(--body);
	font-size: 1rem;
	color: var(--cream);
	background: rgba(7, 12, 22, .6);
	border: 1px solid rgba(139, 152, 173, .3);
	border-radius: var(--r);
	padding: 13px 15px;
	width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--slate-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; }
.field__help { font-size: .84rem; color: var(--slate-dim); }
.field select option { background: var(--ink-850); color: var(--cream); }
.field .form__consent {
	display: flex; align-items: flex-start; gap: .6rem; margin-top: .75rem;
	font-family: var(--body); font-size: .8rem; font-weight: 400; letter-spacing: normal;
	text-transform: none; line-height: 1.55; color: var(--slate-dim); cursor: pointer;
}
.form__consent input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: .25rem 0 0; padding: 0; }
.form__consent a { color: var(--gold-hi); text-decoration: underline; }

/* Honeypot. Hidden from people, still reachable by the bots that fill it. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
	border-radius: var(--r);
	padding: 1rem 1.2rem;
	margin-bottom: 1.6rem;
	font-size: .96rem;
	border-left: 3px solid;
}
.notice--ok { background: rgba(201, 168, 76, .1); border-color: var(--gold); color: var(--cream); }
.notice--bad { background: rgba(224, 104, 95, .1); border-color: #e0685f; color: var(--cream); }

.contact-aside { border-left: 1px solid var(--line-cool); padding-left: 2.2rem; }
@media (max-width: 860px) { .contact-aside { border-left: 0; padding-left: 0; } }
.contact-aside__h { font-size: 1.1rem; }  /* h2 for heading order, h3 in size */
.contact-aside__line { margin-top: 1.5rem; }
.contact-aside__line span {
	display: block;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--slate-dim);
	margin-bottom: .3rem;
}
.contact-aside__line a { color: var(--cream); text-decoration: none; font-size: 1.06rem; }
.contact-aside__line a:hover { color: var(--gold); }
.contact-aside .faq { margin-top: 2.4rem; border-top-color: var(--line-cool); }
.contact-aside .faq details { border-bottom-color: var(--line-cool); }
.contact-aside .faq summary { color: var(--cream); font-size: 1rem; padding: 1.05rem 2.2rem 1.05rem 0; }
.contact-aside .faq summary::after { border-color: var(--gold); }
.contact-aside .faq p { color: var(--slate); padding-bottom: 1.2rem; font-size: .94rem; }

/* --- Service areas: hub ----------------------------------------------
   The city cards reuse the .system panel from the homepage rather than
   introducing a second card pattern. Only the stretched link is new. */
.system__item h3 a { color: inherit; text-decoration: none; }
.system__item h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.system__item h3 a:hover { color: var(--gold-ink); }
.system__item h3 a:focus-visible { outline: none; }
.system--areas .system__item:focus-within { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.system--areas .system__num { text-transform: none; letter-spacing: .1em; }
.system--areas .system__price,
.system--areas .system__price span { color: var(--gold-ink); }

.areas {
	list-style: none;
	margin: 2.2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}
.areas li {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .04em;
	color: var(--slate);
	border: 1px solid var(--line-cool);
	border-radius: 999px;
	padding: .5rem .9rem;
}
.ground-cream .areas li,
.ground-sand .areas li { color: var(--slate-ink); border-color: var(--line-warm); }
.areas__note { margin-top: 2rem; color: var(--slate-dim); font-size: .95rem; max-width: 62ch; }
.ground-cream .areas__note,
.ground-sand .areas__note { color: var(--slate-ink); }

/* --- Editor content --------------------------------------------------
   Used by the city pages, the default page template and, later, posts.
   Body colour is split by ground on purpose: --slate-ink is an on-cream
   token and only manages 3.2:1 on the dark grounds. */
.page-body > * + * { margin-top: 1.25rem; }
.page-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-top: 3rem; max-width: 30ch; }
.page-body > h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 1.18rem; margin-top: 2.2rem; }
.page-body p,
.page-body li { color: var(--slate); line-height: 1.78; }
.ground-cream .page-body p, .ground-cream .page-body li,
.ground-sand .page-body p, .ground-sand .page-body li { color: var(--slate-ink); }
.page-body ul,
.page-body ol { padding-left: 1.15rem; display: grid; gap: .7rem; }
.page-body strong { font-weight: 500; color: var(--cream); }
.ground-cream .page-body strong,
.ground-sand .page-body strong { color: var(--ink); }
.page-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.ground-cream .page-body a,
.ground-sand .page-body a { color: var(--gold-ink); }

/* .faq was authored for the cream grounds, so summary text is --ink and the
   rules are --line-warm. Dropped onto a dark ground it renders near-invisible
   navy-on-navy. Fixed at the .faq level rather than per page, so any dark
   section that reuses the component is covered. */
.ground-dark .faq,
.ground-dark-alt .faq,
.ground-navy .faq { border-top-color: var(--line-cool); }
.ground-dark .faq details,
.ground-dark-alt .faq details,
.ground-navy .faq details { border-bottom-color: var(--line-cool); }
.ground-dark .faq summary,
.ground-dark-alt .faq summary,
.ground-navy .faq summary { color: var(--cream); }
.ground-dark .faq summary::after,
.ground-dark-alt .faq summary::after,
.ground-navy .faq summary::after { border-color: var(--gold); }
.ground-dark .faq p,
.ground-dark-alt .faq p,
.ground-navy .faq p { color: var(--slate); }

/* --- City page -------------------------------------------------------- */
.city-faq { margin-top: 0; }
.city-faq h2 { max-width: 24ch; }

/* --- Blog ------------------------------------------------------------
   The answer block is the passage AI Overviews and the chat engines lift,
   so it is built to read as a self-contained summary rather than as the
   first paragraph of the article. Sand card on cream, cream card on dark,
   gold rule down the left in both. */
.answer {
	background: var(--sand);
	border-left: 3px solid var(--gold-deep);
	border-radius: 0 var(--r) var(--r) 0;
	padding: 1.5rem 1.7rem;
	margin-bottom: 2.8rem;
}
.ground-dark .answer,
.ground-dark-alt .answer,
.ground-navy .answer {
	background: rgba(250, 247, 242, .05);
	border-left-color: var(--gold);
}
.answer__label {
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: .6rem;
}
.ground-dark .answer__label,
.ground-dark-alt .answer__label,
.ground-navy .answer__label { color: var(--gold); }
.answer__text {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--ink);
	margin: 0;
}
.ground-dark .answer__text,
.ground-dark-alt .answer__text,
.ground-navy .answer__text { color: var(--cream); }

.post-list { display: grid; gap: 0; border-top: 1px solid var(--line-warm); }
.ground-dark .post-list,
.ground-dark-alt .post-list { border-top-color: var(--line-cool); }
.post-card {
	position: relative;
	padding: 2.1rem 0;
	border-bottom: 1px solid var(--line-warm);
	transition: background .3s var(--ease);
}
.ground-dark .post-card,
.ground-dark-alt .post-card { border-bottom-color: var(--line-cool); }
.post-card__meta {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate-ink);
}
.ground-dark .post-card__meta,
.ground-dark-alt .post-card__meta { color: var(--slate-dim); }
.post-card__title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-top: .55rem; max-width: 30ch; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__title a:hover { color: var(--gold-ink); }
.post-card__title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 6px; }
.post-card__excerpt {
	color: var(--slate-ink);
	line-height: 1.7;
	margin-top: .75rem;
	max-width: 62ch;
}
.ground-dark .post-card__excerpt,
.ground-dark-alt .post-card__excerpt { color: var(--slate); }
.post-card__more {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-top: 1rem;
}
.ground-dark .post-card__more,
.ground-dark-alt .post-card__more { color: var(--gold); }

.read-next { margin-top: 3.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line-warm); }
.ground-dark .read-next,
.ground-dark-alt .read-next { border-top-color: var(--line-cool); }
.read-next__h {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--slate-ink);
	font-weight: 400;
}
.read-next ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.read-next a {
	color: var(--ink);
	text-decoration: none;
	font-family: var(--display);
	font-size: 1.08rem;
	font-weight: 600;
}
.read-next a:hover { color: var(--gold-ink); }
.ground-dark .read-next a,
.ground-dark-alt .read-next a { color: var(--cream); }

.pagination { margin-top: 2.6rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination a,
.pagination .current {
	font-family: var(--mono);
	font-size: .78rem;
	padding: .6rem .95rem;
	border: 1px solid var(--line-warm);
	border-radius: var(--r);
	text-decoration: none;
	color: var(--ink);
}
.pagination .current { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
.pagination a:hover { border-color: var(--gold-deep); color: var(--gold-ink); }
.ground-dark .pagination a,
.ground-dark-alt .pagination a { border-color: var(--line-cool); color: var(--cream); }

.page-hero--post h1 { max-width: 24ch; }

/* =========================================================
   SOURCE: mobile.css
   Explicit small-screen behaviour. Caught in device testing:
   a wrapped kicker, clipped tab labels, and ragged stacked CTAs.
   ========================================================= */
@media (max-width: 560px) {
	.kicker { font-size: .64rem; letter-spacing: .14em; gap: 10px; }
	.kicker::before { width: 26px; }

	/* "After the job" was clipping out of its cell at 390px */
	.demo__tab { font-size: .56rem; letter-spacing: .06em; padding: 14px 3px; }
	.demo__panes { padding: 1.15rem; min-height: 0; }
	.bubble { max-width: 92%; font-size: .89rem; }

	/* stacked buttons of different widths read as a mistake */
	.btn-row { flex-direction: column; align-items: stretch; }
	.btn { justify-content: center; }

	.section { padding: var(--s-8) 0; }
	.section--tall { padding: var(--s-8) 0; }
	.hero { padding: var(--s-6) 0 var(--s-8); }

	.teaser { padding: 1.6rem 1.5rem; }
	.system__item { padding: 1.7rem 1.4rem; }
	.faq summary { font-size: 1.05rem; padding-right: 2.2rem; }
	.faq p { padding-right: 1rem; }
	.log { font-size: .68rem; }
	.log__row, .log__head { padding-inline: 12px; }
	.areas li { font-size: .72rem; padding: .45rem .75rem; }
	.page-body h2 { margin-top: 2.2rem; }
	.answer { padding: 1.25rem 1.3rem; margin-bottom: 2rem; }
	.answer__text { font-size: 1.02rem; }
	.post-card { padding: 1.6rem 0; }
}