:root{
    --paper:#FFFFFF;
    --stripe:#F7F8FA;
    --ink:#101828;
    --ink-soft:#667085;
    --green:#2451D6;
    --green-deep:#17356B;
    --brass:#2451D6;
    --brass-soft:#EAF0FE;
    --line:#E3E6EB;
    --red:#B42318;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--stripe);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    min-height:100vh;
    padding:32px 16px 80px;
  }
  .wrap{max-width:760px;margin:0 auto;}

  /* Header */
  .site-nav{
    max-width:760px;margin:0 auto 20px;
    display:flex;flex-wrap:wrap;gap:6px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:500;
  }
  .site-nav a{
    color:var(--ink-soft);
    text-decoration:none;
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 11px;
    background:var(--paper);
  }
  .site-nav a:hover{border-color:var(--green);color:var(--green);}
  .site-nav a.active{
    color:#fff;
    background:var(--green);
    border-color:var(--green);
  }
  .site-brand{
    max-width:760px;margin:0 auto 4px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    letter-spacing:0.02em;
    color:var(--ink);
    font-weight:700;
  }
  .eyebrow{
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--green);
    border:1px solid var(--brass-soft);
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    margin-bottom:16px;
    background:var(--brass-soft);
  }
  h1{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:clamp(26px, 5vw, 36px);
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 10px;
    color:var(--ink);
  }
  .sub{
    font-size:15px;
    color:var(--ink-soft);
    max-width:52ch;
    line-height:1.55;
    margin-bottom:28px;
  }
  .sub b{color:var(--ink);}
  .example-hint{display:block;margin-top:10px;font-size:13px;color:var(--green);font-family:'IBM Plex Mono', monospace;}
  .example-hint b{color:var(--green);}

  /* Card shell — a clean, self-contained widget module */
  .ledger{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 4px 16px -8px rgba(16,24,40,0.08);
    padding:28px 24px 8px;
    margin-bottom:22px;
  }
  .ledger + .ledger{margin-top:0;}
  #resultsCard{
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  #resultsCard.visible{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    #resultsCard{transition:none;}
  }
  .results-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:2px;
  }
  .reset-btn{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    font-weight:500;
    color:var(--ink-soft);
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    padding:5px 10px;
    cursor:pointer;
  }
  .reset-btn:hover{border-color:var(--green);color:var(--green);}
  .reset-btn:focus-visible{outline:2px solid var(--green);outline-offset:1px;}

  .field{margin-bottom:20px;}
  label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:6px;
    letter-spacing:0.01em;
  }
  .hint{font-size:12px;color:var(--ink-soft);opacity:0.85;margin-top:5px;line-height:1.4;}

  .input-row{position:relative;}
  .prefix{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    font-family:'IBM Plex Mono', monospace;
    color:var(--ink-soft);
    font-size:16px;
    pointer-events:none;
  }
  input[type=number]{
    width:100%;
    font-family:'IBM Plex Mono', monospace;
    font-size:18px;
    padding:11px 12px 11px 30px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  input[type=number]:focus{outline:3px solid var(--brass-soft);border-color:var(--green);}

  select{
    width:100%;
    font-family:'Inter', sans-serif;
    font-size:15px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--ink);
  }
  select:focus{outline:3px solid var(--brass-soft);border-color:var(--green);}

  .checkbox-row{
    display:flex;align-items:flex-start;gap:10px;
    font-size:14px;color:var(--ink-soft);
    padding-bottom:18px;
  }
  .checkbox-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--green);flex-shrink:0;}
  .checkbox-row label{margin:0;font-weight:500;color:var(--ink);}

  #otherPlanField{display:none;margin-top:-6px;}
  #otherPlanField.show{display:block;}

  /* Results split */
  .split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:22px 0 0;
  }
  .col{padding:18px 16px;}
  .col:first-child{border-right:1px solid var(--line);}
  .col-label{
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .col-amount{
    font-family:'IBM Plex Mono', monospace;
    font-size:26px;
    font-weight:600;
    color:var(--ink);
    line-height:1.1;
  }
  .col-desc{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}

  .total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 4px 22px;
  }
  .total-label{
    font-family:'Inter', sans-serif;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
  }
  .total-label span{display:block;font-family:'Inter', sans-serif;font-size:11px;font-weight:400;color:var(--ink-soft);letter-spacing:0.01em;margin-top:2px;}
  .stamp{
    font-family:'IBM Plex Mono', monospace;
    font-size:28px;
    font-weight:600;
    color:var(--green);
    background:var(--brass-soft);
    border-radius:8px;
    padding:10px 18px;
  }

  .note{
    font-size:12.5px;
    color:var(--red);
    background:#FEF3F2;
    border:1px solid #FDA29B;
    border-radius:8px;
    padding:10px 12px;
    margin:16px 0 20px;
    line-height:1.5;
    display:none;
  }
  .note.show{display:block;}

  /* Math breakdown */
  details{
    margin-bottom:24px;
  }
  summary{
    cursor:pointer;
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--green);
    padding:10px 0;
    border-top:1px solid var(--line);
    user-select:none;
  }
  summary:focus-visible{outline:2px solid var(--green);}
  .steps{padding:6px 2px 18px;}
  .step{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    padding:7px 0;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
  }
  .step:last-child{border-bottom:none;font-weight:600;color:var(--ink);}
  .step .k{max-width:60%;}
  .step .v{white-space:nowrap;}

  .content{
    margin-top:36px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  .content h2{
    font-family:'Inter', sans-serif;
    font-size:19px;
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:28px 0 8px;
  }
  .content h2:first-child{margin-top:20px;}
  .content p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0 0 4px;
  }
  .content p b{color:var(--ink);}
  .content p a{color:var(--green);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
  .content p a:hover{color:var(--green-deep);}
  .content details{
    margin-bottom:0;
    border-bottom:1px solid var(--line);
  }
  .content summary{
    font-family:'Inter', sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    border-top:none;
    padding:14px 0;
  }
  .content details .steps{padding:0 0 16px;}
  .faq-a{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}

  footer{
    max-width:760px;margin:28px auto 0;
    font-size:11.5px;color:var(--ink-soft);
    line-height:1.6;
    padding:0 8px;
  }

  @media (max-width:520px){
    .split{grid-template-columns:1fr;}
    .col:first-child{border-right:none;border-bottom:1px solid var(--line);}
    .total-row{flex-direction:column;align-items:flex-start;gap:14px;}
  }

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