/* --- Base Styles & Hero Section --- */
html{scroll-behavior:smooth}body,html{margin:0;padding:0;font-family:'Roboto',sans-serif;background-color:#f4f4f4;color:#333;font-weight:300}strong,b{font-weight:500}
.hero-section{height:auto;min-height:250px;background-image:image-set(url(../../img/Refinance_Hero.webp) type("image/webp"),url(../../img/Refinance_Hero.jpg) type("image/jpeg"));background-image:url(../../img/Refinance_Hero.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;padding:40px 0;position:relative;overflow:hidden}
.hero-nav{width:100%;text-align:center;display:flex;justify-content:center;gap:40px;z-index:10}
.hero-nav a{color:#cacaca;text-decoration:none;font-size:1rem;font-weight:300;transition:color .3s ease}
.hero-nav a:hover{color:#fff}
.hero-content-wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;position:relative;z-index:2}
.hero-content-wrapper img{width:130px;height:130px;aspect-ratio:1/1;margin-top:40px;margin-bottom:20px}
.hero-section h1{color:#fff;font-size:4rem;font-weight:100;text-align:center;text-shadow:2px 2px 8px rgba(0,0,0,.7);margin:0;min-height:71px}
.mobile-support-link{display:none;color:#555;text-decoration:none;font-size:.9rem;font-weight:400;transition:color .3s ease;flex-shrink:0}
.mobile-support-link:hover{color:#000}.mobile-header-placeholder{display:none}
.hero-tagline{height:auto;position:relative;z-index:2;margin-top:30px}
.hero-tagline p{margin:0;color:#e0e0e0;font-size:1.1rem;font-weight:100;text-shadow:1px 1px 4px rgba(0,0,0,.7);text-align:center;opacity:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}
.mobile-nav{display:none;position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:10;gap:40px}
.mobile-nav-link{color:#cacaca;text-decoration:none;font-size:1rem;font-weight:300;transition:color .3s ease}
.mobile-nav-link:hover{color:#fff}

/* --- Main Content & Calculator Layout --- */
.content-section{padding:80px 20px 50px;box-sizing:border-box}
.calculator-wrapper{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:baseline;position:relative}
.breadcrumb{position:absolute;top:-30px;left:-4px;color:#777;font-size:.9rem;font-weight:300}
.breadcrumb a{color:inherit;text-decoration:none;transition:color .2s ease}
.breadcrumb a:hover{color:#000}.breadcrumb span{color:#333;font-weight:400}
.intro-section{grid-column:1 / -1;margin-bottom:0;margin-top:20px}
.intro-section h2{font-size:4rem;font-weight:100;color:#333;margin-top:0;margin-bottom:20px;margin-left:-4px;line-height:1.1;min-height:71px}
.intro-section p{font-size:1.1rem;line-height:1.7;color:#555;max-width:900px}
.mobile-intro{display:none}.desktop-intro{display:block}
.calculator-container h2,.results-container h2{font-size:4rem;font-weight:100;color:#333;margin-top:0;margin-bottom:40px;line-height:1.1;margin-left:-4px;min-height:71px}

/* --- Input Fields --- */
.input-section-header{margin-top:40px;margin-bottom:30px}
.input-section-header:first-of-type{margin-top:0}
.input-section-header h3{font-size:1.8rem;font-weight:100;margin:0}
.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 80px}
.input-group{position:relative;margin-bottom:20px}
.input-group label{display:block;color:#666;font-size:.95rem;margin-bottom:5px;pointer-events:none}
.input-group input[type=text],.input-group input[type=number]{width:100%;padding:8px 0;border:none;border-bottom:1px solid #ccc;font-size:1.1rem;color:#333;background-color:transparent;outline:none;font-weight:300;transition:border-bottom-color .3s ease;appearance:none}
.input-group input[type=text]:focus,.input-group input[type=number]:focus{border-bottom-color:#666}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* --- Results --- */
.results-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;margin-bottom:0;text-align:left}
.summary-item span{display:block}.summary-item .label{font-size:.9rem;color:#666;margin-bottom:5px}
.summary-item .value{font-size:1.5rem;font-weight:300;color:#333;overflow-wrap:break-word;word-break:break-word}
.summary-text{margin-top:60px}
.summary-text h3{font-size:1.8rem;font-weight:100;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px;margin-top:0}
.summary-text p{font-size:1rem;line-height:1.6;color:#555;margin-bottom:0}
.summary-highlight{font-weight:500; color: #333;}
.summary-header-flex{display:block}.mobile-support-button{display:none}

/* --- Results Breakdown (NEW) --- */
.results-breakdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 80px;margin-top:60px}
.breakdown-section h3{font-size:1.8rem;font-weight:100;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px;margin-top:0}
.result-item{display:flex;justify-content:space-between;align-items:flex-start;font-size:1rem;padding:12px 0;gap:20px}
.result-item .label{color:#666;text-align:left}
.result-item .value{font-weight:300;text-align:right;white-space:nowrap}
.savings-item .label{font-weight: 400; color: #333;}
.savings-item .value{font-weight:500; color: #333;}

/* --- CHARTS CSS REMOVED --- */

/* --- SEO Content & Footer --- */
.seo-content-section{max-width:1400px;margin:100px auto 50px;padding:0;text-align:left}
.seo-content-section h2{font-size:2.5rem;font-weight:100;color:#333;margin-top:60px;margin-bottom:20px;min-height:48px}
.seo-content-section h3{font-size:1.8rem;font-weight:100;color:#333;margin-top:50px;margin-bottom:20px;border-bottom:1px solid #eee;padding-bottom:10px}
.seo-content-section p,.seo-content-section li,.seo-content-section ul{font-size:1.1rem;line-height:1.7;color:#555;padding-left:0;list-style-position:inside}
.seo-content-section ul{list-style-type:disc;padding-left:40px;margin-bottom:25px}
.seo-content-section ol{list-style:none;padding-left:0;counter-reset:guide-counter}
.seo-content-section ol li{counter-increment:guide-counter;margin-bottom:25px;position:relative;padding-left:40px}
.seo-content-section ol li::before{content:counter(guide-counter);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background-color:#e9e9e9;border:1px solid #ddd;box-sizing:border-box;color:#555;font-weight:300;text-align:center;line-height:26px;font-size:.9rem}
.seo-content-section ul li{margin-bottom:15px}
.faq-section details{border-bottom:1px solid #e0e0e0;padding:20px 0}
.faq-section summary{font-size:1.2rem;font-weight:300;color:#333;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary::after{content:'+';position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;color:#888;transition:transform .2s ease}
.faq-section details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-section .faq-answer{padding:15px 5px 0;color:#555;line-height:1.7;font-size:1.1rem}
footer{padding:100px 20px 40px;background:linear-gradient(to top,#eae5df 20%,transparent);display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
footer a{color:#777;text-decoration:none;font-size:.9rem;font-weight:300;transition:color .3s ease}
footer a:hover{color:#000}
.more-tools-section{max-width:1400px;margin:100px auto 50px}
.more-tools-section h2{font-size:2.5rem;font-weight:100;color:#333;margin-bottom:30px;min-height:48px}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.tools-grid h3{font-size:1.2rem;font-weight:400;color:#333;margin-top:0;margin-bottom:20px}
.links-container a,.links-container span{display:block;text-decoration:none;color:#555;font-size:1rem;font-weight:300;margin-bottom:12px;transition:color .2s ease}
.links-container a:hover{color:#000}
.links-container .disabled-tool-link{color:#999;cursor:default}

/* --- Tablet Responsive --- */
@media (max-width: 992px){
.hero-nav{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:auto;margin-bottom:0}
.hero-content-wrapper img{width:100px;height:100px;margin-top:30px;margin-bottom:15px}
.hero-section h1{font-size:3rem;min-height:53px}
.hero-tagline p{font-size:1rem}
.calculator-wrapper{grid-template-columns:1fr;gap:60px;align-items:flex-start}
.intro-section{margin-bottom:0;margin-top:0}
/* charts-container removed */
.tools-grid{grid-template-columns:1fr 1fr}
}

/* --- Mobile Responsive --- */
@media (max-width: 768px){
.hero-nav{display:none}.mobile-nav{display:none}
.hero-section{height:auto;min-height:auto;padding:0 15px;flex-direction:row;justify-content:space-between;background-image:none;background-color:#f4f4f4;border-bottom:1px solid #e5e5e5;position:fixed;top:0;left:0;width:100%;z-index:100;padding-bottom:0}
.hero-background,.hero-tagline{display:none}
.hero-content-wrapper{flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-bottom:0;color:#333}
.hero-content-wrapper img{width:24px;height:24px;aspect-ratio:1/1;margin-bottom:0;transform:translateY(-13px)}
.hero-section h1{font-size:1.3rem;font-weight:300;color:#333;text-shadow:none;flex-grow:1;text-align:center;margin: 0 10px;min-height:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-support-link{display:none}
.mobile-header-placeholder{display:block;width:24px;height:24px;flex-shrink:0}
.content-section{padding:50px 15px 50px}
.breadcrumb{position:static;margin-top:15px;margin-bottom:-6px;left:auto;margin-left:0}
.intro-section h2,.calculator-container h2,.results-container h2,.seo-content-section h2,.more-tools-section h2{font-size:2.5rem;margin-bottom:30px;line-height:1.2;margin-left:0;margin-top:-10px;min-height:48px}
.intro-section{margin-top:0}
.mobile-intro{display:block}.desktop-intro{display:none}
.intro-section p,.seo-content-section p,.seo-content-section li,.faq-section .faq-answer,.seo-content-section ul{font-size:1rem}
.input-grid{grid-template-columns:1fr;gap:0}
.input-group{margin-bottom:30px}
.summary-text,.results-breakdown-grid{margin-top:40px}
.summary-text h3{border-bottom:none;padding-bottom:0;margin-bottom:0}
.summary-header-flex{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px}
.mobile-support-button{display:inline-block;text-decoration:none;color:#333;background-color:#fff;padding:6px 16px;border-radius:999px;font-size:.9rem;font-weight:400;box-shadow:0 2px 5px rgba(0,0,0,.15);border:none;flex-shrink:0}
.results-breakdown-grid{grid-template-columns:1fr;gap:40px}
/* charts-container removed */
.seo-content-section,.more-tools-section{margin-top:60px;padding:0}
.tools-grid{grid-template-columns:1fr}
.faq-section summary{font-size:1.1rem}
.seo-content-section h3{font-size:1.6rem;margin-top:40px}
}

/* --- Animations --- */
@keyframes fadeInOut{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}
.hero-tagline p.fade-in-out{animation:fadeInOut 5.5s forwards}
}