body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Hero Section */

h1 {
    text-align: center;
    padding-top: 40px;
    color: #0b2a4a;
}

p {
    text-align: center;
    max-width: 700px;
    margin: auto;
    padding: 10px;
}

/* Example Button */

#exampleBtn {
    display: block;
    margin: 20px auto;
    padding: 12px 20px;
    background-color: #0b2a4a;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#exampleBtn:hover {
    background-color: #133a63;
}

/* Calculator Layout */

.calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 40px auto;
}

/* Input Fields */

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Buttons */

button {
    display: block;
    margin: 20px auto;
    padding: 12px 20px;
    background-color: #0b2a4a;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background-color: #133a63;
}

/* Result Box */

#result {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    margin-top: 10px;
    color: #0b2a4a;
}

#result:empty {
    margin-top: 0;
}

#breakdown:empty {
    display: none;
}

#insight:empty {
    display: none;
}

/* Disclaimer */

.disclaimer {
    font-size: 12px;
    color: gray;
    text-align: center;
    margin-top: 20px;
}

.panel {
    background-color: #f8f9fb;
    padding: 20px;
    border-radius: 10px;
}

#costChart {
    display: none;
    max-width: 400px;
    margin: 20px auto;
}

#breakdown {
    max-width: 400px;
    margin: 20px auto;
    text-align: left;
}

#breakdown h3 {
    text-align: center;
}

#insight {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    color: #0b2a4a;
}

.reality-check, .faq {
    max-width: 800px;
    margin: 50px auto;
    line-height: 1.6;
}

.reality-check h2, .faq h2 {
    text-align: center;
    color: #0b2a4a;
}

.faq h3 {
    margin-top: 20px;
    color: #0b2a4a;
}

/* Fade Animation */

.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report-preview,
.unlock-report{
display:none;
}

/* Report Preview */

.report-preview h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #0b2a4a;
}

.preview-card {

max-width: 380px;
margin: 20px auto;
padding: 20px;

background: white;
border-radius: 10px;

box-shadow: 0 8px 25px rgba(0,0,0,0.08);

text-align: center;
}

.preview-image{
position:relative;
max-width:650px;
margin:40px auto;
display:flex;
justify-content:center;
}

.preview-image img{
width:100%;
height:auto;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
filter: blur(6px);
}

.preview-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:white;
padding:14px 22px;
border-radius:6px;
font-weight:600;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
max-width:220px;
}
/* Results Cards */

#result,
#breakdown,
#insight {
    max-width: 700px;
    margin: 25px auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Chart Cards */

#costChart,
#loanChart,
#equityChart {
    display: block;
    max-width: 700px;
    margin: 30px auto;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.unlock-report {

max-width: 600px;
margin: 50px auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
text-align: center;

}

.unlock-report h2 {

color: #0b2a4a;

}

.report-features {

list-style: none;
padding: 0;
margin: 20px 0;

}

.report-features li {

padding: 6px 0;

}

.price {

font-size: 28px;
color: #0b2a4a;
margin: 20px 0;

}

.purchase-note {

font-size: 12px;
color: gray;
margin-top: 10px;

}

.related-calculators {

max-width: 800px;
margin: 60px auto;
text-align: center;

}

.related-calculators ul {

list-style: none;
padding: 0;

}

.related-calculators li {

margin: 10px 0;

}

.related-calculators a {

color: #0b2a4a;
text-decoration: none;
font-weight: bold;

}

.related-calculators a:hover {

text-decoration: underline;

}

#analysisSection {
    display: none;
}

/* Mobile Optimization */

@media (max-width: 768px) {

/* Stack calculator panels */

.calculator {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px;
}

/* Reduce title spacing */

h1 {
padding-top: 20px;
font-size: 26px;
}

/* Paragraph padding */

p {
padding: 8px 16px;
}

/* Inputs easier to tap */

input {
padding: 12px;
font-size: 16px;
}

/* Buttons full width */

button {
width: 90%;
max-width: 400px;
}

/* Charts scale properly */

#costChart {
max-width: 100%;
height: auto;
}

/* Report preview spacing */

.report-preview {
margin: 30px 15px;
}

/* Unlock report section */

.unlock-report {
margin: 30px 15px;
}

/* Related calculators */

.related-calculators {
margin: 40px 20px;
}

}

.preview-image{
display:flex;
justify-content:center;
margin:40px auto;
}

.preview-image img{
width:100%;
max-width:650px;
height:auto;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.site-footer{
text-align:center;
margin-top:40px;
font-size:14px;
color:#555;
}

.site-footer a{
color:#0b2a4a;
text-decoration:none;
margin:0 10px;
}

.site-footer a:hover{
text-decoration:underline;

.site-footer {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
}

.copyright {
  margin-bottom: 6px;
  color: #777;
}
}