/* ==========================================================================
   GatsToGo marketing site (landing, pricing, about, legal, signup, 404)
   ==========================================================================
   Same system as customer-home.css and the redesigned terminal.css: zero
   bordered/shadowed "card" containers, hairline (1px) rules for
   structure, uppercase tracked-letter-spacing eyebrow labels, IBM Plex
   Mono for numerals, a small consistent corner radius (tokens.css's
   --radius-sm, same as every other surface), color reserved for the
   primary action button and a few functional accents. This is
   GatsToGo's own fixed brand identity (not tenant-themed like
   customer-home.css), so the palette is a plain :root rather than
   per-plant CSS custom properties set inline.

   Loads after tokens.css.
   ========================================================================== */
:root {
	--brand: #006B4D;
	--brand-hover: #00553D;
	--brand-tint: #E7F6F1;

	--ink: #0A0A0A;
	--ink-soft: #3F3F3F;
	--muted: #6B6B6B;
	--faint: #9C9C9C;
	--line: #E6E6E4;
	--line-strong: #CFCFCC;
	--bg: #FFFFFF;
	--surface-muted: #F7F7F5;

	--success: #16743F;
	--success-bg: #EEF7F1;
	--warning: #92580A;
	--warning-bg: #FBF3E7;
	--danger: #B3261E;
	--danger-bg: #FBEEED;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.mono { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible, input:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ---- Shared brand lockup (header, footer, 404 page) ---- */
.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
}
.brand-mark {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
	border-radius: 0;
	flex: none;
}
.brand-lockup strong {
	font-family: var(--font-display, Archivo, sans-serif);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

/* ---- Buttons (same contract as customer-home.css's, so pages that
   don't load that stylesheet -- 404, marketing -- still get identical
   button behavior) ---- */
.button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	border: 0;
	border-radius: var(--radius-sm, 6px);
	background: var(--brand);
	color: #FFFFFF;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.button-primary:hover:not(:disabled) { background: var(--brand-hover); }
.button-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.text-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: var(--ink);
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.section-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.inline-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 14px 16px;
	background: var(--danger-bg);
	border-left: 3px solid var(--danger);
	border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
	color: var(--danger);
	font-size: 14px;
	font-weight: 700;
}
.inline-alert .icon { flex: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.mkt-header {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.mkt-header-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 28px;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.mkt-nav {
	display: flex;
	align-items: center;
	gap: 32px;
}
.mkt-nav a {
	color: var(--muted);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.mkt-nav a:hover { color: var(--ink); }
.mkt-header-actions .button-primary { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding: 88px 0 96px;
	border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: 760px; }
.hero h1 {
	margin: 0 0 20px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(38px, 5.2vw, 60px);
	line-height: 1.03;
	letter-spacing: -0.02em;
}
.hero p.lede {
	margin: 0 0 36px;
	max-width: 56ch;
	color: var(--muted);
	font-size: 19px;
	line-height: 1.6;
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ---- Full-bleed photo band -- a single deliberate image moment, not
   a decorative thumbnail in a card. No text overlay: the photo makes
   its own case for real, working infrastructure without competing
   with copy for attention. ---- */
.photo-band {
	height: clamp(240px, 32vw, 440px);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   How it works -- numbered hairline-divided steps
   ========================================================================== */
.mkt-section { padding: 88px 0; border-bottom: 1px solid var(--line); }
.mkt-section-head { max-width: 640px; margin: 0 0 48px; }
.mkt-section-head h2 {
	margin: 0;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.mkt-section-head p {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 17px;
	max-width: 56ch;
}

.step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.step-item {
	padding: 0 28px 0 0;
	border-left: 1px solid var(--line);
	padding-left: 24px;
}
.step-item:first-child { border-left: 0; padding-left: 0; }
.step-index {
	font-family: var(--font-mono, monospace);
	color: var(--faint);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
}
.step-item h3 {
	margin: 0 0 8px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-size: 18px;
	font-weight: 800;
}
.step-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ==========================================================================
   Feature grid -- icon + heading + text, hairline dividers, no boxes
   ========================================================================== */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.feature-item {
	padding: 36px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.feature-item .icon {
	font-size: 22px;
	color: var(--brand);
	margin-bottom: 18px;
}
.feature-item h3 {
	margin: 0 0 8px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-size: 17px;
	font-weight: 800;
}
.feature-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 44ch; }

/* ==========================================================================
   CTA band -- a photo backdrop instead of a flat color for the page's
   closing moment, dark enough (linear-gradient layered under the
   image, in the same background-image declaration) that the white
   text stays fully legible regardless of what's underneath it.
   ========================================================================== */
.cta-band {
	padding: 96px 0;
	text-align: center;
	background-image: linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)), url("/static/images/landing-flame.jpg");
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}
.cta-band h2 {
	margin: 0 0 12px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 36px);
}
.cta-band p { margin: 0 0 32px; color: rgba(255, 255, 255, 0.78); font-size: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mkt-footer { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.mkt-footer-top { max-width: 420px; margin-bottom: 48px; }
.mkt-footer-tagline { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.mkt-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 640px;
	margin-bottom: 56px;
}
.mkt-footer-heading {
	margin-bottom: 14px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mkt-footer-cols a {
	display: block;
	margin-bottom: 10px;
	color: var(--ink-soft);
	font-size: 14px;
	text-decoration: none;
}
.mkt-footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.mkt-footer-bottom {
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--faint);
	font-size: 13px;
}

/* ==========================================================================
   Signup form (/get-started)
   ========================================================================== */
.signup-layout { padding: 64px 0 96px; max-width: 640px; margin: 0 auto; }
.signup-layout h1 {
	margin: 0 0 12px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.05;
}
.signup-layout .lede { margin: 0 0 40px; color: var(--muted); font-size: 16px; max-width: 52ch; }

.field-group { margin: 0 0 40px; }
.field-group:last-of-type { margin-bottom: 32px; }
.field-group-heading {
	margin: 0 0 20px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.field-underline { margin: 0 0 26px; }
.field-underline label {
	display: block;
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}
.field-underline input {
	width: 100%;
	border: 0;
	border-bottom: 1.5px solid var(--line-strong);
	background: transparent;
	padding: 8px 2px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
}
.field-underline input:focus { outline: none; border-bottom-color: var(--ink); }
.field-underline input::placeholder { color: var(--faint); font-weight: 400; }
/* State/Bank <select> -- this public form has never needed a themed
   select before and doesn't carry owner-admin.css's custom-listbox JS/CSS
   infrastructure, so this is deliberately just "layer 1" of that same
   system (owner-admin.css's own .field select comment): the browser's
   native arrow stripped and replaced with the same caret-down glyph used
   everywhere else in the app, drawn as a background-image, matching this
   form's underline visual style rather than a bordered box. A real,
   fully keyboard/screen-reader-native <select> either way -- no JS
   dependency for this form to actually work. */
.field-underline select {
	width: 100%;
	border: 0;
	border-bottom: 1.5px solid var(--line-strong);
	background-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 8px 22px 8px 2px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%236B6B6B' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 14px 14px;
}
.field-underline select:focus { outline: none; border-bottom-color: var(--ink); }
/* Layer 2: once marketingPageShell's own script (marketing_shell.templ,
   "Themed <select> replacement") has run, hide the native element above
   in favor of a custom trigger + listbox -- the same component and
   markup the admin console uses (owner-admin.css's own .select-shell/
   .select-trigger/.select-list, themedSelect in owner_admin.templ),
   restyled here to match this page's underline field language instead of
   that page's boxed one. A page where the script fails to run still has
   the fully working, if plainer, native <select> above instead of
   nothing. */
.select-shell { position: relative; }
.select-shell.js-ready .select-native {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}
.select-trigger {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 0;
	border-bottom: 1.5px solid var(--line-strong);
	background: transparent;
	padding: 8px 22px 8px 2px;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.select-shell.js-ready .select-trigger { display: flex; }
.select-trigger:hover { border-bottom-color: var(--ink); }
.select-shell.open .select-trigger { border-bottom-color: var(--ink); }
.select-trigger .icon {
	flex: none;
	font-size: 14px;
	color: var(--muted);
	transition: transform 180ms ease;
}
.select-shell.open .select-trigger .icon { transform: rotate(180deg); }
.select-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(10, 10, 10, 0.08);
}
.select-list li {
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
}
.select-list li:hover,
.select-list li.highlighted { background: var(--surface-muted); }
.select-list li.selected { color: var(--brand); font-weight: 800; }
.field-hint { margin: 6px 0 0; color: var(--faint); font-size: 12px; }
.advanced-group {
	margin: -8px 0 40px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.advanced-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 0;
	list-style: none;
	cursor: pointer;
}
.advanced-group summary::-webkit-details-marker { display: none; }
.advanced-group summary span {
	color: var(--ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.advanced-group summary small {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	text-align: right;
}
.advanced-group summary:after {
	content: "+";
	flex: none;
	color: var(--brand);
	font-family: var(--font-mono, monospace);
	font-size: 20px;
	font-weight: 700;
}
.advanced-group[open] summary:after { content: "-"; }
.advanced-body { padding: 6px 0 18px; }
/* Live account-name readout (web/templates/pages/account_resolve.templ) --
   see owner-admin.css's own .account-readout for the full rationale;
   duplicated rather than shared since these two stylesheets already never
   share rules anywhere else in this app. */
.account-readout {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}
.account-readout[data-state="ok"] { color: var(--success); }
.account-readout[data-state="error"] { color: var(--danger); }
.slug-preview {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
}
.slug-preview strong { font-family: var(--font-mono, monospace); color: var(--ink); font-weight: 700; }

.signup-submitted {
	padding: 96px 0;
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.signup-submitted .icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 24px;
	border: 1.5px solid var(--success);
	border-radius: var(--radius-sm, 6px);
	color: var(--success);
}
.signup-submitted .icon-badge .icon { font-size: 24px; }
.signup-submitted h1 {
	margin: 0 0 14px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 34px);
}
.signup-submitted p { margin: 0 0 32px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.review-state { max-width: 680px; }
.review-panel {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 48px 0;
}
.signup-submitted.review-state .icon-badge {
	border-color: var(--brand);
	color: var(--brand);
}
.review-steps {
	display: grid;
	gap: 0;
	max-width: 440px;
	margin: 0 auto 32px;
	text-align: left;
}
.review-step {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
}
.review-step:first-child { border-top: 0; }
.review-step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm, 6px);
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	font-weight: 700;
}
.review-step strong { color: var(--ink); font-size: 15px; }
.review-step.is-done span {
	border-color: var(--success);
	background: var(--success);
	color: #FFFFFF;
}
.review-step.is-current span {
	border-color: var(--brand);
	color: var(--brand);
}

/* ==========================================================================
   Pricing / About / Legal -- simple single-column article layouts
   ========================================================================== */
.article-layout { padding: 64px 0 96px; max-width: 720px; margin: 0 auto; }
.article-layout h1 {
	margin: 0 0 16px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.05;
}
.article-layout .lede { margin: 0 0 48px; color: var(--muted); font-size: 18px; max-width: 56ch; }
.article-layout .updated { margin: 8px 0 48px; color: var(--faint); font-size: 13px; }
.article-layout h2 {
	margin: 48px 0 14px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-size: 20px;
	font-weight: 800;
}
.article-layout p { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.article-layout ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
/* :not(.button-primary) matters: without it, this rule's specificity
   (one class + one element) beats .button-primary's (one class alone)
   and wins by source order too, silently forcing a button-primary
   link's text color from white to this same green -- invisible on
   the button's own green background, exactly the bug that shipped on
   the pricing page's "Get started" CTA (nested inside .article-layout
   like every other link there) until a real screenshot caught it.
   Excluding it here means any future button dropped into an article
   body can't collide with this rule the same way again. */
.article-layout a:not(.button-primary) { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.pricing-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.pricing-row:first-child { border-top: 1px solid var(--line); }
/* min-width: 0 overrides the flex-item default of min-width: auto --
   without it, a long unbroken line (e.g. the Paystack fees row) refuses
   to shrink below its own content width and forces the whole row --
   and with it, the whole page -- wider than the viewport instead of
   wrapping onto a second line. */
.pricing-row span { min-width: 0; }
.pricing-row span:first-child { font-weight: 700; }
.pricing-row span:last-child { color: var(--muted); font-size: 14px; text-align: right; }

.contact-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.contact-row:first-child { border-top: 1px solid var(--line); }
.contact-row span, .contact-row a { min-width: 0; }
.contact-row span:first-child { color: var(--muted); font-size: 14px; }
.contact-row a { font-weight: 700; text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 96px 28px;
	text-align: center;
}
.error-page .brand-lockup { justify-content: center; margin-bottom: 48px; }
/* The animation's intrinsic frame is 700x400 (7:4) -- aspect-ratio keeps
   that proportion at any width instead of a fixed pixel height, so it
   scales fluidly from a phone up to this page's own 720px cap without
   ever cropping or leaving letterboxed bars. Sized close to the page's
   full width (not the narrower ~420px the heading/paragraph read at)
   because a "big and wide" animation reads better a little wider than
   the prose column next to it. */
.error-lottie {
	display: block;
	width: 100%;
	max-width: 620px;
	aspect-ratio: 700 / 400;
	margin: 0 auto 24px;
}
/* The heading/paragraph stay at the old, narrower reading width even
   though .error-page itself grew to fit the wider animation above --
   a 660px-wide line of prose is harder to read than a ~480px one. */
.error-page h1 {
	max-width: 480px;
	margin: 0 auto 14px;
	font-family: var(--font-display, Archivo, sans-serif);
	font-weight: 800;
	font-size: 28px;
}
.error-page p { max-width: 480px; margin: 0 auto 32px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	.step-item:nth-child(3) { border-left: 0; padding-left: 0; }
	.feature-grid { grid-template-columns: minmax(0, 1fr); }
	.mkt-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.wrap { padding: 0 20px; }
	.mkt-header-inner { padding: 0 20px; }
	.mkt-nav { display: none; }
	.hero { padding: 56px 0 64px; }
	.mkt-section { padding: 56px 0; }
	/* .signup-layout/.article-layout (used by /get-started, /pricing,
	   /about, /terms, /privacy) only ever get a horizontal gutter from
	   their own max-width + margin: 0 auto centering -- which stops doing
	   anything useful once the viewport is narrower than that max-width.
	   Below it, with zero padding of their own, content sits flush
	   against the screen edge instead of keeping the same gutter every
	   other section (.wrap, .hero, .mkt-section) already gets here. */
	.signup-layout, .article-layout { padding-left: 20px; padding-right: 20px; }
	/* minmax(0, 1fr), not a bare 1fr -- a bare track's implicit minimum
	   is its content's min-content size, not 0, so a wide child (the
	   signup form's own .field-grid rows in particular, once the new
	   Business/Payout/Owner sections gave it several) can force the
	   whole grid, and the whole page, wider than the viewport instead of
	   actually collapsing to one column. Exact same bug/fix as
	   owner-admin.css's own mobile grid audit earlier this build --
	   marketing.css just hadn't had the same pass run against it yet. */
	.step-list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.step-item { border-left: 0 !important; padding-left: 0 !important; }
	.field-grid { grid-template-columns: minmax(0, 1fr); }
	.pricing-row, .contact-row { flex-direction: column; gap: 4px; }
	.pricing-row span:last-child { text-align: left; }
	.error-page { padding: 56px 20px; }
	.error-page .brand-lockup { margin-bottom: 32px; }
	.error-lottie { max-width: 100%; margin-bottom: 16px; }
}