/* ==========================================================
   VorsorgePlus — warm-modern marketing theme stylesheet
   Prefix: vpt-  (theme-only, the dashboard plugin uses vpd-)

   Design language matches the iOS app 1:1:
     cream surface, sage accent, warm walnut ink, serif editorial
     titles, friendly DM Sans body. No gradients, no glassmorphism,
     no emoji icons, no orb backgrounds. Composition variety over
     card multiplication.

   Color tokens mirror the iOS VPColor enum so editing either side
   keeps the values in sync.
   ========================================================== */

/* ---------- Design tokens ---------- */
:root {
	/* Surfaces — cream → parchment → oat → walnut */
	--vpt-bg:           #FBF8F4; /* cream — page background */
	--vpt-surface:      #FFFFFF; /* clean card surface */
	--vpt-surface-alt:  #F7F3ED; /* parchment — accented section */
	--vpt-surface-deep: #F1EDE5; /* oat — pressed/footer surfaces */

	/* Ink — warm walnut family */
	--vpt-ink:          #261F18; /* primary text */
	--vpt-ink-muted:    #686057; /* secondary text */
	--vpt-ink-soft:     #9C948A; /* tertiary, captions */

	/* Borders — always low-contrast, never sharp */
	--vpt-border:       #E3DDD3;
	--vpt-border-soft:  #EFEAE2;

	/* Accent — deep sage */
	--vpt-accent:       #497160;
	--vpt-accent-soft:  #CED9CF;
	--vpt-on-accent:    #FFFFFF;

	/* Secondary warm accents (rare use) */
	--vpt-clay:         #C2785A; /* terracotta highlight */
	--vpt-clay-soft:    #F3E3D8;
	--vpt-brick:        #A8493E; /* destructive */

	/* Semantic — within the warm family */
	--vpt-success:      #58836F;
	--vpt-warning:      #D9942E;

	/* Type */
	--vpt-font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--vpt-font-serif:   'Playfair Display', 'New York', Georgia, 'Times New Roman', serif;
	--vpt-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* Geometry */
	--vpt-radius-sm:    8px;
	--vpt-radius:       14px;
	--vpt-radius-lg:    20px;
	--vpt-radius-xl:    28px;

	--vpt-container:        1140px;
	--vpt-container-narrow: 760px;
	--vpt-header-h:         72px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--vpt-font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--vpt-ink);
	background: var(--vpt-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

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

a {
	color: var(--vpt-accent);
	text-decoration: none;
	transition: opacity .18s ease, color .18s ease;
}
a:hover { opacity: .78; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vpt-font-serif);
	color: var(--vpt-ink);
	margin: 0 0 .4em;
	line-height: 1.18;
	letter-spacing: -.005em;
	font-weight: 600;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection {
	background: var(--vpt-accent-soft);
	color: var(--vpt-ink);
}

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

/* ---------- Skip link / a11y ---------- */
.vpt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vpt-ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 9999;
	font-size: 14px;
}
.vpt-skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
	position: absolute !important;
	left: -10000px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ---------- Container ---------- */
.vpt-container {
	width: 100%;
	max-width: var(--vpt-container);
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 768px) {
	.vpt-container { padding: 0 32px; }
}

/* ---------- Eyebrow — monospace chapter marker ---------- */
.vpt-eyebrow {
	display: inline-block;
	font-family: var(--vpt-font-mono);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 11px;
	font-weight: 600;
	color: var(--vpt-ink-muted);
	margin: 0 0 14px;
}

/* ---------- Buttons ---------- */
.vpt-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--vpt-font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 14px 22px;
	border-radius: 12px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .14s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
	-webkit-appearance: none;
	background: transparent;
	color: var(--vpt-ink);
	white-space: nowrap;
}
.vpt-button:active { transform: translateY(1px); }
.vpt-button-lg { font-size: 16px; padding: 16px 26px; }

.vpt-button-primary {
	background: var(--vpt-accent);
	color: var(--vpt-on-accent);
}
.vpt-button-primary:hover { background: #3D6353; opacity: 1; }

.vpt-button-ghost {
	background: var(--vpt-surface);
	color: var(--vpt-ink);
	border-color: var(--vpt-border);
}
.vpt-button-ghost:hover { background: var(--vpt-surface-alt); opacity: 1; }

.vpt-button-block { width: 100%; justify-content: center; }

.vpt-button-arrow {
	width: 14px; height: 14px;
	transition: transform .18s ease;
}
.vpt-button:hover .vpt-button-arrow { transform: translateX(2px); }

/* ---------- HEADER ---------- */
.vpt-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(251, 248, 244, .92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--vpt-border-soft);
}

.vpt-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--vpt-header-h);
	gap: 16px;
}

/* Brand — sage square with serif "V", matches iOS LoginView mark */
.vpt-brand,
.vpt-brand-wrap a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--vpt-ink);
	font-family: var(--vpt-font-serif);
	font-weight: 600;
	font-size: 17px;
}
.vpt-brand:hover { opacity: 1; }
.vpt-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--vpt-accent);
	color: #fff;
	font-family: var(--vpt-font-serif);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
}
.vpt-brand-name { letter-spacing: -.005em; }
.vpt-brand-wrap .custom-logo { max-height: 40px; width: auto; }

/* Nav */
.vpt-nav-primary { display: flex; align-items: center; }
.vpt-menu {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vpt-menu li a {
	font-size: 14px;
	font-weight: 500;
	color: var(--vpt-ink-muted);
	padding: 6px 0;
}
.vpt-menu li a:hover { color: var(--vpt-ink); opacity: 1; }

.vpt-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.vpt-header-actions .vpt-button {
	padding: 9px 16px;
	font-size: 14px;
}

.vpt-menu-toggle {
	display: none;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--vpt-border);
	border-radius: 10px;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.vpt-menu-toggle-bar,
.vpt-menu-toggle-bar::before,
.vpt-menu-toggle-bar::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 1.5px;
	background: var(--vpt-ink);
	border-radius: 2px;
	transition: transform .2s ease, top .2s ease;
}
.vpt-menu-toggle-bar { top: 50%; margin-top: -.75px; }
.vpt-menu-toggle-bar::before, .vpt-menu-toggle-bar::after { content: ''; left: 0; }
.vpt-menu-toggle-bar::before { top: -6px; }
.vpt-menu-toggle-bar::after  { top: 6px;  }

@media (max-width: 880px) {
	.vpt-nav-primary {
		position: absolute;
		top: var(--vpt-header-h);
		left: 0; right: 0;
		background: var(--vpt-surface);
		border-top: 1px solid var(--vpt-border-soft);
		display: none;
	}
	.vpt-nav-primary.is-open { display: block; }
	.vpt-menu {
		flex-direction: column;
		gap: 0;
		padding: 8px 24px 16px;
	}
	.vpt-menu li a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--vpt-border-soft);
		font-size: 16px;
	}
	.vpt-menu li:last-child a { border-bottom: none; }
	.vpt-header-actions .vpt-button-ghost { display: none; }
	.vpt-menu-toggle { display: block; }
}

/* ---------- HERO — asymmetric split: copy left, status mockup right ---------- */
.vpt-hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0 88px;
	background: var(--vpt-bg);
}

/* Single warm radial light — replaces the banned animated orbs */
.vpt-hero::before {
	content: '';
	position: absolute;
	top: -25%;
	right: -10%;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, rgba(73, 113, 96, 0.10) 0%, transparent 60%);
	pointer-events: none;
}

.vpt-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: center;
	position: relative;
	z-index: 1;
}
@media (min-width: 960px) {
	.vpt-hero-inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 64px;
	}
}

.vpt-hero-title {
	font-family: var(--vpt-font-serif);
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--vpt-ink);
	margin: 0 0 22px;
}
.vpt-hero-title-accent {
	display: block;
	color: var(--vpt-accent);
	font-style: italic;
	font-weight: 500;
}

.vpt-hero-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--vpt-ink-muted);
	max-width: 540px;
	margin: 0 0 32px;
}

.vpt-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 36px;
}

.vpt-hero-trust {
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--vpt-border-soft);
	max-width: 460px;
}
.vpt-hero-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--vpt-ink-muted);
}
.vpt-trust-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--vpt-accent-soft);
	color: var(--vpt-accent);
	flex-shrink: 0;
}
.vpt-trust-mark svg { width: 10px; height: 10px; }

/* Hero mockup card — mirrors the iOS dashboard readiness band */
.vpt-hero-card {
	background: var(--vpt-surface);
	border: 1px solid var(--vpt-border);
	border-radius: var(--vpt-radius-lg);
	padding: 26px;
	box-shadow: 0 22px 50px -28px rgba(38, 31, 24, .18);
}
.vpt-hero-card-eyebrow {
	font-family: var(--vpt-font-mono);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 10px;
	font-weight: 600;
	color: var(--vpt-ink-muted);
	margin: 0 0 14px;
}
.vpt-hero-metric {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0 0 14px;
}
.vpt-hero-metric-num {
	font-family: var(--vpt-font-serif);
	font-size: 56px;
	font-weight: 500;
	color: var(--vpt-ink);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.vpt-hero-metric-denom {
	font-family: var(--vpt-font-serif);
	font-size: 26px;
	color: var(--vpt-ink-soft);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.vpt-hero-metric-label {
	font-family: var(--vpt-font-sans);
	font-size: 14px;
	color: var(--vpt-ink-muted);
	margin-left: 10px;
	font-weight: 400;
	align-self: flex-end;
	padding-bottom: 6px;
}
.vpt-hero-progress {
	height: 5px;
	background: var(--vpt-surface-deep);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 20px;
}
.vpt-hero-progress-fill {
	height: 100%;
	width: 75%;
	background: var(--vpt-accent);
	border-radius: 999px;
}
.vpt-hero-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vpt-hero-card-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--vpt-border-soft);
}
.vpt-hero-card-row:last-child { border-bottom: none; }
.vpt-hero-card-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--vpt-accent-soft);
	color: var(--vpt-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vpt-hero-card-icon svg { width: 17px; height: 17px; }
.vpt-hero-card-icon.is-dim {
	background: var(--vpt-surface-deep);
	color: var(--vpt-ink-soft);
}
.vpt-hero-card-row-text { flex: 1; min-width: 0; }
.vpt-hero-card-row-title {
	font-family: var(--vpt-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--vpt-ink);
	margin: 0 0 1px;
}
.vpt-hero-card-row-meta {
	font-size: 12px;
	color: var(--vpt-ink-soft);
	margin: 0;
}
.vpt-hero-card-status {
	font-family: var(--vpt-font-mono);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(88, 131, 111, .14);
	color: var(--vpt-success);
}
.vpt-hero-card-status.is-draft {
	background: rgba(217, 148, 46, .14);
	color: var(--vpt-warning);
}
.vpt-hero-card-status.is-missing {
	background: var(--vpt-surface-deep);
	color: var(--vpt-ink-soft);
}

/* ---------- SECTIONS — shared spacing ---------- */
.vpt-section { padding: 96px 0; position: relative; }
@media (max-width: 720px) { .vpt-section { padding: 64px 0; } }

.vpt-section-head {
	max-width: 720px;
	margin: 0 0 56px;
}
.vpt-section-title {
	font-family: var(--vpt-font-serif);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--vpt-ink);
	margin: 0 0 16px;
}
.vpt-section-lead {
	font-size: 17px;
	color: var(--vpt-ink-muted);
	line-height: 1.6;
	max-width: 560px;
}

/* ---------- FEATURES — single bordered container, hairline gaps inside ---------- */
.vpt-section-features { background: var(--vpt-bg); }
.vpt-feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--vpt-border-soft);
	border: 1px solid var(--vpt-border-soft);
	border-radius: var(--vpt-radius-lg);
	overflow: hidden;
}
@media (min-width: 720px) {
	.vpt-feature-grid { grid-template-columns: 1fr 1fr; }
}

/* Each tile is just padding on surface — hairlines from grid gap */
.vpt-feature-card {
	background: var(--vpt-surface);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
}
.vpt-feature-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--vpt-accent-soft);
	color: var(--vpt-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	flex-shrink: 0;
}
.vpt-feature-icon svg { width: 22px; height: 22px; }
.vpt-feature-title {
	font-family: var(--vpt-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--vpt-ink);
	margin: 0 0 10px;
}
.vpt-feature-text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vpt-ink-muted);
	margin: 0;
}

/* ---------- SECURITY — parchment surface, side-by-side ---------- */
.vpt-section-security { background: var(--vpt-surface-alt); }
.vpt-security-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
@media (min-width: 960px) {
	.vpt-security-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 80px;
	}
}
.vpt-security-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}
.vpt-security-list li {
	padding: 18px 0;
	border-top: 1px solid var(--vpt-border);
	font-size: 15px;
	color: var(--vpt-ink-muted);
	line-height: 1.55;
}
.vpt-security-list li:last-child { border-bottom: 1px solid var(--vpt-border); }
.vpt-security-list strong {
	display: block;
	color: var(--vpt-ink);
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 4px;
	font-family: var(--vpt-font-sans);
}

.vpt-security-card {
	background: var(--vpt-surface);
	border: 1px solid var(--vpt-border);
	border-radius: var(--vpt-radius-lg);
	padding: 24px;
	box-shadow: 0 22px 50px -32px rgba(38, 31, 24, .18);
}
.vpt-security-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--vpt-border-soft);
	margin-bottom: 18px;
}
.vpt-security-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--vpt-accent-soft);
	color: var(--vpt-accent);
	flex-shrink: 0;
}
.vpt-security-lock svg { width: 20px; height: 20px; }
.vpt-security-card-title {
	font-family: var(--vpt-font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--vpt-ink);
	margin: 0 0 2px;
}
.vpt-security-card-meta {
	font-family: var(--vpt-font-mono);
	font-size: 11px;
	color: var(--vpt-ink-soft);
	margin: 0;
	letter-spacing: .04em;
}
.vpt-security-cipher {
	font-family: var(--vpt-font-mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--vpt-ink-muted);
	background: var(--vpt-surface-alt);
	border: 1px solid var(--vpt-border-soft);
	border-radius: var(--vpt-radius);
	padding: 18px;
	overflow-x: auto;
	margin: 0;
	white-space: pre;
}
.vpt-security-cipher code { font-family: inherit; background: none; padding: 0; }
.vpt-security-card-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--vpt-ink-muted);
	padding-top: 16px;
}
.vpt-security-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vpt-success);
	box-shadow: 0 0 0 0 rgba(88, 131, 111, .5);
	animation: vpt-pulse 2.2s ease-out infinite;
	flex-shrink: 0;
}
@keyframes vpt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(88, 131, 111, .45); }
	70%  { box-shadow: 0 0 0 14px rgba(88, 131, 111, 0); }
	100% { box-shadow: 0 0 0 0 rgba(88, 131, 111, 0); }
}

/* ---------- PARTNERS ---------- */
.vpt-section-partners { background: var(--vpt-bg); }
.vpt-partner-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}
.vpt-partner-type {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: var(--vpt-surface);
	border: 1px solid var(--vpt-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vpt-ink);
}
.vpt-partner-type svg { width: 16px; height: 16px; color: var(--vpt-accent); }

/* ---------- PRICING — three cards earn their place ---------- */
.vpt-section-pricing { background: var(--vpt-surface-alt); }
.vpt-pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 880px) {
	.vpt-pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.vpt-pricing-card {
	background: var(--vpt-surface);
	border: 1px solid var(--vpt-border);
	border-radius: var(--vpt-radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.vpt-pricing-card-featured {
	border-color: var(--vpt-accent);
	border-width: 1.5px;
	box-shadow: 0 22px 50px -32px rgba(73, 113, 96, .35);
}
.vpt-pricing-badge {
	position: absolute;
	top: -10px;
	left: 28px;
	padding: 4px 12px;
	background: var(--vpt-accent);
	color: #fff;
	font-family: var(--vpt-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 999px;
}
.vpt-pricing-head { margin-bottom: 24px; }
.vpt-pricing-tier {
	font-family: var(--vpt-font-mono);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 11px;
	font-weight: 600;
	color: var(--vpt-ink-muted);
	margin: 0 0 12px;
}
.vpt-pricing-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0 0 12px;
}
.vpt-pricing-amount {
	font-family: var(--vpt-font-serif);
	font-size: 44px;
	font-weight: 600;
	color: var(--vpt-ink);
	line-height: 1;
}
.vpt-pricing-period {
	font-family: var(--vpt-font-sans);
	font-size: 14px;
	color: var(--vpt-ink-soft);
	font-weight: 400;
}
.vpt-pricing-desc {
	font-size: 14px;
	color: var(--vpt-ink-muted);
	margin: 0;
	line-height: 1.55;
}
.vpt-pricing-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex: 1;
}
.vpt-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--vpt-border-soft);
	font-size: 14px;
	color: var(--vpt-ink);
	line-height: 1.5;
}
.vpt-pricing-features li::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--vpt-accent-soft);
	flex-shrink: 0;
	margin-top: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23497160' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7l2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ---------- FINAL CTA — walnut surface, inverted moment ---------- */
.vpt-section-cta { background: var(--vpt-bg); padding-bottom: 96px; }
.vpt-cta-card {
	background: var(--vpt-ink);
	color: var(--vpt-bg);
	border-radius: var(--vpt-radius-xl);
	padding: 64px 56px;
	position: relative;
	overflow: hidden;
}
.vpt-cta-card::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(206, 217, 207, 0.16) 0%, transparent 60%);
	pointer-events: none;
}
.vpt-cta-content { position: relative; z-index: 1; max-width: 640px; }
.vpt-cta-title {
	font-family: var(--vpt-font-serif);
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	font-weight: 600;
	color: var(--vpt-bg);
	margin: 0 0 18px;
	letter-spacing: -.01em;
}
.vpt-cta-lead {
	font-size: 17px;
	color: rgba(251, 248, 244, .78);
	margin: 0 0 32px;
	max-width: 520px;
	line-height: 1.55;
}
.vpt-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vpt-cta-card .vpt-button-primary { background: var(--vpt-bg); color: var(--vpt-ink); }
.vpt-cta-card .vpt-button-primary:hover { background: #fff; }
.vpt-cta-card .vpt-button-ghost {
	background: transparent;
	color: var(--vpt-bg);
	border-color: rgba(251, 248, 244, .25);
}
.vpt-cta-card .vpt-button-ghost:hover {
	background: rgba(251, 248, 244, .07);
	border-color: rgba(251, 248, 244, .4);
}
@media (max-width: 720px) { .vpt-cta-card { padding: 44px 28px; } }

/* ---------- FOOTER ---------- */
.vpt-footer {
	background: var(--vpt-surface-deep);
	border-top: 1px solid var(--vpt-border);
	padding: 64px 0 36px;
	color: var(--vpt-ink-muted);
}
.vpt-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 720px) {
	.vpt-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}
.vpt-footer-brand .vpt-brand { margin-bottom: 14px; }
.vpt-footer-tagline {
	font-size: 14px;
	color: var(--vpt-ink-muted);
	line-height: 1.55;
	max-width: 320px;
	margin: 0;
}
.vpt-footer-heading {
	font-family: var(--vpt-font-mono);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 10px;
	font-weight: 600;
	color: var(--vpt-ink-muted);
	margin: 0 0 16px;
}
.vpt-footer-list,
.vpt-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vpt-footer-list li,
.vpt-footer-col li { margin: 0 0 10px; }
.vpt-footer-list a,
.vpt-footer-col a {
	font-size: 14px;
	color: var(--vpt-ink);
	font-weight: 500;
}
.vpt-footer-list a:hover,
.vpt-footer-col a:hover { color: var(--vpt-accent); opacity: 1; }
.vpt-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 28px;
	margin-top: 48px;
	border-top: 1px solid var(--vpt-border);
}
.vpt-copyright { font-size: 13px; color: var(--vpt-ink-soft); margin: 0; }
.vpt-footer-nav {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vpt-footer-nav a { font-size: 13px; color: var(--vpt-ink-muted); }

/* ---------- Single post / page / blog list ---------- */
.vpt-single, .vpt-page, .vpt-blog {
	padding: 80px 0;
	background: var(--vpt-bg);
}
.vpt-single-inner, .vpt-page-inner {
	max-width: var(--vpt-container-narrow);
	margin: 0 auto;
}
.vpt-single h1, .vpt-page h1 {
	font-family: var(--vpt-font-serif);
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.12;
	margin-bottom: 16px;
}
.vpt-meta {
	font-family: var(--vpt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--vpt-ink-muted);
	margin-bottom: 32px;
}
.vpt-content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--vpt-ink);
}
.vpt-content > * + * { margin-top: 1em; }
.vpt-content h2 { font-size: 28px; margin-top: 1.8em; }
.vpt-content h3 { font-size: 22px; margin-top: 1.6em; }
.vpt-content a { border-bottom: 1px solid currentColor; }
.vpt-content blockquote {
	border-left: 2px solid var(--vpt-accent);
	padding: 8px 0 8px 20px;
	font-style: italic;
	color: var(--vpt-ink-muted);
	font-family: var(--vpt-font-serif);
	font-size: 18px;
}
.vpt-content code {
	background: var(--vpt-surface-alt);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: var(--vpt-font-mono);
	font-size: .9em;
}
.vpt-content pre {
	background: var(--vpt-surface-alt);
	border: 1px solid var(--vpt-border-soft);
	padding: 18px;
	border-radius: var(--vpt-radius);
	overflow-x: auto;
}
.vpt-content pre code { background: none; padding: 0; }

/* Blog post list */
.vpt-blog-list { display: grid; gap: 32px; max-width: var(--vpt-container-narrow); margin: 0 auto; }
.vpt-blog-item { padding-bottom: 32px; border-bottom: 1px solid var(--vpt-border-soft); }
.vpt-blog-item:last-child { border-bottom: none; }
.vpt-blog-item h2 { font-size: 28px; margin-bottom: 8px; }
.vpt-blog-item h2 a { color: var(--vpt-ink); }
.vpt-blog-item h2 a:hover { color: var(--vpt-accent); }
.vpt-blog-excerpt { color: var(--vpt-ink-muted); font-size: 16px; margin-bottom: 12px; }
.vpt-blog-read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--vpt-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--vpt-accent);
}

/* ---------- 404 ---------- */
.vpt-404 {
	padding: 120px 0;
	text-align: center;
	background: var(--vpt-bg);
}
.vpt-404 .vpt-404-num {
	font-family: var(--vpt-font-serif);
	font-size: clamp(72px, 14vw, 144px);
	font-weight: 600;
	color: var(--vpt-ink);
	margin: 0 0 8px;
	line-height: 1;
	letter-spacing: -.02em;
}
.vpt-404 h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 16px;
}
.vpt-404 p {
	font-size: 17px;
	color: var(--vpt-ink-muted);
	max-width: 480px;
	margin: 0 auto 32px;
}

/* ---------- App host pages (dashboard plugin content) ---------- */
body.vpt-is-app { background: var(--vpt-bg); }
body.vpt-is-member .vpt-main { padding: 32px 0; }
body.vpt-is-auth .vpt-main {
	min-height: calc(100vh - var(--vpt-header-h));
	display: flex;
	align-items: center;
	padding: 48px 0;
}

/* ---------- Reveal animation ---------- */
.vpt-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
}
.vpt-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vpt-reveal { opacity: 1; transform: none; transition: none; }
	.vpt-security-pulse { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Print ---------- */
@media print {
	.vpt-header, .vpt-footer, .vpt-skip-link { display: none; }
}