.checklist {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.checklist li {
    position: relative;
    padding-left: 24px;
    text-wrap: pretty;
}

.checklist-open li {
    padding-left: 26px;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    /* Middle of the first line. 0.5lh is the line-box center; translateY
       centers the mark on it. */
    top: 0.5lh;
    width: 14px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--door-juniper);
    -webkit-mask: var(--list-mark) center / contain no-repeat;
    mask: var(--list-mark) center / contain no-repeat;
}

/* Empty box for lists a tenant might print and tick: move-in, move-out,
   documents to gather. Item lists use the house glyph; a tick means done. */
.checklist-open li::before {
    width: 16px;
    height: 16px;
    -webkit-mask: var(--check-open) center / contain no-repeat;
    mask: var(--check-open) center / contain no-repeat;
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.area-list a,
.area-list span {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 1px;
    border: 1px solid var(--rule);
    background: var(--trim-white);
    color: var(--umber-ink);
    text-decoration: none;
    font-size: var(--type-ui);
}

.area-list a:hover {
    border-color: var(--door-juniper);
    color: var(--door-deep);
}

.points,
.service-list,
.faq-links,
.terms-list {
    list-style: none;
    padding: 0;
}

.points {
    margin-top: 28px;
}

.points li {
    padding-block: 20px;
    border-top: 1px solid var(--rule);
}

.points p,
.service p {
    margin-top: 4px;
    max-width: 60ch;
    color: var(--umber-soft);
}

.points a {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--type-ui);
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
}

.service {
    padding-block: 18px 22px;
    border-top: 1px solid var(--rule);
}

.service h3 {
    font-size: var(--type-subhead);
}

.service h3 a {
    color: var(--umber-ink);
    text-decoration: none;
}

.service h3 a:hover {
    color: var(--door-juniper);
    text-decoration: underline;
}

.covered {
    display: block;
    margin-top: 8px;
    font-size: var(--type-label);
    color: var(--umber-soft);
}

.terms-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
}

/* Every commitment gets the same plaque, whatever its figure, so the four
   read as a set rather than boxes sized to their contents. */
.terms-list .plaque {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11rem;
    padding: 12px 16px 13px;
}

.terms-list .figure {
    font-size: var(--type-numeral-lg);
    white-space: nowrap;
}

.terms-list p {
    margin-top: 12px;
    max-width: 32ch;
    text-wrap: pretty;
}

/* Owners: the fees run as a ledger, one plaque per ruled row, so three items
   don't leave a hole in the two-column terms grid. */
.fee-terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.fee-terms li {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: center;
    gap: 0 28px;
    padding-block: 20px;
    border-top: 1px solid var(--rule);
}

.fee-terms li:first-child {
    padding-top: 0;
    border-top: 0;
}

.fee-terms .plaque {
    width: 100%;
}

.fee-terms p {
    margin-top: 0;
    max-width: 48ch;
}

.faq-links {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

@media (max-width: 600px) {
    .terms-list,
    .service-list {
        grid-template-columns: 1fr;
    }

    .terms-list li {
        display: grid;
        grid-template-columns: 6.25rem 1fr;
        align-items: start;
        gap: 0 14px;
    }

    /* Tall enough for a figure with its unit underneath, so single-line
       figures ("24/7", "$0") get the same plaque as "60–90 days". */
    .terms-list .plaque {
        width: 100%;
        min-height: 4.25rem;
        padding: 10px 8px 11px;
    }

    /* A unit ("days", "repair") drops under its figure so the plaque
       column stays narrow. */
    .terms-list .figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--type-numeral);
        line-height: 1.1;
        text-align: center;
    }

    /* A word is wider than a number, so it steps down to fit the plaque. */
    .terms-list .figure-word {
        font-size: var(--type-subhead);
    }

    .terms-list p {
        margin-top: 0;
    }

    .fee-terms li {
        align-items: start;
        padding-block: 16px;
    }

    /* "repair markup" is wider than the plaque column; let the unit wrap. */
    .fee-terms .figure small {
        white-space: normal;
        line-height: 1.2;
    }
}

/* Owners objections: the headings are the owner's own questions, so a scan
   finds the one that worries them. */
.points p a {
    display: inline;
    margin-top: 0;
    font-size: inherit;
}