/* ═══ UNDERRIDGE RESTYLE PROPOSAL — overlay, CSS-only ═══════════════════
   Thesis: the bones are good; the volume is too low. This turns the brand
   up (forest + gold, serif display), gives content real presence, and
   kills the dead space — no framework change, no markup change.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · Tokens: deeper ink, warmer paper, brand more present */
:root{
  --cream:#151A17;--cream-d:#3D453F;--stone:#5C665F;--stone-d:#8C948D;
  --void:#EFEBE1;--d1:#F7F4EC;--d2:#FFFFFF;--d3:#F1EDE3;--d4:#EBE6D9;
  --hair:rgba(21,26,23,.18);--hair-d:rgba(21,26,23,.10);--hair-b:rgba(21,26,23,.36);
  --sh-s:0 1px 2px rgba(21,26,23,.07);
  --sh-m:0 8px 24px rgba(21,26,23,.10);
  --sh-l:0 18px 48px rgba(21,26,23,.14);
}
body{font-size:15px}

/* 2 · Sidebar: a forest ledger rail, not a pale strip */
.rail{background:linear-gradient(178deg,#122E25 0%,#0E241D 100%);border-right:1px solid rgba(176,138,79,.22)}
.rail-top{border-bottom:1px solid rgba(176,138,79,.18)}
.rail-brand span{color:#F2EFE7;font-weight:600;letter-spacing:.03em}
.rail-collapse{color:#9FAAA0}
.rail-collapse:hover{color:#F2EFE7;border-color:rgba(176,138,79,.35);background:rgba(255,255,255,.04)}
.rail-new{background:var(--gold);color:#1A130A;font-weight:600;border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.rail-new:hover{background:#C09A5C}
.rail-eyebrow{color:rgba(176,138,79,.85)}
.rail-empty{color:#7E8A81}
.rail-item{color:#D9DED8}
.rail-item:hover{background:rgba(255,255,255,.05)}
.rail-nm{color:#EDEFE9}.rail-dt{color:#7E8A81}
.rail-hist{scrollbar-width:thin}
.rail-dock,.rail .id-chip{border-color:rgba(176,138,79,.18)}
body.dark .rail{background:linear-gradient(178deg,#10201A 0%,#0B1713 100%)}

/* 3 · Home: hero, not a floating whisper */
.home.hm3{min-height:calc(100vh - 190px);position:relative}
.home.hm3::before{content:'';position:fixed;right:-90px;bottom:-120px;
  width:440px;aspect-ratio:1;pointer-events:none;opacity:.045;transform:rotate(-6deg);
  background:url('underridge_mark_gold.svg') center/contain no-repeat}
.home-h1{font-family:var(--serif);font-size:clamp(44px,4.2vw,60px);font-weight:500;letter-spacing:0;color:var(--cream)}
.home-h1::after{content:'';display:block;width:64px;height:2px;background:var(--gold);margin:1.05rem auto 0}
.home-sub{font-size:15.5px;color:var(--cream-d);margin-top:.9rem;letter-spacing:.01em}
.home.hm3 .home-start{margin:2.2rem 0 1.6rem;padding:1.05rem 2.7rem;font-size:15px;border-radius:var(--r-m);
  background:var(--forest);border:1px solid rgba(176,138,79,.55);box-shadow:0 10px 26px rgba(20,53,42,.24);
  transition:transform var(--tf),box-shadow var(--tm),background var(--tm)}
.home.hm3 .home-start:hover{background:var(--forest-m);transform:translateY(-1px);box-shadow:0 14px 32px rgba(20,53,42,.3)}
.hm-chip{padding:.65rem 1.2rem;font-size:13.5px;border-color:var(--hair)}
body.dark .home-h1{color:#F2EFE7}
body.dark .home.hm3::before{opacity:.08}

/* 4 · Wizard: the question is a document, the answers live on a sheet */
.prog-track{height:4px;border-radius:99px;background:var(--hair-d)}
.prog-fill{border-radius:99px;background:linear-gradient(90deg,var(--gold-b),var(--gold))}
.prog-meta{font-size:11px}
.prog-cur{font-weight:600}
.id-chip{background:var(--d2);border-color:var(--hair);box-shadow:var(--sh-s);font-size:12px;padding:8px 13px}
.q{min-height:0;padding-top:.9rem}
.q::before{background:linear-gradient(180deg,var(--gold-g) 0%,var(--hair-d) 45%,transparent 100%)}
.q-eye{font-size:10.5px;letter-spacing:.22em}
.q-title{font-family:var(--serif);font-size:clamp(34px,2.9vw,46px);font-weight:500;letter-spacing:0;line-height:1.12}
.q-sub{font-size:14.5px;color:var(--cream-d);line-height:1.75;border-left:2px solid var(--gold-g);padding-left:14px}
.q-bodyc{background:var(--d2);border:1px solid var(--hair-d);border-radius:var(--r-xl);
  box-shadow:var(--sh-m);padding:1.9rem 2rem;align-self:start}
@media(max-width:980px){.q-bodyc{padding:1.3rem 1.2rem}}
.field label{font-size:11.5px;color:var(--cream-d)}
.inp,.sel{padding:.95rem 1.1rem;font-size:15px;background:var(--d1);border-radius:var(--r-m)}
.inp:focus,.sel:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-gl)}
.opt,.art-btn{padding:1rem 1.05rem;border-radius:var(--r-m);box-shadow:var(--sh-s)}
.opt:hover,.art-btn:hover{box-shadow:var(--sh-m);transform:translateY(-1px)}
.opt,.art-btn{transition:border-color var(--tf),background var(--tf),color var(--tf),box-shadow var(--tm),transform var(--tf)}
.opt.on,.art-btn.on{background:linear-gradient(0deg,var(--gold-gl),var(--gold-gl)),var(--d2);border-left-color:var(--gold)}
.opt-label{font-size:14px}
.opt-desc{font-size:12.5px}
.nav{margin-top:1.6rem;padding-top:1.15rem}
.btn-go{padding:13px 34px;font-size:14.5px;border-radius:var(--r-m);
  border:1px solid rgba(176,138,79,.5);box-shadow:0 6px 18px rgba(20,53,42,.22)}
.btn-go:disabled{opacity:.45;border-color:transparent;box-shadow:none}
.btn-back{font-size:13.5px}
.hint{font-size:11.5px}

/* 5 · Dark mode: charcoal with a pulse, not a void */
body.dark{
  --void:#0F1512;--d1:#141B17;--d2:#1A221D;--d3:#202822;--d4:#273028;
  --cream:#EDEFE9;--cream-d:#C6CCC4;--stone:#949C94;--stone-d:#6A726B;
  --hair:rgba(237,239,233,.16);--hair-d:rgba(237,239,233,.09);--hair-b:rgba(237,239,233,.34);
  --glass-bg:#1A221D;--glass-bgh:#202822;
}
body.dark::before{background:radial-gradient(ellipse 75% 50% at 14% -10%,rgba(30,77,60,.35) 0%,transparent 60%)}
body.dark .q-bodyc{border-color:rgba(176,138,79,.16)}
body.dark .btn-go{box-shadow:0 6px 20px rgba(0,0,0,.45)}

/* 6 · Rail fixes: dark-bg lockup + readable account row */
.rail-brand img{content:url('underridge_lockup_dark_bg.svg')}
.rail-profile{color:#EDEFE9}
.rail-em{color:#EDEFE9}
.rail-cr{color:var(--gold-b)}
.rail-chev{color:#8C948D}
.rail-menu{background:#16281F;border-color:rgba(176,138,79,.25)}
.rail-menu button{color:#E7EAE4}
.rail-menu button:hover{background:rgba(176,138,79,.14)}
.rail-sep{background:rgba(176,138,79,.2)}