/* ============================================================
   Net Worth by Age Calculator — free tool page
   Layers on wealthmap-redesign.css tokens
   ============================================================ */

.nwc-container { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Hero ── */
.nwc-hero { padding: var(--s-96) 0 var(--s-48); text-align: center; }
.nwc-hero .section-eyebrow { display: block; margin-bottom: var(--s-16); }
.nwc-title {
  font-family: "Geist", sans-serif;
  font-size: var(--t-40); font-weight: 600;
  line-height: 1.03; letter-spacing: -0.04em; color: var(--text);
}
@media (min-width: 720px) { .nwc-title { font-size: var(--t-56); } }
.nwc-title em {
  font-family: "Instrument Serif", serif; font-style: italic;
  font-weight: 500; color: var(--accent-bright);
}
.nwc-sub {
  margin: var(--s-24) auto 0; max-width: 580px;
  font-size: var(--t-18); line-height: 1.55; color: var(--text-2);
}

/* ── Tool ── */
.nwc-tool-section { padding: 0 0 var(--s-128); }
.nwc-card {
  background: var(--bg-elevated); border-radius: 20px; padding: var(--s-48);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(250,249,245,0.06);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-48); align-items: center;
}
@media (max-width: 760px) {
  .nwc-card { grid-template-columns: 1fr; padding: var(--s-32) var(--s-24); gap: var(--s-32); }
}

.nwc-inputs { display: flex; flex-direction: column; gap: var(--s-32); }
.nwc-field { display: flex; flex-direction: column; gap: var(--s-12); }
.nwc-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-15); font-weight: 500; color: var(--text-2);
}
.nwc-value {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-18); font-weight: 500; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.nwc-hint { font-size: var(--t-12); line-height: 1.4; color: var(--text-4); }

.nwc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--bg-card-2); outline: none; cursor: pointer;
}
.nwc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent-bright); border: 3px solid var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,131,255,0.4);
  transition: transform var(--d-fast);
}
.nwc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.nwc-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bright);
  border: 3px solid var(--bg-elevated);
}

.nwc-select {
  width: 100%; padding: 11px 14px; border-radius: 8px;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border-2);
  font-family: "Geist", sans-serif; font-size: var(--t-15); cursor: pointer;
}
.nwc-select:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.nwc-money {
  display: flex; align-items: center; gap: var(--s-8);
  background: var(--bg-card); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 0 14px;
}
.nwc-money:focus-within { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.nwc-money-sym {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-18); color: var(--text-3);
}
.nwc-money-input {
  flex: 1; min-width: 0; padding: 11px 0; border: none; background: none;
  color: var(--text); font-family: "Geist", sans-serif; font-size: var(--t-18);
  font-variant-numeric: tabular-nums; outline: none;
}

/* ── Result ── */
.nwc-result {
  text-align: center; padding: var(--s-32) var(--s-24);
  background: var(--bg-card); border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(250,249,245,0.05);
}
.nwc-result-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-12); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: var(--s-12);
}
.nwc-band {
  font-family: "Geist", sans-serif; font-size: var(--t-40); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--s-8);
}
.nwc-band--ahead  { color: var(--pos); }
.nwc-band--ontrack{ color: var(--accent-bright); }
.nwc-band--behind { color: var(--warn); }
.nwc-result-text { font-size: var(--t-14); line-height: 1.5; color: var(--text-2); }

.nwc-bar-wrap { margin: var(--s-32) 0 var(--s-16); }
.nwc-bar-track {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--warn), var(--bg-card-2) 50%, var(--pos));
  margin-bottom: var(--s-24);
}
.nwc-tick {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: rgba(250,249,245,0.25); transform: translateX(-50%);
}
.nwc-bar-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 0.45s var(--ease); }
.nwc-bar-marker-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--bg-card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.nwc-bar-marker-lbl {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-12); font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.nwc-bar-scale { display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--text-4); }
.nwc-delta { margin-top: var(--s-8); font-size: var(--t-14); line-height: 1.5; color: var(--text-3); }
.nwc-delta strong { color: var(--text); }
.nwc-estimated { display: none; margin-top: var(--s-12); font-size: var(--t-12); color: var(--warn); }

/* ── CTA ── */
.nwc-cta {
  margin-top: var(--s-48); text-align: center; padding: var(--s-48) var(--s-32);
  background: var(--bg-elevated); border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(250,249,245,0.05);
}
.nwc-cta-title {
  font-family: "Geist", sans-serif; font-size: var(--t-24); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); margin-bottom: var(--s-12);
}
@media (min-width: 720px) { .nwc-cta-title { font-size: var(--t-32); } }
.nwc-cta-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 500; color: var(--accent-bright); }
.nwc-cta-body { max-width: 520px; margin: 0 auto var(--s-32); font-size: var(--t-15); line-height: 1.6; color: var(--text-2); }
.nwc-cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-24); flex-wrap: wrap; }
.nwc-share-btn {
  background: none; border: none; cursor: pointer; color: var(--accent-bright);
  font-family: "Geist", sans-serif; font-size: var(--t-15); font-weight: 500;
  transition: color var(--d-fast);
}
.nwc-share-btn:hover { color: var(--text); }
.nwc-share-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

/* ── Sources + FAQ ── */
.nwc-sources {
  margin-top: var(--s-32); font-size: var(--t-12); line-height: 1.6;
  color: var(--text-4); text-align: center; max-width: 680px; margin-left: auto; margin-right: auto;
}
.nwc-sources strong { color: var(--text-3); }
.nwc-sources a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.nwc-sources a:hover { color: var(--text); }

.nwc-faq { margin-top: var(--s-64); }
.nwc-faq-title {
  font-family: "Geist", sans-serif; font-size: var(--t-24); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); margin-bottom: var(--s-24); text-align: center;
}
.nwc-faq-item { padding: var(--s-24) 0; border-top: 1px solid var(--border); }
.nwc-faq-item h3 { font-size: var(--t-16); font-weight: 600; color: var(--text); margin-bottom: var(--s-8); }
.nwc-faq-item p { font-size: var(--t-15); line-height: 1.6; color: var(--text-3); }
.nwc-faq-item a { color: var(--accent-bright); }
.nwc-faq-item a:hover { color: var(--text); }

/* ── 7 Dimensions section (conversion bridge) ── */
.nwc-dims { margin-top: var(--s-64); }
.nwc-dims-head { text-align: center; max-width: 620px; margin: 0 auto var(--s-48); }
.nwc-dims-head .section-eyebrow { display: block; margin-bottom: var(--s-12); }
.nwc-dims-title {
  font-family: "Geist", sans-serif; font-size: var(--t-32); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--text);
}
@media (min-width: 720px) { .nwc-dims-title { font-size: var(--t-40); } }
.nwc-dims-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 500; color: var(--accent-bright); }
.nwc-dims-sub { margin-top: var(--s-16); font-size: var(--t-16); line-height: 1.6; color: var(--text-2); }
.nwc-dims-sub strong { color: var(--text); }

.nwc-dims-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16);
}
@media (max-width: 760px) { .nwc-dims-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .nwc-dims-grid { grid-template-columns: 1fr; } }

.nwc-dim {
  position: relative; padding: var(--s-24);
  background: var(--bg-elevated); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(250,249,245,0.05);
}
.nwc-dim-adj {
  display: inline-block; margin-bottom: var(--s-12);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--t-12);
  font-weight: 500; color: var(--accent-bright);
  padding: 3px 8px; border-radius: 6px; background: var(--accent-soft);
  border: 1px solid rgba(124,131,255,0.25);
}
.nwc-dim h3 { font-size: var(--t-16); font-weight: 600; color: var(--text); margin-bottom: var(--s-8); letter-spacing: -0.012em; }
.nwc-dim p { font-size: var(--t-14); line-height: 1.5; color: var(--text-3); }

.nwc-dims-cta { text-align: center; margin-top: var(--s-48); }

/* Tick positions (moved off inline styles for CSP compliance) */
.nwc-tick--25 { left: 25%; }
.nwc-tick--50 { left: 50%; }
.nwc-tick--75 { left: 75%; }