/* Calculator first, with clearer controls at small widths. */
#calculator, .tool-section { scroll-margin-top: 20px; }
.workspace { border-radius: 14px; overflow: hidden; }
.workspace input, .workspace select { min-height: 42px; }
.workspace input:focus-visible, .workspace select:focus-visible { outline: 3px solid #87b17f; outline-offset: 2px; }
@media (min-width: 741px) { .hero { padding-top: 52px; padding-bottom: 55px; } .hero-figure { height: 250px; transform: scale(.7); } .tool-section { padding-top: 38px; } }
@media (max-width: 740px) { .hero { padding-top: 25px; padding-bottom: 25px; } .hero h1 { font-size: clamp(38px, 10vw, 48px); line-height: 1.04; margin: 14px 0; } .hero-copy p { margin-bottom: 20px; } .tool-section { padding-top: 28px; } .workspace-nav a { min-height: 48px; } }
@media (max-width: 420px) { .hero { padding: 24px 5% 22px; } .tool-section { padding: 27px 5% 54px; } }