/* Tenants: the same section hero as the owner door and the city pages, on the
   siding. Owners open on the painted door and cities on enamel; a tenant already
   lives in the house, so their pages open on its wall, and the one question the
   page answers hangs there on a juniper board. */
.door-hero.tenant-hero {
    background-color: var(--clapboard-putty);
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(43, 38, 34, 0.05) 0px,
        rgba(43, 38, 34, 0.05) 1px,
        transparent 1px,
        transparent 48px
    );
    color: var(--umber-ink);
    box-shadow: inset 0 1px 0 rgba(43, 38, 34, 0.08);
}

.door-hero.tenant-hero h1,
.tenant-hero .lead {
    color: var(--umber-ink);
}

.tenant-hero .door-hero-copy a:not(.btn) {
    color: var(--door-juniper);
}

.tenant-hero :focus-visible {
    outline-color: var(--umber-ink);
}

.tenant-hero .btn-primary {
    background: var(--door-juniper);
    border-color: var(--door-juniper);
    color: var(--trim-white);
}

.tenant-hero .btn-primary:hover {
    background: var(--door-deep);
    border-color: var(--door-deep);
    color: var(--trim-white);
}

.door-hero.tenant-hero.has-aside .door-hero-inner {
    align-items: center;
}

.tenant-hero .door-hero-aside {
    justify-self: end;
    width: min(100%, 24rem);
}

.wall-note {
    padding: 28px 30px 30px;
    background: var(--door-juniper);
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 6px var(--door-deep),
        inset 0 0 0 7px rgba(0, 0, 0, 0.3),
        inset 0 0 0 8px rgba(255, 255, 255, 0.05),
        0 10px 24px -12px rgba(22, 51, 41, 0.6);
    color: var(--on-door);
}

.wall-note-q {
    color: var(--trim-white);
    margin-bottom: 8px;
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.wall-note p + p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-door);
}

.wall-note a {
    color: var(--trim-white);
}

.wall-note :focus-visible {
    outline-color: var(--trim-white);
}

/* Rental criteria on the services rule: plain bullets, since a criterion is a
   standard to meet, not a checked-off item. */
.criteria-block ul {
    max-width: 64ch;
    color: var(--umber-soft);
}

.criteria-block li + li {
    margin-top: 6px;
}

/* A two-up set that opens its section right under a section rule or the section
   tabs. That edge already separates it, so the top row drops its rules; stacked
   on a phone, only the first card does. */
.grid-open > .card:first-child {
    padding-top: 0;
    border-top: 0;
}

@media (min-width: 601px) {
    .grid-open > .card:nth-child(2) {
        padding-top: 0;
        border-top: 0;
    }
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 1px;
    background: var(--clapboard-putty);
    color: var(--door-deep);
    font-size: var(--type-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-clay {
    background: var(--enamel-slate);
    color: var(--brass);
}

@media (max-width: 960px) {
    .tenant-hero .door-hero-aside {
        justify-self: stretch;
        width: auto;
    }
}

/* Tenant landing: the hero plaque carries the emergency rules, 911 first. */
.wall-note .wall-note-911 {
    margin-bottom: 10px;
    color: var(--trim-white);
    font-size: var(--type-subhead);
    font-weight: 700;
    line-height: 1.35;
}

.wall-note a[href^="tel:"] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* Four everyday tasks as one ruled two-up list, then a single line for the FAQ. */
.tenant-tasks {
    margin-top: 28px;
    gap: 0 clamp(24px, 3vw, 40px);
}

.tenant-tasks .card p {
    max-width: 48ch;
}

.tenant-tasks .card h3 {
    font-size: var(--type-title);
}

.tenant-more {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    color: var(--umber-soft);
}

/* The mock leads and the checklist reads as its caption. */
.tenant-pitch {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.tenant-pitch .portal-shot.is-cropped img {
    aspect-ratio: 16 / 7;
}

/* One rhythm: the pitch follows the tasks without a second full section pad,
   and the CTA band sits closer to the content it closes. */
.section-ruled.tenant-pitch-section {
    padding-block: clamp(40px, 5vw, 64px);
}

@media (max-width: 720px) {
    .tenant-pitch {
        grid-template-columns: minmax(0, 1fr);
    }

    .tenant-pitch .portal-shot.is-cropped {
        overflow: hidden;
    }

    .tenant-pitch .portal-shot.is-cropped img {
        width: 190%;
        max-width: none;
        aspect-ratio: 16 / 5.4;
    }
}

/* Apply hero plaque: the short list of what to have ready. */
.wall-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wall-note-list li {
    padding-block: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--on-door);
    font-size: 1rem;
    line-height: 1.45;
}

.wall-note-list li:first-child {
    border-top: 0;
}

/* Maintenance "Try this first": a ruled problem / fix list instead of cards. */
.fix-list {
    margin: 0;
    max-width: 62rem;
}

.fix-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px 32px;
    padding-block: 16px;
    border-top: 1px solid var(--rule);
}

.fix-list > div:last-child {
    border-bottom: 1px solid var(--rule);
}

.fix-list dt {
    font-weight: 700;
}

.fix-list dd {
    margin: 0;
}

@media (max-width: 720px) {
    .fix-list > div {
        grid-template-columns: 1fr;
    }
}

#urgency-title {
    margin-bottom: 24px;
}