/* Stellarfusion site styles. Two accents (gold for structure and action, teal for AI at work and live), system fonts, no external requests. */

:root {
	--bg: #070a14;
	--surface: #0d1322;
	--line: #1c2438;
	--line-strong: #5e6a86;
	--text: #eceef3;
	--muted: #aeb5c4;
	--accent: #e7b95f;
	--accent-hover: #f3d18e;
	--accent-ink: #070a14;
	/* Teal, the second accent (jamie 2026-11-02, "a lighter teal that mathematically goes with the gold").
	   Gold #e7b95f is HSL 40, 74%, 64%. Its split complement (40 + 180 - 30 = hue 190) at the same
	   saturation and lightness is #5fd0e7; the hover #8cdfef keeps hue 190 (saturation 76%) at lightness 74%,
	   ten points lighter, as the gold hover sits about ten points above gold. The dim fill is teal at 10%.
	   Teal means "AI at work" and "live" (the moving bodies, the assistant's live states, the demo's
	   running states, link hover, the scenario labels); gold keeps buttons, headings, rules, focus rings.
	   Contrast (tools/check.py): teal 10.98:1 on --bg, 10.29:1 on --surface; --accent-ink on teal 10.98:1. */
	--teal: #5fd0e7;
	--teal-hover: #8cdfef;
	--teal-dim: rgba(95, 208, 231, 0.1);
	--teal-line: rgba(95, 208, 231, 0.45);
	/* Stage D: the soft gold glow on buttons (gold at 45 percent) and the scroll progress line */
	--accent-glow: rgba(231, 185, 95, 0.45);
	--error: #ff9f94;
	--max: 1100px;
	--pad: 32px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Orbitron", var(--font);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--bg);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.65 var(--font);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
a:hover { color: var(--teal); }

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

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

h1, h2, h3 { color: var(--text); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }

/* Layout shell */

.sf-wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.sf-skip {
	position: absolute;
	left: -9999px;
	top: 0;
}
.sf-skip:focus {
	left: 16px;
	top: 12px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}

/* Header */

.sf-site-header { border-bottom: 1px solid var(--line); }

.sf-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.sf-logo { display: flex; flex: none; align-items: center; min-height: 44px; } /* mobile pass: a 44 px tap target */
.sf-logo img { height: 36px; width: auto; }

.sf-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Mobile pass (jamie 2026-11-03): each header link is a 44 px tall tap target. */
.sf-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	color: var(--text);
	font-size: 15px;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.sf-nav a:hover { color: var(--teal); }

/* Hero */

.sf-hero { border-bottom: 1px solid var(--line); }

.sf-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	column-gap: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
}
.sf-hero-text { min-width: 0; }

/* Hero illustration (front-page.php, img/hero.svg, decorative) */
.sf-hero-art { margin: 0; overflow: hidden; }
.sf-hero-art img { width: 100%; height: auto; }
/* The drawing's content runs from 18 to 454 of its 480 units: the outer orbit's body at its left and right ends
   (its center reaches 30 and 442, the disc 12 wider), outside the Read card at 22 and the Report card at 438. The art
   shows units 8 to 466, ten empty units each side: it is drawn 480/458 wide, shifted left by 8 units, and the rest is
   cut, so the empty space on each side is the same and the drawing's edges meet the column's edges (jamie 2026-11-03:
   "make this hero image a little bit bigger so that the negative space on each side is the same", "make hero graphic
   a bit bigger to fill the space so the edge of it matches the edge of the right grid", "move the typing text to the
   right so it matches the left side of the graphic"; 2026-11-07, a phone shot with the right orb cut off: the window
   was 13 to 447, sized to the cards alone). The canvases keep their 480-unit drawing over the same width, so the
   readout and the cards still land. */
.sf-hero-art > img,
.sf-hero-art > canvas { width: calc(100% * 480 / 458); margin-left: calc(-100% * 8 / 458); }

.sf-hero-title { margin: 0 0 22px; }
.sf-hero-title img { width: min(100%, 500px); }

.sf-eyebrow {
	margin: 0 0 32px;
	color: var(--accent);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sf-lead {
	max-width: 34em;
	margin: 0 0 18px;
	font-size: clamp(20px, 2.3vw, 25px);
	line-height: 1.45;
}

.sf-sub {
	max-width: 38em;
	margin: 0 0 40px;
	color: var(--muted);
	font-size: 18px;
}

/* Buttons are set in Orbitron, all caps (jamie 2026-11-03, "put all buttons in a cool sci-fi font THATS ALL CAPS",
   "We love Orbitron"): the face sits next to the wordmark. Self-hosted (assets/fonts, SIL Open Font License, the
   license file beside it), Latin only, one variable file, so no request leaves the site. The source strings stay in
   title case for screen readers and for any place the CSS does not reach. */
@font-face {
	font-family: "Orbitron";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/orbitron.woff2") format("woff2");
}

/* The one button style: the hero link, the form's Send button, and any block button added in the editor */

.sf-btn,
.sf-content .wp-block-button__link {
	display: inline-block;
	min-height: 44px; /* mobile pass: never under a 44 px tap target, whatever padding a smaller button sets */
	padding: 14px 28px;
	border: 0;
	border-radius: 6px;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.sf-btn:hover,
.sf-content .wp-block-button__link:hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
}
/* Stage D polish: a soft gold glow on hover and keyboard focus, box-shadow only (no layout change), 150 ms,
   and only when the visitor has not asked for reduced motion. A button that is busy (aria-disabled) does not glow. */
@media (prefers-reduced-motion: no-preference) {
	.sf-btn,
	.sf-content .wp-block-button__link,
	.sf-ask-handoff,
	.sf-ask-pdf { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
	:is(.sf-btn, .sf-content .wp-block-button__link, .sf-ask-handoff, .sf-ask-pdf):is(:hover, :focus-visible):not([aria-disabled="true"]) {
		box-shadow: 0 0 0 1px var(--accent-glow), 0 0 18px 2px var(--accent-glow);
	}
}

.sf-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px; /* the same gap between buttons as between rows (jamie 2026-11-03) */
	margin: 0;
}
/* The hero's two calls after the Contact Us button: gold outline buttons in the same face (jamie 2026-11-03), on
   every width. Mobile pass: a 44 px tall tap target. */
.sf-cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 20px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
}
.sf-cta-link:hover { border-color: var(--accent-hover); color: var(--accent-hover); }

/* Hero ideas field (assistant.php sf_hero_ask and sf_hero_ideas). The ideas block is its own grid area: under
   the text column on wide screens and under the art on one-column screens, so the art never moves while the
   reply grows; the page grows downward instead. */
.sf-hero-inner { grid-template-areas: "text art" "ideas ."; }
.sf-hero-text { grid-area: text; }
.sf-hero-art { grid-area: art; }
.sf-hero-ideas { grid-area: ideas; }
.sf-hero-ask[hidden],
.sf-hero-ideas[hidden],
.sf-hero-ask-error[hidden] { display: none; }
.sf-hero-ask {
	display: block;
	max-width: 34em;
	margin: 40px 0 0;
}
.sf-hero-ask-label {
	display: block;
	margin: 0 0 10px;
	color: var(--teal);
	font-size: 16px;
	font-weight: 650;
}
.sf-hero-ask-row { display: flex; gap: 8px; }
.sf-hero-ask-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--teal-line);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font: 400 17px/1.4 var(--font); /* 16px or more, so Safari on iPhone does not zoom in on focus */
}
.sf-hero-ask-input::placeholder { color: var(--muted); opacity: 1; }
.sf-hero-ask-input:focus { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 1px; }
.sf-hero-ask-send { flex: none; padding: 12px 22px; cursor: pointer; }
.sf-hero-ask-send[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.sf-hero-ask-note {
	display: block;
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
}
.sf-hero-ask-error {
	display: block;
	margin: 12px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--error);
	border-radius: 4px;
	background: var(--surface);
	font-size: 15px;
}
.sf-hero-ideas {
	max-width: 34em;
	margin-top: 32px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--teal);
	border-radius: 8px;
	background: var(--surface);
}
.sf-hero-ideas-text { margin: 0; white-space: pre-line; }
.sf-hero-ideas-text:empty { display: none; }
.sf-hero-ideas-streaming .sf-hero-ideas-text::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 1em;
	margin-left: 3px;
	vertical-align: -0.12em;
	background: var(--teal);
}
.sf-hero-ideas-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sf-hero-ideas-actions:empty { display: none; }
.sf-hero-ideas-actions .sf-btn { padding: 11px 20px; font-size: 15px; cursor: pointer; }
/* The second button beside a gold one: a gold outline, and the hover changes the border and text only */
.sf-btn.sf-btn-line {
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
}
.sf-btn.sf-btn-line:hover {
	border-color: var(--accent-hover);
	background: transparent;
	color: var(--accent-hover);
}
.sf-addr,
.sf-content .sf-addr {
	display: block;
	margin-top: 12px;
	color: var(--muted);
	font-size: 15px;
}

/* Front page sections (Home page content). Heading in the left column, body on the right.
   WordPress wraps a group's blocks in .wp-block-group__inner-container on classic themes;
   display: contents lets those blocks sit in the section grid as if the wrapper were not there. */

.sf-content .wp-block-group__inner-container { display: contents; }

.sf-content { padding-bottom: 24px; }

.sf-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
	column-gap: 56px;
	padding: 88px 0;
	border-bottom: 1px solid var(--line);
	scroll-margin-top: 16px;
}
.sf-section:last-child { border-bottom: 0; }

:is(.sf-section, .sf-section > .wp-block-group__inner-container) > * {
	grid-column: 2;
	margin-top: 0;
	margin-bottom: 20px;
}
:is(.sf-section, .sf-section > .wp-block-group__inner-container) > :last-child { margin-bottom: 0; }

:is(.sf-section, .sf-section > .wp-block-group__inner-container) > h2 {
	grid-column: 1;
	grid-row: 1 / span 40;
	align-self: start;
	position: relative;
	margin: 0;
	padding-top: 22px;
	font-size: clamp(26px, 3vw, 34px);
}
/* The heading rule: a 10 px teal dash, a 6 px gap, then the 40 px gold bar, all 2 px high (jamie 2026-11-02,
   "these can have a short teal dash in front"). It is part of the h2, so the sticky heading keeps it. */
:is(.sf-section, .sf-section > .wp-block-group__inner-container) > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 2px;
	background: linear-gradient(to right, var(--teal) 0 10px, transparent 10px 16px, var(--accent) 16px 56px);
}

/* Desktop: the heading follows its long section down the page instead of leaving the left column empty */
@media (min-width: 721px) {
	:is(.sf-section, .sf-section > .wp-block-group__inner-container) > h2 {
		position: sticky;
		top: 32px;
	}
}

.sf-intro {
	font-size: 20px;
	line-height: 1.5;
}

.sf-note { color: var(--muted); }

.sf-content p { margin-top: 0; }

/* Cards: services and apps */

.sf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 8px;
	margin-bottom: 28px;
}
:is(.sf-grid, .sf-grid > .wp-block-group__inner-container) > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.sf-card {
	padding: 26px 26px 24px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}
.sf-card h3 {
	margin: 0 0 10px;
	font-size: 19px;
}
.sf-card p {
	margin: 0 0 10px;
	color: var(--muted);
}
.sf-card p:last-child { margin-bottom: 0; }
.sf-card a { font-weight: 600; }

/* Service icons: a class per card draws its icon above the heading (decorative, so CSS, not an img) */

.sf-svc::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	background: no-repeat left center / contain;
}
.sf-svc-roadmap::before { background-image: url("../img/icon-roadmap.svg"); }
.sf-svc-workflows::before { background-image: url("../img/icon-workflows.svg"); }
.sf-svc-build::before { background-image: url("../img/icon-build.svg"); }
.sf-svc-training::before { background-image: url("../img/icon-training.svg"); }
.sf-svc-lead::before { background-image: url("../img/icon-lead.svg"); }

/* Work: three app cards side by side, each a phone screenshot in a CSS device frame over the name,
   description and store links. Narrower screens turn each card into a row (screenshot left). */

.sf-apps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 8px;
	margin-bottom: 28px;
}
.sf-app {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 22px;
}
.sf-app h3 { margin: 0 0 6px; }
.sf-app p { margin: 0 0 8px; }
.sf-app .sf-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: auto 0 0;
	padding-top: 0;
}
/* Standalone store links, not links in a sentence: each is a 44 px tap target with space between them */
.sf-app .sf-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
}

.sf-device {
	align-self: center;
	width: 100%;
	max-width: 200px;
	margin: 0 0 20px;
	padding: 6px;
	border: 1px solid var(--line-strong);
	border-radius: 30px;
	background: #000;
}
.sf-device picture { display: block; }
.sf-device img {
	width: 100%;
	height: auto;
	border-radius: 24px;
}

/* Case studies: one card per example scenario, the icon in its own column */

.sf-cases {
	display: grid;
	gap: 20px;
	margin-top: 8px;
	margin-bottom: 24px;
}
.sf-case {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 24px;
	padding: 28px 28px 26px;
}
.sf-case::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 20;
	align-self: start;
	width: 56px;
	height: 56px;
	background: no-repeat center / contain;
}
:is(.sf-case, .sf-case > .wp-block-group__inner-container) > * { grid-column: 2; }
.sf-case-practice::before { background-image: url("../img/case-practice.svg"); }
.sf-case-support::before { background-image: url("../img/case-support.svg"); }
.sf-case-tool::before { background-image: url("../img/case-tool.svg"); }
.sf-case-invest::before { background-image: url("../img/case-invest.svg"); }
.sf-case-fleet::before { background-image: url("../img/case-fleet.svg"); }
.sf-case-bus::before { background-image: url("../img/case-bus.svg"); }
.sf-case-circle::before { background-image: url("../img/case-circle.svg"); }
.sf-case h3 { margin-bottom: 12px; }

.sf-label,
.sf-content .sf-label {
	justify-self: start;
	display: inline-block;
	margin: 0 0 12px;
	padding: 2px 10px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	color: var(--accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
}
/* The case study labels (Example scenario, From our own work) are teal on the dim fill; the demo's label stays gold. */
.sf-case .sf-label {
	background: var(--teal-dim);
	color: var(--teal);
}
/* Screenshots in a case study (2026-11-10): one figure of two or three real screens before the result, side by side
   in equal columns inside the text column, stacked on phones (720 px block below), the caption under them.
   Each image links to its full-size JPEG, since three side by side at 1280 are too small to read. */
.sf-shots {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 18px;
	min-width: 0;
}
.sf-shots > .sf-shot { flex: 1 1 0; min-width: 0; }
.sf-shots picture { display: block; }
.sf-shots img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: var(--bg);
}
.sf-shots figcaption {
	flex: 0 0 100%;
	color: var(--muted);
	font-size: 14px;
}
/* Phone screens (the Circle designs): three tall images in one centered row; on phones the row scrolls sideways
   and snaps, so each screen is large enough to read (jamie 2026-11-10, "we have to sell it"). */
.sf-shots-row { display: flex; flex: 0 0 100%; gap: 12px; min-width: 0; justify-content: center; }
.sf-shots-row > .sf-shot { flex: 0 1 200px; min-width: 0; }
.sf-card .sf-outcome,
.sf-content .sf-outcome {
	margin-top: 4px;
	padding-left: 14px;
	border-left: 2px solid var(--accent);
	color: var(--text);
}

/* About: the white mark under the heading, in the left column (desktop only) */

:is(.sf-about, .sf-about > .wp-block-group__inner-container) > h2::after {
	content: "";
	display: block;
	width: 128px;
	height: 128px;
	margin-top: 36px;
	background: url("../img/mark-white-256.png") no-repeat left top / contain;
}

/* Build list */

.sf-content ul {
	margin-top: 0;
	padding-left: 0;
	list-style: none;
}
.sf-content ul li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 24px;
}
.sf-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 8px;
	height: 2px;
	background: var(--teal);
}

/* Pricing (jamie 2026-11-03): a group after the service cards. Gold figures, teal for what is included. */

.sf-pricing { margin-top: 56px; }
:is(.sf-pricing, .sf-pricing > .wp-block-group__inner-container) > h3 {
	margin: 0 0 20px;
	font-size: 24px;
}
.sf-prices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
/* Five cards in two columns: the last one, the quote line, takes the full row. */
.sf-prices > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-price h4 {
	margin: 0 0 14px;
	color: var(--text);
	font-size: 19px;
	font-weight: 650;
	line-height: 1.2;
	text-wrap: balance;
}
.sf-price p { margin: 0 0 6px; color: var(--muted); text-wrap: pretty; }
.sf-price p:last-child { margin-bottom: 0; }
.sf-price .sf-price-figure { margin-top: 14px; margin-bottom: 2px; color: var(--text); }
.sf-price h4 + .sf-price-figure { margin-top: 0; }
.sf-price-figure strong {
	margin-right: 4px;
	color: var(--accent);
	font-size: 28px;
	font-weight: 650;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.sf-price-quote strong { font-size: 21px; }
/* Short lines balance, so none ends on one word alone at 320 ("follow-up", "roadmap") */
.sf-price .sf-included,
.sf-price .sf-price-quote { text-wrap: balance; }
.sf-price-tier {
	display: block;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
}
.sf-price .sf-included {
	position: relative;
	margin-top: 14px;
	padding-left: 18px;
	color: var(--teal);
}
.sf-price .sf-included::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 10px;
	height: 2px;
	background: var(--teal);
}
.sf-price .sf-price-terms { margin-top: 8px; }

/* Steps */

.sf-steps { counter-reset: sf-step; }
.sf-step {
	counter-increment: sf-step;
	padding: 22px 0 6px;
	border-top: 1px solid var(--line);
}
.sf-step:first-child { border-top: 0; padding-top: 0; }
.sf-step h3 {
	margin: 0 0 8px;
	font-size: 19px;
}
.sf-step h3::before {
	content: counter(sf-step, decimal-leading-zero);
	display: inline-block;
	min-width: 2.4em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	/* A 2 px teal underline under the digits only (jamie 2026-11-02, "teal underline for each number"): the
	   decoration of this inline-block covers its own text, never the min-width after it or the title. */
	text-decoration: underline 2px var(--teal);
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
}
.sf-step p { color: var(--muted); }

/* Contact form ([sf_contact_form] in the Contact section) */

.sf-form {
	display: grid;
	gap: 18px;
	max-width: 640px;
}
.sf-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.sf-optional { color: var(--muted); font-weight: 400; }
.sf-form input[type="text"],
.sf-form input[type="email"],
.sf-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font: 400 17px/1.5 var(--font);
	transition: border-color 0.15s ease;
}
.sf-form textarea { min-height: 168px; resize: vertical; }
.sf-form input:hover,
.sf-form textarea:hover { border-color: var(--muted); }
.sf-form input:focus,
.sf-form textarea:focus {
	border-color: var(--accent);
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.sf-field-has-error input,
.sf-field-has-error textarea { border-color: var(--error); }
.sf-field-error,
.sf-content .sf-field-error {
	margin: 6px 0 0;
	color: var(--error);
	font-size: 15px;
}
.sf-form-error {
	padding: 14px 18px;
	border-left: 3px solid var(--error);
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
}
.sf-form-error p,
.sf-content .sf-form-error p { margin: 0; }
.sf-form-error p + p { margin-top: 6px; }
.sf-form-sent,
.sf-content .sf-form-sent {
	max-width: 640px;
	padding: 16px 20px;
	border-left: 3px solid var(--accent);
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
	font-size: 18px;
}
.sf-form-sent p,
.sf-content .sf-form-sent p { margin: 0; }
.sf-form-sent p + p,
.sf-content .sf-form-sent p + p { margin-top: 8px; font-size: 16px; }
.sf-form-error:focus,
.sf-form-sent:focus { outline: none; }
.sf-form-error:focus-visible,
.sf-form-sent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-form button.sf-btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.sf-form-actions,
.sf-content .sf-form-actions { margin: 4px 0 0; }
.sf-form button.sf-btn { cursor: pointer; }
.sf-form button.sf-btn:focus-visible { outline-offset: 3px; }
/* Honeypot: off screen for people, still in the markup for bots. */
.sf-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Plain pages (Privacy Policy, 404) */

.sf-page {
	max-width: 760px;
	padding-top: 72px;
	padding-bottom: 96px;
}
.sf-page-title {
	margin: 0 0 28px;
	font-size: clamp(30px, 4vw, 40px);
}
.sf-page-title a { color: inherit; text-decoration: none; }
.sf-article-body h2 { margin: 40px 0 12px; font-size: 24px; }
.sf-article-body h3 { margin: 28px 0 10px; font-size: 19px; }
.sf-article { margin-bottom: 48px; }

/* Footer */

.sf-site-footer { border-top: 1px solid var(--line); }

.sf-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	padding-top: 40px;
	padding-bottom: 48px;
	color: var(--muted);
	font-size: 15px;
}
.sf-footer p { margin: 0; }
.sf-footer-mark { width: 40px; height: 40px; }
.sf-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Mobile pass: the footer links are 44 px tall tap targets. */
.sf-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.sf-footer a:hover { color: var(--teal); }
.sf-footer-email { margin-left: auto !important; }

/* Visually hidden, still read by screen readers */
.sf-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* On-page assistant (assistant.php, assets/js/assistant.js) */

.sf-ask[hidden],
.sf-ask-panel[hidden],
.sf-ask-error[hidden] { display: none !important; }

.sf-ask-launcher {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font: 650 13px/1 var(--font);
	letter-spacing: 0.02em;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px var(--bg), 0 0 0 5.5px var(--teal); /* the teal ring: the assistant is AI at work */
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.sf-ask-launcher:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* Mobile pass (jamie 2026-11-03): while a button, link or field of the page lies under the launcher, it steps aside
   (assistant.js adds the class), so it never covers a control; it comes back as soon as the control scrolls on. */
.sf-ask-launcher.sf-ask-tucked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.9);
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.sf-ask-launcher { transition: background-color 0.15s ease, transform 0.2s ease, opacity 0.2s ease, visibility 0.2s; }
}
.sf-ask-launcher:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 50%; }
.sf-ask-mark { display: block; width: 26px; height: 26px; }

.sf-ask-panel {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: calc(max(20px, env(safe-area-inset-bottom)) + 76px);
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: 360px;
	max-height: min(70vh, 640px);
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
	animation: sf-ask-in 0.18s ease-out;
}
.sf-ask-panel:focus { outline: none; }
.sf-ask-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes sf-ask-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.sf-ask-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 10px 0 18px;
}
.sf-ask-title { margin: 0; font-size: 16px; letter-spacing: 0; }
.sf-ask-close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px; /* mobile pass: 44 px tap target */
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.sf-ask-close:hover { color: var(--text); background: var(--line); }
.sf-ask-note {
	margin: 2px 0 0;
	padding: 0 18px 12px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

.sf-ask-log {
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 18px 4px;
}
.sf-ask-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.sf-ask-chip {
	min-height: 44px; /* mobile pass: 44 px tap target */
	padding: 7px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font: 500 14px/1.3 var(--font);
	text-align: left;
	cursor: pointer;
}
.sf-ask-chip:hover { border-color: var(--teal); }
.sf-ask-chip:focus-visible { border-color: var(--teal); }

.sf-ask-msg { margin: 0 0 12px; }
.sf-ask-text {
	margin: 0;
	white-space: pre-line;
}
.sf-ask-user { display: flex; justify-content: flex-end; }
.sf-ask-user .sf-ask-text {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px 12px 4px 12px;
	background: var(--line);
}
.sf-ask-bot .sf-ask-text { color: var(--text); }
/* The hand-off and Save as PDF buttons are 44 px tap targets, the same as their hero copies (.sf-btn) */
.sf-ask-handoff {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 10px;
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--accent);
	color: var(--accent-ink);
	font: 650 14px/1.3 var(--font);
	cursor: pointer;
}
.sf-ask-handoff:hover { background: var(--accent-hover); }
.sf-ask-pdf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 10px 0 0 8px;
	padding: 7px 13px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: transparent;
	color: var(--accent);
	font: 650 14px/1.3 var(--font);
	cursor: pointer;
}
.sf-ask-pdf:hover { border-color: var(--accent-hover); color: var(--accent-hover); }

.sf-ask-dots { display: inline-flex; gap: 5px; padding: 6px 0; }
.sf-ask-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal);
	animation: sf-ask-dot 1.2s ease-in-out infinite;
}
.sf-ask-dots span:nth-child(2) { animation-delay: 0.15s; }
.sf-ask-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sf-ask-dot {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

.sf-ask-error {
	margin: 0 18px 8px;
	padding: 8px 12px;
	border-left: 3px solid var(--error);
	border-radius: 4px;
	background: var(--bg);
	font-size: 14px;
}

.sf-ask-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 12px 12px 18px;
	border-top: 1px solid var(--line);
}
.sf-ask-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	max-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.4 var(--font); /* 16px or more, so Safari on iPhone does not zoom in on focus; 17px matches the contact form */
	resize: none;
}
.sf-ask-input::placeholder { color: var(--muted); opacity: 1; }
.sf-ask-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.sf-ask-send {
	flex: none;
	padding: 11px 16px;
	font-size: 15px;
	cursor: pointer;
}
.sf-ask-send[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* Streaming: a caret after the reply while its text is still arriving (removed when the done event lands) */
.sf-ask-streaming .sf-ask-text::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 1em;
	margin-left: 3px;
	vertical-align: -0.12em;
	background: var(--teal);
}
@media (prefers-reduced-motion: no-preference) {
	.sf-ask-streaming .sf-ask-text::after { animation: sf-ask-caret 1s steps(2, start) infinite; }
}
@keyframes sf-ask-caret { to { visibility: hidden; } }

/* Voice input: shown only where the browser has speech recognition */
.sf-ask-mic[hidden],
.sf-ask-mic-status[hidden] { display: none !important; }
.sf-ask-mic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}
.sf-ask-mic:hover { border-color: var(--accent); color: var(--accent); }
.sf-ask-mic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-ask-mic.sf-ask-mic-on { border-color: var(--teal); background: var(--teal); color: var(--accent-ink); }
.sf-ask-mic.sf-ask-mic-on:hover { border-color: var(--teal-hover); background: var(--teal-hover); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
	.sf-ask-mic.sf-ask-mic-on { animation: sf-ask-listen 1.4s ease-out infinite; }
}
@keyframes sf-ask-listen {
	from { box-shadow: 0 0 0 0 var(--teal); }
	to { box-shadow: 0 0 0 12px transparent; }
}
.sf-ask-mic-status {
	margin: 0;
	padding: 8px 18px 0;
	color: var(--teal);
	font-size: 14px;
	line-height: 1.4;
}
.sf-ask-mic-note {
	margin: 0;
	padding: 4px 18px 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}
@media (max-width: 560px) {
	.sf-ask-mic-status,
	.sf-ask-mic-note { padding-left: 16px; padding-right: 16px; }
}
/* Voice out (Stage D): the speaker toggle in the header, shown only where the browser has speech synthesis.
   Off: muted like the close button. On: gold. While a reply is spoken: teal (AI at work), with the Speaking line. */
.sf-ask-speak[hidden],
.sf-ask-speak-status[hidden] { display: none !important; }
.sf-ask-speak {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px; /* mobile pass: 44 px tap target */
	height: 44px;
	margin-left: auto;
	margin-right: -8px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.sf-ask-speak:hover { color: var(--text); background: var(--line); }
.sf-ask-speak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-ask-speak .sf-ask-speak-waves { opacity: 0.35; }
.sf-ask-speak.sf-ask-speak-on { border-color: var(--accent); color: var(--accent); }
.sf-ask-speak.sf-ask-speak-on .sf-ask-speak-waves { opacity: 1; }
.sf-ask-speak.sf-ask-speaking { border-color: var(--teal); background: var(--teal); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
	.sf-ask-speak.sf-ask-speaking { animation: sf-ask-listen 1.4s ease-out infinite; }
}
.sf-ask-speak-status {
	margin: 0;
	padding: 8px 18px 0;
	color: var(--teal);
	font-size: 14px;
	line-height: 1.4;
}
@media (max-width: 560px) {
	.sf-ask-speak-status { padding-left: 16px; padding-right: 16px; }
}
/* Short screens: the conversation may shrink further, so the listening line never pushes the input out of the panel */
@media (max-height: 640px) {
	.sf-ask-log { min-height: 64px; }
	/* While the microphone note shows, the panel's own note steps aside (assistant.js sets the class) */
	.sf-ask-noting .sf-ask-note { display: none; }
}

/* Tablet */

@media (max-width: 960px) {
	.sf-apps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sf-app {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		column-gap: 22px;
		align-content: start;
	}
	:is(.sf-app, .sf-app > .wp-block-group__inner-container) > * { grid-column: 2; }
	.sf-app .sf-device {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: start;
		max-width: none;
		margin: 0;
		padding: 4px;
		border-radius: 20px;
	}
	.sf-app .sf-device img { border-radius: 16px; }
	.sf-app .sf-links { margin-top: 0; }
}

@media (max-width: 860px) {
	.sf-grid { grid-template-columns: minmax(0, 1fr); }
	.sf-prices { grid-template-columns: minmax(0, 1fr); }
	:is(.sf-grid, .sf-grid > .wp-block-group__inner-container) > :last-child:nth-child(odd) { grid-column: auto; }

	.sf-hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "art" "ideas"; }
	/* One column: the art fills the column, inside its side gutters, at the drawing's 4:3 (jamie 2026-11-03, "Hero
	   graphic should fill space in mobile"). */
	.sf-hero-art {
		width: 100%;
		margin-top: 48px;
	}
}
/* A phone on its side: the art's 4:3 height stays inside the screen (100vh less 96 px for the header and a margin),
   at least 288 px wide, as on the narrowest phone. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
	.sf-hero-art { width: min(100%, max(288px, calc((100vh - 96px) * 4 / 3))); }
}

/* Phones: one column, 16 px gutter */

@media (max-width: 720px) {
	:root { --pad: 16px; }

	.sf-hero-inner {
		padding-top: 48px;
		padding-bottom: 56px;
	}
	.sf-hero-art { margin-top: 40px; }
	/* Phones: the three hero calls stack as full-width buttons (jamie 2026-11-03, "Looks ugly in mobile. Should they
	   be buttons?"). */
	.sf-cta { gap: 12px; }
	.sf-cta .sf-btn { display: block; width: 100%; text-align: center; }
	.sf-cta-link { flex: 1 1 100%; min-height: 48px; }
	.sf-hero-ask { margin-top: 32px; }
	.sf-hero-ideas { padding: 18px 16px; }

	.sf-section {
		grid-template-columns: minmax(0, 1fr);
		padding: 56px 0;
	}
	:is(.sf-section, .sf-section > .wp-block-group__inner-container) > *,
	:is(.sf-section, .sf-section > .wp-block-group__inner-container) > h2 { grid-column: 1; grid-row: auto; }
	:is(.sf-section, .sf-section > .wp-block-group__inner-container) > h2 { margin-bottom: 24px; }

	.sf-intro { font-size: 18px; }
	.sf-card { padding: 22px 20px 20px; }
	.sf-app { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; padding: 18px 18px 20px; }
	.sf-app .sf-device { border-radius: 17px; }
	.sf-app .sf-device img { border-radius: 13px; }

	.sf-case { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 20px; }
	.sf-case::before { grid-row: auto; width: 44px; height: 44px; margin-bottom: 14px; }
	:is(.sf-case, .sf-case > .wp-block-group__inner-container) > * { grid-column: 1; }
	.sf-shots { gap: 10px; }
	.sf-shots > .sf-shot { flex-basis: 100%; }
	.sf-shots-row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
	.sf-shots-row > .sf-shot { flex: 0 0 58%; scroll-snap-align: center; }

	.sf-svc::before { width: 44px; height: 44px; margin-bottom: 14px; }

	:is(.sf-about, .sf-about > .wp-block-group__inner-container) > h2::after { display: none; }

	.sf-footer-email { margin-left: 0 !important; width: 100%; }
}

/* Phones: the assistant panel is a sheet across the bottom of the screen */
/* Short screens (a phone on its side): the panel is a full-height sheet on the right, the log may shrink, the launcher steps aside */
@media (max-height: 480px) and (min-width: 561px) {
	.sf-ask-panel {
		top: 0;
		right: 0;
		bottom: 0;
		width: min(420px, 100%);
		max-height: none;
		border-width: 0 0 0 1px;
		border-radius: 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.sf-ask-is-open .sf-ask-launcher { display: none; }
	.sf-ask-head { padding-top: 8px; }
	.sf-ask-note { padding-bottom: 8px; }
	.sf-ask-log { min-height: 0; padding-top: 10px; }
	.sf-ask-chips { margin-bottom: 10px; }
	.sf-ask-form { padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 560px) {
	.sf-ask-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
		max-height: 70vh;
		border-width: 1px 0 0;
		border-radius: 14px 14px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.sf-ask-is-open .sf-ask-launcher { display: none; }
	.sf-ask-head { padding-left: 16px; }
	.sf-ask-note { padding-left: 16px; padding-right: 16px; }
	.sf-ask-log { padding-left: 16px; padding-right: 16px; }
	.sf-ask-form { padding-left: 16px; }
	.sf-ask-launcher { width: 58px; height: 58px; }
}

/* A phone that is both narrow and short: the sheet may use the full height */
@media (max-width: 560px) and (max-height: 480px) {
	.sf-ask-panel { top: 0; max-height: none; border-radius: 0; }
	.sf-ask-log { min-height: 0; }
}

@media (max-width: 560px) {
	.sf-header { padding-top: 16px; padding-bottom: 14px; }
	.sf-logo img { height: 28px; }
	.sf-nav { width: 100%; }
	.sf-nav ul { gap: 2px 16px; }
	.sf-nav a { font-size: 14px; }
	/* The front page hero shows the large wordmark right below, so the header carries the menu only */
	.home .sf-logo { display: none; }
}

/* Print: light page, black logos */

@media print {
	:root { --bg: #fff; --surface: #fff; --text: #000; --muted: #333; --line: #ccc; --accent: #000; --accent-ink: #fff; --teal: #000; --teal-hover: #000; --teal-dim: transparent; --teal-line: #000; }
	/* The page declares color-scheme dark (header.php), which paints the paper margins dark; print is on light paper. */
	:root { color-scheme: light; }
	.sf-logo-img { content: url("../img/wordmark-black.png"); }
	.sf-hero-title img { content: url("../img/wordmark-black.png"); }
	.sf-footer-mark { content: url("../img/mark-black.png"); }
	:is(.sf-about, .sf-about > .wp-block-group__inner-container) > h2::after { background-image: url("../img/mark-black.png"); }
	.sf-hero-art { display: none; }
	.sf-shots { break-inside: avoid; }
	.sf-shots img { border-color: #ccc; }
	.sf-nav, .sf-skip, .sf-ask, .sf-hero-ask, .sf-hero-ideas-actions { display: none; }
	/* Save as PDF (assistant.js savePdf): while the body carries sf-printing, the print-only page is all that prints. */
	body.sf-printing > :not(.sf-print) { display: none !important; }
	body.sf-printing .sf-print { display: block; }
}

/* The Save as PDF page (assistant.php sf_print_sheet): never on screen; a clean one-page sheet in print. */
.sf-print { display: none; }
@media print {
	.sf-print {
		max-width: 40em;
		margin: 0 auto;
		color: #000;
		background: #fff;
		font: 400 11.5pt/1.55 var(--font);
	}
	.sf-print-head { padding-bottom: 14pt; border-bottom: 1.5pt solid #000; }
	.sf-print-mark img { width: 200pt; height: auto; }
	.sf-print-tagline { margin: 8pt 0 0; font-size: 11pt; font-weight: 600; }
	.sf-print-date { margin: 2pt 0 0; color: #333; font-size: 10pt; }
	.sf-print-h { margin: 20pt 0 6pt; color: #000; font-size: 13pt; break-after: avoid; }
	.sf-print-about { margin: 0; white-space: pre-line; }
	.sf-print-ideas { margin: 0; padding-left: 18pt; }
	.sf-print-ideas li { margin: 0 0 8pt; padding-left: 2pt; break-inside: avoid; }
	.sf-print-note { margin: 18pt 0 0; color: #333; font-size: 9.5pt; }
	.sf-print-contact { margin: 6pt 0 0; padding-top: 10pt; border-top: 0.75pt solid #999; font-size: 10.5pt; font-weight: 600; }
}