/* networth.com — /net-worth-calculator/ page */
.calcpage{background:var(--page)}
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0;display:flex;gap:8px}
.crumbs a{color:var(--blue);font-weight:600}
.crumbs b{color:var(--ink)}

.calc-hero{padding:18px 0 26px;max-width:820px}
.calc-hero h1{font-size:38px;line-height:1.18;letter-spacing:-.02em;color:var(--ink);font-weight:800;text-wrap:balance}
.lede{font-size:17px;line-height:1.6;color:var(--body);margin-top:14px}
.calc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
.calc-meta b{color:var(--ink)}
.calc-meta .dot{color:#c3cbdd}
.calc-meta .free{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600}

.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:start}

/* ---- form ---- */
.cpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px 18px;margin-bottom:18px}
.cpanel-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cpanel-h h2{font-size:19px;color:var(--ink);font-weight:800}
.cpanel-total{font-size:13px;color:var(--muted);font-weight:600}
.cpanel-total b{display:inline-block;margin-left:8px;font-size:17px;color:var(--green);font-variant-numeric:tabular-nums}
.cpanel-total.neg b{color:var(--red)}
.crow,.crow2{display:flex;align-items:center;gap:20px;padding:13px 0;border-bottom:1px solid #f1f4fa}
.crow:last-of-type{border-bottom:0}
.clabel{flex:1;font-size:15px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.chint{font-size:12.5px;font-weight:400;color:var(--muted);font-style:normal;line-height:1.45;max-width:52ch}
.cinput{position:relative;display:flex;align-items:center;flex:none;width:190px}
.cinput em{position:absolute;left:13px;color:var(--muted);font-style:normal;font-size:14.5px}
.cinput em.suf{left:auto;right:13px}
.cinput input{width:100%;height:46px;border:1px solid #d5dcea;border-radius:10px;padding:0 14px 0 30px;
  font:600 15.5px 'Inter',sans-serif;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.cinput.narrow{width:130px}
.cinput.narrow input{padding:0 32px 0 14px}
.cinput input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cmore{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.cmore summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--blue);padding:8px 0;list-style:none;display:flex;align-items:center;gap:8px}
.cmore summary::-webkit-details-marker{display:none}
.cmore summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:1.5px solid var(--blue);border-radius:6px;font-size:14px;line-height:1}
.cmore[open] summary::before{content:"–"}
.copt .coptgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.copt .crow2{border-bottom:0;flex-direction:column;align-items:flex-start;gap:9px;padding:8px 0 0}
.copt .cinput{width:100%}
.cactions{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.btn.big{font-size:16px;padding:15px 28px;border-radius:12px}
.linkbtn{background:none;border:0;color:var(--muted);font:600 14px 'Inter',sans-serif;cursor:pointer;text-decoration:underline}

/* ---- results ---- */
.cresult{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.cres-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.cres-card h3{font-size:15px;color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.cres-lbl{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.cres-num{font-size:44px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px;
  font-family:'Plus Jakarta Sans',sans-serif}
.cres-num.negnum{color:var(--red)}
.cres-bars{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.cbar{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--muted)}
.cbar span{width:48px;font-weight:600}
.cbar .track{flex:1;height:9px;border-radius:6px;background:#eef1f7;overflow:hidden}
.cbar .track b{display:block;height:100%;background:var(--green);border-radius:6px}
.cbar.liab .track b{background:var(--red)}
.cbar em{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;width:84px;text-align:right}
.cres-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--body)}
.cres-p{font-size:13.5px;line-height:1.6;color:var(--body)}
.cres-card.cta{background:linear-gradient(150deg,#173a77,#0e2757);border-color:transparent;color:#fff}
.cres-card.cta h3,.cres-card.cta .cres-p{color:#fff}
.cres-card.cta .cres-p{color:#c6d4f0;margin-bottom:14px}
.cta-fine{font-size:11.5px;color:#9fb3dc;margin-top:10px}

/* projection */
.proj{display:flex;align-items:flex-end;gap:5px;height:120px;padding-top:20px}
.pbar{flex:1;background:linear-gradient(180deg,#4d86f0,#2563eb);border-radius:4px 4px 0 0;position:relative}
.pbar.neg{background:linear-gradient(180deg,#f07b80,#e5424a)}
.pbar span{display:none}
.pbar:last-child span{display:block;position:absolute;top:-19px;right:0;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.proj-foot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px}
.nextlist{list-style:none;display:flex;flex-direction:column;gap:13px}
.nextlist li{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid #f1f4fa}
.nextlist li:last-child{border-bottom:0;padding-bottom:0}
.nextlist b{font-size:14.5px;color:var(--ink)}
.nextlist span{font-size:12.5px;color:var(--muted);line-height:1.5}
.nextlist a{font-size:13px;font-weight:700;color:var(--blue);margin-top:3px}

/* ---- full report ---- */
.report{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 30px;margin:26px 0}
.report-h{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.report-kicker{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--blue);text-transform:uppercase}
.report-h h2{font-size:26px;color:var(--ink);font-weight:800;margin-top:5px}
.report-acts{display:flex;align-items:center;gap:14px}
.btn.ghost{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.report-grid{display:grid;grid-template-columns:270px minmax(0,1fr) 320px;gap:30px;padding-top:20px}
.rep-big .cres-num{font-size:38px}
.rep-sub{display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:13px;color:var(--muted)}
.rep-sub b{color:var(--ink);font-weight:800;float:right;font-variant-numeric:tabular-nums}
.rep-sub span{display:block;border-bottom:1px solid #f1f4fa;padding-bottom:7px}
.rep-table h4,.rep-side h4{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--ink);text-transform:uppercase;margin:14px 0 8px}
.rep-table h4:first-child{margin-top:0}
.rep-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.rep-table td{padding:8px 0;border-bottom:1px solid #f1f4fa;color:var(--body)}
.rep-table td.v{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rep-table td.p{text-align:right;width:52px;color:var(--muted);font-size:12.5px}
.rep-table td.empty{color:var(--muted);font-style:italic}
.rep-table tr.tot td{border-bottom:0;border-top:1.5px solid var(--ink);font-weight:800;color:var(--ink);padding-top:9px}
.repmoves{padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--body)}
.repmoves li{margin-bottom:9px}
.report-fine{font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:18px;padding-top:12px}

/* ---- editorial ---- */
.calc-editorial{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;margin-bottom:36px;max-width:820px}
.calc-editorial h2{font-size:22px;color:var(--ink);font-weight:800;margin:24px 0 10px}
.calc-editorial h2:first-child{margin-top:0}
.calc-editorial p{font-size:15.5px;line-height:1.68;color:var(--body);margin-bottom:12px}
.formula{background:var(--soft);border-left:3px solid var(--blue);border-radius:8px;padding:13px 18px;
  font:700 16px 'Plus Jakarta Sans',sans-serif;color:var(--ink)}

@media print{
  .mast,.menu,.crumbs,.calc-hero,.calc-layout,.calc-editorial,footer,.report-acts{display:none!important}
  .report{border:0;padding:0;margin:0}
  body{background:#fff}
}

/* ── responsive (2026-08-05) ── */
@media (max-width:1100px){
  .calc-layout{grid-template-columns:1fr 360px;gap:20px}
  .report-grid{grid-template-columns:240px minmax(0,1fr)}
  .rep-side{grid-column:1/-1}
}
@media (max-width:720px){
  .crumbs{padding:14px 0 0;flex-wrap:wrap}
  .calc-hero{padding:12px 0 20px}
  .calc-hero h1{font-size:27px;line-height:1.2}
  .lede{font-size:15.5px}
  .calc-meta{font-size:12.5px;gap:7px}
  .calc-meta .dot{display:none}
  .calc-meta span{display:block;width:100%}

  .calc-layout{grid-template-columns:1fr;gap:16px}
  .cpanel{padding:16px 16px 14px;border-radius:14px}
  .cpanel-h h2{font-size:17px}
  .crow,.crow2{gap:12px;padding:11px 0;align-items:flex-start;flex-direction:column}
  .clabel{font-size:15px}
  .chint{max-width:none}
  .cinput{width:100%}
  .cinput input{height:48px;font-size:16px}          /* 16px avoids iOS zoom-on-focus */
  .cinput.narrow{width:100%}
  .copt .coptgrid{grid-template-columns:1fr;gap:12px}
  .cactions{flex-direction:column;align-items:stretch;gap:12px}
  .btn.big{width:100%;justify-content:center}

  /* results stop being a sticky rail — they follow the form */
  .cresult{position:static;top:auto;gap:14px}
  .cres-card{padding:18px 16px}
  .cres-num{font-size:38px}
  .cbar em{width:74px}
  .proj{height:104px}

  /* report */
  .report{padding:18px 16px;border-radius:14px}
  .report-h{flex-direction:column;gap:12px}
  .report-h h2{font-size:22px}
  .report-acts{width:100%;gap:10px}
  .report-acts .btn{flex:1;justify-content:center}
  .report-grid{grid-template-columns:1fr;gap:22px;padding-top:16px}
  .rep-table table{font-size:13px}
  .calc-editorial{padding:20px 18px;border-radius:14px}
  .calc-editorial h2{font-size:20px}
  .calc-editorial p{font-size:15px}
  .formula{font-size:15px;padding:11px 14px}
}