/* ============================================================
   Build Forward — 2026 theme layer (inner pages)
   Loaded AFTER wealthmap-redesign.css and the page stylesheet.
   Flips the token palette from warm-dark to the studio identity
   (paper / ink / signal blue) and restyles the shared chrome so
   every inner page matches the new homepage. Product mockups
   (phone frames, screenshots) stay dark on purpose.
   ============================================================ */

:root {
  --bg:          #F3F0E9;
  --bg-elevated: #EBE6DC;
  --bg-card:     #FFFFFF;
  --bg-card-2:   #F7F4EE;

  --text:   #141311;
  --text-2: #4A463F;
  --text-3: #655F56;   /* 6.0:1 on paper */
  --text-4: #716B62;   /* 5.0:1 on paper, 5.9:1 on white — hints/captions stay AA */
  --text-5: #A39D92;

  --border:   rgba(20, 19, 17, 0.10);
  --border-2: rgba(20, 19, 17, 0.18);

  --accent:        #2B38E6;
  --accent-bright: #4A56F5;
  --accent-soft:   rgba(43, 56, 230, 0.10);

  --pos:  #1F8A5B;
  --warn: #B8720A;
  --rust: #B5621D;

  --signal-2: #6E79FF; /* accent for use on dark product surfaces */
}

html { color-scheme: light; }
body { background: var(--bg); color: var(--text); }

/* ── chrome: nav ── */
.nav {
  background: rgba(243, 240, 233, 0.78);
  padding: 0;
}
.nav-inner { height: 68px; }
.nav-brand { gap: 0; }
.nav-brand .bf-lockup { height: 24px; width: auto; display: block; }
.nav-links a { color: var(--text-2); }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .18s;
}
.nav-cta:hover { opacity: 1; background: #2A2825; transform: translateY(-1px); }

/* ── animated studio lockup — plays once on first paint ── */
.bf-lockup .bf-slab, .bf-lockup .bf-b, .bf-lockup .bf-f {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; animation-iteration-count: 1;
}
@keyframes bfSlab  { from { opacity: 0; transform: translate(-10px, 4px); } to { opacity: 1; transform: none; } }
@keyframes bfRise  { from { opacity: 0; transform: translateY(.55em); }    to { opacity: 1; transform: none; } }
@keyframes bfSlide { from { opacity: 0; transform: translateX(-14px); }    to { opacity: 1; transform: none; } }
.bf-lockup .bf-slab { animation-name: bfSlab;  animation-duration: 420ms; }
.bf-lockup .bf-b    { animation-name: bfRise;  animation-duration: 480ms; }
.bf-lockup .bf-f    { animation-name: bfSlide; animation-duration: 480ms; }
.bf-lockup .bf-slab:nth-of-type(1) { animation-delay: 0ms; }
.bf-lockup .bf-slab:nth-of-type(2) { animation-delay: 120ms; }
.bf-lockup .bf-slab:nth-of-type(3) { animation-delay: 240ms; }
.bf-lockup .bf-b:nth-of-type(1) { animation-delay: 300ms; }
.bf-lockup .bf-b:nth-of-type(2) { animation-delay: 330ms; }
.bf-lockup .bf-b:nth-of-type(3) { animation-delay: 360ms; }
.bf-lockup .bf-b:nth-of-type(4) { animation-delay: 390ms; }
.bf-lockup .bf-b:nth-of-type(5) { animation-delay: 420ms; }
.bf-lockup .bf-f:nth-of-type(6)  { animation-delay: 520ms; }
.bf-lockup .bf-f:nth-of-type(7)  { animation-delay: 542ms; }
.bf-lockup .bf-f:nth-of-type(8)  { animation-delay: 564ms; }
.bf-lockup .bf-f:nth-of-type(9)  { animation-delay: 586ms; }
.bf-lockup .bf-f:nth-of-type(10) { animation-delay: 608ms; }
.bf-lockup .bf-f:nth-of-type(11) { animation-delay: 630ms; }
.bf-lockup .bf-f:nth-of-type(12) { animation-delay: 652ms; }

/* ── chrome: footer ── */
.footer, .footer--studio { background: var(--bg); }
.footer-brand img { width: 24px; height: 24px; }
.footer-tag, .footer-col-label, .footer-bottom, .footer-bottom a, .footer-bottom-sep { color: var(--text-4); }
.footer-col a { color: var(--text-2); }
.footer-col a:hover, .footer-bottom a:hover { color: var(--text); }

/* ── surfaces that were hardcoded as cream-on-dark alphas ── */
.hero-eyebrow, .hero-pill { background: rgba(20, 19, 17, 0.04); border-color: rgba(20, 19, 17, 0.12); }
.age-bar-track { background: rgba(20, 19, 17, 0.08); }
.fire-track { background: rgba(20, 19, 17, 0.10); }
.fire-delta { background: rgba(31, 138, 91, 0.12); }
.dot-idx { background: rgba(20, 19, 17, 0.30); }
.age-card, .fire-card, .prop-card {
  box-shadow: 0 30px 60px -36px rgba(20, 19, 17, 0.28), inset 0 0 0 1px var(--border);
}
.screen-shot img, .screen-shot--hero img { filter: drop-shadow(0 30px 50px rgba(20, 19, 17, 0.28)); }
@media (max-width: 720px) { .screen-shot--hero { padding: var(--s-24) var(--s-16); } }
.hero-title, .panel-title, .section-title, .final-title, .manifesto-title, .ft-hero-title, .nwc-title, .seo-hero-title, .pricing-title, .support-title { text-wrap: balance; }
.app-badge { filter: drop-shadow(0 2px 10px rgba(20, 19, 17, 0.14)); }
.app-badge:hover { filter: drop-shadow(0 6px 16px rgba(20, 19, 17, 0.20)); }

/* features.css */
.ft-card { box-shadow: inset 0 0 0 1px var(--border); }

/* networth-calc.css */
.nwc-card { box-shadow: 0 30px 60px -36px rgba(20, 19, 17, 0.28), inset 0 0 0 1px var(--border); }
.nwc-result, .nwc-cta, .nwc-dim { box-shadow: inset 0 0 0 1px var(--border); }
.nwc-tick { background: rgba(20, 19, 17, 0.25); }
.nwc-slider::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(20, 19, 17, 0.25), 0 0 0 1px rgba(43, 56, 230, 0.4); }
.nwc-bar-marker-dot { box-shadow: 0 2px 6px rgba(20, 19, 17, 0.30); }
.nwc-dim-adj { border-color: rgba(43, 56, 230, 0.30); }

/* ── /wealthmap legal sections wrap their text in .container, which no stylesheet defined — the policy text ran edge to edge on phones ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ── pricing on /wealthmap: one highlighted plan (Annual), one badge ── */
.pcard--best { border-color: var(--text); box-shadow: 0 30px 50px -36px rgba(20, 19, 17, 0.35); background: var(--bg-card); }
.pcard-badge { background: var(--accent); color: #fff; }

/* ── serif accent phrases pick up the signal colour, as on the homepage ── */
.hero-title em, .panel-title em, .section-title em, .final-title em, .manifesto-title em, .ft-hero-title em, .nwc-title em, .seo-hero-title em { color: var(--accent); }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .bf-lockup .bf-slab, .bf-lockup .bf-b, .bf-lockup .bf-f { animation: none; opacity: 1; transform: none; }
}