*{box-sizing:border-box;margin:0;padding:0}
:root{--acc:#0b5ce6;--acc2:#38bdf8;--accd:#041f52;--acct:#a8cff5;--accbg:#e3efff;--ink:#0a2547;--mut:#44607f;--faint:#7188a5;--amber:#b45309}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
 background:linear-gradient(180deg,#dcefff 0%,#eef6ff 340px,#f7fbff 62%,#e8f3ff 100%);line-height:1.55;overflow-x:hidden}
a{color:#0b5ce6}
.wrap{max-width:none;margin:0 auto;padding:0 16px;width:100%}
header.site{padding:14px 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-family:'Work Sans',Poppins,system-ui,sans-serif;font-size:30px;font-weight:900;letter-spacing:-.01em;text-decoration:none;color:#06255c}
.logo span{background:linear-gradient(90deg,#38b6f6,#0b8fe0 55%,#0b5ce6);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.main{display:flex;gap:16px;flex-wrap:wrap}
nav.main a{color:#44607f;text-decoration:none;font-weight:700;font-size:14.5px}
nav.main a:hover{text-decoration:underline}
.hero{position:relative;border-radius:22px;overflow:hidden;margin:0 0 24px;color:#fff;
 background:linear-gradient(115deg,#031636 0%,#06255c 52%,#0a357f 100%);
 box-shadow:0 24px 50px rgba(2,26,71,.35);padding:44px 28px 46px}
.hero-art{position:absolute;inset:0;background:url('hero-art-top.jpg') 100% 30%/cover no-repeat;z-index:0}
.hero-shade{position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(2,20,54,.82) 0%,rgba(2,20,54,.68) 36%,rgba(2,20,54,.18) 60%,rgba(2,20,54,0) 76%)}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
 position:relative;z-index:2;background:#fff;margin:-44px -28px 34px;padding:13px 28px;
 box-shadow:0 10px 26px rgba(2,26,71,.16)}
.hero-top .logo{font-size:40px}
.hero-top nav.main a{color:#44607f;font-size:14.5px;font-weight:700}
.hero-top nav.main a:hover{background:#e8f3ff;border-radius:999px;text-decoration:none}
.hero-in{position:relative;z-index:2;max-width:860px}
.hero-in h1{font-family:'Work Sans',Poppins,system-ui,sans-serif;font-weight:900;
 font-size:clamp(56px,15.5vw,236px);line-height:.92;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-in h1 span{display:inline}
.hero-in h1 .grad{background:linear-gradient(90deg,#bfe9ff 0%,#5fd2fb 34%,#38c8f4 58%,#0b8fe0 84%,#2f7bf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hero-in .slogan{font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:clamp(21px,3vw,33px);margin:10px 0 6px}
.hero-in .slogan .hl{color:#38c8f4}
.hero-in p.sub{font-size:clamp(15px,1.8vw,17.5px);color:#d7e7fb;max-width:50ch;margin-bottom:16px}
.searchbox{display:flex;gap:8px;max-width:860px;background:#fff;border-radius:999px;padding:7px 7px 7px 20px;
 box-shadow:0 10px 26px rgba(2,26,71,.16)}
.searchbox input{flex:1;min-width:0;padding:11px 0;border:0;background:transparent;color:#10233f;font-size:17px;outline:none}
.searchbox button{padding:11px 24px;border-radius:999px;border:0;background:linear-gradient(120deg,#0b8fe0,#0b5ce6);color:#fff;
 font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.trust{position:relative;z-index:2;margin-top:26px;background:linear-gradient(180deg,#ffffff,#edf5ff);border-radius:16px;
 padding:16px 22px 20px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;color:#0a2547;
 box-shadow:0 10px 26px rgba(2,26,71,.16)}
.trust .items{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600;font-size:14px}
.trust .items span{display:flex;align-items:center;gap:8px}
.trust .items svg{width:19px;height:19px;flex-shrink:0}
.trust .items span+span{border-left:1px solid #c9dcf3;padding-left:18px}
.trust .btn{background:#06255c;color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.trust .btn:hover{background:#0b3f9e}
.tools-frame{background:#fff;border:1.5px solid #9ec9f5;border-radius:26px;padding:14px 14px 0;
 box-shadow:0 22px 46px rgba(6,50,110,.16);margin-top:22px}
.panel{border:2px solid var(--pc,#5aa9f0);border-radius:20px;padding:22px;margin:0 0 14px;
 box-shadow:0 10px 30px rgba(6,42,94,.08)}
.panel-calc{--pc:#5aa9f0;--pc2:#38b6f6;--pc3:#0b5ce6;background:linear-gradient(180deg,#eef6ff,#dceeff)}
.panel-conv{--pc:#43c98b;--pc2:#2fe08a;--pc3:#0d9d6c;background:linear-gradient(180deg,#effcf3,#ddf7e7)}
.panel-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.panel-head .badge{width:64px;height:64px;flex-shrink:0;border-radius:18px;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,var(--pc2),var(--pc3));box-shadow:0 8px 18px rgba(6,42,94,.25);color:#fff}
.panel-head .badge svg{width:36px;height:36px}
.panel-head h2{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:clamp(31px,3.4vw,39px);color:#0a2547;line-height:1.1}
.panel-head .tagline{font-weight:600;color:#0a2547}
.panel-head .sub{color:#44607f;font-size:14.5px}
.panel-head .viewall{margin-left:auto;color:#0b7fd4;font-weight:700;text-decoration:none;white-space:nowrap}
.panel-head .livepill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#0a2547;background:#e8f3ff;border:1px solid #c9dcf3;border-radius:999px;padding:4px 10px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:860px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;background:#fff;border:1px solid #dcebfb;border-radius:14px;padding:14px 10px 11px;
 text-decoration:none;display:block;text-align:center;box-shadow:0 6px 18px rgba(6,42,94,.08);transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:#0b7fd4}
.card:active{border-color:#0d9d6c}
.card .rank{position:absolute;top:8px;right:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7188a5}
.card .ic{width:52px;height:52px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px rgba(6,42,94,.18))}
.card .ic svg{width:52px;height:52px}
.card h3{font-size:14px;font-weight:700;line-height:1.25;margin-bottom:4px;color:#0a2547}
.card p{font-size:11.5px;color:#44607f;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .band{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#b45309;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .open{display:block;margin-top:6px;font-size:12px;font-weight:800;color:#0b7fd4}
.ad,.ad-slot{background:#fff;border:1.5px dashed #aecdf3;border-radius:16px;
 padding:22px;text-align:center;margin:14px 0}
.ad-slot{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ad-slot .ad-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;color:#44607f}
.ad-slot .ad-note{font-size:13px;color:#7188a5}
.ad-slot.banner{min-height:132px}
.tool{background:#fff;border:1.5px solid var(--acct);border-radius:20px;
 padding:26px;margin:22px 0;box-shadow:0 10px 30px rgba(6,42,94,.08)}
.ws-head{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,var(--accbg),#fff);
 border:1px solid var(--acct);border-radius:16px;padding:16px 18px;margin-bottom:6px}
.ws-head .ic{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
 filter:drop-shadow(0 4px 8px rgba(6,42,94,.18))}
.ws-head .ic svg{width:56px;height:56px}
.ws-head h1,.ws-head h2{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:clamp(20px,3vw,26px);color:var(--accd);line-height:1.1;margin:0}
.ws-head .tag{color:#b45309;font-weight:700;font-family:'JetBrains Mono',monospace;font-size:13px}
.tool .desc{color:var(--mut);margin:10px 0 4px}
.tool h1,.tool h2{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:clamp(20px,3vw,26px);margin-bottom:6px;color:var(--accd)}
.tool .tag{color:#b45309;font-weight:700;font-family:'JetBrains Mono',monospace;font-size:13px;margin-bottom:14px}
label{font-weight:700;font-size:13px;text-transform:uppercase;display:block;margin:12px 0 5px;color:var(--accl)}
input[type=number],input[type=text],input[type=date],select{width:100%;max-width:100%;padding:11px 12px;
 border-radius:10px;border:1.5px solid var(--acct);background:linear-gradient(180deg,#ffffff,#f7fbff);color:#10233f;font-size:16.5px}
input[type=number]{-moz-appearance:textfield}
input[type=number]:focus,input[type=text]:focus,input[type=date]:focus,select:focus{border-color:var(--acc);outline:2px solid var(--acct);outline-offset:0}
button.calc,button.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0;border-radius:12px;
 padding:12px 22px;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px}
button.calc:hover,button.primary:hover{filter:brightness(1.06)}
.result{margin-top:20px;background:linear-gradient(135deg,var(--accd) 0%,var(--acc) 55%,var(--acc2) 125%);color:#fff;border:0;
 border-radius:16px;padding:20px;box-shadow:0 10px 24px rgba(6,42,94,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.result .big{font-size:clamp(36px,5vw,48px);font-weight:800;line-height:1.2;word-break:break-word;color:#fff}
.result .sub{color:rgba(255,255,255,.92);margin-top:6px}
.result table{color:#fff}
.result th{color:#fff}
.result td{border-bottom-color:rgba(255,255,255,.3)}
.viz{margin-top:14px}
.donut{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut svg{flex-shrink:0}
.donut .legend{font-size:13.5px;color:#fff}
.donut .legend div{display:flex;gap:8px;align-items:center;margin:4px 0}
.donut .legend i{width:12px;height:12px;border-radius:3px;display:inline-block;flex-shrink:0}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:#fff}
.splitbar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.25);margin-top:10px}
.splitbar div{height:100%}
.conv-bars{margin-top:16px}
.conv-bars .bar-row .bar{background:#e2edf9}
.conv-bars .bar-row .fill{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.conv-bars .bar-row.dest .lbl{font-weight:800;color:var(--accd)}
.conv-bars .bar-row.dest .fill{background:var(--acc)}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
th,td{border-bottom:1px solid #e2e8f0;padding:8px 6px;text-align:left;overflow-wrap:anywhere}
th{color:#0a2547}
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:14px}
.bar-row .lbl{width:150px;flex-shrink:0}
.bar-row .bar{flex:1;background:rgba(255,255,255,.25);border-radius:8px;height:18px;overflow:hidden}
.bar-row .fill{height:100%;background:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chips a,.chips button{background:#fff;border:1px solid #cbd5e1;color:#0b5ce6;
 border-radius:999px;padding:7px 13px;font-size:13.5px;text-decoration:none;cursor:pointer}
.chips a:hover,.chips button:hover{background:#eff6ff}
.content{background:#fff;border:1px solid #dbe4f0;border-radius:16px;
 padding:22px;margin:22px 0;box-shadow:0 6px 18px rgba(6,42,94,.06)}
.content h2{font-size:21px;margin:18px 0 8px;color:var(--ink)}
.content h2:first-child{margin-top:0}
.content p,.content li{color:#334155}
.content ul{padding-left:20px}
.content li{margin:5px 0}
.faq{margin-top:8px}
.faq dt{font-weight:700;margin-top:12px;color:var(--ink)}
.faq dd{color:#334155;margin:2px 0 0 0}
.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:420px;margin-top:14px}
.keypad button{padding:14px 6px;font-size:17px;border-radius:10px;border:1px solid #cbd5e1;
 background:#f1f5f9;color:#0f2547;cursor:pointer;font-weight:700}
.keypad button.op{background:var(--accbg);color:var(--accd);border-color:var(--acct)}
.keypad button.eq{background:linear-gradient(135deg,#33475f,#5db9ff);color:#fff}
.tool-scientific .result{background:linear-gradient(180deg,#0a1526,#33475f);border:1px solid #334155}
.tool-scientific #sci-display{color:#e2f4ff}
#sci-display{font-size:26px;min-height:52px;word-break:break-all}
.tool-mortgage .result{background:linear-gradient(135deg,#041f52,#0b5ce6 52%,#0aa2e0 88%,#2fd3c6 130%)}
footer.site{margin-top:34px;padding:22px 0 34px;border-top:1px solid #dbe4f0}
footer.site p,footer.site a{color:#44607f;font-size:13.5px}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
footer.site nav a{text-decoration:none}
.note{font-size:13px;color:#64748b}

.mortgage-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;border-top:1px solid rgba(255,255,255,.35);padding-top:14px}
.total-card{border-radius:13px;padding:13px 14px;box-shadow:0 10px 20px rgba(6,50,110,.16);color:#fff}
.total-card .tlabel{font-size:11.5px;font-weight:700;text-transform:uppercase;opacity:.88}
.total-card .tval{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(16px,2.4vw,20px)}
.total-card.int{background:linear-gradient(130deg,#f26322,#f5a623)}
.total-card.cost{background:linear-gradient(130deg,#07306e,#0b7fd4)}
.chartbox{margin-top:14px}
.chartbox h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 8px}
.chartbox svg{display:block;width:100%;height:auto}
.gauge{position:relative;height:16px;border-radius:8px;margin:18px 0 6px;background:linear-gradient(90deg,#38c8f4 0%,#38c8f4 21%,#2fe6a8 21%,#2fe6a8 46%,#ffc857 46%,#ffc857 62%,#ff7a90 62%,#ff7a90 100%)}
.gauge .marker{position:absolute;top:-6px;width:4px;height:28px;background:#0a2547;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.35)}
.gauge-labels{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(255,255,255,.85)}
details.schedule{margin-top:14px;background:#fff;border:1px solid #a8cff5;border-radius:10px;padding:8px}
details.schedule summary{background:linear-gradient(120deg,#0b5ce6,#0b8fe0);color:#fff;font-weight:700;font-size:14.5px;padding:12px 14px;border-radius:9px;cursor:pointer;list-style:none}
details.schedule summary::-webkit-details-marker{display:none}
details.schedule table{color:#0a2547}
details.schedule th{color:#7188a5;text-transform:uppercase;font-size:12px}
details.schedule td{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#0a2547;border-bottom-color:#e2e8f0;text-align:right}
.pair-chips{margin:16px 0 4px}
.pair-chips .pair-label{display:block;font-weight:700;font-size:13px;text-transform:uppercase;color:var(--accl);margin-bottom:8px}
@media(max-width:480px){.mortgage-totals{grid-template-columns:1fr}}
@media(max-width:900px){
.hero{padding:28px 18px 30px;background:url('hero-art-mobile.jpg') 100% 0%/cover no-repeat}
.hero-art{display:none}
.hero-shade{background:linear-gradient(180deg,rgba(2,20,54,.78) 0%,rgba(2,20,54,.45) 45%,rgba(2,20,54,.82) 100%)}
.hero-top{margin:-28px -18px 24px;padding:10px 18px;box-shadow:none}
.hero-top .logo{font-size:27px}
.hero-top nav.main a{font-size:13.5px}
.hero-in{padding:18px 0 0;max-width:none}
.hero-in h1{font-size:clamp(46px,13.5vw,110px);line-height:1.0;white-space:normal}
.hero-in h1 span{display:block}
.hero-in .slogan{font-size:22px}
.hero-in p.sub{font-size:16px}
.searchbox{max-width:none}
.trust{margin:16px 0 0;background:#fff}
.trust .items{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.trust .items span+span{border-left:0;padding-left:0}
.tools-frame{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;margin-top:16px}
.panel{padding:16px}
.ws-head{padding:12px}
.ws-head .ic{width:52px;height:52px}
.ws-head .ic svg{width:52px;height:52px}
.ws-head h1,.ws-head h2{font-size:25px}
.tool{padding:18px}
}
@media(max-width:600px){
.wrap{padding:0 10px}
.hero{border-radius:16px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card .ic{width:46px;height:46px}
.card .ic svg{width:46px;height:46px}
.bar-row .lbl{width:104px;font-size:13px}
.bar-row{font-size:13px}
.result .big{font-size:28px}
}

/* v4: preview workspace language for supporting sections, mortgage form rows, in-place pair chips */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
.content{background:linear-gradient(180deg,#ffffff,#f4f9ff);border:1.5px solid #c9dcf3;border-radius:18px;padding:22px;box-shadow:0 10px 24px rgba(6,42,94,.10)}
.content h2{display:flex;align-items:center;gap:10px;font-size:21px;color:#0a2547}
.content h2::before{content:"";width:8px;height:24px;flex-shrink:0;border-radius:4px;background:linear-gradient(180deg,#0b5ce6,#38bdf8)}
.content table th{background:#eef6ff;color:#0a2547;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.content table td{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#0a2547}
.faq dt{color:#0a2547}
.faq dt::before{content:"\25B8 ";color:#0b5ce6}
.content .note{background:#eef6ff;border:1px solid #c9dcf3;border-radius:10px;padding:10px 13px;color:#44607f}
.chips button.chip{border:1px solid rgba(190,225,255,.5);background:rgba(3,26,66,.5);color:#eaf4ff;border-radius:999px;padding:6px 13px;font-size:13.5px;font-family:'JetBrains Mono',monospace}
.chips button.chip:hover{background:rgba(3,26,66,.7)}

/* v5: homepage workspace section (preview single-page behavior) */
section.workspace{margin-top:30px}