/* Instrument-style app shell. Type is deliberately system-native: the sites
   this audience trusts (FI Calc, Engaging Data, TIPSLadder) read "built by
   someone who cares about the math," not "designed." Personality lives in the
   live yield strip, the density of labeled controls, and the updates log. */
:root{
  --bg:#eef1f5; --card:#ffffff; --ink:#1f2733; --mut:#5c6674; --faint:#8b93a1;
  --line:#d7dde5; --line2:#c3cbd6;
  --blue:#1e5fd6; --blue-dk:#17408f; --green:#187741; --red:#b03333;
  --amber-bg:#fdf3dd; --amber:#8a5f14;
  --strip:#101c2e; --strip-ink:#c9d4e4; --strip-hi:#7ee2a8;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12161c; --card:#1a2029; --ink:#e4e8ee; --mut:#9aa4b1; --faint:#6e7885;
    --line:#2a323d; --line2:#39434f; --blue:#6ea1f7; --blue-dk:#9dbdf9; --green:#57c283;
    --amber-bg:#2b2314; --amber:#d8ab52; --strip:#0b1422; --strip-ink:#aab8cc; --strip-hi:#6fd79c; }
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"cv05","cv11"}
.mono,.num,td.n{font-variant-numeric:tabular-nums}
a{color:var(--blue)}
p{max-width:76ch}

/* ---- chrome ---- */
.top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:14px 20px 10px}
.brand{font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand .tld{color:var(--faint);font-weight:400}
.top nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.top nav a{font-size:13px;color:var(--mut);text-decoration:none}
.top nav a:hover{color:var(--blue)}
.top nav a.here{color:var(--ink);font-weight:600}
.strip{background:var(--strip);color:var(--strip-ink);font-size:12.5px}
.strip .in{max-width:1120px;margin:0 auto;padding:7px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.strip b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.strip .up{color:var(--strip-hi)}
.strip .dot{width:7px;height:7px;border-radius:50%;background:var(--strip-hi);display:inline-block;margin-right:2px}
.wrap{max-width:1120px;margin:0 auto;padding:20px 20px 70px}
.narrow{max-width:820px}

/* ---- page head ---- */
h1{font-size:24px;line-height:1.25;margin:6px 0 4px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--mut);margin:0 0 18px;font-size:14.5px;max-width:78ch}
h2{font-size:18px;margin:34px 0 8px;font-weight:650}
h3{font-size:15px;margin:0 0 10px;font-weight:650}
article h2{margin-top:28px}
article p{margin:0 0 12px;font-size:15px;line-height:1.6}

/* ---- app layout ---- */
.app{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
/* Grid items default to min-width:auto, which lets the ladder table's
   min-content width blow the layout out past the viewport on phones. */
.app > *{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  box-shadow:0 1px 2px rgba(16,28,46,.05)}
.inputs{display:grid;gap:12px}
.card h3 .help{font-weight:400;color:var(--faint);font-size:12.5px;margin-left:6px}
.field{margin-bottom:10px}
.field:last-child{margin-bottom:2px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.field input{width:100%;padding:7px 9px;border:1px solid var(--line2);border-radius:5px;
  background:var(--card);color:var(--ink);font-size:14px;line-height:1.4;font-family:inherit;font-variant-numeric:tabular-nums}
.field input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.field .sub2{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.45}
.yields3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ---- results ---- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.stat .v{font-size:24px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .v.green{color:var(--green)}
.stat .l{font-size:12px;color:var(--mut);margin-top:1px}
table.ladder{width:100%;border-collapse:collapse;font-size:13.5px}
table.ladder th{font-size:11.5px;font-weight:600;color:var(--mut);text-align:right;
  padding:6px 8px;border-bottom:2px solid var(--line2);white-space:nowrap}
table.ladder th:first-child{text-align:left}
table.ladder td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right}
table.ladder td:first-child{text-align:left;font-weight:600}
table.ladder tbody tr:hover td{background:color-mix(in srgb, var(--blue) 5%, transparent)}
table.ladder td input{width:88px;padding:3px 6px;text-align:right;border:1px solid var(--line);
  border-radius:4px;background:var(--card);color:var(--ink);font-size:13px;line-height:1.4;font-family:inherit;font-variant-numeric:tabular-nums}
tr.gap td{background:var(--amber-bg)}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 6px;
  border-radius:9px;color:var(--amber);border:1px solid var(--amber);margin-left:6px;vertical-align:1px}
tfoot td{font-weight:700;border-top:2px solid var(--line2);border-bottom:none;padding-top:9px}
.note{font-size:12.5px;color:var(--mut);line-height:1.5}
.scrollx{overflow-x:auto}

/* ---- content blocks ---- */
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:6px;padding:10px 14px;margin:14px 0}
details{margin:8px 0;border:1px solid var(--line);border-radius:8px;background:var(--card)}
details summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:14px}
details summary:hover{color:var(--blue)}
details .body{padding:0 16px 12px;font-size:14px;line-height:1.55}
details .body p{margin:0 0 10px}
.updates{font-size:13px;color:var(--mut);line-height:1.7}
.updates b{color:var(--ink);font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---- waitlist ---- */
.waitform{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.waitform input[type=email]{flex:1;min-width:210px;padding:8px 11px;border:1px solid var(--line2);
  border-radius:5px;background:var(--card);color:var(--ink);font:14px inherit}
.waitform button{padding:8px 16px;border:1px solid var(--blue);border-radius:5px;background:var(--blue);
  color:#fff;font:600 13.5px inherit;cursor:pointer}
.waitform button:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.waitform button:disabled{opacity:.6;cursor:default}
.waitmsg{font-size:13px}
.waitmsg.ok{color:var(--green)} .waitmsg.bad{color:var(--red)}

footer{margin-top:48px;border-top:1px solid var(--line);padding-top:14px}
.disclaimer{font-size:12px;color:var(--faint);line-height:1.55;max-width:none}

@media(max-width:900px){ .app{grid-template-columns:1fr} }
@media(max-width:640px){
  .wrap{padding:16px 12px 56px}
  .top{padding:12px 12px 8px}
  .strip .in{padding:6px 12px;gap:12px}
  h1{font-size:20px}
  .stat .v{font-size:20px}
  .yields3{grid-template-columns:repeat(3,minmax(80px,1fr))}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important;transition:none!important} }