.calc-page {
max-width: 720px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.calc-page__header {
margin-bottom: 32px;
}
.calc-page__header h1 {
font-size: 32px;
margin: 8px 0 12px;
}
.calc-page__subtitle {
font-size: 16px;
color: var(--hcw-text-muted);
margin: 0;
}
.calc-page__image {
width: 100%;
border-radius: 12px;
margin: 24px 0 32px;
display: block;
}
.calc-box {
background: var(--hcw-cream);
border: 1px solid var(--hcw-border);
border-radius: 12px;
padding: 32px;
}
.calc-field {
margin-bottom: 20px;
}
.calc-field label {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--hcw-charcoal);
margin-bottom: 6px;
}
.calc-field input,
.calc-field select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--hcw-border);
border-radius: 6px;
font-family: var(--font-body);
font-size: 15px;
color: var(--hcw-text);
background: #fff;
box-sizing: border-box;
}
.calc-field input:focus,
.calc-field select:focus {
outline: none;
border-color: var(--hcw-terracotta);
}
.calc-box .btn {
width: 100%;
font-size: 16px;
padding: 14px;
margin-top: 8px;
}
.calc-result-box {
margin-top: 28px;
padding-top: 24px;
border-top: 2px solid var(--hcw-border);
}
.calc-result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
}
.calc-result-label {
font-size: 14px;
color: var(--hcw-text-muted);
}
.calc-output {
font-size: 20px;
}
.calc-result-note {
margin-top: 16px;
padding: 14px 16px;
background: var(--hcw-terracotta-light);
border-left: 4px solid var(--hcw-terracotta);
border-radius: 4px;
font-size: 13.5px;
color: var(--hcw-charcoal);
}
.calc-content {
margin-top: 48px;
}
.calc-content h2 {
font-size: 22px;
margin: 36px 0 14px;
}
.calc-content p {
font-size: 15.5px;
color: var(--hcw-text);
line-height: 1.75;
margin: 0 0 16px;
}
.calc-content a {
color: var(--hcw-terracotta);
text-decoration: underline;
}
.calc-ratio-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 15px;
}
.calc-ratio-table th {
background: var(--hcw-charcoal);
color: #fff;
text-align: left;
padding: 10px 14px;
font-weight: 600;
}
.calc-ratio-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--hcw-border);
}
.calc-ratio-table tr:nth-child(even) td {
background: var(--hcw-cream);
}
.calc-faq {
margin-top: 12px;
}
.calc-faq-item {
border-bottom: 1px solid var(--hcw-border);
}
.calc-faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 18px 32px 18px 0;
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
color: var(--hcw-charcoal);
cursor: pointer;
position: relative;
}
.calc-faq-question:hover,
.calc-faq-question:focus,
.calc-faq-question:active {
background: none !important;
color: var(--hcw-charcoal) !important;
outline: none;
}
.calc-faq-question::after {
content: '+';
position: absolute;
right: 0;
top: 18px;
font-size: 22px;
color: var(--hcw-terracotta);
transition: transform 0.2s ease;
}
.calc-faq-item.is-open .calc-faq-question::after {
transform: rotate(45deg);
}
.calc-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.calc-faq-item.is-open .calc-faq-answer {
max-height: 300px;
}
.calc-faq-answer p {
padding: 0 0 18px;
margin: 0;
font-size: 15px;
color: var(--hcw-text);
line-height: 1.7;
}
.calc-related {
margin-top: 40px;
font-size: 15.5px;
color: var(--hcw-text);
}
.calc-source {
font-size: 13px;
color: var(--hcw-text-muted);
margin-top: 24px;
}
.calc-source a {
color: var(--hcw-text-muted);
text-decoration: underline;
}