:root {
  --ink:#18213a;
  --ink-dark:#10172a;
  --muted:#667080;
  --line:#dfe3e7;
  --paper:#fff;
  --cream:#f8f7f3;
  --blue:#2356ba;
  --blue-soft:#e8efff;
  --coral:#ffbb75;
  --coral-strong:#e99e52;
  --shadow:0 15px 45px rgba(15,27,53,.07);
  --radius:16px;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--cream);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;line-height:1.5;min-width:320px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e3943d;outline-offset:3px}
[hidden]{display:none !important}
.shell{width:min(1190px,calc(100% - 52px));margin-inline:auto}
.skip-link{position:absolute;left:14px;top:-80px;z-index:50;background:#fff;color:#17213b;padding:10px 16px;border-radius:6px}
.skip-link:focus{top:12px}
.topline{min-height:31px;background:var(--ink-dark);color:#e3e8f1;display:flex;align-items:center;justify-content:center;gap:9px;padding:4px 24px;font-size:11px;letter-spacing:.055em}
.topline-mark{background:var(--coral);width:7px;height:7px;border-radius:50%}
.topline-right{opacity:.65;margin-left:36px}
.site-header{background:#fff;border-bottom:1px solid #eceef0;position:relative;z-index:4}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}
.brand,.brand-text,.footer-brand{display:flex}
.brand{gap:11px;align-items:center;flex-shrink:0}
.brand-icon{position:relative;display:grid;place-items:center;width:41px;height:43px;border-radius:11px;background:var(--ink);color:#fff;font-weight:850;font-size:23px;line-height:1}
.brand-icon i{display:block;position:absolute;width:10px;height:10px;background:var(--coral);border:2px solid white;border-radius:50%;right:-3px;bottom:-2px}
.brand-text{font-size:22px;font-weight:800;letter-spacing:-1.1px;line-height:1;flex-direction:column}
.brand-text span,.footer-brand span{color:var(--blue)}
.brand-text small{font-size:9px;letter-spacing:1.8px;margin-top:7px;color:var(--muted);font-weight:750}
.main-nav{display:flex;align-items:center;gap:35px;font-size:13px;color:#39445c;font-weight:650}
.main-nav a:hover,.footer-links a:hover{color:var(--blue)}
.header-support{white-space:nowrap;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:12px;font-weight:750}
.header-support span{font-size:17px;color:#e28b38;margin-right:3px;vertical-align:-1px}
.header-support:hover{border-color:var(--coral-strong);background:#fffaf4}
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:525px;align-items:center;gap:60px;padding-block:61px 68px}
.eyebrow,.section-kicker{color:var(--blue);font-weight:800;font-size:11px;letter-spacing:2px}
.eyebrow{display:flex;gap:10px;align-items:center}
.tiny-star{color:var(--coral-strong);font-size:22px}
h1,h2,h3,h4,p{margin-top:0}
h1,h2{letter-spacing:-.055em;line-height:1.07}
h1{font-size:clamp(48px,5.8vw,82px);margin:17px 0 21px;font-weight:850}
h1 em,h2 em{font-style:normal;color:var(--blue)}
.hero-copy>p{font-size:17px;color:var(--muted);max-width:510px;line-height:1.72;margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{border:0;border-radius:9px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:15px;font-size:13px;font-weight:800;line-height:1.4;transition:transform .15s,background-color .15s,border-color .15s}
.button:hover{transform:translateY(-1px)}
.button-primary{background:var(--ink);color:#fff}
.button-primary:hover{background:var(--blue)}
.button-outline{background:#fff;border:1px solid #d5dbe2;color:var(--ink)}
.button-outline:hover{background:var(--blue-soft)}
.hero-proof{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:30px;color:#697280;font-size:11px;font-weight:550}
.hero-proof span::first-letter{color:var(--blue)}
.hero-art{height:385px;position:relative;display:grid;place-items:center;border-radius:22px;background:radial-gradient(circle at 80% 15%,#3f5594 0,#24345e 38%,#172440 80%);overflow:hidden;isolation:isolate}
.hero-grid-lines{position:absolute;z-index:-1;inset:0;background:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,black)}
.hero-preview{z-index:1;width:min(345px,83%);border-radius:13px;background:#fff;padding:18px 22px 19px;transform:rotate(-3deg);box-shadow:0 18px 35px #05091444}
.preview-top{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:850;letter-spacing:1.2px;color:#5e6a7e}
.preview-icon{width:26px;height:26px;border-radius:7px;background:#e9efff;display:grid;place-items:center;color:var(--blue);font-size:16px}
.preview-dots{margin-left:auto;letter-spacing:2px;color:#a8afbc}
.preview-label{margin-top:19px;font-size:11px;color:#596577}
.preview-number{margin-top:0;color:var(--ink);font-size:43px;line-height:1.25;font-weight:850;letter-spacing:-2px}
.preview-number span{color:#8491a6}
.preview-meta{font-size:10px;color:#7c8797}
.preview-divider{height:1px;background:#e7eaf0;margin:16px 0}
.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preview-stats div{display:flex;flex-direction:column;gap:3px}
.preview-stats span{font-size:9px;letter-spacing:.7px;color:#8993a2}
.preview-stats b{font-size:12px}
.preview-graph{height:66px;display:flex;align-items:flex-end;gap:5px;margin:15px 0 10px}
.preview-graph span{flex:1;background:linear-gradient(180deg,#7b9fe9,#e3ebff);border-radius:3px 3px 0 0}
.preview-link{display:flex;justify-content:space-between;border-top:1px solid #e8ebef;padding-top:11px;color:var(--blue);font-size:11px;font-weight:800}
.floating-note{position:absolute;z-index:2;color:#1d2942;background:#fff5e8;box-shadow:0 10px 20px #0e163a33;padding:9px 11px;border-radius:8px;font-size:9px;font-weight:850;letter-spacing:1px}
.floating-note span{font-size:15px;vertical-align:-2px;color:#db8d35;margin-right:5px}
.note-one{top:37px;left:22px;transform:rotate(-7deg)}
.note-two{right:17px;bottom:42px;transform:rotate(6deg)}
.benefits{background:var(--ink);color:white}
.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;min-height:74px;align-items:center;font-size:12px;font-weight:650}
.benefit-row span{white-space:nowrap}
.benefit-row b{color:var(--coral);font-size:10px;margin-right:11px}
.tools-section{padding-block:84px 100px;scroll-margin-top:30px}
.section-heading{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:29px}
.section-kicker{margin-bottom:10px}
h2{font-size:clamp(35px,4vw,52px);font-weight:850;margin-bottom:13px}
.section-heading p:not(.section-kicker){font-size:14px;color:var(--muted);margin-bottom:0}
.tools-count{background:#fff;padding:10px 15px;border:1px solid var(--line);border-radius:99px;font-size:11px;color:#52617b;font-weight:700;white-space:nowrap}
.tool-filters{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.search-wrap{width:350px;max-width:100%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:9px;color:#8b93a0}
.search-wrap svg{width:18px;height:18px;flex-shrink:0}
.search-wrap input{border:0;outline:0;min-width:0;width:100%;padding:13px 1px;background:transparent;color:var(--ink);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:transparent;border:1px solid #d8dce2;color:#5e6877;border-radius:99px;padding:8px 15px;font-size:11px;font-weight:750}
.chip:hover{border-color:var(--blue)}
.chip.active{background:var(--ink);border-color:var(--ink);color:white}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-card{text-align:left;background:white;border:1px solid #e2e5e9;border-radius:14px;padding:24px;display:flex;flex-direction:column;min-height:248px;align-items:flex-start;box-shadow:0 2px 8px #13204005;transition:transform .18s,border-color .18s,box-shadow .18s;color:var(--ink)}
.tool-card:hover,.tool-card.selected{border-color:#9cb0dd;box-shadow:var(--shadow);transform:translateY(-2px)}
.tool-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:#e9efff;color:#2858ae;font-size:22px;font-weight:850;margin-bottom:15px}
.tool-icon.icon-dates{background:#fff1e2;color:#b76b2e;font-size:17px}
.tool-icon.icon-percent{background:#efeafa;color:#7252b4}
.tool-icon.icon-convert{background:#eaf6f5;color:#236c7e}
.tool-icon.icon-text{background:#fff2eb;color:#b45236;font-size:18px}
.tool-tag{color:#7b8591;font-size:9px;letter-spacing:1.1px;font-weight:800;margin-bottom:6px}
.tool-card strong{font-size:18px;letter-spacing:-.5px;margin-bottom:8px}
.tool-desc{font-size:12px;color:var(--muted);line-height:1.6}
.tool-card-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;border-top:1px solid #edf0f4;margin-top:auto;padding-top:16px;color:#2657ab;font-size:11px;font-weight:850}
.no-results{color:var(--muted);padding:25px;text-align:center}
.workspace{background:white;margin-top:39px;border:1px solid #e2e5e9;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:22px}
.workspace-header{background:#eaf0fc;border-bottom:1px solid #d9e2f3;padding:28px 30px;display:flex;justify-content:space-between;gap:25px}
.workspace-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #d8e5ff;border-radius:20px;padding:5px 10px;font-size:9px;font-weight:850;letter-spacing:.7px;color:#2959af}
.live-dot{width:7px;height:7px;background:#346ec9;border-radius:50%}
.workspace-header h3{font-size:26px;letter-spacing:-.8px;margin:11px 0 3px}
.workspace-header p{font-size:13px;color:#5f6d85;margin:0}
.workspace-topicon{font-size:30px;color:#8ca0c7}
.tool-panel{padding:30px}
.loan-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px}
.calc-form,.simple-form{border:1px solid #e3e7ef;border-radius:13px;padding:24px;background:#fff}
h4{font-size:16px;letter-spacing:-.3px;margin-bottom:20px}
.calc-form label,.simple-form label,.text-layout label{display:flex;align-items:center;justify-content:space-between;color:#465267;font-size:12px;font-weight:750;margin:13px 0 7px}
.label-hint{color:#929aa6;font-size:10px;font-weight:600}
.calc-form input,.simple-form input,.simple-form select,.text-layout textarea{width:100%;height:42px;padding:9px 11px;border:1px solid #d8dfe8;background:#fff;border-radius:7px;color:var(--ink);min-width:0}
.calc-form input:focus,.simple-form input:focus,.simple-form select:focus,.text-layout textarea:focus{border-color:#5c83d1}
.input-prefix,.input-suffix{position:relative}
.input-prefix>span,.input-suffix>span{position:absolute;top:50%;transform:translateY(-50%);color:#8790a0;font-size:12px;font-weight:750}
.input-prefix>span{left:12px}.input-prefix input{padding-left:24px}
.input-suffix>span{right:12px}.input-suffix input{padding-right:48px}
.form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.full-button{width:100%;margin-top:22px}
.form-footnote{font-size:11px;color:#82909f;line-height:1.6;margin:12px 0 0}
.form-error{color:#a13424;background:#fff0ed;border:1px solid #f2c6bf;padding:10px 12px;border-radius:7px;font-size:12px;margin:13px 0 0}
.loan-results{background:var(--ink);color:white;padding:28px;border-radius:13px;display:flex;flex-direction:column}
.result-headline{display:flex;flex-direction:column;gap:8px;padding-bottom:26px;border-bottom:1px solid #ffffff2f}
.result-headline span,.big-answer span{color:#b5c4e3;font-size:10px;font-weight:800;letter-spacing:1.1px}
.result-headline strong{font-size:clamp(36px,3.7vw,53px);line-height:1.08;letter-spacing:-1.5px}
.result-headline small{color:#b3bdd1;font-size:11px}
.result-tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:19px}
.result-tiles>div{background:#ffffff10;border:1px solid #ffffff1e;border-radius:9px;min-width:0;padding:13px}
.result-tiles span{color:#bcc8db;display:block;font-size:10px;margin-bottom:6px}
.result-tiles strong{color:white;font-size:17px;letter-spacing:-.2px;overflow-wrap:anywhere}
.result-tiles .accent-result{background:#ffba7625;border-color:#ffba7650}
.result-tiles .accent-result strong{color:#ffd29a}
.breakdown{margin-top:auto;padding-top:20px}
.breakdown-label{display:flex;justify-content:space-between;gap:15px;font-size:11px;margin-bottom:10px;font-weight:800}
.breakdown-label small{color:#aebbd1;font-weight:500}
.breakdown-label b{white-space:nowrap}
.stacked-bar{display:flex;height:14px;background:#3d4772;overflow:hidden;border-radius:99px}
#principal-bar{background:#86adff}#interest-bar{background:var(--coral)}
.bar-legend{display:flex;gap:19px;color:#c4cede;font-size:10px;margin-top:10px}
.bar-legend span{display:flex;gap:6px;align-items:center}
.bar-legend i{display:inline-block;width:8px;height:8px;border-radius:2px}
.legend-principal{background:#86adff}.legend-interest{background:var(--coral)}
.schedule-wrap{padding-top:31px;margin-top:32px;border-top:1px solid #e4e8ed}
.schedule-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.schedule-heading h4{margin-bottom:4px}
.schedule-heading p{font-size:11px;color:var(--muted);margin-bottom:0}
.schedule-actions{display:flex;gap:8px;flex-wrap:wrap}
.button-quiet{background:#eef2f8;color:#3b4b67}
.button-quiet:hover{background:#e0e9f8}
.button-secondary{background:#edf3ff;color:#1e55a6}
.button-secondary:hover{background:#dce9ff}
.schedule-actions .button{font-size:11px;padding:10px 12px}
.table-scroller{overflow:auto;border:1px solid #e4e8ee;border-radius:9px;max-height:440px}
.schedule-table{border-collapse:collapse;width:100%;min-width:660px;font-size:11px;font-variant-numeric:tabular-nums}
.schedule-table th{position:sticky;top:0;background:#f3f6fa;color:#4b5b72;text-align:right;padding:12px 14px;font-weight:850;z-index:1}
.schedule-table td{text-align:right;padding:10px 14px;color:#455066;border-top:1px solid #edf0f3}
.schedule-table tr:nth-child(even) td{background:#fafbfd}
.schedule-table td:first-child,.schedule-table th:first-child{text-align:left}
.schedule-table td:nth-child(2),.schedule-table th:nth-child(2){text-align:left}
.schedule-footnote{font-size:11px;color:#778293;margin:11px 0 0}
.simple-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.simple-form{min-height:240px}
.simple-results{background:var(--ink);color:white;border-radius:13px;padding:25px;display:flex;flex-direction:column;justify-content:center;gap:15px}
.big-answer{display:flex;flex-direction:column;gap:8px}
.big-answer strong{font-size:48px;line-height:1.12;letter-spacing:-2px;overflow-wrap:anywhere}
.big-answer small{color:#d3d9e5;font-size:12px}
.result-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.result-tiles.three strong{font-size:19px}
.simple-results .form-footnote{color:#d3d9e5}
.percent-layout .simple-form{background:#f9fbfe}
.inline-answer{background:#e9f0ff;border-radius:10px;padding:15px 16px;color:#1d57ae;font-size:26px;font-weight:850;letter-spacing:-.5px;margin-top:16px;overflow-wrap:anywhere}
.text-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.text-layout textarea{height:auto;min-height:225px;resize:vertical;font-size:12px;line-height:1.5;white-space:pre;overflow:auto}
.text-options{display:flex;flex-wrap:wrap;gap:15px;margin-top:15px}
.text-options label{font-size:11px;font-weight:650;display:flex;gap:6px;align-items:center;margin:0}
.text-options input{accent-color:var(--blue)}
.text-output-label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.text-output-label .button{padding:7px 9px;font-size:11px}
.status-text{min-height:14px;font-size:11px;color:var(--blue);margin:5px 0 0}
.excel-section{background:var(--ink);color:white;padding-block:79px}
.excel-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:85px}
.excel-copy .section-kicker{color:var(--coral)}
.excel-copy h2{font-size:clamp(36px,4.1vw,57px);margin:0 0 22px}
.excel-copy h2 em{color:var(--coral)}
.excel-copy>p:not(.section-kicker){font-size:15px;line-height:1.8;color:#d1d9e9;max-width:490px}
.excel-copy .excel-small{font-size:12px !important;color:#aebbd4 !important}
.button-light{background:white;color:#1c2745;margin-top:15px}
.button-light:hover{background:#f7e3cb}
.excel-window{background:white;color:var(--ink);border-radius:13px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 24px 60px #080d2045}
.window-top{background:#f2f4f7;padding:13px 17px;display:flex;gap:24px;align-items:center;font-size:10px;font-weight:850;letter-spacing:1px;color:#778397}
.window-lights{color:#e5a367;letter-spacing:3px}
.excel-window-body{padding:10px 24px}
.excel-row{display:flex;align-items:center;gap:15px;border-bottom:1px solid #eef0f3;padding:13px 0}
.excel-row:last-child{border:0}
.excel-row span{color:var(--blue);background:var(--blue-soft);border-radius:7px;padding:9px;font-size:11px;font-weight:850}
.excel-row p{margin:0;font-size:13px;font-weight:750;flex:1}
.excel-row b{color:#b2bdcf}
.excel-bottom{padding:20px 24px;background:#f7f9fc;display:flex;flex-direction:column;gap:5px}
.excel-bottom>span:first-child{font-size:12px;font-weight:850}
.excel-bottom>span:nth-child(2){font-size:11px;color:#78869a}
.text-link{font-size:12px;font-weight:800;color:var(--blue)}
.about-section{padding-block:85px;display:grid;grid-template-columns:190px 1fr;align-items:center;gap:70px;max-width:940px}
.about-mark{border:3px dashed #b6c7e8;display:grid;place-items:center;color:#e2a56a;border-radius:28px;height:190px;width:190px;font-size:100px;transform:rotate(-7deg)}
.about-section p:not(.section-kicker){color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 12px}
.support-section{background:#f9e8d4;padding-block:65px}
.support-layout{display:flex;justify-content:space-between;align-items:center;gap:35px}
.support-section .section-kicker{color:#af6429}
.support-section h2 em{color:#b86b30}
.support-section p:not(.section-kicker){color:#725844;font-size:14px;line-height:1.7;max-width:510px}
.donation-pending{display:inline-block;color:#78573d;border:1px solid #d6b99d;border-radius:9px;background:#fff8ef;padding:12px 15px;font-size:12px;font-weight:750}
.support-sticker{width:180px;height:180px;flex:0 0 180px;border:2px dashed #ac7954;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);color:#85522f;background:#fff4e6}
.sticker-top,.sticker-bottom{font-size:9px;letter-spacing:1.3px;font-weight:850}
.sticker-heart{font-size:67px;line-height:1.1;color:#aa632e}
footer{background:#11192c;color:white;padding-top:37px}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:35px}
.footer-brand{font-size:21px;font-weight:850;letter-spacing:-.7px;flex-direction:column}
.footer-brand span{display:inline;color:#8fb1ff}
.footer-brand small{font-size:11px;font-weight:450;color:#a5b0c6;margin-top:4px;letter-spacing:0}
.footer-links{display:flex;gap:25px;font-size:12px;color:#c2cce0}
.footer-bottom{border-top:1px solid #2b3447;display:flex;justify-content:space-between;padding:18px 0;font-size:11px;color:#9ca9bf}
@media(max-width:1030px){
  .hero{gap:28px}.hero h1{font-size:clamp(46px,6vw,70px)}
  .main-nav{gap:20px}.loan-layout{gap:15px}.tool-panel{padding:20px}.loan-results{padding:22px}
  .benefit-row{grid-template-columns:1fr 1fr;gap:8px 20px;padding-block:16px}.excel-layout{gap:35px}
}
@media(max-width:760px){
  .shell{width:min(100% - 36px,620px)}
  .topline-right{display:none}
  .header-inner{min-height:72px;flex-wrap:wrap;padding-block:12px}
  .brand-text{font-size:19px}.brand-text small{font-size:8px}
  .main-nav{order:3;justify-content:center;width:100%;border-top:1px solid #edf0f5;padding-top:12px;font-size:12px}
  .header-support{padding:7px 10px;font-size:11px}
  .hero{grid-template-columns:1fr;gap:23px;padding-block:50px}
  .hero-copy>p{font-size:15px}.hero-art{height:335px}
  .hero-proof{margin-top:20px}.tool-filters,.section-heading{flex-direction:column;align-items:stretch}
  .tools-count{align-self:flex-start}.search-wrap{width:100%}
  .tool-grid{grid-template-columns:1fr 1fr}.tool-card{min-height:230px;padding:19px}
  .loan-layout,.simple-layout,.text-layout,.excel-layout{grid-template-columns:1fr}
  .loan-results{min-height:350px}
  .schedule-heading{align-items:start;flex-direction:column}
  .excel-layout{gap:45px}.excel-window{transform:none}
  .about-section{grid-template-columns:1fr;gap:20px}.about-mark{height:100px;width:100px;font-size:60px;border-radius:20px}
  .support-sticker{width:125px;height:125px;flex-basis:125px}.sticker-heart{font-size:42px}.sticker-top,.sticker-bottom{font-size:7px}
}
@media(max-width:500px){
  .shell{width:calc(100% - 28px)}
  .brand-icon{height:36px;width:36px;font-size:20px}
  .brand-text{font-size:17px}.brand-text small{letter-spacing:.6px}
  .header-support{font-size:0;padding:5px 10px}.header-support span{font-size:22px;margin:0}
  .main-nav{gap:25px}
  h1{font-size:46px}.hero-art{height:310px}
  .hero-preview{padding:15px 16px;width:83%}.preview-number{font-size:37px}
  .note-one{top:19px;left:5px}.note-two{bottom:14px;right:5px}
  .benefit-row{grid-template-columns:1fr 1fr;font-size:10px}.benefit-row b{margin-right:4px}
  .tools-section{padding-block:55px}
  .tool-grid{grid-template-columns:1fr}.tool-card{min-height:192px}
  .tool-panel{padding:14px}.workspace-header{padding:21px 18px}.workspace-header h3{font-size:21px}
  .calc-form,.simple-form{padding:16px}.loan-results{padding:19px}
  .result-headline strong{font-size:41px}.result-tiles strong{font-size:14px}
  .result-tiles.three strong{font-size:16px}
  .schedule-wrap{margin-top:20px}.schedule-actions .button{font-size:10px}
  .about-section{padding-block:55px}
  .support-layout{flex-direction:column;align-items:flex-start}
  .support-sticker{align-self:flex-end}
  .footer-main,.footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-links{gap:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.tool-card{transition:none}}

/* Sidebar + active tool workspace — inspired by the selectable left/right layout. */
.hero.hero-compact{display:block;min-height:0;padding-block:44px 29px}
.hero.hero-compact .hero-copy{max-width:870px}
.hero.hero-compact h1{font-size:clamp(37px,4.6vw,59px);line-height:1.09;margin:13px 0 13px}
.hero.hero-compact .hero-copy>p{max-width:750px;font-size:16px;line-height:1.6;margin:0}
.hero.hero-compact .hero-proof{margin-top:19px}
.sidebar-section-heading{margin-bottom:22px}
.sidebar-section-heading h2{font-size:clamp(28px,3.1vw,40px)}
.sidebar-section-heading p:not(.section-kicker){margin-top:5px}
.tool-desk{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.tool-sidebar{background:#fff;border:1px solid #e1e6f0;border-radius:17px;box-shadow:var(--shadow);overflow:hidden;position:sticky;top:18px;min-width:0}
.tool-sidebar-heading{padding:22px 18px 14px}
.sidebar-kicker{font-size:10px;font-weight:900;letter-spacing:1.3px;color:#4767a9}
.tool-sidebar h3{font-size:20px;letter-spacing:-.5px;margin:8px 0 18px;line-height:1.2}
.side-count{display:block;color:#63718a;font-size:11px;letter-spacing:0;font-weight:600;margin-top:5px}
.sidebar-search{width:100%;margin:0}
.sidebar-search input{width:100%}
.sidebar-nav{display:grid;gap:0;padding:0 9px 12px}
.tool-desk .tool-card{position:relative;display:flex;flex-direction:row;align-items:center;min-height:73px;width:100%;gap:12px;padding:12px 10px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;box-shadow:none;transform:none;transition:background .15s,border-color .15s}
.tool-desk .tool-card:hover{background:#f4f6fc;transform:none;box-shadow:none}
.tool-desk .tool-card.selected{background:#e8efff;border-color:#b7c9ec;box-shadow:inset 4px 0 #2b5fb5;transform:none}
.tool-desk .tool-card:focus-visible{outline:3px solid #2b5fb5;outline-offset:2px}
.tool-desk .tool-card .tool-icon{flex:0 0 38px;width:38px;height:38px;min-width:38px;border-radius:10px;font-size:16px;margin:0;display:grid;place-items:center}
.tool-nav-copy{flex:1;min-width:0;display:block}
.tool-desk .tool-nav-copy strong{font-size:14px;font-weight:800;line-height:1.25;letter-spacing:-.25px;margin:0;display:block}
.tool-desk .tool-nav-copy small{display:block;font-size:11px;line-height:1.3;margin-top:5px;color:#6b7485}
.tool-nav-chevron{font-size:25px;color:#8a9bb7;font-weight:400}
.tool-desk .tool-card.selected .tool-nav-chevron{color:#2b5fb5}
.tool-sidebar .no-results{padding:0 20px 14px;font-size:12px}
.sidebar-foot{background:#f7f9fd;border-top:1px solid #e6eaf1;padding:15px 18px;font-size:11px;color:#67728a;line-height:1.45}
.sidebar-foot span{color:#285caf;margin-right:4px}
.tool-desk .workspace{min-width:0;margin-top:0;scroll-margin-top:20px}
.tool-desk .workspace-header{padding:22px 25px}
.tool-desk .workspace-header h3{font-size:24px}
.tool-desk .workspace-header p{max-width:640px}
.tool-desk .tool-panel{padding:22px}
@media(max-width:1030px){.tool-desk{grid-template-columns:245px minmax(0,1fr);gap:13px}.tool-desk .tool-panel{padding:14px}.tool-desk .loan-layout{grid-template-columns:1fr}.tool-desk .loan-results{padding:20px}}
@media(max-width:760px){.hero.hero-compact{padding-block:32px 25px}.tool-desk{grid-template-columns:1fr;gap:15px}.tool-sidebar{position:static}.tool-sidebar-heading{padding:17px 15px 12px}.sidebar-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0 10px 12px}.tool-desk .tool-card{min-height:72px}.tool-desk .tool-panel{padding:18px}.tool-desk .loan-layout{grid-template-columns:1fr}}
@media(max-width:500px){.hero.hero-compact h1{font-size:40px}.hero.hero-compact .hero-copy>p{font-size:14px}.tool-desk .tool-card{gap:8px;padding:10px 7px}.tool-desk .tool-card .tool-icon{flex-basis:32px;min-width:32px;width:32px;height:32px;font-size:13px}.tool-desk .tool-nav-copy strong{font-size:12px}.tool-desk .tool-nav-copy small{font-size:10px}.tool-nav-chevron{font-size:18px}.tool-desk .tool-panel{padding:13px}}

/* Homepage-first tool workspace: single navigation column and single active work panel. */
.site-header .header-inner{min-height:76px}
.tools-section{padding-block:23px 82px;scroll-margin-top:12px}
.homepage-intro{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 17px}
.homepage-intro .section-kicker{margin-bottom:6px;font-size:10px;letter-spacing:1.5px}
.homepage-intro h1{font-size:clamp(27px,3vw,37px);letter-spacing:-.055em;line-height:1.15;margin:0}
.homepage-intro>p{margin:0 0 3px;max-width:335px;color:var(--muted);font-size:12px;line-height:1.55;text-align:right}
.tool-desk{grid-template-columns:minmax(240px,275px) minmax(0,1fr);gap:17px}
.tool-sidebar{position:sticky;top:15px}
.tool-sidebar-heading{padding:20px 18px 13px}
.tool-sidebar h3{margin:6px 0 16px}
.tool-desk .tool-card{min-height:69px}
.tool-desk .workspace-header{padding:18px 24px}
.tool-desk .workspace-header h3{margin:8px 0 4px;font-size:25px}
.tool-desk .workspace-header p{font-size:12px;line-height:1.5}
.tool-desk .tool-panel{padding:18px 22px}
.tool-desk .workspace{margin:0}
.tool-desk .workspace-pill{background:#fff}
@media(max-width:1030px){
 .tool-desk{grid-template-columns:235px minmax(0,1fr);gap:13px}
 .homepage-intro>p{max-width:260px}
}
@media(max-width:760px){
 .tools-section{padding-block:19px 60px}
 .homepage-intro{display:block;margin:0 0 15px}
 .homepage-intro h1{font-size:30px}
 .homepage-intro>p{text-align:left;margin-top:7px;max-width:100%}
 .tool-desk{grid-template-columns:minmax(0,1fr);gap:12px}
 .tool-sidebar{position:static}
 .tool-desk .workspace-header{padding:17px 19px}
 .tool-desk .tool-panel{padding:14px}
}
@media(max-width:500px){
 .homepage-intro h1{font-size:27px}
 .tool-desk .tool-card{min-height:65px}
 .tool-desk .tool-nav-copy small{font-size:9px}
 .tool-sidebar-heading{padding:15px 13px 12px}
 .tool-sidebar h3{font-size:18px;margin-bottom:10px}
 .sidebar-nav{gap:3px}
 .tool-desk .tool-panel{padding:12px}
}

/* Give the selected calculator screen space on small phones without hiding any tools. */
@media (max-width:500px) {
  .topline { display:none; }
  .site-header .header-inner { min-height:0; padding-block:9px 6px; row-gap:8px; }
  .brand-icon { width:33px; height:34px; }
  .brand-text { font-size:16px; }
  .brand-text small { font-size:7px; margin-top:3px; }
  .main-nav { padding-top:7px; font-size:11px; }
  .tools-section { padding-top:13px; }
  .homepage-intro { margin-bottom:11px; }
  .homepage-intro .section-kicker { font-size:9px; letter-spacing:1.1px; margin-bottom:4px; }
  .homepage-intro h1 { font-size:25px; }
  .homepage-intro > p { font-size:11px; margin-top:4px; }
  .tool-sidebar-heading { padding:11px 11px 8px; }
  .tool-sidebar h3 { font-size:16px; margin:3px 0 7px; }
  .side-count { display:none; }
  .sidebar-search input { padding:7px 0; font-size:12px; }
  .sidebar-nav { gap:3px; padding:0 7px 7px; }
  .tool-desk .tool-card { min-height:48px; gap:6px; padding:6px; }
  .tool-desk .tool-card .tool-icon { width:27px; height:27px; min-width:27px; flex-basis:27px; font-size:12px; }
  .tool-desk .tool-nav-copy strong { font-size:11px; letter-spacing:-.2px; }
  .tool-desk .tool-nav-copy small, .tool-desk .tool-nav-chevron { display:none; }
  .sidebar-foot { padding:7px 11px; font-size:9px; }
  .tool-desk .workspace-header { padding:13px 15px; }
  .tool-desk .workspace-header h3 { font-size:21px; margin:6px 0 3px; }
  .tool-desk .workspace-header p { font-size:11px; }
  .workspace-pill { padding:4px 8px; }
  .tool-desk .tool-panel { padding:11px; }
  .calc-form, .simple-form { padding:13px; }
}

/* Tool Panel Design v2 — desktop-first work area, one menu and one active panel */
@media (min-width: 1080px) {
  .shell { width:min(1400px,calc(100% - 72px)); }
  .site-header .header-inner { min-height:70px; }
  .tools-section { padding-top:19px; padding-bottom:76px; }
  .tool-desk { grid-template-columns:270px minmax(0,1fr); gap:16px; }
  .tool-desk .workspace-header { padding:18px 26px; }
  .tool-desk .tool-panel { padding:23px 25px 25px; }
  .tool-desk .loan-layout { grid-template-columns:minmax(340px,.94fr) minmax(0,1.06fr); gap:22px; }
  .tool-sidebar { top:16px; }
}
.homepage-intro { margin-bottom:14px; }
.homepage-intro .section-kicker { color:#315db1; }
.homepage-intro h1 { font-size:clamp(26px,2.65vw,35px); }
.homepage-intro>p { max-width:400px; }
.tool-sidebar { border:1px solid #dee5f0; border-radius:15px; }
.tool-sidebar-heading { padding-bottom:10px; }
.tool-sidebar h3 { font-size:19px; margin-bottom:13px; }
.tool-sidebar .sidebar-kicker { font-size:10px; }
.nav-group-label { padding:14px 11px 6px; color:#70809a; font-size:10px; letter-spacing:1.3px; font-weight:850; }
.sidebar-nav { padding:0 9px 13px; }
.tool-desk .tool-card { min-height:70px; gap:11px; padding:11px; }
.tool-desk .tool-card.selected { border-color:#bad0f7; box-shadow:inset 4px 0 #275ab7; }
.tool-desk .tool-nav-copy strong { font-size:13px; }
.tool-desk .tool-nav-copy small { font-size:11px; }
.tool-desk .tool-card .tool-icon { flex:0 0 39px; height:39px; width:39px; }
.sidebar-foot { display:flex; flex-direction:column; gap:3px; font-size:10px; padding:13px 17px; }
.sidebar-foot strong { color:#34578e; }
.sidebar-foot span { color:#758299; }
.workspace { border-color:#dbe4f2; border-radius:15px; }
.workspace-header { align-items:center; }
.workspace-heading { min-width:0; flex:1; }
.workspace-header h3 { font-size:25px; margin:6px 0 4px; }
.workspace-actions { display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex-shrink:0; }
.workspace-private { color:#74839d; font-size:10px; }
.workspace-actions .button { white-space:nowrap; padding:10px 13px; font-size:11px; }
.tool-panel { min-height:375px; }
.calc-form,.simple-form { padding:23px; }
.calc-form h4 { font-size:18px; margin-bottom:17px; }
.loan-results { min-height:440px; }
.loan-results .result-headline { padding-bottom:18px; }
.loan-results .result-headline strong { font-size:clamp(39px,4vw,56px); }
.monthly-with-extra { display:inline-block; align-self:flex-start; margin-top:6px; padding:7px 11px; border-radius:7px; border:1px solid #5f7499; background:#2e3c5d; color:#f5f8ff; font-size:11px; font-weight:700; }
.quick-extras { display:grid; gap:9px; margin-top:10px; }
.quick-extras>span { font-size:11px; color:#68778c; }
.quick-extra-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.quick-extra { border:1px solid #dbe4f3; border-radius:8px; background:#f5f8fd; padding:6px 12px; font-size:11px; font-weight:700; color:#385175; }
.quick-extra.active { background:#dceaff; color:#194c9d; border-color:#7aa2e7; }
.quick-extra:hover { background:#e8f0fc; }
.mini-action { margin-top:20px; font-size:12px; }
.simple-results .big-answer strong { font-size:clamp(32px,3.4vw,48px); }
@media (max-width:1079px) and (min-width:761px) {
 .tool-desk { grid-template-columns:235px minmax(0,1fr); }
 .workspace-header { align-items:flex-start; }
 .workspace-actions .button { padding:8px; }
}
@media (max-width:760px) {
 .workspace-header { align-items:flex-start; }
 .workspace-actions .button { font-size:11px; padding:8px; }
 .workspace-private { display:none; }
 .nav-group-label { padding-top:8px; }
 .sidebar-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .nav-group-label { grid-column:1 / -1; }
 .monthly-with-extra { align-self:stretch; }
}
@media (max-width:440px) {
 .workspace-header { display:block; }
 .workspace-actions { margin-top:9px; align-items:flex-start; }
 .nav-group-label { padding-top:5px; }
}


/* Loan calculator: inner tabs for loan details and the amortization schedule. */
.loan-tabs { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; border-bottom:1px solid #d7e0ef; margin:-3px 0 18px; }
.loan-tab { appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:800; color:#58677f; background:transparent; border:1px solid transparent; border-bottom:3px solid transparent; border-radius:9px 9px 0 0; padding:13px 19px 12px; margin-bottom:-1px; }
.loan-tab:hover { color:#2055a5; background:#f2f6fc; }
.loan-tab[aria-selected="true"] { color:#174b9f; background:#edf3ff; border-color:#d3e1f6; border-bottom-color:#2966c8; }
.loan-tab:focus-visible { outline:3px solid #2b65c4; outline-offset:2px; }
.loan-tab-pane { min-width:0; }
.loan-tab-pane[hidden] { display:none !important; }
.loan-details-next { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:20px; padding:17px 19px; border:1px solid #dae4f3; border-radius:11px; background:#f6f9fe; }
.loan-details-next>div { display:flex; flex-direction:column; gap:4px; }
.loan-details-next strong { color:#203c6a; font-size:12px; }
.loan-details-next span { font-size:11px; color:#60718b; line-height:1.5; }
.loan-details-next .button { flex-shrink:0; font-size:11px; padding:11px 14px; }
.loan-schedule-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:21px; }
.loan-schedule-summary>div { background:#f3f7fd; border:1px solid #dce6f5; border-radius:10px; padding:15px 16px; min-width:0; display:flex; flex-direction:column; gap:9px; }
.loan-schedule-summary span { color:#66758b; font-size:11px; font-weight:700; }
.loan-schedule-summary strong { font-size:clamp(18px,1.8vw,24px); letter-spacing:-.4px; color:#203f74; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.loan-pane-schedule .schedule-wrap { border-top:0; margin-top:0; padding-top:0; }
.loan-pane-schedule .schedule-heading h4 { font-size:17px; margin-bottom:5px; }
.loan-pane-schedule .table-scroller { max-height:540px; }
@media(max-width:1080px) { .loan-details-next { align-items:start; flex-direction:column; } }
@media(max-width:760px) { .loan-schedule-summary { grid-template-columns:1fr; } .loan-tabs { gap:0; } .loan-tab { padding:11px 10px; font-size:12px; flex:1; } }


/* Four-value loan form / choose-the-unknown prototype. */
.step-label { color:#3f75ce; font-size:10px; font-weight:850; letter-spacing:1.1px; margin-bottom:9px; }
.loan-solve-form h4 { margin-bottom:7px; font-size:20px; color:#1a2945; }
.loan-form-desc { font-size:12px; color:#677992; line-height:1.65; margin:0 0 14px; }
.loan-variable-list { margin:0; padding:0; border:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.loan-variable { background:#fff; border:1px solid #e0e6f0; border-radius:10px; padding:10px 13px 13px; margin:9px 0; transition:background .15s, border-color .15s; }
.loan-variable.to-calculate { border-color:#6b98e6; background:#edf4ff; box-shadow:inset 3px 0 0 #2c68c7; }
.loan-variable-top { display:flex; align-items:center; gap:12px; min-height:20px; margin-bottom:7px; }
.loan-variable-top .solve-choice { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; color:#315d9e; margin:0; cursor:pointer; white-space:nowrap; }
.loan-variable-top .solve-choice input[type=radio] { appearance:auto; width:16px; height:16px; accent-color:#1f63c5; padding:0; border:0; margin:0; flex-shrink:0; }
.loan-variable-top .variable-name { justify-content:flex-start; margin:0; font-size:13px; font-weight:800; color:#2b3f5e; }
.loan-variable-top .variable-mode { margin-left:auto; color:#71829a; font-size:10px; font-weight:700; white-space:nowrap; }
.loan-variable.to-calculate .variable-mode { color:#225cb5; }
.loan-variable .input-prefix input,.loan-variable .input-suffix input { height:45px; font-size:16px; font-variant-numeric:tabular-nums; }
.loan-variable input[readonly] { background:#e1eafb; color:#536d95; border:1px dashed #9bb7e3; cursor:not-allowed; }
.loan-variable input[readonly]::placeholder { color:#6885b0; font-size:12px; }
.loan-variable .input-prefix>span, .loan-variable .input-suffix>span { z-index:1; }
.loan-selection-message { background:#eef5ff; border-radius:9px; padding:12px 13px; font-size:12px; color:#315d95; line-height:1.5; margin:14px 0 0; }
.loan-solve-summary { min-height:unset; gap:8px; }
.loan-solve-summary .step-label { color:#90baff; }
.loan-solve-summary .result-headline { border-bottom:1px solid #ffffff24; padding:10px 0 24px; }
.loan-solve-summary .result-headline strong { font-size:clamp(29px,3vw,44px); line-height:1.15; letter-spacing:-.8px; }
.solve-state-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:22px 0 8px; }
.solve-state-grid>div { display:flex; align-items:center; gap:11px; background:#ffffff0c; border:1px solid #ffffff24; border-radius:10px; padding:14px 11px; }
.solve-state-grid strong { font-size:12px; display:block; color:white; }
.solve-state-grid small { font-size:10px; line-height:1.45; color:#bac8df; display:block; margin-top:5px; }
.solve-state-symbol { display:flex; justify-content:center; align-items:center; width:31px; min-width:31px; height:31px; border-radius:9px; background:#ffffff1b; font-size:20px; color:#9dbeff; }
.solve-preview-box { background:#1f365d; border:1px solid #456185; border-radius:11px; padding:19px; margin-top:12px; }
.solve-preview-label { color:#abc5ef; font-size:10px; letter-spacing:1px; font-weight:800; }
.solve-preview-box p { color:#f1f5fe; line-height:1.7; font-size:13px; margin:11px 0 0; }
.solve-no-math { margin-top:auto; padding-top:22px; font-size:11px; color:#a8bcd8; }
.schedule-unwired { background:#f4f7fe; border:1px solid #d6e2f6; border-radius:12px; padding:23px; margin:15px 0 18px; }
.schedule-unwired strong { color:#274b81; font-size:16px; }
.schedule-unwired p { color:#60728b; font-size:13px; line-height:1.7; margin:8px 0 0; }
.schedule-table .empty-amortization { text-align:center; padding:40px 15px; font-size:12px; color:#7e8da5; }
@media(max-width:1240px) { .loan-variable-top { flex-wrap:wrap; gap:7px 12px; } .loan-variable-top .variable-mode { margin-left:auto; } }
@media(max-width:760px) { .solve-state-grid { grid-template-columns:1fr; } }
