.calc {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px clamp(32px, 5vw, 72px);
    align-items: start;
}

/* The fields sit on the page or the board they belong to; the result ledger is
   the only raised object in a calculator. */
.calc .form {
    padding: 0;
    border: 0;
    background: none;
}

/* A hint under one field must not stretch its neighbour's input. */
.calc .form-row {
    align-items: start;
}

/* A lone number field doesn't need the full column. */
.calc .form > .field {
    max-width: 30rem;
}

.calc-asterisk a {
    color: inherit;
    text-decoration: none;
    margin-left: 2px;
    line-height: 1;
}

/* Owner types: a ruled list beside the heading, name then description. */
.owner-types .card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 4px 32px;
}

.owner-types .card:first-child {
    padding-top: 0;
    border-top: 0;
}

.owner-types .card h3 {
    margin-bottom: 0;
    font-size: var(--type-subhead);
}

@media (max-width: 960px) {
    .calc {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .owner-types .card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Owners hero: the house is the page's first image, so it rises larger and
   brighter than on the city pages, and a line under the buttons says what the
   click costs. */
.owner-hero .roofline {
    width: clamp(300px, 44vw, 600px);
    color: rgba(217, 181, 116, 0.45);
}

.objections h3 {
    font-size: var(--type-subhead);
    text-wrap: balance;
}

/* Second path under the checkup form, on the painted door. The number stays
   visible on a phone. .hero-contact is hidden under 600px once the hero has
   an aside, and this page's traffic is phones. */
.checkup-aside-note {
    margin-top: 18px;
    text-wrap: pretty;
    font-size: var(--type-ui);
    line-height: 1.45;
    color: color-mix(in srgb, var(--on-door) 84%, transparent);
}

.checkup-aside-note a {
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--brass) 70%, transparent);
}

.checkup-aside-note a:hover {
    text-decoration-color: var(--brass);
}

.checkup-aside-note span {
    white-space: nowrap;
}

/* The checkup board names what the one field sends, so "Email" is not left
   to explain itself. Subhead, not a heading: the hero's h1 is the page's. */
.report-form .form-title {
    margin: 0;
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
}