.page-hero {
    padding-block: clamp(40px, 6vw, 72px);
    background: var(--trim-white);
    border-bottom: 1px solid var(--rule);
}

.page-hero h1 {
    margin-bottom: 20px;
}

.page-hero .lead {
    max-width: 56ch;
}

.page-hero .btn-row {
    margin-top: 24px;
}

.breadcrumbs {
    font-size: var(--type-label);
    color: var(--umber-soft);
    margin-bottom: 14px;
}

/* Tall tap target without moving the line. */
.breadcrumbs a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
    color: var(--umber-soft);
}

/* Section layouts. Owner pages open on the painted door; tenant pages open on
   a board hung on the porch wall. Both then share the tab row and a closing door. */
.door-hero {
    padding-top: clamp(48px, 7vw, 96px);
    background: var(--door-deep);
    color: var(--on-door);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* The copy pads the bottom so the fanlight can sit on the lintel. */
.door-hero-inner {
    position: relative;
    padding-bottom: clamp(48px, 7vw, 96px);
}

.door-hero.has-aside .door-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px clamp(32px, 6vw, 88px);
    align-items: end;
}

.door-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.door-hero h1 {
    margin-bottom: 20px;
}

.door-hero .lead {
    max-width: 56ch;
    color: var(--on-door);
}

.door-hero a:not(.btn) {
    color: var(--trim-white);
}

.door-hero :focus-visible {
    outline-color: var(--trim-white);
}

.door-hero .btn-row {
    margin-top: 28px;
}

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

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

.door-hero .plaque {
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 6px 14px -4px rgba(0, 0, 0, 0.6);
}

.roofline {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    width: clamp(260px, 32vw, 440px);
    color: rgba(217, 181, 116, 0.3);
    pointer-events: none;
}

@media (max-width: 960px) {
    .door-hero.has-aside .door-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .roofline {
        width: 240px;
    }
}

@media (max-width: 600px) {
    /* The roofline would sit under the buttons on a phone. */
    .roofline {
        display: none;
    }
}

.hero-reassurance {
    margin-top: 14px;
    max-width: 44ch;
    font-size: var(--type-ui);
    color: var(--on-door);
    text-wrap: pretty;
}

/* A thank-you page opens on the same painted door as every owner page. The
   card that held the form now holds what happens next, so the visitor sees
   the box they filled in come back as its answer. */
.receipt-door {
    padding-block: clamp(48px, 7vw, 96px);
    background: var(--door-deep);
    color: var(--on-door);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3);
}

.receipt {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px clamp(32px, 6vw, 88px);
    align-items: start;
}

.receipt-main h1 {
    color: var(--trim-white);
    text-wrap: balance;
}

.receipt-main a {
    color: var(--trim-white);
}

.receipt-door :focus-visible {
    outline-color: var(--trim-white);
}

.receipt .success-plaque {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 6px 14px -4px rgba(0, 0, 0, 0.6);
}

.receipt .success-plaque::before {
    width: 26px;
    height: 20px;
}

.receipt .lead {
    margin-top: 16px;
    max-width: 48ch;
    color: var(--on-door);
}

/* The address it went to is the line a typo hides in, so it is set as a
   figure on the receipt, between brass hairlines, not left inside a sentence. */
.receipt-to {
    margin-top: 28px;
    max-width: 36rem;
    padding-block: 14px 16px;
    border-block: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
    font-size: var(--type-ui);
    color: color-mix(in srgb, var(--on-door) 84%, transparent);
}

.receipt-to span {
    display: block;
    margin-bottom: 4px;
}

.receipt-to strong {
    margin-right: 12px;
    font-size: var(--type-title);
    font-weight: 500;
    line-height: 1.3;
    color: var(--trim-white);
    overflow-wrap: anywhere;
}

.receipt-to a {
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--brass) 70%, transparent);
}

.receipt-to a:hover {
    text-decoration-color: var(--brass);
}

/* The form's card, filled in: trim white on the door, ink inside. */
.receipt-next {
    padding: clamp(22px, 4vw, 34px);
    background: var(--trim-white);
    border: 1px solid var(--rule);
    border-radius: 1px;
    color: var(--umber-ink);
}

.receipt-next :focus-visible {
    outline-color: var(--door-juniper);
}

.receipt-next h2 {
    margin-bottom: 8px;
    font-size: var(--type-title);
    line-height: 1.3;
}

.receipt-steps {
    padding: 0;
    list-style: none;
}

.receipt-steps li {
    padding-block: 14px 16px;
    border-top: 1px solid var(--rule);
}

.receipt-steps h3 {
    margin-bottom: 4px;
    font-size: var(--type-subhead);
}

.receipt-steps p {
    font-size: var(--type-ui);
    line-height: 1.55;
    color: var(--umber-soft);
}

.receipt-steps strong {
    font-weight: 500;
    color: var(--umber-ink);
}

@media (max-width: 960px) {
    .receipt {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .receipt .success-plaque {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
    }

    /* A step down, so a typical address fits one line on a phone and only a
       long one has to break. */
    .receipt-to strong {
        font-size: var(--type-subhead);
    }
}