/* Keep the headline and description together, followed by the visual.
   Every phone and tablet uses the same two-part reading order. */
@media screen and (max-width: 1024px) {
    .ppc.ppc--pinned .ppc-panel,
    .ppc.ppc--pinned .ppc-panel + .ppc-panel { justify-content: flex-start; }
    .ppc .ppc-mobile-frame { margin: 0 auto; }
    .ppc .ppc-panel .ppc-mobile { gap: 28px; padding: 32px var(--page-inline-padding); transform-origin: var(--page-inline-padding) top; }
    .ppc .ppc-panel .ppc-mobile--compact { gap: 14px; }
    .ppc .ppc-panel .ppc-mobile--short { gap: 10px; }
    .ppc .ppc-mobile .crm-journey { padding-block: 0; }
}
@media screen and (max-width: 739px) and (min-height: 900px) {
    .ppc .ppc-panel .ppc-mobile { gap: 28px; }
    .ppc .ppc-mobile__copy { gap: 12px; }
}
@media screen and (min-width: 740px) and (max-width: 1024px) and (max-height: 599px) {
    .ppc .ppc-panel .ppc-mobile { grid-template-areas: 'copy visual'; row-gap: 16px; }
    .ppc-mobile__copy { grid-area: copy; }
    .pm-visual { grid-area: visual; }
}

/* Keep each illustration connected to its introduction. The stage can retain
   its full viewport height without distributing empty space between them. */
@media screen and (max-width: 1024px) {
    .ppc .ppc-panel .ppc-mobile {
        display: grid;
        grid-template-rows: auto minmax(min-content, 1fr);
        min-height: var(--mobile-stage-height, 0px);
        align-content: stretch;
    }
    .ppc .ppc-mobile__copy { align-self: start; }
    .ppc .ppc-mobile .pm-visual { align-self: center; width: 100%; min-width: 0; }
}

/* Tablets get an editorial introduction and a wide visual stage, rather than
   a phone column floating inside the iPad viewport. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 600px) {
    .ppc .ppc-mobile-frame { max-width: 1024px; }
    .ppc .ppc-panel .ppc-mobile {
        --feature-title: 38px;
        --feature-body: 18px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'copy' 'visual';
        max-width: none;
        padding: 40px var(--page-inline-padding);
        gap: 28px;
    }
    .ppc .ppc-mobile__copy {
        grid-area: copy;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: center;
    }
    .ppc .ppc-mobile__copy h3 { grid-column: 1; text-wrap: balance; }
    .ppc .ppc-mobile__desc { grid-column: 2; }
    .ppc .ppc-mobile .pm-visual { grid-area: visual; }
    .ppc .ppc-mobile .crm-journey { max-width: 900px; }
    .ppc .ppc-mobile .crm-journey__art { height: clamp(330px, 50svh, 690px); }
    .ppc .ppc-mobile .pm-dispatch { width: 100%; max-width: 760px; }
    .ppc .ppc-mobile .pm-dispatch__job { position: absolute; top: 0; left: 0; width: 55%; max-width: 390px; padding: 18px; }
    .ppc .ppc-mobile .pm-dispatch__art { margin-top: 0; padding-top: 60px; }
    .ppc .ppc-mobile .pm-dispatch__scene { height: clamp(300px, 48vw, 460px); }
    .ppc .ppc-mobile .pm-dispatch__location { width: 42%; padding: 16px; margin-top: -20px; }
    .ppc .ppc-mobile .pm-dispatch__van { bottom: -20px; width: 37%; }
    .ppc .ppc-mobile .pm-dispatch__job-body strong,
    .ppc .ppc-mobile .pm-dispatch__location strong { font-size: 19px; }
    .ppc .ppc-mobile .pm-dispatch__job-body > div > span,
    .ppc .ppc-mobile .pm-dispatch__location > div > span { font-size: 16px; }
    .ppc .ppc-mobile .pm-checkbook { max-width: 760px; margin-inline: auto; }
    .ppc .ppc-mobile .pm-checkbook img { max-height: 430px; }
    .ppc .ppc-mobile .pm-checkbook figcaption > span { padding: 18px; }
    .ppc .ppc-mobile .pm-checkbook figcaption strong { font-size: 18px; }
    .ppc .ppc-mobile .pm-checkbook figcaption small { font-size: 15px; }
    .ppc .ppc-mobile .pm-shots { max-width: 760px; padding: 22px; margin-inline: auto; }
    .ppc .ppc-mobile .pm-shots__pair img { height: 280px; }
    .ppc .ppc-mobile .pm-shots > strong { font-size: 21px; }
    .ppc .ppc-mobile .pm-shots__heading > span,
    .ppc .ppc-mobile .pm-shots__pair figcaption { font-size: 17px; }
    .ppc .ppc-mobile .pm-shots__saved > span { font-size: 17px; }
    .ppc .ppc-mobile .pm-shots__saved small { font-size: 16px; }
    .ppc .ppc-mobile .client-portal-showcase { max-width: 930px; grid-template-columns: minmax(160px, .5fr) minmax(0, 1fr); gap: 30px; }
    .ppc .ppc-mobile .portal-client img { max-height: 500px; }
    .ppc .ppc-mobile .pm-web-scene { max-width: 900px; margin-inline: auto; gap: 20px; }
    .ppc .ppc-mobile .pm-web-hero,
    .ppc .ppc-mobile .pm-web-hero > img { min-height: 260px; }
    .ppc .ppc-mobile .pm-web-hero > div { padding: 22px; gap: 16px; }
    .ppc .ppc-mobile .pm-web-hero strong { font-size: 34px; }
    .ppc .ppc-mobile .pm-web-brand strong { font-size: 19px; }
    .ppc .ppc-mobile .pm-web-address,
    .ppc .ppc-mobile .pm-web-connected,
    .ppc .ppc-mobile .pm-web-hero p { font-size: 16px; }
    .ppc .ppc-mobile .pm-web-health { padding: 20px; }
    .ppc .ppc-mobile .pm-web-health dt { font-size: 16px; }
    .ppc .ppc-mobile .pm-web-health dd { font-size: 28px; }
    .ppc .ppc-mobile .pm-insights { max-width: 760px; padding: 24px; margin-inline: auto; }
    .ppc .ppc-mobile .pm-insights .pm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 24px; }
    .ppc .ppc-mobile .pm-insights .pm-metrics > div:last-child { grid-column: auto; display: block; }
    .ppc .ppc-mobile .pm-insights .pm-metrics dd,
    .ppc .ppc-mobile .pm-insights .pm-metrics > div:last-child dd { font-size: 28px; margin-top: 8px; }
    .ppc .ppc-mobile .pm-insights .pm-revenue-chart svg { height: 210px; }
    .ppc .ppc-mobile .pm-insights .pm-chart-title,
    .ppc .ppc-mobile .pm-insights__sources > span { font-size: 17px; }
    .ppc .ppc-mobile .pm-insights__sources strong { font-size: 27px; }
    .ppc .ppc-mobile .pm-insights__custom { font-size: 16px; }
}
/* The same three CRM objects form a taller composition when a phone or tablet has room. */
@media screen and (max-width: 1024px) and (min-height: 741px) {
    .ppc .crm-journey__art { aspect-ratio: auto; height: clamp(310px, 40svh, 460px); overflow: visible; }
    .ppc .crm-journey__art img { object-fit: contain; }
    .ppc .ppc-mobile--compact .crm-journey__art { height: 290px; }
    .ppc .ppc-mobile--short .crm-journey__art { height: 255px; }
}
/* On short phones, recover space inside demonstrations before scaling text. */
@media screen and (max-width: 739px) and (max-height: 740px) {
    .ppc .ppc-panel .ppc-mobile--short { padding-block: 24px; }
    .ppc .ppc-mobile--short .pm-web-scene { gap: 8px; }
    .ppc .ppc-mobile--short .pm-web-address { padding: 8px 12px; }
    .ppc .ppc-mobile--short .pm-web-brand,
    .ppc .ppc-mobile--short .pm-web-connected { padding: 8px 12px; }
    .ppc .ppc-mobile--short .pm-web-hero,
    .ppc .ppc-mobile--short .pm-web-hero > img { min-height: 130px; }
    .ppc .ppc-mobile--short .pm-web-hero > div { padding: 10px; gap: 9px; }
    .ppc .ppc-mobile--short .pm-web-hero strong { font-size: 22px; }
    .ppc .ppc-mobile--short .pm-web-health { padding: 10px; }
    .ppc .ppc-mobile--short .pm-web-health dd { font-size: 18px; }
    .ppc .ppc-mobile--short .pm-web-health p { padding-top: 8px; margin-top: 8px; }
    .ppc .ppc-mobile--short .pm-insights .pm-metrics { padding-block: 10px; gap: 8px; }
    .ppc .ppc-mobile--short .pm-insights .pm-metrics dd { font-size: 23px; }
    .ppc .ppc-mobile--short .pm-insights .pm-revenue-chart svg { height: 75px; }
    .ppc .ppc-mobile--short .pm-insights .pm-insights__sources { margin-block: 8px; }
    .ppc .ppc-mobile--short .pm-insights .pm-insights__sources > span { padding: 6px; }
    .ppc .ppc-mobile--short .pm-insights .pm-insights__custom { padding-top: 8px; }
    .ppc .ppc-mobile--short .portal-overview { min-height: 148px; padding-block: 9px; gap: 5px 10px; }
    .ppc .ppc-mobile--short .portal-window__brand { padding-block: 7px; }
    .ppc .ppc-mobile--short .portal-update { padding-block: 6px; }
    .ppc .ppc-mobile--short .portal-next-visit { padding-block: 6px; }
}
/* Main copy keeps the same reading scale as density changes. Taller phones
   must not fall back to smaller headings simply because an example is long. */
@media screen and (max-width: 739px) and (min-height: 741px) {
    .ppc .ppc-panel .ppc-mobile { --feature-title: 32px; --feature-body: 17px; }
    .ppc .ppc-mobile__copy h3 { line-height: 1.12; letter-spacing: -.025em; }
    .ppc .ppc-mobile .ppc-mobile__desc { line-height: 1.45; }
}
@media screen and (max-width: 739px) and (max-height: 740px) {
    .ppc .ppc-panel .ppc-mobile { --feature-title: 30px; --feature-body: 16px; }
    .ppc .ppc-mobile__copy h3 { line-height: 1.12; letter-spacing: -.025em; }
    .ppc .ppc-mobile .ppc-mobile__desc { line-height: 1.4; }
}

/* The setup uses its horizontal route on wider tablets, then the same steps
   form a taller route in portrait orientation. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 999px) {
    .ppc .ppc-mobile .auto-route { max-width: calc(100% - 52px); }
    .ppc .ppc-mobile .auto-route__map { height: 350px; margin-top: 18px; }
    .ppc .ppc-mobile .auto-route__connectors--desktop { display: block; }
    .ppc .ppc-mobile .auto-route__connectors--mobile { display: none; }
    .ppc .ppc-mobile .auto-route__stop { top: 15.3061%; width: 68px; height: 68px; }
    .ppc .ppc-mobile .auto-route__stop--lead { left: 7.9268%; }
    .ppc .ppc-mobile .auto-route__stop--welcome { left: 30.4878%; }
    .ppc .ppc-mobile .auto-route__stop--condition { left: 53.0488%; width: 60px; height: 60px; }
    .ppc .ppc-mobile .auto-route__stop--wait { left: 53.0488%; top: 45.9184%; width: 50px; height: 50px; }
    .ppc .ppc-mobile .auto-route__stop--followup { left: 73.1707%; top: 45.9184%; width: 60px; height: 60px; }
    .ppc .ppc-mobile .auto-route__stop--booked { left: 90.2439%; top: 74.4898%; width: 76px; height: 76px; }
    .ppc .ppc-mobile .auto-route__label { top: calc(100% + 9px); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: 130px; text-align: center; }
    .ppc .ppc-mobile .auto-route__label strong { font-size: 17px; }
    .ppc .ppc-mobile .auto-route__label > span { font-size: 12px; }
    .ppc .ppc-mobile .auto-route__label > .auto-route__role { display: block; font-size: 10px; }
    .ppc .ppc-mobile .auto-route__stop--condition .auto-route__label { top: auto; bottom: calc(100% + 8px); }
    .ppc .ppc-mobile .auto-route__stop--followup .auto-route__label { width: 156px; }
    .ppc .ppc-mobile .auto-route__stop--booked strong { font-size: 21px; }
    .ppc .ppc-mobile .auto-route__branch--later { left: 55%; top: 27.5%; font-size: 12px; }
    .ppc .ppc-mobile .crm-journey__art { height: 340px; }
}
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 1000px) {
    .ppc .ppc-mobile .auto-route { max-width: 560px; }
    .ppc .ppc-mobile .auto-route__map { height: 560px; }
    .ppc .ppc-mobile .auto-route__stop { width: 88px; height: 88px; }
    .ppc .ppc-mobile .auto-route__stop--wait,
    .ppc .ppc-mobile .auto-route__stop--condition { width: 76px; height: 76px; }
    .ppc .ppc-mobile .auto-route__stop--booked { width: 104px; height: 104px; }
    .ppc .ppc-mobile .auto-route__label { width: 270px; }
    .ppc .ppc-mobile .auto-route__stop--wait .auto-route__label,
    .ppc .ppc-mobile .auto-route__stop--followup .auto-route__label { width: 240px; }
    .ppc .ppc-mobile .auto-route__label strong { font-size: 22px; }
    .ppc .ppc-mobile .auto-route__label > span { font-size: 15px; }
    .ppc .ppc-mobile .auto-route__label > .auto-route__role { font-size: 12px; }
    .ppc .ppc-mobile .auto-route__stop--booked strong { font-size: 28px; }
}
@media screen and (min-width: 740px) and (max-width: 1024px) and (max-height: 599px) {
    .ppc .ppc-panel .ppc-mobile { grid-template-rows: minmax(0, 1fr); }
}

/* Every tablet introduction follows the same readable sequence. Density
   reduces padding before it reduces the main heading or explanation. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 600px) {
    .ppc .ppc-mobile__copy {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }
    .ppc .ppc-mobile__copy > h3,
    .ppc .ppc-mobile__copy > .ppc-mobile__desc { grid-column: 1; }
    .ppc .ppc-mobile__copy h3 { line-height: 1.1; letter-spacing: -.025em; }
    .ppc .ppc-mobile .ppc-mobile__desc { max-width: 52ch; line-height: 1.4; }
    .ppc .ppc-panel .ppc-mobile--compact { padding-block: 16px; gap: 14px; }
    .ppc .ppc-panel .ppc-mobile--short { padding-block: 12px; gap: 10px; }
}

/* A landscape tablet has room beside the explanation. Taller demonstrations
   use that width so the complete slide can retain its reading size. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 850px) and (min-aspect-ratio: 6/5) {
    .ppc .ppc-panel:is(.ppc-panel--payments, .ppc-panel--showcase-checkbook, .ppc-panel--showcase-ai-workforce, .ppc-panel--showcase-job-site-camera, .ppc-panel--showcase-client-portal, .ppc-panel--showcase-insights, .ppc-panel--duo-search) .ppc-mobile {
        --feature-title: 38px;
        --feature-body: 18px;
        grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: 'copy visual';
        align-content: center;
        column-gap: 28px;
        row-gap: 20px;
        padding: 40px var(--page-inline-padding);
    }
    .ppc .ppc-panel:is(.ppc-panel--payments, .ppc-panel--showcase-checkbook, .ppc-panel--showcase-ai-workforce, .ppc-panel--showcase-job-site-camera, .ppc-panel--showcase-client-portal, .ppc-panel--showcase-insights, .ppc-panel--duo-search) .ppc-mobile__copy { align-self: start; }
    .ppc .ppc-mobile .pm-dispatch__scene { height: 300px; }
    .ppc .ppc-mobile .pm-checkbook img { max-height: 370px; object-fit: contain; }
    .ppc .ppc-mobile .pm-checkbook figcaption > span { padding: 14px 10px; }
    .ppc .ppc-mobile .pm-checkbook figcaption strong { font-size: 17px; }
    .ppc .ppc-mobile .pm-checkbook figcaption small { font-size: 14px; }
    .ppc .ppc-mobile .pm-shots { padding: 20px; }
    .ppc .ppc-mobile .pm-shots__pair img { height: 210px; }
    .ppc .ppc-mobile .client-portal-showcase { grid-template-columns: minmax(108px, .32fr) minmax(0, 1fr); gap: 16px; }
    .ppc .ppc-mobile .portal-client img { max-height: 500px; }
    .ppc .ppc-mobile .portal-window__brand { padding: 13px 16px; }
    .ppc .ppc-mobile .portal-overview { padding: 16px; }
    .ppc .ppc-mobile .portal-progress { margin-top: 18px; }
    .ppc .ppc-mobile .portal-next-visit { padding: 12px; margin-inline: 16px; }
    .ppc .ppc-mobile .portal-updates { padding-inline: 16px; }
    .ppc .ppc-mobile .portal-update { padding-block: 12px; }
    .ppc .ppc-mobile .portal-window__footer { padding-block: 10px; }
    .ppc .ppc-mobile .pm-web-scene { gap: 12px; }
    .ppc .ppc-mobile .pm-web-hero,
    .ppc .ppc-mobile .pm-web-hero > img { min-height: 205px; }
    .ppc .ppc-mobile .pm-web-hero > div { padding: 18px; gap: 12px; }
    .ppc .ppc-mobile .pm-web-hero strong { font-size: 32px; }
    .ppc .ppc-mobile .pm-web-health { padding: 14px; }
    .ppc .ppc-mobile .pm-web-health dd { font-size: 24px; }
    .ppc .ppc-mobile .pm-insights { padding: 20px; }
    .ppc .ppc-mobile .pm-insights .pm-metrics { padding-block: 16px; }
    .ppc .ppc-mobile .pm-insights .pm-revenue-chart svg { height: 145px; }
    .ppc .ppc-mobile .pm-insights .pm-insights__sources { margin-block: 14px; }
    .ppc .ppc-mobile .invoice-showcase { gap: 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .ppc .ppc-mobile .invoice-paper { padding: 18px; }
    .ppc .ppc-mobile .invoice-phone { padding-inline: 14px; }
    .ppc .ppc-mobile .invoice-paper__masthead { padding-bottom: 14px; }
    .ppc .ppc-mobile .invoice-line-items { margin-top: 18px; }
    .ppc .ppc-mobile .invoice-phone__brand { margin-block: 14px; }
    .ppc .ppc-mobile .invoice-payment__success { gap: 10px; }
    .ppc .ppc-mobile .invoice-payment__amount { margin-top: 15px; }
}

/* Long phone examples recover a few pixels of framing before the fit routine
   has to reduce the complete composition. */
@media screen and (max-width: 739px) and (min-height: 741px) {
    .ppc .ppc-panel .ppc-mobile--short { padding-block: 8px; gap: 8px; }
    .ppc .ppc-mobile--short .docs-art > img { height: 154px; }
}

/* Keep short-phone document text at its intended size by tightening the
   signature and file preview, while retaining every visible detail. */
@media screen and (max-width: 739px) and (max-height: 740px) {
    .ppc .ppc-mobile--short .docs-art > img { height: 120px; }
    .ppc .ppc-mobile--short .docs-signed__heading { padding-bottom: 5px; }
    .ppc .ppc-mobile--short .docs-signed__heading h4 { line-height: 1.2; }
    .ppc .ppc-mobile--short .docs-signed__heading > div > span { line-height: 1.2; }
    .ppc .ppc-mobile--short .docs-signature { margin-top: 10px; padding-block: 6px 2px; }
    .ppc .ppc-mobile--short .docs-signature__ink { height: 24px; }
    .ppc .ppc-mobile--short .docs-drive__path { padding-top: 3px; }
    .ppc .ppc-mobile--short .docs-drive__grid { grid-template-columns: 1.5fr 1fr 1fr; margin-top: 5px; gap: 6px; }
    .ppc .ppc-mobile--short .docs-drive__tile { padding: 4px; }
    .ppc .ppc-mobile--short .docs-drive__thumbnail { height: 18px; margin-bottom: 3px; font-size: 18px; }
    .ppc .ppc-mobile--short .docs-drive__storage { margin-top: 4px; padding-top: 3px; }
}

/* Keep introductions anchored at the same point as examples switch density.
   Compact modes recover room below the content, never above the headline. */
@media screen and (max-width: 739px) and (orientation: portrait) {
    .ppc .ppc-panel .ppc-mobile { padding-top: 32px; }
}
@media screen and (max-width: 739px) and (max-height: 740px) and (orientation: portrait) {
    .ppc .ppc-panel .ppc-mobile { padding-top: 24px; }
}
@media screen and (min-width: 740px) and (max-width: 1024px) and (orientation: portrait) {
    .ppc .ppc-panel .ppc-mobile { padding-top: 40px; }
}


/* A visual gets the remaining measured space. Its own parts reflow into it,
   preserving device proportions and keeping all customer-facing copy readable. */
@media screen and (max-width: 1024px) and (min-height: 600px) {
    .ppc .ppc-mobile--roomy .pm-visual {
        height: var(--mobile-visual-room);
        display: grid;
        align-items: center;
    }
    .ppc .ppc-mobile--roomy .crm-flow {
        --crm-board-height: var(--mobile-visual-room);
        --crm-token-height: clamp(60px, calc(var(--mobile-visual-room) * .13), 100px);
    }
    .ppc .ppc-mobile--roomy .crm-flow__board { padding-bottom: 40px; }
    .ppc .ppc-mobile--roomy .crm-flow__cards { gap: clamp(18px, calc(var(--mobile-extra-room) * .1), 40px); }
    .ppc .ppc-mobile--roomy .crm-focus { top: auto; bottom: 64px; padding: 24px; }
    .ppc .ppc-mobile--roomy .crm-focus__identity strong { font-size: 24px; }
    .ppc .ppc-mobile--roomy .crm-focus__context { margin-top: 24px; padding-bottom: 20px; font-size: 14px; }
    .ppc .ppc-mobile--roomy .crm-focus__next { margin-top: 20px; gap: 12px; }
    .ppc .ppc-mobile--roomy .crm-focus__next > strong { font-size: 18px; }

    .ppc .ppc-mobile--roomy .pm-dispatch {
        height: var(--mobile-visual-room); max-width: 760px;
        display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center;
    }
    .ppc .ppc-mobile--roomy .pm-dispatch__job { position: relative; width: 100%; max-width: 440px; padding: 22px; }
    .ppc .ppc-mobile--roomy .pm-dispatch__art { margin: 0; padding: 0; }
    .ppc .ppc-mobile--roomy .pm-dispatch__scene { height: auto; max-height: none; }
    .ppc .ppc-mobile--roomy .pm-dispatch__location { width: 66%; margin: 0 0 0 auto; padding: 20px; }
    .ppc .ppc-mobile--roomy .pm-dispatch__van { width: 40%; bottom: -16px; }

    .ppc .ppc-mobile--roomy .docs-showcase { height: var(--mobile-visual-room); grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
    .ppc .ppc-mobile--roomy .docs-art { height: 100%; min-height: 0; }
    .ppc .ppc-mobile--roomy .docs-art > img { height: 100%; max-height: 440px; width: 100%; object-fit: contain; }

    .ppc .ppc-mobile--roomy .invoice-showcase { height: var(--mobile-visual-room); align-content: center; row-gap: clamp(24px, calc(var(--mobile-extra-room) * .2), 64px); }
    .ppc .ppc-mobile--roomy .invoice-paper { padding-block: clamp(24px, calc(var(--mobile-extra-room) * .16), 54px); }
    .ppc .ppc-mobile--roomy .invoice-line-items tbody :is(td, th) { padding-block: clamp(14px, calc(var(--mobile-extra-room) * .085), 28px); }
    .ppc .ppc-mobile--roomy .invoice-phone { padding-block: 24px; }

    .ppc .ppc-mobile--roomy .pm-checkbook { height: var(--mobile-visual-room); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 24px; }
    .ppc .ppc-mobile--roomy .pm-checkbook img { align-self: center; max-height: none; object-fit: contain; }
    .ppc .ppc-mobile--roomy .pm-checkbook figcaption { grid-template-columns: 1fr; margin: 0; gap: 18px; }
    .ppc .ppc-mobile--roomy .pm-checkbook figcaption > span { padding: 24px 12px; align-items: center; }
    .ppc .ppc-mobile--roomy .pm-checkbook figcaption strong { font-size: 20px; }
    .ppc .ppc-mobile--roomy .pm-checkbook figcaption small { font-size: 16px; }


    .ppc .ppc-mobile--roomy .auto-route__map { height: var(--mobile-visual-room); margin-top: 0; }
    .ppc .ppc-mobile--roomy .pm-shots__pair img { height: calc(210px + min(var(--mobile-extra-room) * .35, 120px)); }
    .ppc .ppc-mobile--roomy .pm-shots { padding: 24px; }
    .ppc .ppc-mobile--roomy .pm-shots > .pm-shots__pair { margin-block: 24px; }

    .ppc .ppc-mobile--roomy .portal-overview { padding-block: 28px; }
    .ppc .ppc-mobile--roomy .portal-next-visit { padding-block: 20px; }
    .ppc .ppc-mobile--roomy .portal-update { padding-block: clamp(16px, calc(var(--mobile-extra-room) * .075), 30px); }
    .ppc .ppc-mobile--roomy .portal-window__footer { padding-block: 18px; }
    .ppc .ppc-mobile--roomy .pm-web-hero,
    .ppc .ppc-mobile--roomy .pm-web-hero > img { min-height: calc(230px + var(--mobile-extra-room) * .55); }
    .ppc .ppc-mobile--roomy .pm-web-scene { gap: 24px; }
    .ppc .ppc-mobile--roomy .pm-web-health { padding: 24px; }
    .ppc .ppc-mobile--roomy .pm-insights .pm-revenue-chart svg { height: calc(150px + var(--mobile-extra-room) * .75); }
}
@media screen and (max-width: 739px) and (min-height: 600px) {
    .ppc .ppc-mobile--roomy .comm-showcase { height: var(--mobile-visual-room); justify-content: space-between; gap: 24px; }
    .ppc .ppc-mobile--roomy .comm-phone-group { flex: 1; }
    .ppc .ppc-mobile--roomy .comm-phone { flex-basis: clamp(118px, calc(118px + var(--mobile-extra-room) * .25), 195px); width: clamp(118px, calc(118px + var(--mobile-extra-room) * .25), 195px); }
    .ppc .ppc-mobile--roomy .comm-laptop { flex: 0 0 auto; }
    .ppc .ppc-mobile--roomy .comm-app strong { white-space: normal; }
}

/* A tall, narrow viewport needs portrait arrangements, rather than simply
   extending the whitespace in a landscape illustration. */
@media screen and (max-width: 739px) and (min-height: 900px) {
    .ppc .ppc-mobile--spacious .crm-flow__board {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.5fr 1fr;
        gap: 26px; padding: 12px 0 28px;
    }
    .ppc .ppc-mobile--spacious .crm-flow__lane { padding: 0 12px; }
    .ppc .ppc-mobile--spacious .crm-flow__lane::before { inset: 40px 0 0; transform: none; }
    .ppc .ppc-mobile--spacious .crm-flow__lane h4 { font-size: 18px; margin-bottom: 14px; }
    .ppc .ppc-mobile--spacious .crm-flow__rail { transform: none; margin-inline: -12px; }
    .ppc .ppc-mobile--spacious .crm-flow__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 24px; }
    .ppc .ppc-mobile--spacious .crm-flow__lane--closed .crm-flow__cards { grid-template-columns: 1fr 1fr; }
    .ppc .ppc-mobile--spacious .crm-flow__lane--active .crm-flow__cards { opacity: .25; }
    .ppc .ppc-mobile--spacious .crm-focus { top: 33%; bottom: auto; width: 90%; padding: 28px; }
    .ppc .ppc-mobile--spacious .crm-flow__lane--closed { align-self: stretch; }

    .ppc .ppc-mobile--spacious .pm-dispatch__art { display: flex; flex-direction: column; align-items: flex-end; }
    .ppc .ppc-mobile--spacious .pm-dispatch__van { position: relative; bottom: auto; width: 65%; margin-top: -28px; }
    .ppc .ppc-mobile--spacious .pm-dispatch__job-body strong,
    .ppc .ppc-mobile--spacious .pm-dispatch__location strong { font-size: 20px; }
    .ppc .ppc-mobile--spacious .pm-dispatch__job-body > div > span,
    .ppc .ppc-mobile--spacious .pm-dispatch__location > div > span { font-size: 16px; }
    .ppc .ppc-mobile--spacious .pm-dispatch__location { width: 78%; margin-left: 0; }

    .ppc .ppc-mobile--spacious .pm-checkbook { grid-template-rows: 1fr 1fr; gap: 32px; }
    .ppc .ppc-mobile--spacious .pm-checkbook figcaption { gap: 24px; }
    .ppc .ppc-mobile--spacious .pm-checkbook figcaption > span { padding: 28px 16px; gap: 20px; }
    .ppc .ppc-mobile--spacious .pm-checkbook figcaption > span > i { font-size: 28px; }
    .ppc .ppc-mobile--spacious .pm-checkbook figcaption strong { font-size: 24px; }
    .ppc .ppc-mobile--spacious .pm-checkbook figcaption small { font-size: 18px; }


    .ppc .ppc-mobile--spacious .pm-shots > .pm-shots__pair { grid-template-columns: 1fr; gap: 18px; }
    .ppc .ppc-mobile--spacious .pm-shots__pair img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
    .ppc .ppc-mobile--spacious .pm-shots__pair figcaption { margin-top: 6px; }
    .ppc .ppc-mobile--spacious .pm-shots { padding: 20px; }
    .ppc .ppc-mobile--spacious .pm-shots > .pm-shots__pair { margin-block: 16px; }

    .ppc .ppc-mobile--spacious .portal-window__brand { padding-block: 22px; }
    .ppc .ppc-mobile--spacious .portal-overview { min-height: 290px; padding-block: 32px; }
    .ppc .ppc-mobile--spacious .portal-client { top: 120px; height: 230px; width: 152px; }
    .ppc .ppc-mobile--spacious .portal-update { padding-block: 28px; }
    .ppc .ppc-mobile--spacious .portal-next-visit { padding-block: 26px; }
}

/* Tall tablets have room for a portrait device arrangement and full photos. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (min-height: 1100px) and (orientation: portrait) {
    .ppc .ppc-mobile--spacious .comm-showcase { display: flex; flex-direction: column; height: var(--mobile-visual-room); padding: 0; gap: 28px; }
    .ppc .ppc-mobile--spacious .comm-phone-group { position: relative; left: auto; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; gap: 64px; }
    .ppc .ppc-mobile--spacious .comm-phone { width: 210px; margin: 0; }
    .ppc .ppc-mobile--spacious .comm-app { display: grid; gap: 16px; margin: 0; padding: 0; }
    .ppc .ppc-mobile--spacious .comm-app > img { width: 64px; height: 64px; }
    .ppc .ppc-mobile--spacious .comm-app strong { font-size: 20px; }
    .ppc .ppc-mobile--spacious .comm-laptop { width: 100%; margin: 0; flex: 0 0 auto; }

    .ppc .ppc-mobile--spacious .pm-dispatch__art { display: flex; flex-direction: column; align-items: flex-end; }
    .ppc .ppc-mobile--spacious .pm-dispatch__van { position: relative; bottom: auto; width: 48%; margin-top: -90px; }
    .ppc .ppc-mobile--spacious .pm-dispatch__location { margin-left: 0; }

    .ppc .ppc-mobile--spacious .docs-showcase { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 28px; }
    .ppc .ppc-mobile--spacious .docs-art { grid-column: 1; grid-row: 1; height: 420px; }
    .ppc .ppc-mobile--spacious .docs-art > img { height: 100%; max-height: none; }
    .ppc .ppc-mobile--spacious .docs-cards { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
    .ppc .ppc-mobile--spacious .pm-shots > .pm-shots__pair { grid-template-columns: 1fr; gap: 20px; }
    .ppc .ppc-mobile--spacious .pm-shots__pair img { width: 100%; height: 290px; object-fit: contain; }
    .ppc .ppc-mobile--spacious .portal-window__brand { padding-block: 26px; }
    .ppc .ppc-mobile--spacious .portal-overview { padding-block: 40px; }
    .ppc .ppc-mobile--spacious .portal-next-visit { padding-block: 30px; }
    .ppc .ppc-mobile--spacious .portal-update { padding-block: 40px; }
    .ppc .ppc-mobile--spacious .portal-window__footer { padding-block: 22px; }
}