.calculator-intro { padding-top: 46px; padding-bottom: 24px; }
.calculator-intro h1 { font: 600 clamp(2.25rem, 5vw, 3.8rem)/1.08 'Newsreader', 'Iowan Old Style', serif; letter-spacing: -.015em; }
.calculator-intro .lead { max-width: 65ch; }
.tool-note, .field-help { color: var(--muted); font-size: .9rem; }
.calculator-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; position: relative; }
.calculator-panel, .result-panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); background: var(--surface); }
.calculator-panel h2, .result-panel h2 { font: 600 1.65rem/1.15 'Newsreader', 'Iowan Old Style', serif; }
.result-panel { background: #eaf0f3; position: sticky; top: 96px; }
.date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { min-width: 0; margin: 20px 0 12px; }
.field label { display: block; font-weight: 600; margin-bottom: 7px; }
.optional { color: var(--muted); font-weight: 400; }
.field input { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; border: 1px solid #9ca6ab; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--text); background: white; }
.field input[type="date"] { -webkit-appearance: none; appearance: none; }
.field input[aria-invalid="true"] { border-color: #9e2929; }
.field-error { display: block; color: #8e2323; font-size: .88rem; min-height: 0; margin-top: 5px; }
.field-help { margin: 7px 0; }
.checkbox-label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.checkbox-label input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--accent); }
.calculate-button { font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; width: 100%; margin-top: 20px; }
.form-errors { color: #7b2424; border-left: 3px solid #9e2929; padding: 10px 12px; background: #fff0ed; border-radius: 5px; }
.result-empty { color: var(--muted); margin-bottom: 1rem; }
.result-label { overflow-wrap: anywhere; font-weight: 600; }
.result-number { margin: 16px 0 4px; font: 600 clamp(3.25rem, 7vw, 5.75rem)/1 'Newsreader', 'Iowan Old Style', serif; overflow-wrap: anywhere; }
#day-unit { display: block; font: 500 1rem/1.6 'Instrument Sans', sans-serif; margin-top: 8px; }
.week-total { font-size: 1.1rem; margin-top: 0; }
.result-status { display: inline-block; font-weight: 600; background: white; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.result-range { font-weight: 600; overflow-wrap: anywhere; }
.calculator-content { padding-top: 52px; }
.calculator-faq { max-width: 780px; padding-top: 40px; }
.calculator-faq h3 { margin-top: 24px; font-size: 1.1rem; }
.calculator-faq p { color: var(--muted); }
.app-continuation { padding-top: 40px; padding-bottom: 60px; }
.app-panel { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 40px; align-items: center; }
.app-panel p { max-width: 62ch; }
.app-figure { margin: 0; }
.app-figure img { width: 100%; height: auto; display: block; border: 6px solid #171717; border-radius: 25px; }
.app-figure figcaption { font-size: .75rem; color: var(--muted); margin-top: 8px; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .calculator-grid, .app-panel { grid-template-columns: minmax(0, 1fr); }
  .result-panel { position: static; }
  .app-figure { max-width: 180px; }
  .calculator-intro { padding-top: 28px; }
}
@media (max-width: 440px) {
  .date-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .calculator-panel, .result-panel { padding: 20px; }
}