/* ==========================================================================
   Velmora Capital — main stylesheet
   ========================================================================== */

:root {
	--bg: #030303;
	--bg-alt: #0a0a0a;
	--fg: #f5f5f3;
	--fg-muted: #9a9a95;
	--fg-faint: #5c5c58;
	--line: rgba(255, 255, 255, 0.08);
	--gold: #d4af37;
	--gold-soft: rgba(212, 175, 55, 0.35);
	--radius-pill: 999px;
	--radius-card: 18px;
	--max-width: 1180px;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Cormorant Garamond', Georgia, serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	margin: 0;
	color: var(--fg);
}

p {
	margin: 0;
	color: var(--fg-muted);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Utility ---------- */

.pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--gold-soft);
	color: var(--gold);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.pill-muted {
	border-color: var(--line);
	color: var(--fg-muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: var(--radius-pill);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	transition: all 0.25s ease;
	border: 1px solid transparent;
	white-space: nowrap;
}

.btn-solid {
	background: var(--gold);
	color: #0a0800;
	font-weight: 500;
}

.btn-solid:hover {
	background: #e6c453;
	transform: translateY(-1px);
}

.btn-ghost {
	border-color: var(--line);
	color: var(--fg);
}

.btn-ghost:hover {
	border-color: var(--gold-soft);
	color: var(--gold);
}

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(3, 3, 3, 0.85), rgba(3, 3, 3, 0));
	backdrop-filter: blur(6px);
}

.header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 22px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	color: var(--fg);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 34px;
	flex: 1;
	justify-content: center;
}

.nav-links a {
	font-size: 0.85rem;
	color: var(--fg-muted);
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}

.nav-links a:hover {
	color: var(--fg);
}

.header-actions .btn {
	padding: 10px 22px;
	font-size: 0.82rem;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}

.nav-toggle span {
	width: 22px;
	height: 1px;
	background: var(--fg);
	display: block;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 140px 24px 80px;
	overflow: hidden;
}

.hero-canvas-wrap {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0.9;
	pointer-events: none;
}

#hero-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.hero-title {
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	line-height: 1.12;
	margin-bottom: 26px;
	color: var(--fg);
}

.hero-sub {
	font-size: 1.02rem;
	color: var(--fg-muted);
	max-width: 560px;
	margin: 0 auto 40px;
}

.hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-actions.center {
	justify-content: center;
}

.scroll-cue {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.scroll-cue::after {
	content: '';
	display: block;
	width: 1px;
	height: 34px;
	background: linear-gradient(to bottom, var(--fg-faint), transparent);
	margin: 10px auto 0;
	animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

.hero-social {
	position: absolute;
	bottom: 40px;
	left: 40px;
	z-index: 2;
	display: flex;
	gap: 14px;
}

.hero-social a {
	color: var(--fg-faint);
	transition: color 0.2s ease;
}

.hero-social a:hover {
	color: var(--gold);
}

/* ---------- Sections ---------- */

.section {
	padding: 120px 24px;
	position: relative;
}

.section-alt {
	background: rgba(10, 10, 10, 0.72);
}

.section-inner {
	max-width: var(--max-width);
	margin: 0 auto;
}

.section-inner-narrow {
	max-width: 720px;
}

.center {
	text-align: center;
}

.section-title {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	margin-bottom: 22px;
}

.section-lead {
	font-size: 1.02rem;
	max-width: 640px;
	color: var(--fg-muted);
	margin-bottom: 0;
}

.cta-section .section-lead {
	margin: 0 auto 36px;
}

/* Philosophy stat row */

.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 60px;
}

.stat h3 {
	font-size: 1.2rem;
	margin-bottom: 12px;
	color: var(--gold);
}

.stat p {
	font-size: 0.92rem;
}

/* Services card grid */

.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin-top: 56px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.card {
	background: rgba(10, 10, 10, 0.78);
	padding: 44px 40px;
	position: relative;
}

.card-index {
	display: block;
	font-family: var(--font-display);
	font-size: 0.85rem;
	color: var(--fg-faint);
	margin-bottom: 18px;
}

.card h3 {
	font-size: 1.3rem;
	margin-bottom: 14px;
}

.card p {
	font-size: 0.92rem;
}

/* Approach timeline */

.timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 60px;
}

.timeline-step {
	border-top: 1px solid var(--line);
	padding-top: 24px;
}

.timeline-index {
	display: block;
	font-family: var(--font-display);
	color: var(--gold);
	font-size: 0.95rem;
	margin-bottom: 14px;
}

.timeline-step h3 {
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.timeline-step p {
	font-size: 0.88rem;
}

/* Disclosure */

.disclosure-text p {
	font-size: 0.88rem;
	margin-bottom: 18px;
	color: var(--fg-faint);
}

.disclosure-text p:last-child {
	margin-bottom: 0;
}

/* Page template (WP default pages, e.g. Disclaimer / Privacy Policy) */

.page-section {
	padding-top: 160px;
}

.page-content {
	color: var(--fg-muted);
	font-size: 0.96rem;
}

.page-content p {
	margin-bottom: 18px;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
	padding: 70px 24px 30px;
	/* Positioned so it paints above the fixed 3D canvas instead of under it. */
	position: relative;
	z-index: 1;
}

.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}

.footer-tagline {
	margin-top: 14px;
	font-size: 0.85rem;
	max-width: 220px;
}

.footer-col h4 {
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-bottom: 18px;
	font-weight: 500;
}

.footer-col ul li {
	margin-bottom: 10px;
}

.footer-col a {
	font-size: 0.88rem;
	color: var(--fg-muted);
	transition: color 0.2s ease;
}

.footer-col a:hover {
	color: var(--gold);
}

.footer-bottom {
	max-width: var(--max-width);
	margin: 60px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-bottom p {
	font-size: 0.78rem;
	color: var(--fg-faint);
	margin: 0;
}

/* ---------- Reveal animation ---------- */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

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

@media (max-width: 900px) {
	.nav-links,
	.header-actions {
		display: none;
	}

	.site-nav.is-open .nav-links {
		display: flex;
		position: absolute;
		top: 68px;
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		padding: 24px 32px;
		gap: 20px;
	}

	.nav-toggle {
		display: flex;
	}

	.stat-row,
	.card-grid,
	.timeline {
		grid-template-columns: 1fr;
	}

	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.section {
		padding: 90px 20px;
	}

	.footer-inner {
		grid-template-columns: 1fr;
	}

	.hero-social {
		left: 20px;
	}
}

/* ---------- Account & members ---------- */

.auth-main {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.auth-section {
	width: 100%;
	padding: 160px 24px 100px;
	display: flex;
	justify-content: center;
}

.auth-card {
	width: 100%;
	max-width: 460px;
	background: rgba(10, 10, 10, 0.78);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 46px 42px 38px;
	text-align: center;
}

.auth-card-narrow {
	max-width: 440px;
}

.auth-title {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	margin: 0 0 14px;
	color: var(--fg);
}

.auth-lead {
	color: var(--fg-muted);
	font-size: 0.92rem;
	margin: 0 0 30px;
}

.auth-tabs {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 4px;
	margin-bottom: 30px;
}

.auth-tab {
	flex: 1;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--fg-muted);
	font-family: var(--font-body);
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.25s ease;
}

.auth-tab:hover {
	color: var(--fg);
}

.auth-tab.is-active {
	background: rgba(212, 175, 55, 0.12);
	color: var(--gold);
}

.auth-form {
	display: none;
	text-align: left;
}

.auth-form.is-active {
	display: block;
}

.auth-field {
	display: block;
	margin-bottom: 18px;
}

.auth-field > span {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-bottom: 8px;
}

.auth-field input {
	width: 100%;
	padding: 13px 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 0.95rem;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.auth-field input:focus {
	outline: none;
	border-color: var(--gold-soft);
	background: rgba(255, 255, 255, 0.05);
}

.auth-field small {
	display: block;
	margin-top: 7px;
	font-size: 0.75rem;
	color: var(--fg-faint);
}

.auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.auth-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--fg-muted);
	cursor: pointer;
}

.auth-check input {
	accent-color: var(--gold);
}

.auth-link {
	font-size: 0.82rem;
	color: var(--fg-muted);
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.auth-link:hover {
	color: var(--gold);
	border-bottom-color: var(--gold-soft);
}

.auth-submit {
	width: 100%;
	cursor: pointer;
	font-family: var(--font-body);
}

.auth-alert {
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 24px;
	text-align: left;
	font-size: 0.85rem;
}

.auth-alert p {
	margin: 0 0 6px;
}

.auth-alert p:last-child {
	margin-bottom: 0;
}

.auth-alert-error {
	background: rgba(190, 70, 60, 0.1);
	border: 1px solid rgba(190, 70, 60, 0.35);
	color: #e2a9a2;
}

.auth-alert-ok {
	background: rgba(212, 175, 55, 0.08);
	border: 1px solid var(--gold-soft);
	color: var(--gold);
}

.auth-fineprint {
	margin: 22px 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--fg-faint);
}

.auth-alt {
	margin: 26px 0 0;
	text-align: center;
}

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

.members-main {
	padding-top: 60px;
}

.members-hero {
	padding-bottom: 40px;
}

.members-empty {
	margin-top: 16px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.members-meta {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.members-meta li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
}

.members-meta span {
	color: var(--fg-faint);
}

.members-meta strong {
	font-weight: 400;
	color: var(--fg);
}

@media (max-width: 600px) {
	.auth-card {
		padding: 38px 24px 30px;
	}

	.auth-section {
		padding: 130px 20px 70px;
	}
}

/* Members link lives in the header button on desktop; the phone menu gets its own copy. */
@media (min-width: 901px) {
	.nav-links .nav-members {
		display: none;
	}
}

/* ==========================================================================
   Header & footer — 2.6.0
   The site chrome was rebuilt alongside the home page. These rules extend the
   blocks above rather than replacing them, so the portal and account pages
   pick up the same treatment without a second stylesheet.
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 18px;
	background: var(--gold);
	color: #120d04;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

/* ---------- Header ---------- */

.site-header {
	background: transparent;
	backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: background-color 0.45s ease, border-color 0.45s ease,
		backdrop-filter 0.45s ease, padding 0.45s ease;
}

.site-header.is-stuck {
	background: rgba(4, 4, 4, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

.header-inner {
	max-width: 1220px;
	padding: 18px clamp(22px, 5vw, 64px);
	gap: 20px;
	transition: padding 0.45s ease;
}

.site-header.is-stuck .header-inner {
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-logo {
	gap: 12px;
	flex: none;
}

.site-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	gap: 4px;
}

.site-logo-text strong {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.02rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--fg);
}

.site-logo-text small {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.5rem;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--gold);
}

.nav-links {
	gap: clamp(18px, 2.4vw, 38px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-muted);
	transition: color 0.3s ease;
}

.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--gold);
	transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover,
.nav-links a.is-current {
	color: var(--fg);
}

.nav-links a:hover::after,
.nav-links a.is-current::after {
	right: 0;
}

.header-actions {
	flex: none;
}

.hdr-login {
	padding: 11px 22px;
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 1px solid rgba(212, 175, 55, 0.4);
	border-radius: 2px;
	color: var(--fg);
	background: rgba(212, 175, 55, 0.05);
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.hdr-login:hover {
	border-color: var(--gold);
	background: rgba(212, 175, 55, 0.14);
	color: #f0d79a;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
		order: 3;
	}

	.header-actions {
		display: none;
	}

	.site-nav {
		position: fixed;
		inset: 0 0 auto;
		top: 0;
		padding: 86px clamp(22px, 6vw, 40px) 34px;
		background: rgba(4, 4, 4, 0.97);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--line);
		transform: translateY(-102%);
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: -1;
	}

	.site-nav.is-open {
		transform: none;
	}

	.nav-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.nav-links a {
		display: block;
		width: 100%;
		padding: 14px 0;
		font-size: 0.78rem;
		letter-spacing: 0.18em;
		border-bottom: 1px solid var(--line);
	}

	.nav-links a::after {
		display: none;
	}
}

/* ---------- Footer ---------- */

.site-footer {
	background: rgba(4, 4, 4, 0.9);
	padding: 44px clamp(22px, 5vw, 64px) 26px;
	z-index: 3;
}

.footer-inner {
	max-width: 1220px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 26px;
}

.footer-logo {
	flex: none;
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(14px, 2vw, 30px);
	flex: 1 1 auto;
}

.footer-nav a {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--fg-muted);
	transition: color 0.3s ease;
}

.footer-nav a:hover {
	color: var(--gold);
}

.footer-social {
	display: flex;
	gap: 10px;
	flex: none;
}

.footer-social a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--fg-faint);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.footer-social a:hover {
	color: var(--gold);
	border-color: rgba(212, 175, 55, 0.4);
}

.footer-social svg {
	width: 14px;
	height: 14px;
}

.footer-bottom {
	max-width: 1220px;
	margin: 30px auto 0;
	padding-top: 20px;
	align-items: flex-start;
	gap: 14px;
}

.footer-bottom .footer-fineprint {
	max-width: 62ch;
	font-size: 0.72rem;
	line-height: 1.7;
}

.footer-bottom .footer-copy {
	white-space: nowrap;
	font-size: 0.72rem;
}

@media (max-width: 760px) {
	.footer-inner {
		justify-content: center;
		text-align: center;
	}

	.footer-bottom {
		flex-direction: column;
	}

	.footer-bottom .footer-copy {
		white-space: normal;
	}
}

/* ==========================================================================
   Long-form pages
   --------------------------------------------------------------------------
   Everything the investor pages are built from, in the site's own dark and
   gold. The markup is stored as page content in WordPress, so these classes
   are the contract between what is typed in the editor and what appears on
   screen — renaming one here breaks the pages that use it.

   Scoped to .page-content so nothing here can reach the home page.
   ========================================================================== */

.page-template-default .page-section,
.page-section {
	padding-top: 150px;
	padding-bottom: 90px;
}

.page-section .section-inner-narrow {
	max-width: 940px;
}

.page-content {
	color: var(--fg-muted);
	font-size: 1rem;
	line-height: 1.72;
}
.page-content p { margin-bottom: 20px; max-width: 70ch; }
.page-content h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.95rem);
	color: var(--fg);
	margin: 0 0 18px;
}
.page-content h3 {
	font-family: var(--font-body);
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--fg);
	margin: 0 0 10px;
}
.page-content ul, .page-content ol { margin: 0 0 20px; padding-left: 1.25em; max-width: 70ch; }
.page-content li { margin-bottom: 8px; }
.page-content li::marker { color: var(--gold-soft); }
.page-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-content a:hover { color: #e6c453; }
.page-content strong { color: var(--fg); font-weight: 500; }

/* A block of the page. The rule between blocks does the work that a change of
   background does elsewhere, without stacking bands of colour. */
.pg-block { padding: 42px 0 0; margin-top: 42px; border-top: 1px solid var(--line); }
.pg-block:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.pg-block > :last-child { margin-bottom: 0; }

.pg-lead {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.45;
	color: var(--fg);
	margin-bottom: 20px;
	max-width: 34ch;
}
.page-content .pg-sub { font-size: 1.02rem; margin-bottom: 26px; }

.page-content .eyebrow {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

.section-head { margin-bottom: 28px; }
.section-head > :last-child { margin-bottom: 0; }

.page-content .grid { display: grid; gap: 18px; margin-bottom: 20px; }
.page-content .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.page-content .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.page-content .card {
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: rgba(255, 255, 255, 0.018);
	padding: 24px 24px 22px;
}
.page-content .card > :last-child { margin-bottom: 0; }
.page-content .card p { font-size: 0.94rem; }

.page-content .facts { border-top: 1px solid var(--line); margin: 0 0 20px; }
.page-content .facts div {
	display: grid;
	grid-template-columns: minmax(190px, 0.8fr) 1.2fr;
	gap: 4px 26px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
}
.page-content .facts dt { color: var(--fg); font-size: 0.94rem; font-weight: 400; }
.page-content .facts dd { margin: 0; color: var(--fg-muted); font-size: 0.94rem; }

.page-content .table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: rgba(255, 255, 255, 0.018);
	margin-bottom: 20px;
}
.page-content table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.page-content caption {
	text-align: left;
	font-size: 0.82rem;
	color: var(--fg-faint);
	padding: 16px 20px 12px;
	line-height: 1.6;
}
.page-content th, .page-content td {
	text-align: left;
	padding: 13px 20px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--fg-muted);
}
.page-content tbody tr:last-child th, .page-content tbody tr:last-child td { border-bottom: 0; }
.page-content th[scope="row"] { color: var(--fg); font-weight: 400; }
.page-content thead th {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-faint);
}
.page-content .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The risk note. Deliberately plain: a gold rule, a label and the text. It is
   not decoration and there is nothing to dismiss. */
.page-content .risk {
	border: 1px solid var(--gold-soft);
	border-left-width: 3px;
	background: rgba(212, 175, 55, 0.05);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 0 0 20px;
	max-width: 74ch;
}
.page-content .risk > :last-child { margin-bottom: 0; }
.page-content .risk p { color: #ddd6c4; }

.page-content .note {
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 0 0 20px;
	font-size: 0.94rem;
	max-width: 74ch;
}
.page-content .note > :last-child { margin-bottom: 0; }

/* A fact we do not have. */
.page-content .ph {
	background: rgba(212, 175, 55, 0.14);
	border-bottom: 1px dotted var(--gold);
	color: #e8d5a0;
	padding: 0 2px;
	margin: 0 -1px;
}

/* Two segments, labelled on the bar and again in the key beneath, so it never
   depends on colour or on the bar being seen at all. */
.page-content .alloc { max-width: 680px; margin-bottom: 20px; }
.page-content .alloc-bar {
	display: flex;
	height: 58px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--line);
}
.page-content .alloc-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
}
.page-content .alloc-gold { flex: 0 0 80%; background: linear-gradient(120deg, #d4af37, #b8923a); color: #191305; }
.page-content .alloc-fx { flex: 0 0 20%; background: #23262b; color: var(--fg); }
.page-content .alloc-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: 0.88rem; color: var(--fg-muted); }
.page-content .alloc-key span { display: inline-flex; align-items: center; gap: 8px; }
.page-content .alloc-key i { width: 11px; height: 11px; border-radius: 3px; display: block; flex: 0 0 auto; }
.page-content .alloc-cap { font-size: 0.85rem; color: var(--fg-faint); margin-top: 12px; }

.page-content .steps { list-style: none; padding: 0; margin: 0 0 20px; counter-reset: pgstep; max-width: 74ch; }
.page-content .steps > li {
	position: relative;
	padding: 0 0 26px 58px;
	margin: 0 0 0 18px;
	border-left: 1px solid var(--line);
}
.page-content .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.page-content .steps > li::before {
	counter-increment: pgstep;
	content: counter(pgstep, decimal-leading-zero);
	position: absolute;
	left: -18px;
	top: -4px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--gold-soft);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	color: var(--gold);
}
.page-content .steps > li > :last-child { margin-bottom: 0; }

.page-content .faq { border-top: 1px solid var(--line); max-width: 860px; margin-bottom: 20px; }
.page-content .faq details { border-bottom: 1px solid var(--line); }
.page-content .faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 19px 2px;
	cursor: pointer;
	list-style: none;
	color: var(--fg);
	font-size: 0.98rem;
}
.page-content .faq summary::-webkit-details-marker { display: none; }
.page-content .faq summary::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 8px;
	border-right: 1.5px solid var(--gold);
	border-bottom: 1.5px solid var(--gold);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.page-content .faq details[open] summary::after { transform: rotate(-135deg); }
.page-content .faq summary:hover { color: var(--gold); }
.page-content .faq .answer { padding: 0 2px 20px; }
.page-content .faq .answer > :last-child { margin-bottom: 0; }

.page-content .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	font-size: 0.86rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-content .btn-ink,
.page-content .btn-primary { background: var(--gold); border-color: var(--gold); color: #191305; }
.page-content .btn-ink:hover,
.page-content .btn-primary:hover { background: #e6c453; border-color: #e6c453; color: #191305; }
.page-content .btn-outline,
.page-content .btn-ghost { color: var(--fg); }
.page-content .btn-outline:hover,
.page-content .btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold); }

.page-content .form { max-width: 600px; }
.page-content .field { margin-bottom: 18px; }
.page-content .field label { display: block; color: var(--fg); font-size: 0.88rem; margin-bottom: 7px; }
.page-content .field .hint { display: block; font-size: 0.82rem; color: var(--fg-faint); margin-top: 6px; }
.page-content .field input,
.page-content .field select,
.page-content .field textarea {
	width: 100%;
	font: inherit;
	font-size: 0.96rem;
	color: var(--fg);
	background: #0a0a0a;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
}
.page-content .field textarea { min-height: 130px; resize: vertical; }
.page-content .field input:focus-visible,
.page-content .field select:focus-visible,
.page-content .field textarea:focus-visible { border-color: var(--gold-soft); outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 620px) {
	.page-section { padding-top: 120px; }
	.page-content .facts div { grid-template-columns: 1fr; gap: 2px; }
	.page-content .facts dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
	.page-content .alloc-seg { font-size: 0.78rem; }
	.page-content .alloc-fx { justify-content: flex-start; padding-left: 8px; }
	.page-content .steps > li { padding-left: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.page-content .faq summary::after { transition: none; }
}

/* ---------- Footer: who you would be contracting with ----------
   The entity block and the risk line sit on every page, above the fine print,
   rather than behind a link. .ph is defined here as well as inside
   .page-content because the footer uses it on every page too. */

.footer-entity {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 26px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 8px 42px;
	font-size: 0.82rem;
	line-height: 1.7;
}
.footer-entity p { margin: 0 0 10px; color: var(--fg-faint); }
.footer-entity strong { color: var(--fg-muted); font-weight: 500; }
.footer-entity .footer-risk {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--gold-soft);
	border-radius: 8px;
	color: var(--fg-muted);
}
.site-footer .ph {
	background: rgba(212, 175, 55, 0.14);
	border-bottom: 1px dotted var(--gold);
	color: #e8d5a0;
	padding: 0 2px;
}
@media (max-width: 760px) {
	.footer-entity { padding-left: 22px; padding-right: 22px; text-align: left; }
}