/* ===========================================================================
   Fuse — marketing site
   Palette is the shipped fuse_theme green (#007E45), toned on Sage Intacct.
   Separation from Nest ERP is carried by structure and typography, not hue:
   flat bands, hairline rules, 2-4px radii, no gradients, no floating cards.
   =========================================================================== */

:root {
	--primary: #007E45;
	--primary-dark: #006034;
	--on-primary: #FFFFFF;
	--wash: #E7F4ED;

	--ground: #FAFCFB;
	--surface: #FFFFFF;
	--surface-2: #F4F7F5;

	--ink: #16241C;
	--ink-soft: #4A5A51;
	/* Darkened from the app's #66756D (4.71:1) — this is used at 11px for section
	   labels and helper text, where AA with no headroom is too tight. */
	--ink-faint: #5C6B63;

	--rule: #DCE5E0;
	--rule-strong: #C4D2CB;

	/* The app ships #C2620A, which is only 4.16:1 on white and fails AA as text.
	   Darkened for the site, where it carries form error messages. */
	--signal: #A85408;
	--signal-wash: #FEF3C7;

	/* masthead — black band with green line-work, used in both themes */
	--dark-ground: #0A0F0C;
	--dark-ink: #F2F7F4;
	--dark-ink-soft: #AFC2B6;
	--dark-ink-faint: #7C9186;
	--primary-bright: #56C88C;

	--font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

	--measure: 68ch;
	--container: 68rem;

	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4.5rem;

	--radius: 3px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--primary: #1FA060;
		--primary-dark: #56C88C;
		--on-primary: #08140D;
		--wash: #12271C;

		--ground: #0E1512;
		--surface: #151E19;
		--surface-2: #1B2621;

		--ink: #E8EFEA;
		--ink-soft: #AFBEB5;
		--ink-faint: #93A49B;

		--rule: #26332C;
		--rule-strong: #33443A;

		--signal: #E0B063;
		--signal-wash: #2A2317;
	}
}

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

::selection { background: var(--primary); color: var(--on-primary); }

html { scroll-behavior: smooth; }

/* The header is sticky, so anchored sections must stop clear of it rather than
   sliding their heading up underneath. */
:target, section[id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

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

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 0.6rem + 2vw, 2rem);
}

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

p { margin: 0; }
a { color: var(--primary); text-underline-offset: 0.18em; }

:where(a, button, summary):focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0;
}

.section-label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 var(--space-md);
}

.lede { font-size: 1.125rem; color: var(--ink-soft); }
.small { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---- skip link ---- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--primary);
	color: var(--on-primary);
	padding: 0.7rem 1.1rem;
	z-index: 100;
}
.skip-link:focus { left: 0; }

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--dark-ground) 94%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid color-mix(in srgb, var(--dark-ink) 12%, transparent);
	color: var(--dark-ink);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: 68px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--dark-ink);
}
.brand img { display: block; width: 32px; height: 32px; }
.brand .wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.3rem);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.brand .sub {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dark-ink-faint);
	border-left: 1px solid color-mix(in srgb, var(--dark-ink) 22%, transparent);
	padding-left: 0.6rem;
	margin-left: 0.2rem;
}

.site-nav { display: none; gap: 1.35rem; }
.site-nav a {
	color: var(--dark-ink-soft);
	text-decoration: none;
	font-size: 0.9375rem;
	white-space: nowrap;
	transition: color 180ms ease;
}
.site-nav a:hover { color: var(--dark-ink); }

/* Only show the nav once there is genuinely room for it on one line. Below
   this the brand and CTA share the bar and the page reads top to bottom. */
@media (min-width: 74rem) {
	.site-nav { display: flex; }
}
@media (max-width: 30rem) {
	.brand .sub { display: none; }
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.35rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn-primary {
	background: var(--primary);
	color: var(--on-primary);
	border: 1px solid var(--primary);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-secondary {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); }

.btn-sm { min-height: 40px; padding: 0.5rem 1rem; }

/* ---- hero ----
   The masthead runs black with green line-work under it, echoing the flowing
   ribbon motif of the Sage Intacct family. Lines only — no gradient washes,
   no glow. The rest of the page stays light. */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--dark-ground);
	color: var(--dark-ink);
	padding: clamp(3.5rem, 2rem + 7vw, 7rem) 0 clamp(3.5rem, 2rem + 6vw, 6rem);
}

.hero-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.hero-lines path { fill: none; stroke-linecap: round; }

.hero > .container { position: relative; }

.hero .eyebrow { color: var(--primary-bright); }
.hero h1 {
	color: var(--dark-ink);
	font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.4rem);
	margin: var(--space-md) 0 var(--space-lg);
}
.hero .lede { font-size: 1.1875rem; color: var(--dark-ink-soft); }

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--space-xl);
}

.hero .btn-secondary {
	color: var(--dark-ink);
	border-color: color-mix(in srgb, var(--dark-ink) 34%, transparent);
}
.hero .btn-secondary:hover { border-color: var(--dark-ink); }

/* Sage Tech Partner badge. Official asset — never recoloured or reproportioned.
   Its own artwork is a black pill with a green keyline, so it sits native on the
   masthead band. */
.hero-badge { margin: var(--space-xl) 0 0; }
.hero-badge img { display: block; height: 42px; width: auto; }
@media (max-width: 30rem) { .hero-badge img { height: 34px; } }

.hero-meta {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid color-mix(in srgb, var(--dark-ink) 16%, transparent);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--dark-ink-faint);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

/* ---- section rhythm ---- */

/* Sections alternate tint, and that change of ground does the separating. A
   rule on top of it as well just adds noise. */
.band { padding: var(--space-3xl) 0; }
.band--tint { background: var(--surface-2); }
.band h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: var(--space-md); }
.band > .container > .lede { margin-bottom: var(--space-xl); }

/* ---- diagram ---- */

.figure { margin: 0; }
.figure-scroll { overflow-x: auto; }
.figure svg { display: block; min-width: 34rem; width: 100%; height: auto; }
.figure figcaption {
	margin-top: var(--space-md);
	font-size: 0.875rem;
	color: var(--ink-faint);
}
.svg-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink); }
.svg-sub { font-family: var(--font-body); font-size: 11px; fill: var(--ink-faint); }
.svg-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; }

/* ---- rules grid (hairline, no shadows) ---- */

.grid {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}
.grid > * {
	background: var(--surface);
	transition: background-color 180ms ease;
	padding: 1.35rem 1.45rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.grid h3 { font-size: 1rem; }
.grid p { font-size: 0.9375rem; color: var(--ink-soft); }

@media (min-width: 46rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* The last cell is a doorway, not a shipped capability. Muted ground and a link
   instead of a posting note, so it never reads as "running today". */
.grid > .more { background: var(--wash); }
.grid > .more h3 { color: var(--primary); }
.more-link {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--primary);
	margin-top: auto;
	padding-top: 0.6rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	align-self: flex-start;
	transition: border-color 180ms ease;
}
.more-link::after { content: " \2192"; }
.more-link:hover { border-bottom-color: var(--primary); }

.grid .posts {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: auto;
	padding-top: 0.5rem;
}

/* ---- product screenshot ---- */

.shot { margin: var(--space-xl) 0 0; }
.shot img {
	display: block;
	width: 100%;
	height: auto;
	/* Fixed dark grey rather than a theme token: the capture keeps a white plate
	   in both themes, so a light-on-light border would disappear in dark mode. */
	border: 1px solid #5B6360;
	border-radius: var(--radius);
	background: #FFFFFF;
}
.shot figcaption {
	margin-top: var(--space-md);
	font-size: 0.875rem;
	color: var(--ink-faint);
}

/* ---- audience split ---- */

.paths { display: grid; gap: var(--space-lg); }
@media (min-width: 46rem) { .paths { grid-template-columns: 1fr 1fr; } }

.path {
	border: 1px solid var(--rule);
	border-top: 2px solid var(--primary);
	border-radius: var(--radius);
	background: var(--surface);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.path { transition: border-color 180ms ease; }
.path:hover { border-color: var(--rule-strong); border-top-color: var(--primary); }
.path h3 { font-size: 1.2rem; }
.path ul { margin: 0; padding-left: 1.05rem; display: flex; flex-direction: column; gap: 0.45rem; }
.path li { font-size: 0.9375rem; color: var(--ink-soft); }
.path li::marker { color: var(--primary); }
.path .btn { align-self: flex-start; margin-top: auto; }

/* ---- fact strip ---- */

.facts {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
}
@media (min-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); padding: 1.1rem 1.25rem; }
.fact dt {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.fact dd {
	margin: 0.3rem 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.35;
}

/* ---- pull quote ---- */

.pull {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
	line-height: 1.35;
	color: var(--ink);
	border-left: 2px solid var(--primary);
	padding-left: 1.2rem;
	margin: var(--space-xl) 0 0;
}

/* Announced to screen readers, invisible to everyone else. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- documents list ---- */

.docs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.doc-link {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0.25rem 1rem;
	align-items: baseline;
	padding: 1.05rem 0.25rem;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	transition: background-color 180ms ease;
}
.doc-link:hover { background: var(--wash); }
.doc-link .num {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--primary);
}
.doc-link .t { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; }
.doc-link .d { grid-column: 2; font-size: 0.9375rem; color: var(--ink-soft); }

/* ---- closing CTA ---- */

.closer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--dark-ground);
	color: var(--dark-ink);
	border-radius: var(--radius);
	padding: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}
.closer-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.closer-lines path { fill: none; stroke-linecap: round; }

.closer h2 { color: var(--dark-ink); }
.closer p { color: var(--dark-ink-soft); max-width: 60ch; }
.closer .btn-primary { margin-top: var(--space-sm); }

/* ---- contact form ---- */

.contact-form {
	margin-top: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.field-row { display: grid; gap: var(--space-lg); }
@media (min-width: 46rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field label {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ink);
}
.field .req { color: var(--signal); }

.field input,
.field select,
.field textarea {
	font-family: var(--font-body);
	/* 16px minimum, or iOS zooms the page on focus. */
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	padding: 0.65rem 0.8rem;
	min-height: 46px;
	width: 100%;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea { min-height: 8rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.field-help { font-size: 0.8125rem; color: var(--ink-faint); }

.field-err {
	font-size: 0.8125rem;
	color: var(--signal);
	min-height: 0;
}
.field-err:empty { display: none; }

.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: var(--signal); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
}
.form-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.form-status { font-size: 0.9375rem; color: var(--ink-soft); }
.form-status[data-state="ok"] { color: var(--primary); }
.form-status[data-state="error"] { color: var(--signal); }

/* ---- back to top ---- */

.to-top {
	position: fixed;
	right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	z-index: 30;

	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 0.95rem;

	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--on-primary);
	background: var(--primary);
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	cursor: pointer;

	/* Out of the way until it is worth showing. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms,
	            background-color 180ms ease, border-color 180ms ease;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.to-top svg { display: block; width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
	.to-top { transition: none; }
}

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

.site-footer {
	border-top: 1px solid var(--rule);
	margin-top: var(--space-3xl);
	padding: var(--space-xl) 0 var(--space-2xl);
	color: var(--ink-faint);
	font-size: 0.875rem;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; }
.site-footer a { color: var(--ink-faint); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }