:root{
    --bone:#FAF8F4;
    --bone-2:#F3EFE7;
    --ink:#16130F;
    --ink-2:#3A342C;
    --muted:#7A7065;
    --rule:#DED6C9;
    --rule-2:#C9BFAE;
    --clay:#A84923;
    --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--bone);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:tabular-nums;
  }

  .wrap{max-width:47rem;margin:0 auto;padding:2.75rem 1.375rem 5rem}
  @media(min-width:48rem){ .wrap{padding:5rem 3rem 7rem} }
  @media(min-width:64rem){ .wrap{max-width:52rem} }

  /* ---------- brand ---------- */
  /* Two nodes, one segment: the direct path the site is arguing for. The mark
     inherits --ink and --clay, so it can never drift from the palette. */
  .brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin:0 0 2.75rem;
    text-decoration:none;
    color:inherit;
    width:fit-content;
  }
  .brand-mark{flex:none;display:block;overflow:visible}
  .brand-name{
    font-family:var(--serif);
    font-size:1.28rem;
    letter-spacing:-.02em;
    color:var(--ink);
    line-height:1;
  }
  .brand-desc{
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    padding-left:.6rem;
    margin-left:.1rem;
    border-left:1px solid var(--rule);
    line-height:1.1;
  }
  .brand:focus-visible{outline:2px solid var(--clay);outline-offset:5px;border-radius:2px}
  /* The descriptor is the first thing to go when there is no room for it. */
  @media(max-width:26rem){ .brand-desc{display:none} }

  /* ---------- type ---------- */
  h1{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(2.1rem,6.4vw,3.4rem);
    line-height:1.1;
    letter-spacing:-.015em;
    margin:0 0 1rem;
    text-wrap:balance;
  }
  h2{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 1.25rem;
  }
  .lede{
    font-family:var(--serif);
    font-size:clamp(1.05rem,2.6vw,1.2rem);
    line-height:1.55;
    color:var(--ink-2);
    margin:0 0 1.5rem;
    max-width:34em;
  }
  .meta-line{
    font-size:.78rem;
    color:var(--muted);
    line-height:1.5;
    margin:0;
  }
  .meta-line a{color:var(--muted)}

  section{margin-top:3.75rem}
  @media(min-width:48rem){ section{margin-top:4.75rem} }

  .rule{border:0;border-top:1px solid var(--rule);margin:0}
  .rule-heavy{border:0;border-top:1.5px solid var(--ink);margin:0}

  /* ---------- form ---------- */
  .field{margin-bottom:1.5rem}
  label{
    display:block;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.01em;
    margin-bottom:.4rem;
  }
  .hint{
    display:block;
    font-size:.75rem;
    font-weight:400;
    color:var(--muted);
    margin-top:.15rem;
    line-height:1.45;
  }
  input[type=number],select{
    width:100%;
    font-family:var(--sans);
    font-size:1.05rem;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    background:transparent;
    border:0;
    border-bottom:1.5px solid var(--rule-2);
    border-radius:0;
    padding:.5rem 0;
    transition:border-color .15s ease;
  }
  input[type=number]:focus,select:focus{
    outline:0;
    border-bottom-color:var(--clay);
  }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield}
  select{
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237A7065' stroke-width='1.4'/></svg>");
    background-repeat:no-repeat;
    background-position:right .1rem center;
    padding-right:1.5rem;
    cursor:pointer;
  }

  .grid{display:grid;gap:0 1.75rem}
  @media(min-width:34rem){ .grid-2{grid-template-columns:1fr 1fr} }

  .slider-row{display:flex;align-items:center;gap:1rem}
  input[type=range]{
    flex:1;
    -webkit-appearance:none;appearance:none;
    background:transparent;
    height:1.5rem;
    margin:0;
    cursor:pointer;
  }
  input[type=range]::-webkit-slider-runnable-track{height:1.5px;background:var(--rule-2)}
  input[type=range]::-moz-range-track{height:1.5px;background:var(--rule-2)}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:15px;height:15px;border-radius:50%;
    background:var(--ink);border:0;margin-top:-7px;
  }
  input[type=range]::-moz-range-thumb{
    width:15px;height:15px;border-radius:50%;
    background:var(--ink);border:0;
  }
  .slider-val{
    font-variant-numeric:tabular-nums;
    font-size:1.05rem;
    min-width:3.2rem;
    text-align:right;
  }

  /* ---------- headline ---------- */
  .headline-num{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(2.9rem,13vw,5.6rem);
    line-height:1;
    letter-spacing:-.03em;
    color:var(--clay);
    margin:0 0 .5rem;
    font-variant-numeric:tabular-nums;
  }
  .headline-say{
    font-family:var(--serif);
    font-size:clamp(1.2rem,3.6vw,1.6rem);
    line-height:1.35;
    margin:0 0 1rem;
    max-width:22em;
    text-wrap:balance;
  }
  .assumption{
    font-size:.78rem;
    color:var(--muted);
    max-width:38em;
    line-height:1.55;
    margin:0;
  }

  /* ---------- tables ---------- */
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  caption{text-align:left}
  th{
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    text-align:right;
    padding:0 0 .55rem;
    border-bottom:1px solid var(--rule);
    white-space:nowrap;
  }
  th:first-child{text-align:left}
  td{
    padding:.8rem 0;
    border-bottom:1px solid var(--rule);
    text-align:right;
    font-variant-numeric:tabular-nums;
    vertical-align:top;
  }
  td:first-child{text-align:left;padding-right:.75rem}
  .cat{font-weight:500;display:block}
  .cat-sub{display:block;font-size:.72rem;color:var(--muted);font-weight:400;margin-top:.1rem}
  .free td{color:var(--muted)}
  .free .amt::after{
    content:"free";
    display:block;
    font-size:.66rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:.1rem;
  }
  tr.total td{
    border-bottom:0;
    border-top:1.5px solid var(--ink);
    padding-top:.9rem;
    font-weight:600;
    font-size:1.05rem;
  }
  .num-col{width:26%}

  /* ---------- markup ledger ---------- */
  .ledger{width:100%;border-collapse:collapse}
  .ledger td{padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
  .ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums}
  .ledger tr.big td{
    border-bottom:0;
    border-top:1.5px solid var(--ink);
    padding-top:1.4rem;
  }
  .big-num{
    font-family:var(--serif);
    font-size:clamp(2rem,7.5vw,3rem);
    line-height:1.05;
    letter-spacing:-.02em;
    display:block;
    font-variant-numeric:tabular-nums;
  }
  .big-label{
    font-size:.7rem;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
    margin-bottom:.35rem;
  }
  .annual{margin-top:2.25rem}
  .annual .big-num{color:var(--clay);font-size:clamp(2.4rem,10vw,4rem)}
  .multiple{
    font-family:var(--serif);
    font-size:1.05rem;
    color:var(--ink-2);
    margin:1.5rem 0 0;
  }

  /* ---------- warning ---------- */
  .warn{
    border-left:2px solid var(--clay);
    padding:.1rem 0 .1rem 1.25rem;
    margin-top:3.75rem;
  }
  .warn h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:1.35rem;
    line-height:1.25;
    margin:0 0 .75rem;
  }
  .warn p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0 0 .75rem;max-width:38em}
  .warn p:last-child{margin-bottom:0}
  .warn .compare{
    display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;
    margin:1.25rem 0;
    font-variant-numeric:tabular-nums;
  }
  .warn .compare div{min-width:7rem}
  .warn .compare .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.2rem}
  .warn .compare .v{font-family:var(--serif);font-size:1.5rem;line-height:1}
  .warn .compare .v.hot{color:var(--clay)}

  /* ---------- offer ---------- */
  .offer{
    margin-top:4.5rem;
    border-top:1.5px solid var(--ink);
    border-bottom:1.5px solid var(--ink);
    padding:2.75rem 0;
  }
  .offer h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(1.7rem,5vw,2.4rem);
    line-height:1.15;
    letter-spacing:-.015em;
    margin:0 0 1rem;
    text-wrap:balance;
  }
  .price{
    font-family:var(--serif);
    font-size:clamp(2.2rem,8vw,3.2rem);
    line-height:1;
    letter-spacing:-.02em;
    margin:0 0 .3rem;
  }
  .price-sub{font-size:.8rem;color:var(--muted);margin:0 0 1.75rem;letter-spacing:.02em}
  .offer ul{list-style:none;padding:0;margin:0 0 2rem;max-width:32em}
  .offer li{
    font-size:.92rem;
    padding:.6rem 0 .6rem 1.4rem;
    border-bottom:1px solid var(--rule);
    position:relative;
    color:var(--ink-2);
  }
  .offer li::before{
    content:"";
    position:absolute;left:0;top:1.15rem;
    width:.42rem;height:.42rem;
    background:var(--clay);
    border-radius:50%;
  }
  .cta{display:flex;flex-direction:column;gap:.75rem}
  @media(min-width:34rem){ .cta{flex-direction:row} }
  .btn{
    display:block;
    text-align:center;
    padding:1rem 1.75rem;
    font-family:var(--sans);
    font-size:.92rem;
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;
    border:1.5px solid var(--ink);
    transition:background-color .15s ease,color .15s ease;
  }
  @media(min-width:34rem){ .btn{flex:1} }
  .btn-primary{background:var(--ink);color:var(--bone)}
  .btn-primary:hover{background:var(--clay);border-color:var(--clay)}
  .btn-secondary{background:transparent;color:var(--ink)}
  .btn-secondary:hover{background:var(--bone-2)}

  /* ---------- share ---------- */
  .share{
    margin-top:2.5rem;
    display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;
  }
  .btn-quiet{
    font-family:var(--sans);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--rule-2);
    padding:.55rem 1rem;
    cursor:pointer;
    transition:border-color .15s ease;
  }
  .btn-quiet:hover{border-color:var(--ink)}
  .share-note{font-size:.76rem;color:var(--muted)}

  /* ---------- footer ---------- */
  footer{margin-top:4.5rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
  footer p{font-size:.75rem;color:var(--muted);line-height:1.6;margin:0 0 .7rem;max-width:42em}
  footer a{color:var(--muted)}

  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---------- two-pane tool ----------
     Below the breakpoint this is plain document order: enter your numbers,
     then read the result. Above it, the two sit side by side so the figure
     moves while you are still typing — which is the whole point of the page,
     and was previously two screens below the fold. */
  @media(min-width:68rem){
    /* The page widens to hold the tool. Prose is held to a readable measure by
       its own max-widths rather than by the column, so every block keeps the
       same left edge instead of the tool sitting proud of the header. */
    .wrap{max-width:68rem}
    h1{max-width:12em}
    .faq{max-width:46rem}
    .offer h3{max-width:15em}
    .share{max-width:46rem}

    .tool{
      display:grid;
      grid-template-columns:23rem minmax(0,1fr);
      align-items:start;
      margin-top:3.75rem;
    }
    .tool-inputs{
      position:sticky;
      top:2.5rem;
      padding-right:2.5rem;
      border-right:1px solid var(--rule);
      /* Only scrolls on a short viewport; normally there is nothing to scroll. */
      max-height:calc(100vh - 5rem);
      overflow-y:auto;
    }
    .tool-results{padding-left:3rem}
    /* section carries its own top margin — unwanted at the top of a column. */
    .tool-inputs > section:first-child,
    .tool-results > section:first-child{margin-top:0}
    /* One field per row in the narrow pane; two would wrap every label. */
    .tool-inputs .grid-2{grid-template-columns:1fr}
  }

  /* ---------- reference document (/rates) ---------- */
  .prose{
    font-size:.95rem;
    line-height:1.7;
    color:var(--ink-2);
    max-width:38em;
    margin:0 0 1rem;
  }
  .prose strong{color:var(--ink);font-weight:600}
  .prose:last-child{margin-bottom:0}
  .prose-list{
    font-size:.95rem;
    line-height:1.7;
    color:var(--ink-2);
    max-width:38em;
    margin:0 0 1rem;
    padding-left:1.15rem;
  }
  .prose-list li{margin-bottom:.5rem}
  .prose-list li:last-child{margin-bottom:0}
  .prose-list.tight{font-size:.85rem;line-height:1.6}
  .prose-list.numbered{list-style:decimal}
  section h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:1.15rem;
    line-height:1.3;
    margin:0 0 .65rem;
    color:var(--ink);
  }
  /* Two-up on wide screens, stacked on a phone. */
  .pair{display:grid;gap:2rem}
  @media(min-width:40rem){ .pair{grid-template-columns:1fr 1fr;gap:2.5rem} }
  /* The reference tables are wider than the calculator's; let them breathe and
     scroll rather than crushing seven columns into a phone. */
  .ref-table{font-size:.82rem;min-width:34rem}
  .ref-table td{padding:.7rem 0}
  .ref-table td + td,.ref-table th + th{padding-left:.9rem}
  .ref-table .cur{color:var(--muted);font-size:.72rem;margin-left:.3rem}
  .ref-table .zero{color:var(--muted)}
  .ref-table .amt{font-weight:600;color:var(--ink)}
  .ref-table .wrap-cell{
    white-space:normal;
    max-width:22rem;
    font-size:.8rem;
    color:var(--ink-2);
  }
  .unpriced{color:var(--muted);font-style:italic;font-size:.78rem}

  /* ---------- faq ---------- */
  .faq details{
    border-top:1px solid var(--rule);
    padding:.9rem 0;
  }
  .faq details:last-of-type{border-bottom:1px solid var(--rule)}
  .faq summary{
    font-family:var(--serif);
    font-size:1.02rem;
    line-height:1.4;
    color:var(--ink);
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:baseline;
    gap:.75rem;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+";
    margin-left:auto;
    font-family:var(--sans);
    font-size:1.1rem;
    color:var(--muted);
    flex:none;
    line-height:1;
  }
  .faq details[open] summary::after{content:"–"}
  .faq summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .faq details p{
    font-size:.9rem;
    line-height:1.65;
    color:var(--ink-2);
    margin:.75rem 0 .15rem;
    max-width:40em;
  }

  @media print{
    body{background:#fff}
    .share,.cta{display:none}
    .wrap{padding:0;max-width:none}
  }