:root{
    --paper:#fbfcfa;
    --ground:#e8ece6;
    --ink:#1a221d;
    --ink-soft:#5d6b62;
    --rule:#ccd6cc;
    --rule-soft:#e2e8e1;
    --money:#1f6f4f;
    --money-dim:#8fb5a2;
    --tax:#3f6d8c;
    --ins:#8a7a4a;
    --pmi:#a4462d;
    --focus:#1f6f4f;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    background:var(--ground);
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    color:var(--ink);
    line-height:1.5;
    padding:20px 14px 48px;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:560px;margin:0 auto;}

  /* ---------- readout ---------- */
  .readout{
    background:var(--paper);
    border:1px solid var(--rule);
    border-radius:3px;
    padding:26px 22px 22px;
    box-shadow:0 1px 0 var(--rule);
  }
  .eyebrow{
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:600;
  }
  .total{
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:clamp(40px,12vw,56px);
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1;
    margin:8px 0 2px;
    font-variant-numeric:tabular-nums;
  }
  .total .cents{font-size:.5em;color:var(--ink-soft);font-weight:500;}
  .total-sub{font-size:12.5px;color:var(--ink-soft);}

  /* composition bar */
  .bar{
    display:flex;height:9px;border-radius:2px;overflow:hidden;
    margin:20px 0 16px;background:var(--rule-soft);
  }
  .bar span{transition:width .28s cubic-bezier(.4,0,.2,1);}
  .seg-pi{background:var(--money);}
  .seg-tax{background:var(--tax);}
  .seg-ins{background:var(--ins);}
  .seg-pmi{background:var(--pmi);}

  /* ledger breakdown */
  .ledger{border-top:1px solid var(--rule-soft);}
  .line{
    display:flex;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--rule-soft);
    font-size:13.5px;
  }
  .line:last-child{border-bottom:none;}
  .dot{width:8px;height:8px;border-radius:1px;flex:none;}
  .line .lbl{flex:1;color:var(--ink-soft);}
  .line .amt{
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
    font-variant-numeric:tabular-nums;
  }
  .line.off{opacity:.35;}
  .line.off .amt{text-decoration:line-through;}

  /* loan facts strip */
  .facts{
    display:grid;grid-template-columns:repeat(3,1fr);
    border:1px solid var(--rule);border-top:none;
    background:var(--paper);
  }
  .fact{padding:13px 10px;border-right:1px solid var(--rule-soft);text-align:center;}
  .fact:last-child{border-right:none;}
  .fact .v{
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .fact .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px;font-weight:600;}

  /* ---------- checks ---------- */
  .checks{
    background:var(--paper);border:1px solid var(--rule);border-top:none;
    border-radius:0 0 3px 3px;
  }
  .check{padding:15px 18px;border-top:1px solid var(--rule-soft);}
  .crow{display:flex;align-items:center;gap:12px;}
  .clabel{font-size:12.5px;font-weight:600;flex:1;}
  .ibox.inline{flex:0 0 120px;}
  .ibox.inline input{padding-top:8px;padding-bottom:8px;}
  .verdict{
    display:flex;align-items:baseline;gap:9px;margin-top:11px;flex-wrap:wrap;
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;
  }
  .verdict .big{font-size:20px;font-weight:600;letter-spacing:-.01em;}
  .verdict .word{
    font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;
    letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  }
  .verdict.pass .big,.verdict.pass .word{color:var(--money);}
  .verdict.fail .big,.verdict.fail .word{color:var(--pmi);}
  .subline{font-size:11.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}
  .subline b{font-weight:600;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
  .subline .pass{color:var(--money);}
  .subline .fail{color:var(--pmi);}
  .arv{
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:27px;font-weight:600;
    font-variant-numeric:tabular-nums;margin-top:9px;letter-spacing:-.015em;
  }
  .arv .mult{
    font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.08em;color:var(--ink-soft);margin-left:9px;
    text-transform:uppercase;
  }

  /* ---------- controls ---------- */
  .panel{margin-top:26px;}
  .panel-head{
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:600;margin-bottom:10px;padding-left:2px;
  }
  .field{
    background:var(--paper);border:1px solid var(--rule);
    border-radius:3px;padding:14px 16px;margin-bottom:10px;
  }
  .field > label,.field .flabel{
    display:block;font-size:12.5px;font-weight:600;margin-bottom:9px;
  }
  .hint{font-weight:400;color:var(--ink-soft);font-size:11.5px;}

  .inputs{display:flex;gap:10px;}
  .ibox{position:relative;flex:1;}
  .ibox .sigil{
    position:absolute;top:50%;transform:translateY(-50%);
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--ink-soft);
    pointer-events:none;
  }
  .ibox.pre .sigil{left:11px;}
  .ibox.post .sigil{right:11px;}
  input[type=number]{
    width:100%;
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:16px; /* prevents iOS zoom */
    font-weight:500;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--rule);
    border-radius:2px;
    padding:10px 12px;
    -moz-appearance:textfield;
  }
  .ibox.pre input{padding-left:24px;}
  .ibox.post input{padding-right:26px;}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);}
  .tie{
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--money-dim);font-weight:600;
    width:14px;flex:none;
  }

  /* range */
  .rangerow{display:flex;align-items:center;gap:14px;margin-top:12px;}
  input[type=range]{
    flex:1;-webkit-appearance:none;appearance:none;height:2px;
    background:var(--rule);border-radius:2px;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
    background:var(--money);cursor:pointer;border:3px solid var(--paper);
    box-shadow:0 0 0 1px var(--money);
  }
  input[type=range]::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;background:var(--money);
    cursor:pointer;border:3px solid var(--paper);box-shadow:0 0 0 1px var(--money);
  }
  input[type=range]:focus{outline:none;}
  input[type=range]:focus::-webkit-slider-thumb{outline:2px solid var(--focus);outline-offset:2px;}

  /* segmented term */
  .seg{display:flex;gap:6px;}
  .seg button{
    flex:1;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;
    padding:9px 0;background:#fff;border:1px solid var(--rule);
    border-radius:2px;color:var(--ink-soft);cursor:pointer;
  }
  .seg button[aria-pressed="true"]{
    background:var(--money);border-color:var(--money);color:#fff;font-weight:600;
  }
  .seg button:focus-visible{outline:2px solid var(--focus);outline-offset:1px;}

  /* pmi toggle */
  .toggle-row{display:flex;align-items:center;gap:12px;}
  .toggle-row .flabel{margin-bottom:0;flex:1;}
  .switch{
    position:relative;width:46px;height:26px;flex:none;
    background:var(--rule);border:none;border-radius:13px;cursor:pointer;
    transition:background .2s;
  }
  .switch::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
    background:#fff;border-radius:50%;transition:transform .2s;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
  }
  .switch[aria-checked="true"]{background:var(--money);}
  .switch[aria-checked="true"]::after{transform:translateX(20px);}
  .switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  .pmi-detail{margin-top:12px;}
  .pmi-detail[hidden]{display:none;}
  .note{
    font-size:11.5px;color:var(--ink-soft);margin-top:9px;line-height:1.45;
  }
  .note strong{color:var(--pmi);font-weight:600;}

  .foot{
    text-align:center;font-size:11px;color:var(--ink-soft);
    margin-top:24px;line-height:1.5;
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

/* ---------- masthead + reference content ---------- */
.masthead{margin:0 0 18px;padding-left:2px;}
h1{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.masthead p{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.reference{margin-top:34px;}
.reference h2{font-size:15px;font-weight:700;margin:26px 0 7px;line-height:1.3;}
.reference h2:first-of-type{margin-top:0;}
.reference p{font-size:13.5px;color:#3c4a42;line-height:1.62;}
.reference .qa{background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:15px 17px;margin-bottom:9px;}
.reference .qa h3{font-size:13.5px;font-weight:700;margin-bottom:6px;line-height:1.35;}
.reference .qa p{font-size:13px;}
.divider{border:none;border-top:1px solid var(--rule);margin:30px 0 0;}
.cmp{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0 4px;background:var(--paper);}
.cmp th,.cmp td{border:1px solid var(--rule);padding:7px 9px;text-align:left;vertical-align:top;line-height:1.4;}
.cmp th{background:#eef2ec;font-size:11px;letter-spacing:.04em;}
.gloss dt{font-weight:700;font-size:13px;margin-top:10px;}
.gloss dd{font-size:12.5px;color:#3c4a42;line-height:1.55;margin:2px 0 0 0;}
.quicknav{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 16px;}
.quicknav a{font-size:11px;padding:5px 11px;border:1px solid var(--rule);border-radius:20px;color:var(--ink-soft);text-decoration:none;background:var(--paper);}
.author{margin-top:20px;}
.author h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
.author p{font-size:12.5px;color:#3c4a42;line-height:1.6;}
footer{text-align:center;font-size:11px;color:var(--ink-soft);margin-top:22px;line-height:1.55;}