:root {
--ink: #0f0f0f;
--ink-light: #3a3a3a;
--ink-muted: #6b6b6b;
--paper: #fafaf7;
--paper-warm: #f4f2ec;
--paper-mid: #ede9e0;
--border: #ddd9ce;
--border-mid: #c8c3b5;
--park: #2d6a4f;
--earn: #b5541a;
--build: #1a3a6b;
--roam: #5c3d8f;
--dare: #8b1a1a;
--park-tint: #eef5f1;
--earn-tint: #fdf0e8;
--build-tint: #edf1f8;
--roam-tint: #f2eefa;
--dare-tint: #f8eded;
--font-display: "Playfair Display", Georgia, serif;
--font-body: "DM Sans", system-ui, sans-serif;
--font-mono: "DM Mono", "Courier New", monospace;
--s1: 0.25rem;
--s2: 0.5rem;
--s3: 0.75rem;
--s4: 1rem;
--s5: 1.5rem;
--s6: 2rem;
--s7: 3rem;
--s8: 4rem;
--s9: 6rem;
--content-width: 740px;
--wide-width: 960px;
--radius: 4px;
--radius-lg: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.72;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }

/* ── NAV ── */
.site-nav {
border-bottom: 1px solid var(--border);
background: var(--paper);
position: sticky; top: 0; z-index: 100;
}
.nav-inner {
max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--s5);
display: flex; align-items: center; justify-content: space-between;
height: 52px; gap: var(--s4);
}
.nav-logo {
font-family: var(--font-display); font-size: 1.25rem; font-weight: 900;
letter-spacing: -0.02em; text-decoration: none;
}
.nav-logo span { color: var(--earn); }
.nav-links {
display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none;
font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-links a { text-decoration: none; color: var(--ink-muted); transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }

/* ── HERO ── */
.hero { border-bottom: 1px solid var(--border); background: var(--paper); }
.hero-inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--s5); }
.hero-inner { padding-top: var(--s8); padding-bottom: var(--s7); }
.eyebrow {
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
margin-bottom: var(--s4); display: flex; align-items: center; gap: var(--s3);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink-muted); display: inline-block; }
h1 {
font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 4.75rem);
font-weight: 900; line-height: 1.04; letter-spacing: -0.04em; max-width: 760px; margin-bottom: var(--s5);
}
h1 em { font-style: italic; color: var(--build); }
.hero-sub { font-size: 1.125rem; color: var(--ink-light); max-width: 620px; line-height: 1.65; }

/* ── PAGE BODY ── */
.page-body { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--s5) var(--s9); }

/* ── INTRO SECTION ── */
.intro { max-width: var(--content-width); margin-bottom: var(--s7); }
.intro h2 {
font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
letter-spacing: -0.03em; margin-bottom: var(--s3);
}
.intro p { color: var(--ink-light); margin-bottom: var(--s4); }

/* ── SCENARIO BUILDER ── */
.scenario-container { max-width: var(--content-width); margin: 0 auto; }

.scenario-section { margin-bottom: var(--s7); }
.scenario-section h3 {
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4);
}

/* Slider fields */
.slider-field { margin-bottom: var(--s5); }
.slider-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); }
.slider-label {
font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--ink);
}
.slider-value {
font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted);
}
.slider-desc {
font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: var(--s3); line-height: 1.5;
}

.scenario-slider {
-webkit-appearance: none; appearance: none; width: 100%; height: 6px;
border-radius: 3px; background: var(--border); outline: none; transition: opacity 0.15s;
}
.scenario-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 24px; height: 24px;
border-radius: 50%; cursor: pointer; border: 3px solid var(--paper);
box-shadow: 0 1px 6px rgba(0,0,0,0.25); background: var(--ink);
}
.scenario-slider::-moz-range-thumb {
width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
border: 3px solid var(--paper); box-shadow: 0 1px 6px rgba(0,0,0,0.25);
background: var(--ink);
}

/* Slider labels at ends */
.slider-end-labels { display: flex; justify-content: space-between; margin-top: var(--s1); }
.slider-end-label { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-muted); }

/* ── PORTFOLIO SIZE ── */
.portfolio-section { margin-bottom: var(--s7); }
.portfolio-input-wrap { display: flex; align-items: center; gap: var(--s2); max-width: 360px; }
.currency-sign { font-family: var(--font-mono); font-size: 1.25rem; color: var(--ink-muted); }
.portfolio-input {
width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--border);
border-radius: var(--radius); font-family: var(--font-mono); font-size: 1.25rem;
background: var(--paper-warm); color: var(--ink); outline: none; transition: border-color 0.15s;
}
.portfolio-input:focus { border-color: var(--border-mid); }

/* ── SLOT ALLOCATION CARDS ── */
.slot-allocations { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s7); }
.slot-card {
border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5) var(--s6);
background: var(--paper-warm); transition: border-color 0.15s, transform 0.15s;
}
.slot-card:hover { border-color: var(--border-mid); transform: translateY(-1px); }
.slot-card.park { border-left: 3px solid var(--park); }
.slot-card.earn { border-left: 3px solid var(--earn); }
.slot-card.build { border-left: 3px solid var(--build); }
.slot-card.roam { border-left: 3px solid var(--roam); }
.slot-card.dare { border-left: 3px solid var(--dare); }

.slot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.slot-name-row { display: flex; align-items: baseline; gap: var(--s3); }
.slot-number {
font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.slot-name {
font-family: var(--font-display); font-size: 1.375rem; font-weight: 700;
letter-spacing: -0.02em; line-height: 1;
}
.slot-card.park .slot-name { color: var(--park); }
.slot-card.earn .slot-name { color: var(--earn); }
.slot-card.build .slot-name { color: var(--build); }
.slot-card.roam .slot-name { color: var(--roam); }
.slot-card.dare .slot-name { color: var(--dare); }

.slot-pct {
font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
letter-spacing: -0.02em; min-width: 70px; text-align: right;
transition: color 0.3s ease;
}
.slot-card.park .slot-pct { color: var(--park); }
.slot-card.earn .slot-pct { color: var(--earn); }
.slot-card.build .slot-pct { color: var(--build); }
.slot-card.roam .slot-pct { color: var(--roam); }
.slot-card.dare .slot-pct { color: var(--dare); }

/* Animate percentage changes */
@keyframes pct-flash {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.slot-pct.flash { animation: pct-flash 0.3s ease; }

.slot-job { font-size: 0.875rem; color: var(--ink-muted); margin-bottom: var(--s3); line-height: 1.5; }
.slot-fund {
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
padding: var(--s1) var(--s3); border-radius: 2px; display: inline-block; margin-bottom: var(--s4);
}
.slot-card.park .slot-fund { background: var(--park-tint); color: var(--park); }
.slot-card.earn .slot-fund { background: var(--earn-tint); color: var(--earn); }
.slot-card.build .slot-fund { background: var(--build-tint); color: var(--build); }
.slot-card.roam .slot-fund { background: var(--roam-tint); color: var(--roam); }
.slot-card.dare .slot-fund { background: var(--dare-tint); color: var(--dare); }

.slot-dollar {
font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-muted);
margin-bottom: var(--s3); display: block;
}

/* Slot explanation */
.slot-explanation {
font-size: 0.8125rem; color: var(--ink-light); line-height: 1.6;
padding: var(--s3) var(--s4); border-radius: var(--radius);
background: var(--paper); border-left: 2px solid var(--border-mid);
margin-top: var(--s3); display: none;
}
.slot-explanation.show { display: block; }

/* ── SUMMARY BAR ── */
.summary-bar {
background: var(--paper-warm); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--s6); margin-bottom: var(--s7);
}
.summary-title {
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s5);
}
.summary-bars { display: flex; height: 32px; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s5); }
.summary-segment { transition: width 0.4s ease; position: relative; }
.summary-segment.park { background: var(--park); }
.summary-segment.earn { background: var(--earn); }
.summary-segment.build { background: var(--build); }
.summary-segment.roam { background: var(--roam); }
.summary-segment.dare { background: var(--dare); }

.summary-legend { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); }
.legend-item { display: flex; align-items: center; gap: var(--s2); font-size: 0.8125rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-dot.park { background: var(--park); }
.legend-dot.earn { background: var(--earn); }
.legend-dot.build { background: var(--build); }
.legend-dot.roam { background: var(--roam); }
.legend-dot.dare { background: var(--dare); }
.legend-label { color: var(--ink-muted); font-weight: 500; }
.legend-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-light); }

.summary-total {
display: flex; justify-content: space-between; align-items: center;
padding-top: var(--s4); border-top: 1px solid var(--border); margin-bottom: var(--s5);
}
.summary-total-label { font-size: 0.875rem; color: var(--ink-muted); }
.summary-total-val { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--ink); }

/* Match indicator */
.match-indicator {
padding: var(--s4) var(--s5); border-radius: var(--radius); margin-bottom: var(--s5);
font-size: 0.875rem; line-height: 1.5; display: none;
}
.match-indicator.show { display: block; }
.match-indicator.match { background: var(--park-tint); border: 1px solid var(--park); color: var(--park); }
.match-indicator.mismatch { background: #fef3f2; border: 1px solid #fca5a5; color: #dc2626; }

/* ── FRAME FUND TABLE ── */
.frame-table-section { margin-bottom: var(--s7); }
.frame-table-section h3 {
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4);
}
.frame-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.frame-table th {
font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink-muted); font-weight: 500; text-align: left;
padding: var(--s3) var(--s4); border-bottom: 2px solid var(--border); background: var(--paper-warm);
}
.frame-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); vertical-align: top; }
.frame-table tr:last-child td { border-bottom: none; }
.frame-table .fund-name { font-weight: 500; color: var(--ink); }
.frame-table .ticker-cell { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); }
.frame-table .allocation-cell { font-family: var(--font-mono); font-weight: 600; }

/* ── BROKER CTA ── */
.broker-cta {
background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
padding: var(--s5) var(--s6); margin-bottom: var(--s7); display: flex; align-items: center;
gap: var(--s6); flex-wrap: wrap;
}
.broker-cta .cta-text { flex: 1; min-width: 200px; }
.broker-cta .cta-headline { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--s1); color: var(--paper); }
.broker-cta .cta-sub { font-size: 0.8125rem; color: rgba(250,250,247,0.6); }
.broker-cta .cta-buttons { display: flex; gap: var(--s3); flex-shrink: 0; flex-wrap: wrap; }
.cta-btn { display: inline-block; padding: var(--s3) var(--s5); border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.cta-btn.primary { background: var(--paper); color: var(--ink); }
.cta-btn.primary:hover { background: var(--paper-mid); }
.cta-btn.secondary { background: transparent; color: var(--paper); border: 1px solid rgba(250,250,247,0.3); }
.cta-btn.secondary:hover { border-color: var(--paper); }

/* ── FAQ ── */
.faq-section { margin-bottom: var(--s7); }
.faq-section h3 {
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4);
}
.faq-item { border-bottom: 1px solid var(--border); padding: var(--s4) 0; }
.faq-q { font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin-bottom: var(--s2); cursor: pointer; display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
.faq-a { font-size: 0.9rem; color: var(--ink-light); line-height: 1.65; display: none; }
.faq-item.open .faq-a { display: block; }

/* ── FOOTER ── */
.site-footer { border-top: 1px solid var(--border); background: var(--paper-warm); padding: var(--s7) 0 var(--s6); }
.footer-inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--s5); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s7); }
.footer-brand .brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; margin-bottom: var(--s3); }
.footer-brand .brand-name span { color: var(--earn); }
.footer-brand p { font-size: 0.875rem; color: var(--ink-muted); max-width: 220px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s3); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--s2); }
.footer-col a { font-size: 0.875rem; color: var(--ink-light); text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: var(--s5); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.footer-disclaimer { font-size: 0.75rem; color: var(--ink-muted); max-width: 500px; line-height: 1.5; }
.footer-links { display: flex; gap: var(--s4); font-size: 0.8125rem; }
.footer-links a { color: var(--ink-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
.nav-links { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.broker-cta { flex-direction: column; gap: var(--s4); }
.slot-header { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.slot-pct { min-width: auto; }
}

/* ── RESET BUTTON ── */
.reset-row { display: flex; justify-content: flex-end; margin-bottom: var(--s5); }
.reset-btn {
appearance: none; border: 1px solid var(--border-mid); background: var(--paper-mid);
color: var(--ink-muted); border-radius: 999px; padding: var(--s2) var(--s4);
font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
text-transform: uppercase; cursor: pointer; transition: all 0.15s;
}
.reset-btn:hover { background: var(--border); color: var(--ink); }
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}