/* =========================================================================
   SELF-HOSTED FONTS  (was Google Fonts until v6.7.0)
   Fraunces + Manrope, both SIL Open Font License 1.1 — self-hosting permitted.

   Why local: Google Fonts was the ONLY third party that received a visitor's
   IP address. Serving these ourselves means no request on this site leaves our
   own origin, which is what the privacy policy now states. It also removes a
   render-blocking stylesheet request and two extra DNS/TLS connections.

   latin-ext files are declared but only downloaded if a page actually contains
   those characters — unicode-range makes them free for English pages.
   ========================================================================= */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/manrope-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/manrope-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   SNM GROUP — v5 "Gold Standard, elevated"
   Award-tier motion & craft over the v4 dark-luxe system.
   Palette: warm black / ivory / champagne gold
   Type: Fraunces (display) + Manrope (body)
   ========================================================================= */

:root {
	--bg: #0B0908;
	--bg-2: #141110;
	--bg-3: #1D1815;
	--ink: #F5EFE4;
	--muted: #B0A695;
	--gold: #D9B26A;
	--gold-2: #EAC98B;
	--line: rgba(217, 178, 106, 0.22);
	--line-soft: rgba(217, 178, 106, 0.12);
	--ivory: #F5EFE4;
	--ink-on-ivory: #171310;
	--font-display: "Fraunces", Georgia, serif;
	--font-body: "Manrope", system-ui, sans-serif;
	--pad: clamp(20px, 5vw, 72px);
	--radius: 14px;
	--ease-award: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-luxe: cubic-bezier(0.65, 0, 0.35, 1);
	/* Native UI the page can't style — <select> popups, date pickers, autofill,
	   Firefox scrollbars — renders in the dark palette instead of a white sheet
	   dropping out of a warm-black form. (6.15.0) */
	color-scheme: dark;
}

* { box-sizing: border-box; }
/* scrollbar-gutter (6.17.0): the gutter is reserved even while body is
   overflow:hidden (intro, open mobile nav), so nothing shifts sideways when an
   overlay opens or closes. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* scrollbar-color switches Chromium OFF its ::-webkit-scrollbar styling, so it
   is only offered to engines without that pseudo (Firefox). */
@supports not selector(::-webkit-scrollbar) {
	html { scrollbar-color: #3A2F22 #0B0908; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

html.intro-running body { overflow: hidden; }

img { max-width: 100%; display: block; }
/* snm_picture() wraps every theme image in <picture> for WebP + srcset. With
   display:contents the <img> stays the layout box, so every `... img` rule and
   the parallax hook keep working unchanged. */
picture { display: contents; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; }
h2 em, h1 em { font-style: italic; font-weight: 500; color: var(--gold-2); }
/* 6.17.0 — text-wrap: balance on headings, pretty on running copy. The hero
   title is excluded on purpose: its .mask lines are white-space:nowrap inside
   overflow:hidden and must never be re-broken. */
/* balance re-lays each wrapping heading several times. Section heads and the
   large card titles get it; the many small h3s (steps, service cards, tier
   names) do not — on the 412px Lighthouse viewport they all wrap and the
   blanket rule showed up as a ~100 ms main-thread task. */
h2, .legal h1, .e404 h1, .tier h3, .rule h3, .biz-arm h3 { text-wrap: balance; }
/* pretty is a per-paragraph layout cost: kept to the long-form copy (legal
   pages, FAQ answers) where orphans actually show. Lighthouse mobile lost a
   point with it on every homepage card paragraph. */
.legal p, .faq__answer p, .hero__sub { text-wrap: pretty; }
/* text-box trims the half-leading above the cap height and below the baseline
   of Fraunces display text, so gold rules and numerals sit optically against
   the letters. Not on .hero__title (see .mask above). */
h2, h3, .legal h1, .e404 h1, .ptier__price, .addon__price, .scope__name { text-box: trim-both cap alphabetic; }
p { margin: 0 0 1em; }
a { color: inherit; }
::selection { background: var(--gold); color: #171310; color: contrast-color(var(--gold)); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0B0908; }
::-webkit-scrollbar-thumb { background: #3A2F22; border-radius: 6px; border: 2px solid #0B0908; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 300;
	background: var(--gold); color: #171310; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================================
   Atmosphere: grain, scroll progress, custom cursor
   ========================================================================= */

.grain {
	position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
	animation: grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-2%, 1.4%); }
	50% { transform: translate(1.6%, -1.2%); }
	75% { transform: translate(-1.2%, -1.8%); }
	100% { transform: translate(0, 0); }
}

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 210; pointer-events: none; }
.progress i {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--gold), var(--gold-2));
	transform: scaleX(0); transform-origin: left;
}

.cursor { display: none; position: fixed; inset: 0; z-index: 220; pointer-events: none; }
html.has-cursor .cursor { display: block; }
html.has-cursor body,
html.has-cursor a, html.has-cursor button, html.has-cursor summary,
html.has-cursor input, html.has-cursor select, html.has-cursor textarea,
html.has-cursor label { cursor: none; }
.cursor__dot, .cursor__ring {
	position: absolute; top: 0; left: 0; border-radius: 50%;
	transform: translate(-50%, -50%);
}
.cursor__dot { width: 6px; height: 6px; background: var(--gold-2); }
.cursor__ring {
	width: 34px; height: 34px; border: 1px solid rgba(217, 178, 106, 0.6);
	transition: width 0.3s var(--ease-award), height 0.3s var(--ease-award),
		border-color 0.3s ease, opacity 0.3s ease;
}
.cursor.is-hover .cursor__ring { width: 58px; height: 58px; border-color: var(--gold-2); }
.cursor.is-down .cursor__ring { width: 24px; height: 24px; }
.cursor.is-hidden { opacity: 0; }

/* =========================================================================
   Intro sequence — choreographed build, counter, fly-to-topbar, dual veil
   ========================================================================= */

.intro { position: fixed; inset: 0; z-index: 400; display: none; }
html.js.intro-running .intro { display: block; }
.intro__panel, .intro__veil { position: absolute; inset: 0; }
.intro__panel {
	background: var(--bg); z-index: 2;
	transition: transform 0.38s var(--ease-luxe);
}
.intro__panel::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, transparent, rgba(217, 178, 106, 0.85), transparent);
}
.intro__veil {
	background: #16110D; z-index: 1;
	transition: transform 0.38s var(--ease-luxe) 0.06s;
}
.intro.is-lifting .intro__panel,
.intro.is-lifting .intro__veil { transform: translateY(-101%); }

.intro__stage {
	position: absolute; inset: 0; z-index: 3;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}

.intro__mark {
	width: 76px; height: 76px; color: var(--gold);
	transition: transform 0.42s var(--ease-luxe), opacity 0.14s ease 0.36s;
}
.intro__mark svg { width: 100%; height: 100%; }
.intro__mark path {
	stroke-dasharray: 420; stroke-dashoffset: 420;
	animation: draw 0.29s var(--ease-luxe) forwards;
}
.intro__mark g path:nth-child(1) { animation-delay: 0.05s; }
.intro__mark g path:nth-child(2) { animation-delay: 0.12s; }
.intro__mark g path:nth-child(3) { animation-delay: 0.20s; }
.intro__mark g path:nth-child(4) { animation-delay: 0.27s; }
.intro__mark svg > path { animation-duration: 0.52s; animation-delay: 0.31s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.intro__word {
	font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	transition: opacity 0.18s ease, transform 0.24s var(--ease-award);
}
.intro__letters { display: flex; gap: 0.3em; }
.intro__word b {
	font-weight: inherit; opacity: 0; transform: translateY(12px);
	animation: introWord 0.29s var(--ease-award) forwards;
}
.intro__word b:nth-of-type(1) { animation-delay: 0.37s; }
.intro__word b:nth-of-type(2) { animation-delay: 0.42s; }
.intro__word b:nth-of-type(3) { animation-delay: 0.46s; }
.intro__word em {
	font-family: var(--font-body); font-style: normal; font-weight: 700;
	font-size: 9px; letter-spacing: 0.55em; color: var(--gold);
	opacity: 0; transform: translateY(8px);
	animation: introWord 0.29s var(--ease-award) 0.53s forwards;
}
@keyframes introWord { to { opacity: 1; transform: none; } }

.intro__load {
	display: flex; align-items: center; gap: 14px;
	opacity: 0; transform: translateY(8px);
	transition: opacity 0.21s ease, transform 0.26s var(--ease-award);
}
.intro.is-counting .intro__load { opacity: 1; transform: none; }
.intro__bar { display: block; width: 150px; height: 1px; background: var(--line); overflow: hidden; }
.intro__bar b {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(90deg, var(--gold), var(--gold-2));
	transform: scaleX(var(--load, 0)); transform-origin: left;
}
.intro__count {
	font-family: var(--font-display); font-style: italic; font-size: 15px;
	color: var(--gold-2); letter-spacing: 0.06em; min-width: 3ch;
}

/* exit: content fades, mark flies to its topbar dock, veils lift */
.intro.is-exiting { pointer-events: none; }
.intro.is-exiting .intro__word,
.intro.is-exiting .intro__load { opacity: 0; transform: translateY(12px); }
.intro.is-exiting .intro__mark {
	transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1));
}
.intro.is-fading .intro__mark { opacity: 0; transform: scale(0.85); }
.intro.is-lifting .intro__mark { opacity: 0; }

/* =========================================================================
   Reveal system (JS-gated so no-JS visitors see everything)
   ========================================================================= */

.js .reveal {
	opacity: 0; transform: translateY(30px);
	transition: opacity 0.9s var(--ease-award), transform 0.9s var(--ease-award);
	transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* staggered grids */
.earn__grid .reveal:nth-child(2), .stats__grid .reveal:nth-child(2) { --d: 0.08s; }
.earn__grid .reveal:nth-child(3), .stats__grid .reveal:nth-child(3) { --d: 0.16s; }
.earn__grid .reveal:nth-child(4), .stats__grid .reveal:nth-child(4) { --d: 0.24s; }
.services__grid .reveal:nth-child(4n+2) { --d: 0.08s; }
.services__grid .reveal:nth-child(4n+3) { --d: 0.16s; }
.services__grid .reveal:nth-child(4n+4) { --d: 0.24s; }
.steps .reveal:nth-child(2), .faq__list .reveal:nth-child(2) { --d: 0.07s; }
.steps .reveal:nth-child(3), .faq__list .reveal:nth-child(3) { --d: 0.14s; }
.steps .reveal:nth-child(4), .faq__list .reveal:nth-child(4) { --d: 0.21s; }
.faq__list .reveal:nth-child(5) { --d: 0.28s; }
.faq__list .reveal:nth-child(6) { --d: 0.35s; }
.faq__list .reveal:nth-child(7) { --d: 0.42s; }
.faq__list .reveal:nth-child(8) { --d: 0.49s; }
.locations__list .reveal:nth-child(2) { --d: 0.06s; }
.locations__list .reveal:nth-child(3) { --d: 0.12s; }
.locations__list .reveal:nth-child(4) { --d: 0.18s; }
.locations__list .reveal:nth-child(5) { --d: 0.24s; }
.locations__list .reveal:nth-child(6) { --d: 0.3s; }

/* =========================================================================
   Buttons — sweep fill + magnetic base
   ========================================================================= */

/* `background: transparent` and `appearance: none` are load-bearing, not tidying.
   Every .btn was an <a> until the wizard's Back button — the site's first
   <button class="btn btn--ghost">. .btn--ghost sets only colour and border, so
   that button fell through to the UA's `buttonface`: a #F0F0F0 pill under
   #F5EFE4 text, 1.21:1, effectively invisible on the primary path of both
   funnels. .btn--gold and .btn--dark are declared after this and still win. */
.btn {
	position: relative; isolation: isolate; overflow: hidden;
	background: transparent; -webkit-appearance: none; appearance: none;
	display: inline-block; padding: 14px 30px; border-radius: 999px;
	font-family: var(--font-body); font-weight: 700; font-size: 15px;
	letter-spacing: 0.04em; text-decoration: none; border: 1px solid transparent;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease-award);
}
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	transform: translateY(102%);
	transition: transform 0.5s var(--ease-award);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--gold { background: var(--gold); color: #171310; color: contrast-color(var(--gold)); }
.btn--gold::before { background: #F2DCA9; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost::before { background: rgba(217, 178, 106, 0.14); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn--dark { background: #171310; color: var(--ivory); }
.btn--dark::before { background: #382D20; }
.btn--wide { width: 100%; text-align: center; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
	outline: 2px solid var(--gold-2); outline-offset: 3px;
}

/* =========================================================================
   Topbar
   ========================================================================= */

.topbar {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	display: flex; align-items: center; gap: 28px;
	padding: 16px var(--pad);
	background: rgba(11, 9, 8, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: transform 0.5s var(--ease-award), background-color 0.3s ease, border-color 0.3s ease;
}
html.intro-running .topbar { transform: translateY(-110%); }
.topbar.is-hidden { transform: translateY(-110%); }
.topbar.is-scrolled { background: rgba(11, 9, 8, 0.92); border-bottom-color: var(--line-soft); }
.topbar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topbar__mark { width: 38px; height: 38px; color: var(--gold); flex: none; transition: transform 0.7s var(--ease-award); }
.topbar__brand:hover .topbar__mark { transform: rotate(90deg); }
.topbar__mark svg { width: 100%; height: 100%; }
.topbar__words {
	font-family: var(--font-display); font-size: 22px; letter-spacing: 0.18em; font-weight: 600;
	display: flex; flex-direction: column; line-height: 1;
}
.topbar__words em {
	font-family: var(--font-body); font-style: normal; font-weight: 700;
	font-size: 9px; letter-spacing: 0.5em; color: var(--gold); margin-top: 5px;
}
.topbar__nav { display: flex; gap: 26px; margin-left: auto; }
.topbar__nav a {
	position: relative; text-decoration: none; font-size: 14px; font-weight: 500;
	letter-spacing: 0.06em; color: var(--ink); opacity: 0.85;
	transition: color 0.2s ease, opacity 0.2s ease;
}
.topbar__nav a::after {
	content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px;
	background: var(--gold-2); transform: scaleX(0); transform-origin: right;
	transition: transform 0.45s var(--ease-award);
}
.topbar__nav a:hover { color: var(--gold-2); opacity: 1; }
.topbar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.topbar__cta { padding: 11px 24px; }
.topbar__burger {
	display: none; background: none; border: 0; padding: 10px; cursor: pointer;
	flex-direction: column; gap: 6px; margin-left: auto;
}
.topbar__burger i { display: block; width: 26px; height: 2px; background: var(--gold); transition: transform 0.25s ease, opacity 0.25s ease; }
.topbar__burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
	position: fixed; inset: 0; z-index: 95; padding: 110px var(--pad) 40px;
	background: rgba(11, 9, 8, 0.98);
	display: flex; flex-direction: column; gap: 8px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
	text-decoration: none; font-family: var(--font-display); font-size: 30px;
	padding: 10px 0; border-bottom: 1px solid var(--line);
	transition: color 0.2s ease, padding-left 0.35s var(--ease-award);
}
.mobile-nav a:hover { color: var(--gold-2); padding-left: 10px; }
.mobile-nav .btn { margin-top: 24px; text-align: center; font-family: var(--font-body); font-size: 16px; border-bottom: 0; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
	position: relative; min-height: 100svh;
	/* inline-size container so .hero__chips can be capped in cqw — 100vw
	   includes the scrollbar gutter and over-ran the hero by up to 17px. */
	container-type: inline-size;
	display: flex; align-items: flex-end;
	/* Measured at 6.14.1 on a 1440x900 laptop: the hero ran to ~1000px, so the
	   promise chips wrapped past the fold and the Scroll cue was never seen on
	   load. The title now also scales with viewport HEIGHT (below), and the
	   vertical rhythm is tightened so the whole composition fits one screen. */
	padding: 120px var(--pad) clamp(40px, 6vh, 80px);
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%;
	scale: 1.08;
	transform: translate3d(0, var(--py, 0px), 0);
}
.js .hero__media img { animation: heroZoom 2.6s var(--ease-award) both; }
html.js:not(.intro-skip) .hero__media img { animation-delay: 1.35s; }
@keyframes heroZoom { from { scale: 1.22; } to { scale: 1.08; } }
/* A slow drift on the gold glow so the hero breathes after the intro settles —
   transform only, so it costs nothing on the main thread. */
.hero__glow { animation: glowDrift 16s ease-in-out infinite alternate; will-change: transform; }
@keyframes glowDrift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(14%, -12%) scale(1.18); }
}
.hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(11,9,8,0.55) 0%, rgba(11,9,8,0.15) 40%, rgba(11,9,8,0.9) 100%),
		linear-gradient(90deg, rgba(11,9,8,0.84) 0%, rgba(11,9,8,0.25) 60%, rgba(11,9,8,0.1) 100%);
}
.hero__glow {
	position: absolute; left: -10%; bottom: -30%; width: 60vw; height: 60vw;
	background: radial-gradient(circle, rgba(217, 178, 106, 0.14) 0%, transparent 62%);
	pointer-events: none;
}
.hero__inner { position: relative; max-width: 860px; }
html.js:not(.intro-skip) .hero .reveal { transition-delay: 1.48s; }
.hero__kicker {
	font-size: 13px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 26px;
	display: flex; align-items: center; gap: 16px;
}
.hero__kicker::before { content: ""; width: 44px; height: 1px; background: var(--gold); flex: none; }
.hero__title { font-size: clamp(52px, min(8.4vw, 11.5vh), 118px); letter-spacing: 0.005em; }
.mask { display: block; overflow: hidden; padding: 0.05em 0 0.14em; margin: -0.05em 0 -0.14em; white-space: nowrap; }
.js .mask__in {
	display: block; transform: translateY(115%);
	animation: maskUp 1.15s var(--ease-award) forwards; animation-delay: var(--md, 0.1s);
}
html.js:not(.intro-skip) .mask__in { animation-delay: calc(var(--md, 0.1s) + 1.27s); }
.mask:nth-child(2) .mask__in { --md: 0.22s; }
.mask:nth-child(3) .mask__in { --md: 0.34s; }
@keyframes maskUp { to { transform: translateY(0); } }
.hero__sub { max-width: 560px; margin: 24px 0 28px; font-size: clamp(16px, 1.4vw, 19px); color: #DDD5C6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
/* max-content lets the five chips sit on one line past the 860px copy column
   when the viewport has the room; the cap keeps them wrapping on anything
   narrower rather than running under the hero's edge. */
.hero__chips {
	list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0;
	width: max-content; max-width: calc(100vw - 2 * var(--pad)); max-width: calc(100cqw - 2 * var(--pad));
}
.hero__chips li {
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-2);
	display: flex; align-items: center; gap: 9px;
}
.hero__chips li::before {
	content: ""; width: 7px; height: 7px; background: var(--gold); flex: none;
	transform: rotate(45deg);
}
.hero__cue {
	position: absolute; right: var(--pad); bottom: 30px;
	display: flex; align-items: center; gap: 14px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--muted); transition: opacity 0.4s ease;
}
html.is-scrolled .hero__cue { opacity: 0; }
.hero__cue i { position: relative; display: block; width: 1px; height: 58px; background: var(--line); overflow: hidden; }
.hero__cue i::after {
	content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
	background: var(--gold-2); animation: cueDrop 2.1s var(--ease-luxe) infinite;
}
@keyframes cueDrop { to { transform: translateY(380%); } }

/* =========================================================================
   Sections shared
   ========================================================================= */

section { padding: clamp(72px, 11vh, 130px) var(--pad); position: relative; }
.section-head { margin-bottom: clamp(36px, 6vh, 64px); max-width: 860px; position: relative; }
.section-head__ghost {
	position: absolute; right: calc(var(--pad) * -0.15); top: -0.5em; z-index: 0;
	font-family: var(--font-display); font-weight: 600; line-height: 1;
	font-size: clamp(96px, 13vw, 190px);
	color: transparent; -webkit-text-stroke: 1px rgba(217, 178, 106, 0.26);
	pointer-events: none; user-select: none;
}
.section-head__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.section-head__kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); flex: none; }
.section-head h2 { font-size: clamp(34px, 4.8vw, 62px); position: relative; z-index: 1; }
.section-head--dark h2, .section-head--dark { color: var(--ink-on-ivory); }
.section-head--dark h2 em { color: #8A6C33; }
/* On the ivory sections (#F5EFE4) #8A6C33 measured 4.29:1 at 12px — just
   under AA. #7F6330 is 4.92:1 and is visually indistinguishable. */
.section-head--dark .section-head__kicker { color: #7F6330; }
.section-head--dark .section-head__kicker::before { background: #7F6330; }
.section-head--dark .section-head__ghost { -webkit-text-stroke-color: rgba(23, 19, 16, 0.16); }

/* =========================================================================
   Platform marquee
   ========================================================================= */

.platforms {
	padding-top: clamp(44px, 6vh, 68px); padding-bottom: clamp(44px, 6vh, 68px);
	border-bottom: 1px solid var(--line-soft); text-align: center; overflow: hidden;
}
.platforms__label {
	font-size: 12px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 26px;
}
.marquee {
	overflow: hidden; padding: 6px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__row {
	list-style: none; margin: 0; padding: 0 clamp(24px, 3vw, 48px) 0;
	display: flex; align-items: center; gap: clamp(24px, 3vw, 48px);
}
.marquee__row li {
	display: flex; align-items: center; gap: clamp(24px, 3vw, 48px);
	font-family: var(--font-display); font-style: italic; font-weight: 500;
	font-size: clamp(34px, 4.6vw, 68px); line-height: 1.15; white-space: nowrap;
	color: var(--ink); transition: color 0.3s ease;
}
.marquee__row li::after {
	content: ""; width: 9px; height: 9px; flex: none;
	background: var(--gold); transform: rotate(45deg); opacity: 0.55;
}
.marquee__row li.ghost {
	color: transparent; -webkit-text-stroke: 1px rgba(217, 178, 106, 0.55);
}
.marquee__row li:hover { color: var(--gold-2); }
.marquee__row li.ghost:hover { color: rgba(217, 178, 106, 0.35); }
.platforms__note { margin: 26px 0 0; font-size: 13.5px; color: var(--muted); }

/* =========================================================================
   Stats
   ========================================================================= */

.stats { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(48px, 7vh, 80px); border-bottom: 1px solid var(--line-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat { padding: 6px 10px; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat strong {
	display: block; font-family: var(--font-display); font-weight: 600;
	font-size: clamp(40px, 5.2vw, 68px); color: var(--gold-2); line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stats__note { margin: 32px 0 0; text-align: center; font-size: 12px; color: #7A7264; }

/* =========================================================================
   Earn (where you earn)
   ========================================================================= */

.earn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tier {
	position: relative; padding: 36px 32px 32px; border: 1px solid var(--line);
	border-radius: var(--radius); background: var(--bg-2); overflow: hidden;
	transition: transform 0.5s var(--ease-award), border-color 0.3s ease, box-shadow 0.5s ease;
}
.tier::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	transform: scaleX(0); transition: transform 0.6s var(--ease-award);
}
.tier:hover {
	transform: translateY(-6px); border-color: rgba(217, 178, 106, 0.55);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.tier:hover::after { transform: scaleX(1); }
.tier__num {
	font-family: var(--font-display); font-size: 15px; color: var(--gold);
	letter-spacing: 0.2em; display: block; margin-bottom: 20px;
}
.tier h3 { font-size: 27px; margin-bottom: 12px; transition: color 0.25s ease; }
.tier:hover h3 { color: var(--gold-2); }
.tier p { margin: 0; color: var(--muted); font-size: 15.5px; }
.tier__arrow {
	position: absolute; top: 34px; right: 28px; color: var(--gold); font-size: 20px;
	opacity: 0; transform: translateX(-10px);
	transition: opacity 0.35s ease, transform 0.45s var(--ease-award);
}
.tier:hover .tier__arrow { opacity: 1; transform: translateX(0); }

/* =========================================================================
   Services
   ========================================================================= */

.services { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc {
	min-width: 0; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--bg); overflow: hidden; display: flex; flex-direction: column;
	transition: transform 0.5s var(--ease-award), border-color 0.3s ease, box-shadow 0.5s ease;
}
.svc:hover {
	transform: translateY(-5px); border-color: rgba(217, 178, 106, 0.55);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.svc--media { grid-column: span 2; }
.svc__imgwrap { position: relative; overflow: hidden; }
.svc__imgwrap::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 9, 8, 0.55) 100%);
	opacity: 0.7; transition: opacity 0.4s ease;
}
.svc:hover .svc__imgwrap::after { opacity: 0.35; }
.svc__imgwrap img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
	transition: transform 1.2s var(--ease-award);
}
.svc--media:hover .svc__imgwrap img { transform: scale(1.06); }
/* Cinematic settle: the photo eases from a slight zoom to rest as its card
   reveals. `scale` is a separate property from the hover `transform`, so the
   two never fight. */
.js .svc__imgwrap img { scale: 1.1; transition: transform 1.2s var(--ease-award), scale 1.8s var(--ease-award); }
.js .reveal.is-in .svc__imgwrap img { scale: 1; }
.svc__body { padding: 24px 26px 22px; }
.svc__body h3 {
	display: inline; font-size: 22px;
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0% 1px; background-position: 0 96%; background-repeat: no-repeat;
	transition: background-size 0.5s var(--ease-award);
}
.svc:hover .svc__body h3 { background-size: 100% 1px; }
.svc__body p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

/* =========================================================================
   Process
   ========================================================================= */

.process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.process__media { position: sticky; top: 110px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.process__media img {
	width: 100%; height: 100%; object-fit: cover; scale: 1.14;
	transform: translate3d(0, var(--py, 0px), 0);
}
.steps { list-style: none; margin: 0; padding: 0 0 0 38px; position: relative; }
.steps::before, .steps::after {
	content: ""; position: absolute; left: 0; top: 34px; bottom: 34px; width: 1px;
}
.steps::before { background: var(--line); }
.steps::after {
	background: linear-gradient(180deg, var(--gold), var(--gold-2));
	transform: scaleY(var(--p, 0)); transform-origin: top;
}
.steps li { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
.steps li:last-child { border-bottom: 0; }
.steps li > span {
	font-family: var(--font-display); color: transparent; font-size: 20px;
	-webkit-text-stroke: 1px var(--gold);
	letter-spacing: 0.1em; flex: none; padding-top: 4px;
	transition: color 0.3s ease;
}
.steps li:hover > span { color: var(--gold); }
.steps h3 { font-size: 25px; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* =========================================================================
   Locations
   ========================================================================= */

.locations { background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.locations__media, .earn__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 40px; }
.locations__media img, .earn__media img {
	width: 100%; aspect-ratio: 21 / 8; object-fit: cover; scale: 1.14;
	transform: translate3d(0, var(--py, 0px), 0);
}
.locations__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px;
}
.locations__list li {
	min-width: 0; position: relative;
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
	padding: 20px 34px 20px 0; border-bottom: 1px solid var(--line);
}
.locations__list strong {
	font-family: var(--font-display); font-weight: 600; font-size: 21px; white-space: nowrap;
	transition: transform 0.45s var(--ease-award), color 0.25s ease;
}
.locations__list li:hover strong { transform: translateX(8px); color: var(--gold-2); }
/* flex-basis 150px: the description shares the row while it has that much room,
   and drops to its own line under a long name ("Carson City & Mound House")
   instead of wrapping into a three-line sliver. */
.locations__list span { flex: 1 1 150px; font-size: 13px; color: var(--muted); text-align: right; }
.loc-arrow {
	position: absolute; right: 2px; top: 50%; font-style: normal; color: var(--gold);
	opacity: 0; transform: translate(-12px, -50%);
	transition: opacity 0.3s ease, transform 0.45s var(--ease-award);
}
.locations__list li:hover .loc-arrow { opacity: 1; transform: translate(0, -50%); }

/* =========================================================================
   Brands (ivory)
   ========================================================================= */

.brands { background: var(--ivory); color: var(--ink-on-ivory); }
.brands__inner {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 72px); align-items: center;
}
.brands__copy > p { color: #4A4238; max-width: 520px; font-size: 17px; margin-bottom: 28px; }
.brands__media { margin: 0; border-radius: var(--radius); overflow: hidden; }
.brands__media img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scale: 1.14;
	transform: translate3d(0, var(--py, 0px), 0);
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq__list { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; padding: 24px 56px 24px 0; position: relative;
	font-family: var(--font-display); font-size: clamp(18px, 2vw, 23px); font-weight: 600;
	transition: color 0.25s ease, padding-left 0.4s var(--ease-award);
}
.faq summary:hover { color: var(--gold-2); padding-left: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 34px; height: 34px; transform: translateY(-50%);
	border: 1px solid var(--line); border-radius: 50%;
	background:
		linear-gradient(var(--gold), var(--gold)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--gold), var(--gold)) center / 1.5px 12px no-repeat;
	transition: transform 0.45s var(--ease-award), border-color 0.3s ease, background-color 0.3s ease;
}
.faq summary:hover::after { border-color: var(--gold); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__answer { overflow: hidden; transition: height 0.45s var(--ease-luxe); }
.faq__answer p { color: var(--muted); max-width: 720px; padding-bottom: 24px; margin: 0; }

/* =========================================================================
   Apply
   ========================================================================= */

.apply {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 72px); align-items: start;
	background: var(--bg-2); border-top: 1px solid var(--line-soft);
}
.apply__media { position: sticky; top: 110px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.apply__media img {
	width: 100%; object-fit: cover; aspect-ratio: 4 / 5; scale: 1.14;
	transform: translate3d(0, var(--py, 0px), 0);
}
.apply__intro { color: var(--muted); max-width: 540px; }

.form-note { padding: 14px 18px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.form-note--ok { background: rgba(103, 178, 106, 0.12); color: #9FD9A2; border: 1px solid rgba(103, 178, 106, 0.4); }
.form-note--err { background: rgba(206, 90, 74, 0.12); color: #EBA093; border: 1px solid rgba(206, 90, 74, 0.4); }

.apply__form { margin-top: 10px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { margin: 0 0 18px; min-width: 0; }
.field label {
	display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
	color: var(--gold-2); margin-bottom: 8px;
	transition: letter-spacing 0.3s var(--ease-award), color 0.25s ease;
}
.field:focus-within label { letter-spacing: 0.16em; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
	width: 100%; padding: 13px 16px; border-radius: 10px;
	background: var(--bg); border: 1px solid var(--line); color: var(--ink);
	font-family: var(--font-body); font-size: 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
	background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
	background-size: 6px 6px; background-repeat: no-repeat;
}
/* field-sizing: content (6.17.0) — the box grows with the message. `rows` is
   ignored once it applies, so the four-row floor is restated as a min-height. */
.field textarea { resize: vertical; field-sizing: content; min-height: calc(6.6em + 28px); max-height: 60vh; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(217, 178, 106, 0.16);
}
/* The server marks the field it rejected with aria-invalid. Without a visible
   treatment the round-trip hands back a form that looks entirely filled in and
   the visitor has to re-read every field to find the one that failed. Colour is
   not the only cue: aria-invalid carries it for assistive tech, the wizard
   opens on that step, and the notice above the form says what happened.
   Matches the .form-note--err red already used for form errors. */
.field [aria-invalid="true"] {
	border-color: rgba(206, 90, 74, 0.75);
	box-shadow: 0 0 0 3px rgba(206, 90, 74, 0.12);
}
.field--check input[aria-invalid="true"] { outline: 2px solid rgba(206, 90, 74, 0.75); outline-offset: 2px; }
/* :user-invalid (6.17.0): the same treatment, applied by the browser only after
   the visitor has interacted with the field — never on first paint. The upload
   affirmation is not `required` in markup (iron rule) so it cannot match here
   until the uploader makes it required. */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
	border-color: rgba(206, 90, 74, 0.75);
	box-shadow: 0 0 0 3px rgba(206, 90, 74, 0.12);
}
.field--check input:user-invalid, .checkgrid input:user-invalid { outline: 2px solid rgba(206, 90, 74, 0.75); outline-offset: 2px; }
.field--check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; letter-spacing: 0; color: var(--ink); font-size: 14.5px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.apply__form .btn--wide { margin-top: 10px; }

/* -------------------------------------------------------------------------
   Portfolio uploads (browser -> Cloudflare Worker -> R2)

   The picker starts hidden and main.js reveals it, so a visitor without
   JavaScript — or without Blob.slice / XHR upload progress — sees the plain
   explanation instead of a control that would silently do nothing. Both
   states need an explicit [hidden] rule: several of these carry a display
   value that outranks the UA's `[hidden] { display: none }`, which is the
   same trap the .btn and submit-button rules were written for at 6.12.0.
   ------------------------------------------------------------------------- */
.up[hidden], .up__nojs[hidden], .up__list[hidden], .up__affirm[hidden] { display: none; }

.up__intro { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.up__nojs {
	color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px;
	padding: 14px 18px; border: 1px dashed var(--line); border-radius: 10px;
}

.up__picks { display: flex; flex-wrap: wrap; gap: 10px; }
.up__pick { margin: 0; }
/* Off-screen rather than display:none — a display:none input is not focusable,
   so the control would be unreachable by keyboard. */
.up__pick input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.up__pick-label {
	display: inline-block; padding: 11px 20px; border: 1px solid var(--line);
	border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--ink); cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.up__pick:hover .up__pick-label { border-color: var(--gold); color: var(--gold-2); background: rgba(217, 178, 106, 0.08); }
.up__pick input:focus-visible + .up__pick-label { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.up__rule { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 16px 0 0; }
.up__rule a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }

.up__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.up__item {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px;
	align-items: center; padding: 12px 14px; border-radius: 10px;
	background: var(--bg-2); border: 1px solid var(--line-soft);
}
.up__item-head {
	grid-column: 1; grid-row: 1; min-width: 0;
	display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
}
.up__item-name { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.up__item-meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.up__item.is-done { border-color: rgba(103, 178, 106, 0.4); }
.up__item.is-done .up__item-meta { color: #9FD9A2; }
.up__item.is-error { border-color: rgba(206, 90, 74, 0.5); }
/* The failure reason is a sentence, not a label — uppercase tracking makes it
   unreadable at the exact moment it needs to be read. */
.up__item.is-error .up__item-meta { color: #EBA093; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }

.up__bar { grid-column: 1 / -1; grid-row: 2; height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.up__bar i {
	display: block; height: 100%; transform: scaleX(0); transform-origin: left;
	background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.up__remove {
	grid-column: 2; grid-row: 1; padding: 4px 2px; background: none; border: 0;
	font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer;
	transition: color 0.25s ease;
}
.up__remove:hover { color: #EBA093; }

/* Reserves its line so the layout doesn't jump each time a message appears. */
.up__status { min-height: 1.3em; margin: 14px 0 0; font-size: 13.5px; color: var(--gold-2); }
.up__affirm { margin: 20px 0 0; }

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
	padding: clamp(40px, 7vh, 80px) var(--pad) 40px; border-top: 1px solid var(--line-soft);
	text-align: center; overflow: hidden;
}
.footer__giant {
	font-family: var(--font-display); font-weight: 600; line-height: 0.82;
	font-size: clamp(120px, 24vw, 340px); letter-spacing: 0.04em;
	color: transparent; -webkit-text-stroke: 1px rgba(217, 178, 106, 0.3);
	user-select: none; margin: 0 calc(var(--pad) * -1) -0.14em;
	transition: -webkit-text-stroke-color 0.5s ease;
}
.footer__giant:hover { -webkit-text-stroke-color: rgba(217, 178, 106, 0.55); }
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer__brand .topbar__mark { width: 46px; height: 46px; }
.footer__brand p { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: 0.18em; display: flex; flex-direction: column; line-height: 1; align-items: center; }
.footer__brand em { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: 0.5em; color: var(--gold); margin-top: 6px; }
.footer__line { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; }
.footer__mail {
	display: inline-block; margin: 10px 0 26px; font-family: var(--font-display);
	font-size: clamp(20px, 3vw, 30px); color: var(--gold-2); text-decoration: none;
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size 0.5s var(--ease-award), color 0.25s ease;
}
.footer__mail:hover { color: var(--gold); background-size: 100% 1px; }
/* #7A7264 measured 4.18:1 on the #0B0908 footer — a real 1.4.3 fail, and it
   carries the Privacy policy and Terms links, which are the only route to
   those pages from most of the site. #857D6E is 4.88:1. */
.footer__legal { color: #857D6E; font-size: 12.5px; margin: 0; }

/* =========================================================================
   Mobile apply pill
   ========================================================================= */

.apply-pill {
	position: fixed; right: 18px; bottom: 18px; z-index: 80; display: none;
	background: var(--gold); color: #171310; color: contrast-color(var(--gold)); text-decoration: none;
	font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
	padding: 13px 22px; border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transition: background-color 0.2s ease, opacity 0.25s ease, transform 0.25s ease;
}
.apply-pill:hover { background: var(--gold-2); }
.apply-pill.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (max-width: 1080px) {
	.apply-pill { display: inline-block; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1080px) {
	.topbar__nav { display: none; }
	.topbar__cta { margin-left: auto; }
	.topbar__burger { display: flex; margin-left: 0; }
	/* `.topbar--plain` is the two-link header on /terms/, /privacy-policy/ and
	   the 404. Those templates carry no burger and no mobile-nav, so the rule
	   above left them with a logo and nothing else on any phone — and the
	   footer links are the only other route to the legal pages. Two links fit,
	   so keep them rather than build a menu for them. Measured at 320px:
	   295px of content in a 296px box was too close, hence the tighter type
	   and gap below. */
	.topbar--plain .topbar__nav { display: flex; gap: 18px; }
	.services__grid { grid-template-columns: 1fr 1fr; }
	.svc--media { grid-column: span 2; }
	.stats__grid { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
	.stat + .stat { border-left: 0; }
	.stat:nth-child(even) { border-left: 1px solid var(--line-soft); }
	.process, .apply { grid-template-columns: 1fr; }
	.process__media, .apply__media { position: static; max-width: 640px; }
	.locations__list { grid-template-columns: 1fr 1fr; }
	.brands__inner { grid-template-columns: 1fr; }
	.brands__media { max-width: 480px; }
	.hero__cue { display: none; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.topbar { padding: 12px 20px; gap: 14px; }
	.topbar__words { font-size: 18px; }
	.topbar__cta { display: none; }
	.hero { padding-top: 120px; }
	/* .mask is white-space:nowrap + overflow:hidden, so an oversized line clips
	   silently. 12.5vw sized the longest line ("nobody else will.") to exactly
	   the box width, clipping it at <=360px. 11vw keeps ~12% headroom. */
	/* `.mask` is nowrap + overflow:hidden, so an oversized hero line clips
	   silently rather than wrapping. At 11vw the longest line on /venues/
	   ("nobody else will.") measured 261px inside a 270px box at 320px wide —
	   3% headroom, which the Georgia fallback would eat if Fraunces failed to
	   load. 10.5vw takes it to ~21px. Re-measure with a Range over the text
	   node after any hero copy change; scrollWidth reports the box, not the text. */
	.hero__title { font-size: clamp(32px, 10.5vw, 60px); }
	.hero__kicker { letter-spacing: 0.3em; font-size: 11.5px; }
	/* Long venue place names must wrap rather than push the row off-screen. */
	.locations__list li { flex-wrap: wrap; gap: 2px 16px; padding-right: 8px; }
	.locations__list strong { white-space: normal; }
	.locations__list span { text-align: left; }
	.topbar__burger { padding: 17px 10px; }
	/* The wordmark and both nav links have to share 270px of usable width at
	   320px. Measured: the links wrap to two lines there and still fit, but
	   "GROUP LTD" broke across lines too, which read as a broken logo — so the
	   sub-line is nowrap and its tracking tightened to buy the room back. */
	.topbar--plain { gap: 10px; }
	.topbar--plain .topbar__words em { letter-spacing: 0.3em; white-space: nowrap; }
	.topbar--plain .topbar__nav { gap: 14px; }
	.topbar--plain .topbar__nav a { font-size: 13px; letter-spacing: 0.02em; }
	.services__grid { grid-template-columns: 1fr; }
	.svc--media { grid-column: span 1; }
	.earn__grid { grid-template-columns: 1fr; }
	.field-row { grid-template-columns: 1fr; }
	.locations__list { grid-template-columns: 1fr; }
	.locations__media img, .earn__media img { aspect-ratio: 16 / 10; }
	.steps { padding-left: 28px; }
	.steps li { gap: 16px; }
	.section-head__ghost { font-size: clamp(76px, 20vw, 110px); top: -0.35em; }
	.marquee__row li { font-size: clamp(30px, 9vw, 44px); }
	.footer__giant { font-size: clamp(110px, 30vw, 190px); }
}

/* =========================================================================
   v6 — VENUE MARKETING PAGE
   Ad-law rules band, package pricing, add-ons, coverage note, check grid
   ========================================================================= */

.hero--venues .hero__media img { object-position: 55% 45%; }
.hero--venues:not(:has(.hero__media)) { background: linear-gradient(160deg, var(--bg-3), var(--bg)); }

/* Media blocks are dropped when the art isn't on disk — collapse to one column. */
.process--nomedia, .apply--nomedia { grid-template-columns: 1fr; }

/* ---------------------------------------- Rules band (ivory contrast) --- */

.rules { background: var(--ivory); color: var(--ink-on-ivory); }
.rules__inner { max-width: 1180px; margin: 0 auto; }
.rules__lede {
	font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 26px);
	line-height: 1.4; color: #3B342B; max-width: 720px; margin: -14px 0 44px;
}
.rules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rule {
	position: relative; padding: 32px 34px 30px;
	border: 1px solid rgba(23, 19, 16, 0.16); border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.45);
	transition: transform 0.5s var(--ease-award), border-color 0.3s ease, box-shadow 0.5s ease;
}
.rule:hover {
	transform: translateY(-5px); border-color: rgba(138, 108, 51, 0.55);
	box-shadow: 0 20px 46px rgba(23, 19, 16, 0.12);
}
.rule__num {
	display: block; margin-bottom: 16px;
	font-family: var(--font-display); font-size: 15px; letter-spacing: 0.2em; color: #8A6C33;
}
.rule h3 { font-size: 25px; margin-bottom: 10px; color: var(--ink-on-ivory); }
.rule p { margin: 0; color: #4A4238; font-size: 15.5px; }
.rules__note {
	margin: 38px 0 0; padding-top: 26px; border-top: 1px solid rgba(23, 19, 16, 0.14);
	font-size: 14px; color: #5C5347; font-style: italic; max-width: 860px;
}

/* ---------------------------------------------------- Package pricing --- */

.pricing { background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.pricing__lede { max-width: 760px; color: var(--muted); margin: -14px 0 8px; }

.pband { margin: clamp(44px, 6vh, 72px) 0 24px; }
.pband__title {
	font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 600;
	display: flex; align-items: center; gap: 18px;
}
.pband__title::after {
	content: ""; flex: 1; height: 1px; background: var(--line);
}
.pband__sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 640px; }
.pband--feature .pband__title { color: var(--gold-2); }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }

.ptier {
	position: relative; min-width: 0; display: flex; flex-direction: column;
	padding: 30px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--bg); overflow: hidden;
	transition: transform 0.5s var(--ease-award), border-color 0.3s ease, box-shadow 0.5s ease;
}
.ptier::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--tier-accent, var(--gold));
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.6s var(--ease-award);
}
.ptier:hover {
	transform: translateY(-6px); border-color: rgba(217, 178, 106, 0.55);
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}
.ptier:hover::before { transform: scaleX(1); }
.ptier--bronze { --tier-accent: #C08A5A; }
.ptier--silver { --tier-accent: #C3CCD4; }
.ptier--gold { --tier-accent: #D9B26A; }
.ptier--platinum { --tier-accent: #E6ECF0; }

.ptier__name {
	font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1;
	color: var(--tier-accent, var(--gold)); margin: 0;
}
.ptier__tag {
	margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--muted);
}
.ptier__price {
	font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1;
	color: var(--ink); margin: 16px 0 20px; font-variant-numeric: tabular-nums;
}
.ptier__price span { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); }
.ptier__plus { margin: 0 0 10px; font-style: italic; font-size: 13.5px; color: var(--muted); }
.ptier__list { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--muted); }
.ptier__list li { position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 1.45; }
.ptier__list li::before {
	content: ""; position: absolute; left: 0; top: 0.5em;
	width: 7px; height: 7px; background: var(--tier-accent, var(--gold));
	transform: rotate(45deg); opacity: 0.85;
}
.ptier__save {
	margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-2);
}
.ptier--bundle { background: linear-gradient(180deg, rgba(217, 178, 106, 0.06), transparent 60%), var(--bg); }

/* ------------------------------------------------------------ Add-ons --- */

.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.addon {
	display: flex; align-items: center; justify-content: space-between; gap: 22px;
	padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--bg); transition: border-color 0.3s ease, transform 0.4s var(--ease-award);
}
.addon:hover { border-color: rgba(217, 178, 106, 0.55); transform: translateX(4px); }
.addon strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.addon span { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); }
.addon__price {
	margin: 0; flex: none; text-align: right;
	font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--gold-2);
	font-variant-numeric: tabular-nums;
}
.addon__price em { font-family: var(--font-body); font-style: normal; font-size: 13px; color: var(--muted); }

.pricing__note { margin: 34px 0 0; font-size: 13px; color: #7A7264; max-width: 900px; }

/* ------------------------------- Home "For business" two-arm block --- */

.biz-arms { display: grid; gap: 18px; margin-top: 26px; }
.biz-arm {
	padding: 26px 28px 24px; border-radius: var(--radius);
	border: 1px solid rgba(23, 19, 16, 0.16); background: rgba(255, 255, 255, 0.45);
	transition: transform 0.5s var(--ease-award), border-color 0.3s ease, box-shadow 0.5s ease;
}
.biz-arm:hover {
	transform: translateY(-4px); border-color: rgba(138, 108, 51, 0.55);
	box-shadow: 0 18px 40px rgba(23, 19, 16, 0.12);
}
.biz-arm h3 { font-size: 24px; color: var(--ink-on-ivory); margin-bottom: 10px; }
.biz-arm p { color: #4A4238; font-size: 15.5px; margin-bottom: 18px; }
.biz-arms .reveal:nth-child(2) { --d: 0.08s; }

/* ------------------------------------------------- Coverage + form bits --- */

.locations__note { margin: 30px 0 0; font-size: 14px; color: var(--muted); }

.field--group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.field--group legend {
	padding: 0; margin-bottom: 12px; font-size: 13px; font-weight: 700;
	letter-spacing: 0.08em; color: var(--gold-2);
}
.checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.checkgrid label {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.checkgrid input {
	width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--gold);
}

/* ------------------------------------------------------ Reveal stagger --- */

.pgrid .reveal:nth-child(2), .rules__grid .reveal:nth-child(2) { --d: 0.07s; }
.pgrid .reveal:nth-child(3), .rules__grid .reveal:nth-child(3) { --d: 0.14s; }
.pgrid .reveal:nth-child(4), .rules__grid .reveal:nth-child(4) { --d: 0.21s; }
.addons .reveal:nth-child(2) { --d: 0.06s; }
.addons .reveal:nth-child(3) { --d: 0.12s; }
.addons .reveal:nth-child(4) { --d: 0.18s; }
.addons .reveal:nth-child(5) { --d: 0.24s; }

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 1080px) {
	.pgrid { grid-template-columns: 1fr 1fr; }
	.rules__grid { grid-template-columns: 1fr; }
	.addons { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pgrid { grid-template-columns: 1fr; }
	.checkgrid { grid-template-columns: 1fr; }
	.addon { flex-direction: column; align-items: flex-start; gap: 10px; }
	.addon__price { text-align: left; }
	.pband__title { font-size: 24px; }
	.rules__lede { font-size: 18px; }
}

/* =========================================================================
   6.15.0 — Pointer spotlight on cards

   A soft gold light that follows the cursor across a card. main.js writes
   --mx/--my on the card under the pointer (fine pointers only, never under
   reduced motion — it lives in the same gate as the custom cursor, which is
   also what adds html.has-cursor). --spot fades in on hover; @property makes
   that a real transition, and browsers without it simply switch.

   background-image only: every card keeps its own background-color, and the
   two ivory-section cards use the darker gold so the light reads on cream.
   ========================================================================= */

@property --spot {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

html.has-cursor .tier, html.has-cursor .svc, html.has-cursor .ptier,
html.has-cursor .addon, html.has-cursor .e404__route {
	background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 178, 106, var(--spot)), transparent 62%);
}
html.has-cursor .rule, html.has-cursor .biz-arm {
	background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(138, 108, 51, var(--spot)), transparent 62%);
}
/* The bundle tier's own top-down sheen is a background-image too; keep it. */
html.has-cursor .ptier--bundle {
	background-image:
		radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 178, 106, var(--spot)), transparent 62%),
		linear-gradient(180deg, rgba(217, 178, 106, 0.06), transparent 60%);
}
/* These cards are ALSO .reveal elements. This rule outranks `.js .reveal`
   (0,2,1 vs 0,2,0), so it has to carry the reveal's opacity/transform
   transition and its stagger delay (--d) itself — the first cut of 6.15.0
   listed only the hover properties, and every card on a fine-pointer device
   popped in with no fade and no stagger. Caught by the motion audit, not by a
   screenshot. */
html.has-cursor .tier, html.has-cursor .svc, html.has-cursor .ptier,
html.has-cursor .rule, html.has-cursor .biz-arm, html.has-cursor .addon {
	transition:
		opacity 0.9s var(--ease-award) var(--d, 0s),
		transform 0.9s var(--ease-award) var(--d, 0s),
		border-color 0.3s ease, box-shadow 0.5s ease, --spot 0.45s ease;
}
html.has-cursor .e404__route { transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.45s var(--ease-award), --spot 0.45s ease; }
html.has-cursor .tier:hover, html.has-cursor .svc:hover, html.has-cursor .ptier:hover,
html.has-cursor .addon:hover, html.has-cursor .e404__route:hover { --spot: 0.12; }
html.has-cursor .rule:hover, html.has-cursor .biz-arm:hover { --spot: 0.10; }

/* =========================================================================
   Reduced motion — everything calm, everything visible
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero__glow { animation: none; }
	.js .svc__imgwrap img { scale: 1; transition: none; }
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.js .mask__in { animation: none; transform: none; }
	.js .hero__media img { animation: none; scale: 1.05; }
	.marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
	.marquee__row { flex-wrap: wrap; justify-content: center; padding: 0; }
	.marquee__row[aria-hidden="true"] { display: none; }
	.grain { animation: none; }
	.hero__cue i::after { animation: none; }
	.intro { display: none !important; }
	.faq__answer { transition: none; }
	.steps::after { transform: scaleY(1); }
	.apply-pill { transition: none; }
	.btn::before { transition: none; }
}

/* =========================================================================
   v6.2 — LEGAL / PROSE PAGES (privacy policy)
   ========================================================================= */

.legal { padding: 150px var(--pad) 90px; max-width: 900px; margin: 0 auto; }
.legal__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 18px;
	display: flex; align-items: center; gap: 16px;
}
.legal__kicker::before { content: ""; width: 44px; height: 1px; background: var(--gold); flex: none; }
.legal h1 {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(38px, 6vw, 72px); line-height: 1.08; letter-spacing: 0.005em;
	margin: 0 0 20px;
}
.legal h1 em { font-style: italic; color: var(--gold); }
.legal__meta { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.legal__lede { font-size: clamp(17px, 1.5vw, 20px); color: #DDD5C6; margin: 0 0 10px; }
.legal__toc {
	list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px;
	counter-reset: toc;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a { color: var(--muted); text-decoration: none; font-size: 15px; transition: color 0.25s ease; }
/* The gap is a margin, not the trailing space inside content(). `.legal__toc a`
   is display:inline-flex (2.5.8 tap-target block, further down), which makes this
   ::before a flex item — and a flex item's leading and trailing white space is
   stripped, so it rendered as "01Agreeing to these terms". */
.legal__toc a::before { content: counter(toc, decimal-leading-zero); margin-right: 0.5em; color: var(--gold); font-weight: 700; }
.legal__toc a:hover { color: var(--gold-2); }

/* Cancel the global `section` padding (line ~401) — .legal owns its own rhythm,
   and the inherited var(--pad) was indenting body copy past the heading. */
.legal section { padding: 0; margin-top: 56px; scroll-margin-top: 100px; }
.legal section > h2 {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(23px, 2.6vw, 31px); line-height: 1.25; margin: 0 0 16px;
	padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.legal h3 {
	font-family: var(--font-body); font-weight: 700; font-size: 16px;
	letter-spacing: 0.02em; color: var(--gold-2); margin: 28px 0 10px;
}
.legal p { margin: 0 0 16px; color: #DDD5C6; }
.legal a { color: var(--gold-2); }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.legal ul li {
	position: relative; padding-left: 24px; margin-bottom: 9px; color: #DDD5C6;
}
.legal ul li::before {
	content: ""; position: absolute; left: 2px; top: 0.62em;
	width: 7px; height: 7px; background: var(--gold);
	transform: rotate(45deg); opacity: 0.6;
}
.legal__callout {
	margin: 26px 0; padding: 22px 24px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid var(--line);
}
.legal__callout p:last-child { margin-bottom: 0; }
.legal__contact {
	margin-top: 60px; padding: 30px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid var(--line);
}
.legal__contact p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.legal { padding-top: 120px; }
	.legal__toc { grid-template-columns: 1fr; }
}

/* =========================================================================
   v6.3 — 404
   ========================================================================= */

.e404 {
	/* overrides the global `section` padding so the block can centre properly */
	padding: 0 var(--pad);
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: flex-start;
	overflow: hidden;
}
.e404__ghost {
	position: absolute; right: 3vw; top: 50%; transform: translateY(-50%);
	font-family: var(--font-display); font-weight: 600; font-style: italic;
	font-size: clamp(150px, 26vw, 360px); line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(217, 178, 106, 0.16);
	pointer-events: none; user-select: none;
}
.e404__inner { position: relative; z-index: 1; max-width: 720px; width: 100%; }
.e404__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 22px;
	display: flex; align-items: center; gap: 16px;
}
.e404__kicker::before { content: ""; width: 44px; height: 1px; background: var(--gold); flex: none; }
.e404 h1 {
	font-size: clamp(44px, 7vw, 86px); line-height: 1.06; letter-spacing: 0.005em;
	margin: 0 0 24px;
}
.e404__sub { font-size: clamp(16px, 1.4vw, 19px); color: #DDD5C6; max-width: 540px; margin: 0 0 40px; }

.e404__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.e404__route {
	position: relative; display: block; text-decoration: none;
	padding: 26px 46px 26px 26px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid var(--line);
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.45s var(--ease-award);
}
.e404__route strong {
	display: block; font-family: var(--font-display); font-weight: 600;
	font-size: 21px; margin-bottom: 8px; color: var(--ink);
}
.e404__route span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.e404__route i {
	position: absolute; right: 22px; top: 30px; font-style: normal; color: var(--gold);
	opacity: 0; transform: translateX(-8px);
	transition: opacity 0.3s ease, transform 0.45s var(--ease-award);
}
.e404__route:hover {
	border-color: var(--gold); background: var(--bg-3); transform: translateY(-3px);
}
.e404__route:hover i { opacity: 1; transform: none; }
.e404__route:hover strong { color: var(--gold-2); }

.e404__help { margin: 34px 0 0; font-size: 15px; color: var(--muted); }
.e404__help a { color: var(--gold-2); }

@media (max-width: 640px) {
	.e404 { padding-top: 130px; padding-bottom: 80px; min-height: 0; }
	.e404__routes { grid-template-columns: 1fr; }
	.e404__ghost { font-size: clamp(110px, 34vw, 200px); right: 4vw; top: 9%; transform: none; opacity: 0.7; }
}

/* =========================================================================
   v6.6 — ACCESSIBILITY
   ========================================================================= */

/* WCAG 2.2.2 (Level A): the marquee scrolls automatically for longer than
   five seconds and carries information, so it needs a pause mechanism that
   is not hover-only. Hidden under reduced-motion, where it never animates. */
.marquee__toggle {
	/* Sits AFTER .marquee, never inside it — .marquee is overflow:hidden and the
	   button would be clipped and would overlap the scrolling names. */
	display: inline-flex; align-items: center; gap: 8px;
	margin: 14px auto 0; 
	min-height: 32px; padding: 6px 14px;
	background: rgba(11, 9, 8, 0.72); border: 1px solid var(--line);
	border-radius: 999px; cursor: pointer;
	font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
	/* 0.55 measured 3.62:1 against #0B0908 (Lighthouse, 6.14.1) — an AA fail on
	   the one control that exists for accessibility. 0.78 is ~6.2:1. */
	opacity: 0.78; transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.marquee__toggle:hover,
.marquee__toggle:focus-visible { opacity: 1; border-color: var(--gold); color: var(--gold-2); }
.marquee__toggle-icon {
	width: 9px; height: 11px; flex: none;
	border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* paused -> icon becomes a play triangle */
.marquee.is-paused .marquee__toggle-icon {
	width: 0; height: 0; border: 6px solid transparent;
	border-left: 9px solid currentColor; border-right: 0;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
/* Keyboard users tabbing past the marquee also get a stop. */
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* WCAG 2.5.8 (AA): 24x24 minimum target size. */
.topbar__nav a { display: inline-flex; align-items: center; min-height: 24px; }
.legal__toc a { display: inline-flex; align-items: center; min-height: 24px; }
.field--check input, .checkgrid input { width: 22px; height: 22px; }
.field--check label, .checkgrid label { min-height: 24px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
	.marquee__toggle { display: none; }
}

/* =========================================================================
   v6.10 — VENUE SCOPING WIZARD
   Progressive enhancement: without JS the form is one page and every rule
   below is inert, because .is-wizard is only added by main.js.
   ========================================================================= */

.wz-rail {
	list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
	margin: 0 0 30px; padding: 0 0 20px; border-bottom: 1px solid var(--line-soft);
	counter-reset: wz;
}
.wz-rail__item {
	counter-increment: wz;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); opacity: 0.45; transition: opacity 0.3s ease, color 0.3s ease;
}
.wz-rail__item::before {
	content: counter(wz, decimal-leading-zero) " ";
	color: var(--gold); font-weight: 700;
}
.wz-rail__item.is-done { opacity: 0.75; }
.wz-rail__item.is-current { opacity: 1; color: var(--ink); }

.wz-nav { display: flex; gap: 12px; margin-top: 26px; }
.wz-nav .btn { flex: 0 0 auto; }
/* `.btn { display: inline-block }` outranks the UA's `[hidden] { display: none }`,
   so every button the wizard hides needs saying explicitly. Without the submit
   rule the final "Submit application" / "Send enquiry" button stayed painted on
   every step — and clicking it did nothing at all, because the required fields
   in the display:none steps are invalid and unfocusable, so the browser refuses
   to submit and reports nothing to the visitor. */
.wz-back[hidden],
.wz-next[hidden],
.apply__form button[type="submit"][hidden] { display: none; }

/* Step announcer — carries "Step 2 of 5" to screen readers only. */
.wz-status {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Result panel */
.scope {
	margin: 26px 0 4px; padding: 28px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid var(--line);
}
.scope[hidden] { display: none; }
.scope__kicker {
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 12px;
}
.scope__name {
	font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1; margin: 0 0 6px; color: var(--ink);
}
.scope__price {
	font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px);
	color: var(--gold-2); margin: 0 0 14px;
}
.scope__fits { color: #DDD5C6; margin: 0 0 18px; }
.scope__list { list-style: none; margin: 0 0 18px; padding: 0; }
.scope__list li {
	position: relative; padding-left: 22px; margin-bottom: 7px;
	color: #DDD5C6; font-size: 15.5px;
}
.scope__list li::before {
	content: ""; position: absolute; left: 2px; top: 0.6em;
	width: 6px; height: 6px; background: var(--gold);
	transform: rotate(45deg); opacity: 0.7;
}
.scope__flag {
	margin: 0 0 18px; padding: 14px 16px; border-radius: 10px;
	background: rgba(217, 178, 106, 0.09); border: 1px solid var(--line-soft);
	color: var(--gold-2); font-size: 14.5px; line-height: 1.55;
}
.scope__flag[hidden] { display: none; }
.scope__note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 640px) {
	.wz-rail { gap: 4px 14px; }
	.wz-rail__item { font-size: 11px; letter-spacing: 0.1em; }
	.wz-nav { flex-direction: column; }
	.wz-nav .btn { width: 100%; text-align: center; }
	.scope { padding: 22px 18px; }
}


/* =========================================================================
   6.17.0 — WP1 front-end release (2026-09-07)

   Native platform features layered on the existing system. Every motion rule
   below sits inside `prefers-reduced-motion: no-preference`; feature-gated
   rules sit inside @supports so unsupporting engines keep the 6.16.0 path.
   Research and support notes: RESEARCH-FEATURES-2026.md §A.
   ========================================================================= */

/* ---- A1 cross-document + A2 same-document View Transitions -------------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	/* The wordmark and bar persist across / <-> /venues/ <-> legal pages; the
	   rest of the page cross-fades. index.php's head script skips the intro
	   when it lands inside a transition (pagereveal.viewTransition). */
	.topbar { view-transition-name: topbar; }
	.topbar__brand { view-transition-name: brand; }
	::view-transition-old(root) { animation-duration: 0.32s; }
	::view-transition-new(root) { animation-duration: 0.42s; }
	::view-transition-group(topbar), ::view-transition-group(brand) { animation-duration: 0.45s; animation-timing-function: var(--ease-luxe); }
	/* Wizard steps share one name, which is only legal while exactly one of
	   them is rendered. hidden="until-found" steps ARE rendered (they are
	   content-visibility:hidden boxes, not display:none), so the name is
	   scoped to the step without the attribute — the audit caught the
	   "duplicate view-transition-name" abort the blanket rule produced. */
	.is-wizard .wz:not([hidden]) { view-transition-name: wz-step; }
	::view-transition-group(wz-step) { animation-duration: 0.3s; animation-timing-function: var(--ease-luxe); }
}

/* ---- A3 native exclusive accordion with ::details-content animation ----- */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
	.faq details::details-content {
		block-size: 0; overflow-y: clip;
		transition: block-size 0.45s var(--ease-luxe), content-visibility 0.45s allow-discrete;
	}
	.faq details[open]::details-content { block-size: auto; }
	/* main.js hands the animation to CSS here; the JS height path stays for
	   engines without interpolate-size (Safari/Firefox at 2026-09). */
	.faq details.is-native .faq__answer { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
	.faq details::details-content { transition: none; }
}

/* ---- A5 mobile nav as a popover (top layer, Esc + light dismiss) -------- */
/* UA popover styles (inset:0 margin:auto fit-content border padding) are all
   restated. Below the topbar rather than over it, so the burger stays visible
   and clickable — measured heights: 68px at <=640px, 76px above. */
.mobile-nav[popover] {
	position: fixed; inset: 76px 0 0 0; margin: 0; width: auto; height: auto;
	max-width: none; max-height: none; border: 0; padding: 32px var(--pad) 40px;
	color: inherit; overflow: auto; overscroll-behavior: contain;
}
.mobile-nav[popover]:not(:popover-open) { display: none; }
.mobile-nav[popover]::backdrop { background: transparent; }
@supports (anchor-name: --x) {
	.topbar { anchor-name: --topbar; }
	.mobile-nav[popover] { top: anchor(--topbar bottom); }
}
@media (max-width: 640px) {
	.mobile-nav[popover] { top: 68px; }
	@supports (anchor-name: --x) { .mobile-nav[popover] { top: anchor(--topbar bottom); } }
}

/* ---- A8 sibling-index() stagger (the :nth-child ladders above remain the
        fallback for engines without it) ---------------------------------- */
@supports (width: calc(sibling-index() * 1px)) {
	.earn__grid .reveal, .stats__grid .reveal, .biz-arms .reveal { --d: calc((sibling-index() - 1) * 0.08s); }
	.services__grid .reveal { --d: calc(mod(sibling-index() - 1, 4) * 0.08s); }
	.steps .reveal, .faq__list .reveal, .pgrid .reveal, .rules__grid .reveal { --d: calc((sibling-index() - 1) * 0.07s); }
	.locations__list .reveal, .addons .reveal { --d: calc((sibling-index() - 1) * 0.06s); }
}

/* ---- A14 content-visibility on the long tails ---------------------------- */
.faq, .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.legal section { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* ---- A16 scroll-driven: reading progress + hero parallax; F1 weight scrub -- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		/* Compositor-driven progress line; main.js stops writing the inline
		   transform when it detects this. */
		html.js .progress i { animation: progressGrow linear both; animation-timeline: scroll(root); }
		@keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		/* Hero parallax: `translate` is a separate property from the
		   transform the JS path drives, so the two can never stack. main.js
		   skips the hero in its parallax list when this applies. 300px matches
		   where the JS clamp reached its 28px ceiling. */
		.js .hero__media img {
			animation-name: heroZoom, heroDrift;
			animation-duration: 2.6s, auto;
			animation-timing-function: var(--ease-award), linear;
			animation-fill-mode: both, both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 300px;
		}
		html.js:not(.intro-skip) .hero__media img { animation-delay: 1.35s, 0s; }
		@keyframes heroDrift { from { translate: 0 0; } to { translate: 0 28px; } }
		/* F1 — the one kinetic moment: the hero serif thins from 600 to 400
		   over the first 60vh of scroll. wght only; opsz stays browser-driven
		   (the subset deliberately keeps that axis unpinned). */
		.hero__title { animation: wghtScrub linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
		.hero__title em { animation: wghtScrubEm linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
		@keyframes wghtScrub { from { font-weight: 600; } to { font-weight: 400; } }
		@keyframes wghtScrubEm { from { font-weight: 500; } to { font-weight: 400; } }
	}
}

/* ---- A17 tooltips (venues statute sentences, wizard hint) ---------------- */
.tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; line-height: 1; }
.tip__btn {
	width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--line); background: rgba(217, 178, 106, 0.08); color: var(--gold-2);
	font-family: var(--font-display); font-style: italic; font-size: 14px; line-height: 1;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.rule .tip__btn, .biz-arm .tip__btn { color: #7F6330; border-color: rgba(23, 19, 16, 0.25); }
.tip__btn:hover, .tip__btn:focus-visible { border-color: var(--gold); background: rgba(217, 178, 106, 0.16); }
.tip__box {
	position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
	width: min(340px, 80vw); margin: 0; padding: 14px 16px; border-radius: 10px; z-index: 60;
	background: var(--bg-3); border: 1px solid var(--line); color: var(--ink);
	font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.55;
	font-style: normal; letter-spacing: 0; text-transform: none; text-align: left;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* No-JS / no-popover: CSS hover + focus. main.js promotes the box to a popover
   (top layer, escapes overflow:hidden cards) when the API exists. */
.tip__box:not([popover]) { display: none; }
.tip:hover .tip__box:not([popover]), .tip:focus-within .tip__box:not([popover]) { display: block; }
.tip__box[popover] { position: fixed; inset: auto; transform: none; }
.tip__box[popover]:not(:popover-open) { display: none; }
@supports (anchor-name: --x) {
	.tip { anchor-scope: --tip; }
	.tip__btn { anchor-name: --tip; }
	.tip__box[popover] {
		position-anchor: --tip; position-area: block-start center;
		margin-block-end: 10px; position-try-fallbacks: flip-block;
	}
}
.field .tip { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 8px; }
.field .tip__hint { font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }

/* ---- A18 base-select: on-brand pickers where the engine allows ---------- */
@supports (appearance: base-select) {
	.field select, .field select::picker(select) { appearance: base-select; }
	.field select::picker-icon { display: none; }
	.field select::picker(select) {
		margin: 6px 0 0; padding: 6px; border-radius: 10px;
		background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
		font-family: var(--font-body); font-size: 15px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	}
	.field select option { padding: 10px 12px; border-radius: 6px; }
	.field select option:hover, .field select option:focus-visible { background: rgba(217, 178, 106, 0.12); outline: none; }
	.field select option:checked { color: var(--gold-2); }
	.field select option::checkmark { color: var(--gold); }
}

/* ---- F2 cursor label ---------------------------------------------------- */
.cursor__label {
	position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
	font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 1;
	letter-spacing: 0.22em; text-transform: uppercase; color: #171310; white-space: nowrap;
	opacity: 0; transition: opacity 0.25s ease;
}
.cursor.is-label .cursor__ring { width: 70px; height: 70px; background: var(--gold); border-color: var(--gold); }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; }

/* =========================================================================
   6.18.0 — owner-approved optional features (WP4)
   Dock (chat + assistant buttons), assistant panel, booking line, messaging
   links, Turnstile slot. Every block below renders only while its feature is
   configured (inc/snm-features.php).
   ========================================================================= */

.dock {
	position: fixed; left: 18px; bottom: 18px; z-index: 80;
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.dock__btn {
	display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px;
	border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
	background: rgba(11, 9, 8, 0.92);
	color: var(--ink); font-family: var(--font-body); font-size: 12px; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
.dock__btn:hover, .dock__btn:focus-visible { border-color: var(--gold); color: var(--gold-2); }
.dock__btn[hidden] { display: none; }
.dock__btn.is-loading { opacity: 0.6; cursor: progress; }
.dock__btn.is-error { border-color: rgba(206, 90, 74, 0.6); }
.dock__ico {
	width: 20px; height: 20px; border-radius: 50%; flex: none;
	border: 1px solid var(--gold); color: var(--gold);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-style: italic; font-size: 12px; font-weight: 600;
}
/* Phones: the apply pill already sits bottom-right, so the dock collapses to
   two icon-only rounds bottom-left (label kept for assistive tech). */
@media (max-width: 640px) {
	.dock { left: 12px; bottom: 12px; flex-direction: row; gap: 8px; }
	.dock__btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
	.dock__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* The assistant panel — a popover (top layer). The custom cursor is not in
   the top layer, so the native cursor is restored inside the panel. */
.ask {
	position: fixed; inset: auto auto 18px 18px; margin: 0;
	width: min(420px, calc(100vw - 36px)); max-height: min(78vh, 720px);
	padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--bg-2); color: var(--ink);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	display: flex; flex-direction: column; overflow: hidden;
}
.ask[popover]:not(:popover-open) { display: none; }
.ask:not([popover]):not(.is-open) { display: none; }
.ask::backdrop { background: rgba(11, 9, 8, 0.35); }
html.has-cursor .ask, html.has-cursor .ask * { cursor: auto; }
html.has-cursor .ask button, html.has-cursor .ask label, html.has-cursor .ask a { cursor: pointer; }
.ask__head { padding: 22px 24px 0; position: relative; }
.ask__kicker {
	font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 8px;
}
.ask__title { font-size: 22px; margin: 0 44px 0 0; }
.ask__close {
	position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--line); background: none; color: var(--ink); font-size: 22px; line-height: 1;
	cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease;
}
.ask__close:hover, .ask__close:focus-visible { border-color: var(--gold); color: var(--gold-2); }
.ask__note { padding: 12px 24px 0; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ask__note a { color: var(--gold-2); }
.ask__gate { padding: 12px 24px 0; margin: 0; }
.ask__log {
	flex: 1 1 auto; overflow: auto; min-height: 56px; padding: 14px 24px;
	display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain;
}
.ask__msg { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; max-width: 92%; }
.ask__msg--user { align-self: flex-end; background: rgba(217, 178, 106, 0.14); border: 1px solid var(--line-soft); }
.ask__msg--bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--line-soft); white-space: pre-wrap; }
.ask__msg.is-pending { color: var(--muted); font-style: italic; }
.ask__msg.is-error { color: #EBA093; }
.ask__form {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end;
	padding: 12px 24px 22px; border-top: 1px solid var(--line-soft);
}
.ask__label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-2); }
.ask__input {
	width: 100%; padding: 11px 14px; border-radius: 10px; resize: none;
	background: var(--bg); border: 1px solid var(--line); color: var(--ink);
	font-family: var(--font-body); font-size: 15px; line-height: 1.5;
	field-sizing: content; min-height: 46px; max-height: 140px;
}
.ask__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 178, 106, 0.16); }
.ask__input:disabled, .ask__send:disabled { opacity: 0.5; cursor: not-allowed; }
.ask__send { padding: 12px 22px; }
@media (max-width: 640px) {
	.ask { inset: auto 12px 12px 12px; width: auto; max-height: 82vh; }
}

/* "Prefer to talk?" line under a form intro (Calendly link, never an embed). */
.book { font-size: 14.5px; color: var(--muted); margin: -8px 0 22px; }
.book__link { color: var(--gold-2); font-weight: 700; text-underline-offset: 3px; }
.book__note { font-size: 13px; }

/* Footer messaging links. */
.footer__links { margin: -14px 0 22px; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.footer__links a { color: var(--gold-2); text-decoration: none; }
.footer__links a:hover { color: var(--gold); }

/* Turnstile slot inside the last wizard step — invisible mode renders
   nothing, so the slot collapses; an escalated interactive challenge gets
   room here. */
.turnstile { margin: 4px 0 14px; }
.turnstile:empty { margin: 0; }

/* ---- F3 footer local time --------------------------------------------- */
.footer__time {
	margin: -8px 0 12px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Print

   The screen palette is #F5EFE4 text on a #0B0908 background. Browsers omit
   background colours when printing by default, so with no print rules every
   page printed as near-white text on white paper — blank. That matters most on
   the two pages people actually print: the Terms invite it in section 7, and
   a privacy policy is the sort of thing people file.

   Everything here is inside @media print and cannot affect screen rendering.
   ========================================================================= */

@media print {
	/* Blanket, deliberately. Overriding the custom properties alone was not
	   enough — measured against a printed PDF of /terms/, gold (#D9B26A, 1.9:1
	   on white) and near-ivory fills still reached the page from rules that
	   name colours literally rather than through a variable. Nothing may print
	   in a colour that cannot be read on white paper. */
	*, *::before, *::after {
		color: #000 !important;
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
		border-color: #999 !important;
		filter: none !important;
	}

	html, body { background: #fff !important; }
	body { font-size: 11.5pt; line-height: 1.5; }
	.legal__meta { color: #333 !important; }

	/* Decoration, fixed furniture and anything that can't be paged. */
	.intro, .grain, .cursor, .progress, .topbar, .mobile-nav, .apply-pill,
	.skip-link, .hero__glow, .hero__cue, .hero__scrim, .footer__giant,
	.marquee, .marquee__toggle, .platforms, .wz-rail, .wz-nav, .wz-status,
	.up__picks, .up__remove, .up__status,
	.apply__media, .process__media, .locations__media, .brands__media,
	.hero__media, .svc__imgwrap, .section-head__ghost { display: none !important; }

	main, .legal, .apply__body, .process__body, .brands__inner, .rules__inner {
		display: block !important; padding: 0 !important; margin: 0 !important;
		max-width: none !important; width: auto !important;
	}
	section { padding: 0 0 18pt !important; }

	/* Reveal animations never run without a viewport intersection, which would
	   otherwise print the whole page as invisible, translated-down content. */
	.reveal, .reveal.is-in, .mask__in {
		opacity: 1 !important; transform: none !important;
		animation: none !important; transition: none !important;
	}
	.mask { overflow: visible !important; white-space: normal !important; }

	a { color: #000 !important; text-decoration: underline; }
	/* Printed legal text is worthless if its cross-references lose their target. */
	.legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.legal__toc a::after { content: none; }

	h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
	p, li, tr, .tier, .svc, .rule { page-break-inside: avoid; break-inside: avoid; }

	/* Native <details> print closed; the answers are the content. */
	.faq details > .faq__answer { display: block !important; height: auto !important; }
	.faq details::details-content { content-visibility: visible !important; block-size: auto !important; }
	.footer__time, .tip__btn, .dock, .ask, .turnstile, .book { display: none !important; }
	.faq summary { list-style: none; font-weight: 700; }

	.legal__callout, .legal__contact, .rules__note {
		border: 1px solid #999 !important; padding: 8pt !important;
	}
}