/* Phone slides: one reading order on every slide. A strong introduction sits
   at the top at a fixed size, the example starts directly beneath it, and the
   example takes all of the remaining height (feature-mobile-fit.js measures it
   into --mobile-visual-room and adds .ppc-mobile--roomy). Density classes only
   tighten the example; the introduction never shrinks. */
@media screen and (max-width: 739px) and (min-height: 500px) {
    .ppc .ppc-panel .ppc-mobile,
    .ppc .ppc-panel .ppc-mobile--compact,
    .ppc .ppc-panel .ppc-mobile--short {
        --feature-title: 32px;
        --feature-body: 17px;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 24px;
        padding: 28px var(--page-inline-padding) 16px;
    }
    .ppc .ppc-panel .ppc-mobile__copy { gap: 12px; align-self: start; }
    .ppc .ppc-panel .ppc-mobile__copy h3 {
        font-size: var(--feature-title);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.03em;
        color: var(--ppc-ink);
    }
    .ppc .ppc-panel .ppc-mobile .ppc-mobile__desc {
        max-width: 36ch;
        font-size: var(--feature-body);
        line-height: 1.45;
        color: var(--ppc-ink-soft);
    }
    .ppc .ppc-panel--showcase-ai-workforce .ppc-mobile__copy h3 { font-size: var(--feature-title); line-height: 1.1; }
    .ppc .ppc-panel--showcase-ai-workforce .ppc-mobile__desc { font-size: var(--feature-body); }

    /* The example begins right under the introduction. When there is room it
       becomes a column of the measured height; each example below decides
       which of its parts grows. */
    .ppc .ppc-mobile .pm-visual { align-self: start; }
    .ppc .ppc-mobile--roomy .pm-visual {
        display: flex;
        flex-direction: column;
        height: var(--mobile-visual-room);
    }
    :where(.ppc .ppc-mobile--roomy .pm-visual) > * { flex: 0 0 auto; width: 100%; }
}
/* While feature-mobile-fit.js measures a slide (synchronously, never
   painted), story motion and overlays are set aside so only the layout
   counts. Motion animates the individual translate, scale and rotate
   properties, which layout never uses; running animations outrank normal
   declarations, hence !important. */
.ppc .ppc-mobile--measuring .pm-visual * { translate: none !important; scale: none !important; rotate: none !important; }
.ppc .ppc-mobile--measuring [data-stage-overlay] { display: none !important; }
/* Parts a fixed frame leaves out to show the rest whole (feature-mobile-fit.js). */
.ppc .ppc-panel .ppc-mobile .pm-visual .is-fit-trimmed { display: none; }
@media screen and (max-width: 739px) and (min-height: 500px) and (max-height: 700px) {
    .ppc .ppc-panel .ppc-mobile,
    .ppc .ppc-panel .ppc-mobile--compact,
    .ppc .ppc-panel .ppc-mobile--short {
        --feature-title: 28px;
        --feature-body: 16px;
        gap: 16px;
        padding-top: 20px;
    }
    .ppc .ppc-panel .ppc-mobile__copy { gap: 8px; }
}

/* CRM: the three lanes take the whole height, five leads each, and the
   opened record lies over the lower half of the board. */
@media screen and (max-width: 739px) and (min-height: 500px) {
    .ppc .ppc-mobile .crm-flow { --crm-phone-token: 44px; max-width: none; }
    .ppc .ppc-mobile .crm-token,
    .ppc .ppc-mobile .crm-token--ghost { height: var(--crm-phone-token); }
    .ppc .ppc-mobile .crm-token__person { flex-basis: min(calc(var(--crm-phone-token) * .5), 48px); height: min(calc(var(--crm-phone-token) * .5), 48px); font-size: clamp(10px, calc(var(--crm-phone-token) * .18), 15px); }
    .ppc .ppc-mobile--roomy .crm-flow { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .crm-flow__board { flex: 1 1 0; grid-template-rows: minmax(0, 1fr); min-height: 0; }
    .ppc .ppc-mobile--roomy .crm-flow__lane { display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .crm-flow__cards,
    .ppc .ppc-mobile--roomy .crm-flow__lane--closed .crm-flow__cards { flex: 1 1 0; min-height: 0; align-content: start; gap: 8px; container: crm-cards / size; }
    /* Five leads share the lane; the record covers whatever is left below.
       A short lane lines up fewer, never clipping one: a new lead travels
       across the lanes, so they cannot hide their overflow. */
    .ppc .ppc-panel .ppc-mobile--roomy .crm-token { --crm-phone-token: clamp(44px, calc((100cqh - 32px) / 5), 96px); }
    .ppc .ppc-mobile--roomy .crm-token:nth-child(n + 6) { display: none; }
    /* A tall lane lines up a sixth, so no lane runs empty below the record. */
    @container crm-cards (min-height: 600px) {
        .ppc .ppc-panel .ppc-mobile--roomy .crm-token { --crm-phone-token: min(calc((100cqh - 40px) / 6), 120px); }
        .ppc .ppc-mobile--roomy .crm-token:nth-child(6) { display: flex; }
    }
    @container crm-cards (max-height: 251px) {
        .ppc .ppc-panel .ppc-mobile--roomy .crm-token { --crm-phone-token: clamp(44px, calc((100cqh - 24px) / 4), 96px); }
        .ppc .ppc-mobile--roomy .crm-token:nth-child(n + 5) { display: none; }
    }
    @container crm-cards (max-height: 195px) {
        .ppc .ppc-panel .ppc-mobile--roomy .crm-token { --crm-phone-token: clamp(36px, calc((100cqh - 16px) / 3), 96px); }
        .ppc .ppc-mobile--roomy .crm-token:nth-child(n + 4) { display: none; }
    }
    .ppc .ppc-mobile--roomy .crm-focus { padding: clamp(20px, calc(16px + var(--mobile-extra-room) * .06), 28px); }
    /* The record opens just under the lead it belongs to, AM at the top of
       "In progress", covering the next rows as on larger screens. The board
       is measured as a container to find the first row's foot: the lane
       head, then one lead of the lane's five. */
    .ppc .ppc-mobile--roomy .crm-flow__board { container: crm-board / size; }
    .ppc .ppc-mobile--roomy .crm-focus { top: calc(41px + clamp(44px, (100cqh - 86px) / 5, 96px) + 24px); bottom: auto; }
    @container crm-board (min-height: 654px) {
        .ppc .ppc-mobile--roomy .crm-focus { top: calc(41px + min((100cqh - 94px) / 6, 120px) + 24px); }
    }
}
@media screen and (max-width: 739px) and (min-height: 500px) and (max-height: 700px) {
    .ppc .ppc-mobile .crm-flow { --crm-phone-token: 36px; }
    .ppc .ppc-mobile .crm-flow__lane { padding: 8px 6px; }
    .ppc .ppc-mobile .crm-flow__lane h4 { margin-bottom: 6px; }
    .ppc .ppc-mobile .crm-flow__cards,
    .ppc .ppc-mobile .crm-flow__lane--closed .crm-flow__cards { gap: 6px; padding-top: 8px; }
    .ppc .ppc-mobile .crm-focus { padding: 12px 16px; }
    .ppc .ppc-mobile .crm-focus__avatar { flex-basis: 32px; height: 32px; font-size: 12px; }
    .ppc .ppc-mobile .crm-focus__identity strong { font-size: 18px; }
    .ppc .ppc-mobile .crm-focus__context { margin-top: 8px; padding-bottom: 8px; }
    .ppc .ppc-mobile .crm-focus__next { margin-top: 8px; gap: 2px; }
    .ppc .ppc-mobile--roomy .crm-focus { top: calc(35px + clamp(44px, (100cqh - 76px) / 5, 96px) + 16px); }
}

/* Scheduling: the job card, then the map taking the height, then the
   address. The route overlay follows the picture wherever contain puts it. */
.ppc .pm-shots__note,
.ppc .pm-dispatch__day,
.ppc .docs-trail,
.ppc .invoice-paper__dates { display: none; }
@media screen and (max-width: 739px) and (min-height: 500px) {
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch { position: relative; flex: 1 1 0; display: flex; flex-direction: column; height: auto; min-height: 0; container: dispatch / size; }
    /* The job card, then the dispatch map at the picture's own 3:2 shape,
       tucked behind the card's foot: the card covers the picture's empty
       top band, the address and the van stand in its empty lower corners,
       and the picture is anchored by its destination pin, so only the
       calendar's far edge runs off the screen. The map takes the height up
       to its natural size; the card takes the rest, listing as many of the
       day's other jobs as fit whole (data-fit-trim) and spacing them out. */
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch { --dispatch-map: clamp(96px, calc((100cqh - 141px) / .88), 100cqw); }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch__job { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
    /* With no room for a whole row, the card keeps its size and the map
       takes all of the height, running further off the left. */
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch:has(.pm-dispatch__day.is-fit-trimmed) { --dispatch-map: clamp(96px, calc((100cqh - 141px) / .88), 125cqw); }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch:has(.pm-dispatch__day.is-fit-trimmed) .pm-dispatch__job { flex: none; }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch__art { flex: none; width: calc(var(--dispatch-map) * 1.5); height: var(--dispatch-map); min-height: 96px; margin: calc(var(--dispatch-map) * -.12) 0 0 calc(93cqw - var(--dispatch-map) * 1.3275); }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch__scene { width: 100%; height: 100%; max-height: none; mask-image: none; }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch__van { position: absolute; right: 8%; bottom: 2%; width: min(26%, 190px); margin: 0; }
    .ppc .ppc-mobile--roomy .pm-visual--scheduling .pm-dispatch__location { position: absolute; z-index: 2; left: 0; bottom: 0; width: auto; max-width: 60%; margin: 0; }
    .ppc .ppc-mobile--roomy .pm-dispatch__day { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; margin: 8px 0 0; padding: 8px 0 0; overflow: hidden; border-top: 1px solid var(--ppc-edge); list-style: none; }
    .ppc .ppc-mobile .pm-dispatch__day::before { content: 'Later today'; margin-bottom: 2px; color: var(--ppc-ink-soft); font-size: 13px; font-weight: 600; line-height: 1.3; }
    .ppc .ppc-mobile .pm-dispatch__day > li { display: grid; flex: 1 0 auto; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; line-height: 1.4; }
    .ppc .ppc-mobile .pm-dispatch__day > li + li { border-top: 1px solid var(--ppc-edge); }
    .ppc .ppc-mobile .pm-dispatch__day time { color: var(--ppc-ink-soft); font-weight: 600; }
    .ppc .ppc-mobile .pm-dispatch__day span { overflow: hidden; color: var(--ppc-ink); text-overflow: ellipsis; white-space: nowrap; }
    .ppc .ppc-mobile .pm-dispatch__day small { color: var(--ppc-ink-soft); font-size: 13px; }
}

/* Documents: the signed change order takes the height, its signature box
   growing with it; Drive files it below. Text stays at reading size. A tall
   phone opens with the picture of larger screens: the signature leaving
   the phone for the folder. */
@media screen and (max-width: 739px) and (min-height: 900px) {
    .ppc .ppc-mobile .docs-art { display: block; flex: none; height: clamp(120px, 16svh, 190px); margin: -8px 0 4px; }
    .ppc .ppc-mobile .docs-art > img { width: 100%; height: 100%; object-fit: contain; }
}
@media screen and (max-width: 739px) and (min-height: 500px) {
    .ppc .ppc-mobile .docs-signed__heading h4 { font-size: 18px; }
    .ppc .ppc-mobile .docs-signed__heading > div > span,
    .ppc .ppc-mobile .docs-status,
    .ppc .ppc-mobile .docs-paper__description,
    .ppc .ppc-mobile .docs-paper__footer,
    .ppc .ppc-mobile .docs-showcase .docs-drive__path,
    .ppc .ppc-mobile .docs-drive__tile strong { font-size: 14px; }
    .ppc .ppc-mobile .docs-paper__scope strong { font-size: 16px; }
    /* "Awaiting signature" becomes "Signed" while the reader watches: the
       status wraps within its own width and the title keeps one line, so
       the card never changes height. */
    .ppc .ppc-mobile .docs-signed__heading { min-height: 40px; }
    .ppc .ppc-mobile .docs-signed__heading h4 { white-space: nowrap; }
    .ppc .ppc-mobile .docs-status { max-width: 96px; font-size: 13px; line-height: 1.25; white-space: normal; text-align: right; }
    .ppc .ppc-mobile .docs-drive__heading { font-size: 16px; }
    .ppc .ppc-mobile .docs-drive__search,
    .ppc .ppc-mobile .docs-drive__tile-meta,
    .ppc .ppc-mobile .docs-drive__storage { font-size: 13px; }
    .ppc .ppc-mobile--roomy .docs-showcase { flex: 1 1 0; display: flex; flex-direction: column; height: auto; min-height: 0; }
    .ppc .ppc-mobile--roomy .docs-cards { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
    .ppc .ppc-mobile--roomy .docs-signed { flex: 1 1 auto; display: flex; flex-direction: column; }
    .ppc .ppc-mobile--roomy:not(.ppc-mobile--compact) .docs-paper { flex: 1 1 auto; display: flex; flex-direction: column; }
    .ppc .ppc-mobile--roomy.ppc-mobile--compact .docs-paper { flex: 1 1 auto; grid-template-rows: auto auto minmax(0, 1fr); }
    .ppc .ppc-mobile--roomy .docs-signature { flex: 1 1 auto; display: flex; align-items: center; max-height: 160px; }
    .ppc .ppc-mobile--roomy .docs-signature__ink { width: 100%; height: clamp(32px, 100%, 72px); }
    .ppc .ppc-mobile--roomy:not(.ppc-mobile--compact) .docs-paper__footer { display: flex; justify-content: space-between; margin-top: 8px; padding: 0; }
    /* A tall screen shows the signing history under the signature. */
    .ppc .ppc-mobile--roomy .docs-cards { container: docs / size; }
    .ppc .ppc-mobile .docs-trail { flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--docs-line); list-style: none; }
    .ppc .ppc-mobile .docs-trail > li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; }
    .ppc .ppc-mobile .docs-trail i { color: var(--docs-muted); font-size: 13px; }
    .ppc .ppc-mobile .docs-trail time { color: var(--docs-muted); font-size: 13px; }
    @container docs (min-height: 680px) {
        .ppc .ppc-mobile .docs-trail { display: flex; }
    }
    @container docs (min-height: 760px) {
        .ppc .ppc-mobile--roomy .docs-signature { max-height: 240px; }
    }
    /* The smallest phones keep the files at full size and drop the meter. */
    .ppc .ppc-mobile--short .docs-drive__storage { display: none; }
}

/* Checkbook: the whole check at the photo's own shape, paying out and
   collecting beneath it as a pair of cards, then the latest checkbook
   activity in whatever height is left (rows that do not fit whole are left
   out, data-fit-trim). A short phone lets the photo give way instead. */
.ppc .pm-checkbook__log { display: none; }
@media screen and (max-width: 739px) and (min-height: 500px) {
    .ppc .ppc-mobile--roomy .pm-checkbook { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; height: auto; min-height: 0; }
    .ppc .ppc-mobile--roomy .pm-checkbook img { flex: 0 1 auto; width: 100%; height: auto; aspect-ratio: 3 / 2; min-height: 120px; max-height: none; object-fit: cover; }
    .ppc .ppc-mobile--roomy .pm-checkbook__log { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; margin: 0; padding: 4px 16px; overflow: hidden; border: 1px solid var(--ppc-edge); border-radius: var(--border-radius, 11px); background: var(--ppc-surface); list-style: none; }
    /* Rows share out what is left after the last whole one, so the list
       ends exactly at the card's foot. */
    .ppc .ppc-mobile .pm-checkbook__log > li { display: flex; flex: 1 0 auto; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.4; }
    .ppc .ppc-mobile .pm-checkbook__log > li + li { border-top: 1px solid var(--ppc-edge); }
    .ppc .ppc-mobile .pm-checkbook__log > li > i { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--ppc-sunken, #f7f5f2); color: var(--ppc-ink-soft); font-size: 13px; }
    .ppc .ppc-mobile .pm-checkbook__log > li:nth-child(3n + 1) > i { color: var(--invoice-paid, #2c7958); }
    .ppc .ppc-mobile .pm-checkbook__log > li > span { display: grid; flex: 1 1 auto; min-width: 0; color: var(--ppc-ink); font-weight: 600; }
    .ppc .ppc-mobile .pm-checkbook__log small { color: var(--ppc-ink-soft); font-size: 13px; font-weight: 400; }
    .ppc .ppc-mobile .pm-checkbook__log strong { color: var(--ppc-ink); font-weight: 600; }
    .ppc .ppc-mobile .pm-checkbook__log > li:nth-child(3n + 1) strong { color: var(--invoice-paid, #2c7958); }
    .ppc .ppc-mobile .pm-checkbook figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
    .ppc .ppc-mobile .pm-checkbook figcaption > span {
        display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px;
        border: 1px solid var(--ppc-edge); border-radius: var(--border-radius, 11px); background: var(--ppc-surface);
    }
    .ppc .ppc-mobile .pm-checkbook figcaption > span > i { margin: 0; font-size: 20px; }
    .ppc .ppc-mobile .pm-checkbook figcaption strong { font-size: 17px; }
    /* The status under each action changes as the story plays ("Writing
       check #1043...", "Customer check recorded"); two lines are kept for it
       so the cards never change height and push the list down. */
    .ppc .ppc-mobile .pm-checkbook figcaption small { display: block; height: 2.8em; font-size: 14px; line-height: 1.4; }
}
@media screen and (max-width: 739px) and (min-height: 500px) and (max-height: 700px) {
    .ppc .ppc-mobile .pm-checkbook figcaption > span { flex-direction: row; gap: 12px; padding: 12px; }
    /* Beside its icon the status is narrower: three lines are kept for it. */
    .ppc .ppc-mobile .pm-checkbook figcaption small { height: 4.2em; }
    .ppc .ppc-mobile .pm-checkbook figcaption strong { font-size: 16px; }
}

/* The examples below size one elastic part as a base plus the measured
   difference (--mobile-room-delta), landing exactly on the slide's room. */
@media screen and (max-width: 739px) and (min-height: 500px) {
    /* AI Workforce: the roster at reading size, then Copilot Chat taking the
       remaining height with its composer at the foot. */
    .ppc .ppc-mobile .aw-workspace .aw-agent h4 { font-size: 15px; }
    .ppc .ppc-mobile .aw-workspace .aw-copilot__question { font-size: 15px; }
    .ppc .ppc-mobile .aw-copilot__answer li { font-size: 14px; }
    .ppc .ppc-mobile--roomy .aw-workspace { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .aw-workspace__body { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .aw-copilot { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .aw-copilot__conversation { flex: 1 1 auto; }

    /* Automations: the route's height follows the room; its stops are placed
       in percentages and its lines are redrawn on resize. */
    /* Each density gives way only so far, so a short phone moves on to the
       smaller stops rather than crowding the full-size ones. */
    .ppc .ppc-mobile .auto-route__map { --auto-map-base: 480px; --auto-map-min: 420px; }
    .ppc .ppc-mobile--compact .auto-route__map { --auto-map-base: 420px; --auto-map-min: 360px; }
    .ppc .ppc-mobile--short .auto-route__map { --auto-map-base: 380px; --auto-map-min: 290px; }
    .ppc .ppc-mobile .auto-route__map { height: var(--auto-map-base); }
    /* The route is one automation in its own card, named at the top on a
       tall screen; the map takes the card's whole height, so the stops
       spread to fill it. A short phone keeps the bare route. */
    .ppc .ppc-mobile .auto-route { max-width: none; }
    @media (min-height: 701px) {
        .ppc .ppc-mobile .auto-route { padding: 16px 16px 24px; border: 1px solid var(--ppc-edge); border-radius: var(--border-radius, 11px); background: var(--ppc-surface); box-shadow: 0 16px 32px -24px rgb(17 34 51 / 35%); }
    }
    @media (min-height: 900px) {
        .ppc .ppc-mobile .auto-route { padding-top: 0; }
        .ppc .ppc-mobile .auto-route__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 16px; padding: 12px 16px; border-bottom: 1px solid var(--ppc-edge); }
    }
    .ppc .ppc-mobile .auto-route__head > span { display: flex; align-items: center; gap: 8px; color: var(--route-ink); font-size: 15px; font-weight: 600; }
    .ppc .ppc-mobile .auto-route__head > span > i { color: var(--route-amber); font-size: 14px; }
    .ppc .ppc-mobile .auto-route__head > small { display: flex; align-items: center; gap: 6px; color: var(--route-green); font-size: 13px; font-weight: 600; }
    .ppc .ppc-mobile .auto-route__head > small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .ppc .ppc-mobile--roomy .auto-route { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    .ppc .ppc-mobile--roomy .auto-route__map { flex: 1 1 0; height: auto; min-height: var(--auto-map-min); }
    /* One structure for the route: six steps at an even pitch down the map;
       the main column's icons share one size and their labels one left
       edge; the waiting branch's icons share a smaller size at the right,
       their labels one right edge. The connectors follow the icons. */
    .ppc .ppc-panel .ppc-mobile .auto-route__map { --auto-icon: 64px; --auto-branch: 56px; }
    .ppc .ppc-panel .ppc-mobile--compact .auto-route__map { --auto-icon: 56px; --auto-branch: 48px; }
    .ppc .ppc-panel .ppc-mobile--short .auto-route__map { --auto-icon: 48px; --auto-branch: 44px; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop { left: calc(var(--auto-icon) / 2); width: var(--auto-icon); height: var(--auto-icon); }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--lead { top: 8.33%; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--welcome { top: 25%; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--condition { top: 41.67%; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--wait { top: 58.33%; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--followup { top: 75%; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--booked { top: 91.67%; }
    .ppc .ppc-panel .ppc-mobile :is(.auto-route__stop--wait, .auto-route__stop--followup) { left: calc(100% - var(--auto-branch) / 2 - 4px); width: var(--auto-branch); height: var(--auto-branch); }
    .ppc .ppc-panel .ppc-mobile .auto-route__label { top: 50%; bottom: auto; left: calc(100% + 16px); right: auto; width: max-content; max-width: 220px; gap: 2px; text-align: left; transform: translateY(-50%); }
    .ppc .ppc-panel .ppc-mobile :is(.auto-route__stop--wait, .auto-route__stop--followup) .auto-route__label { left: auto; right: calc(100% + 16px); max-width: 180px; text-align: right; }
    .ppc .ppc-panel .ppc-mobile .auto-route__label strong { font-size: 18px; line-height: 1.3; }
    .ppc .ppc-panel .ppc-mobile .auto-route__stop--booked strong { font-size: 22px; }
    .ppc .ppc-panel .ppc-mobile .auto-route__label > span { font-size: 14px; line-height: 1.4; }
    .ppc .ppc-panel .ppc-mobile .auto-route__label > .auto-route__role { font-size: 12px; line-height: 1.3; letter-spacing: .08em; }
    /* "Not yet" names the branch where it leaves the column, above its line. */
    .ppc .ppc-panel .ppc-mobile .auto-route__branch--later { top: calc(41.67% + var(--auto-icon) / 2 - 10px); left: auto; right: calc(var(--auto-branch) / 2 + 16px); font-size: 13px; line-height: 1.3; }

    /* Job Site Camera: the before and after photos take the height. */
    .ppc .ppc-mobile .pm-shots__pair img { height: 180px; }
    .ppc .ppc-mobile--roomy .pm-shots__pair img { height: clamp(110px, calc(180px + var(--mobile-room-delta, 0px)), 420px); }
    .ppc .ppc-mobile--roomy .pm-shots { padding: 18px; }
    .ppc .ppc-mobile--roomy .pm-shots > .pm-shots__pair { margin-block: 16px 0; }
    /* A tall screen adds the crew's note on the work, instead of stretching
       the photos past a natural shape. */
    .ppc .ppc-mobile--roomy .pm-visual--job-site-camera { container: shots-room / size; }
    .ppc .ppc-mobile .pm-shots__note { gap: 12px; margin: 16px 0 0; padding: 12px; border-radius: var(--border-radius, 11px); background: var(--ppc-sunken, #f4f2ec); }
    .ppc .ppc-mobile .pm-shots__note > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--ppc-ink, #19364b); color: var(--ppc-surface, #fff); font-size: 12px; font-weight: 600; }
    .ppc .ppc-mobile .pm-shots__note > p { margin: 0; color: var(--ppc-ink); font-size: 14px; line-height: 1.45; }
    .ppc .ppc-mobile .pm-shots__note small { display: block; color: var(--ppc-ink-soft); font-size: 13px; }
    @container shots-room (min-height: 700px) {
        .ppc .ppc-mobile--roomy .pm-shots__note { display: flex; }
        .ppc .ppc-mobile--roomy .pm-shots__pair img { height: clamp(110px, calc(180px + var(--mobile-room-delta, 0px) - 104px), 480px); }
    }
    /* Both photos share one corner: each figure clips its photo, which the
       story zooms gently inside it, and its caption to the same radius. */
    .ppc .ppc-mobile .pm-shots__pair figure { overflow: hidden; border-radius: var(--border-radius-half, 5px); }
    .ppc .ppc-mobile .pm-shots__pair img,
    .ppc .ppc-mobile .pm-shots__pair figcaption { border-radius: var(--border-radius-half, 5px); }
    /* As on larger screens, the crew member who took the photos stands in
       front of the record, at its lower right, beside the picture of the
       job's photos collecting into its record. The photos take whatever
       height is left. A short phone keeps the record alone. */
    .ppc .pm-camera__foot { display: none; }
    @media (min-height: 701px) {
        .ppc .ppc-mobile--roomy .pm-camera { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
        .ppc .ppc-mobile--roomy .pm-camera > .pm-shots { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
        .ppc .ppc-mobile--roomy .pm-shots > .pm-shots__pair { flex: 1 1 0; min-height: 96px; }
        .ppc .ppc-mobile--roomy .pm-shots__pair figure { display: flex; flex-direction: column; min-height: 0; margin: 0; }
        .ppc .ppc-panel .ppc-mobile--roomy .pm-shots__pair img { flex: 1 1 0; height: auto; min-height: 0; }
        .ppc .ppc-mobile .pm-camera__foot { display: flex; align-items: center; gap: 16px; }
        .ppc .ppc-mobile .pm-camera__worker { position: relative; z-index: 2; flex: 0 0 38%; width: 38%; max-width: 200px; height: auto; margin: -56px 8px 0 auto; filter: drop-shadow(0 16px 14px rgb(17 34 51 / 18%)); }
        .ppc .ppc-mobile .pm-camera__history { flex: 0 0 72%; min-width: 0; height: auto; margin: 4px -20% 0 -4%; mix-blend-mode: multiply; }
    }

    /* Client Portal: the portal window takes the height; its overview and
       its list of updates share whatever is spare. */
    .ppc .ppc-mobile--roomy .client-portal-showcase,
    .ppc .ppc-mobile--roomy .portal-preview { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
    /* The window clips, so it may not shrink below its content: an example
       that does not fit must show as overflow to the fit routine. */
    .ppc .ppc-mobile--roomy .portal-window { flex: 1 0 auto; display: flex; flex-direction: column; }
    .ppc .ppc-mobile--roomy .portal-overview { flex: .4 1 auto; }
    .ppc .ppc-mobile--roomy .portal-updates { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
    .ppc .ppc-mobile .portal-updates--more { display: none; }
    /* As on larger screens, Jane stands beside her portal, whole, on the
       soft arch: the portal steps right to make room and she stands at its
       left edge, a little in front of it. */
    @media (min-height: 701px) {
        .ppc .ppc-mobile .client-portal-showcase { position: relative; }
        .ppc .ppc-panel .ppc-mobile .portal-client { position: absolute; z-index: 3; inset: auto auto 40px -2%; width: 30%; height: auto; overflow: visible; mask-image: none; }
        /* The arch is see-through where it passes over the portal, so the
           update icons beneath it stay visible. */
        .ppc .ppc-mobile .portal-client::before { display: block; inset: 30% -12% 2% -30%; border-radius: 999px 999px var(--border-radius-double, 22px) var(--border-radius-double, 22px); opacity: .55; }
        .ppc .ppc-mobile .portal-client img { width: 100%; height: auto; }
        .ppc .ppc-mobile .portal-preview { margin-left: 21%; }
        .ppc .ppc-mobile .portal-overview,
        .ppc .ppc-mobile--compact .portal-overview { grid-template-columns: minmax(0, 1fr); min-height: 0; }
        .ppc .ppc-mobile--roomy .portal-overview { flex: none; }
        .ppc .ppc-mobile .portal-window__footer { display: flex; }
        /* Below the two updates the story plays, further updates fill the
           window: as many as fit whole, sharing out the rest of the height
           (data-fit-trim). */
        .ppc .ppc-mobile--roomy .portal-updates { flex: 1 0 auto; justify-content: space-evenly; }
        .ppc .ppc-mobile--roomy .portal-updates--more { display: flex; flex: 1000 1 0; min-height: 0; padding-top: 0; overflow: hidden; }
        .ppc .ppc-mobile--roomy .portal-updates--more > .portal-update { flex: 1 0 auto; align-content: center; border-top: 1px solid var(--portal-edge); }
        .ppc .ppc-mobile .portal-update__when { align-self: start; color: var(--ppc-ink-soft); font-size: 13px; }
    }
    @media (min-height: 701px) and (max-width: 459px) {
        .ppc .ppc-mobile .portal-window__label { display: none; }
    }
    /* Beside Jane a narrow portal puts each status under its update. */
    @media (min-height: 701px) and (max-width: 419px) {
        .ppc .ppc-mobile .portal-update { grid-template-columns: 28px minmax(0, 1fr); row-gap: 4px; }
        .ppc .ppc-mobile .portal-update__icon { width: 28px; }
        .ppc .ppc-mobile .portal-update__status,
        .ppc .ppc-mobile .portal-update__when { grid-column: 2; justify-self: start; }
        .ppc .ppc-mobile .portal-window__label { display: none; }
    }

    /* Invoices: the invoice takes the height, its sections spaced through
       it. */
    .ppc .ppc-mobile--roomy .invoice-showcase { flex: 1 1 0; display: flex; flex-direction: column; height: auto; min-height: 0; }
    .ppc .ppc-mobile--roomy .invoice-document { flex: 1 0 auto; display: flex; flex-direction: column; }
    .ppc .ppc-mobile--roomy .invoice-paper { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
    /* The invoice and the customer's payment as two layered sheets: the
       invoice centred, the payment on top of its head, set to the right and
       reaching past the invoice's edge; the invoice leaves that room blank. */
    .ppc .ppc-mobile .invoice-showcase { align-items: stretch; gap: 0; }
    /* The invoice is last, so its tilted back sheet stays within its foot. */
    .ppc .ppc-mobile .invoice-document { margin-inline: 12px; }
    .ppc .ppc-mobile .invoice-document::before { inset: 8px 8px 6px; }
    .ppc .ppc-mobile .invoice-paper { padding-top: 56px; }
    .ppc .ppc-mobile .invoice-payment { position: relative; z-index: 1; order: -1; margin: 0 0 -40px 36px; }
    .ppc .ppc-mobile .invoice-phone { box-shadow: 0 20px 36px -20px rgb(22 57 43 / 45%), 0 2px 4px rgb(22 57 43 / 8%); }
    .ppc .ppc-mobile--short .invoice-paper { padding-top: 32px; }
    .ppc .ppc-mobile--short .invoice-payment { margin-bottom: -24px; }
    /* A tall screen has room for the composition of larger screens: the
       paper invoice with the customer's phone standing in front of its foot.
       The phone starts below the total, beside the stamp and the sent note,
       and takes the rest of the height at a phone's proportions, so no
       amount is ever covered. */
    @container invoice (min-height: 820px) {
        /* The paper runs on behind the phone to near the foot, its stamp,
           sent note and thanks at the bottom left beside the phone. */
        .ppc .ppc-mobile--roomy .invoice-document { --invoice-foot: max(120px, calc(100cqh - 500px)); flex: 0 0 auto; margin: 0 0 calc(32px - var(--invoice-foot)); }
        .ppc .ppc-mobile--roomy .invoice-paper { flex: 0 0 auto; display: block; padding-bottom: var(--invoice-foot); }
        .ppc .ppc-mobile .invoice-paper__closing { position: absolute; left: 0; bottom: 52px; margin: 0; padding-left: inherit; }
        .ppc .ppc-mobile .invoice-paper__thanks { position: absolute; left: 0; bottom: 20px; margin: 0; padding-left: inherit; }
        .ppc .ppc-mobile .invoice-paid-stamp { margin: 0 0 4px 4px; padding: 4px 16px; font-size: 24px; }
        .ppc .ppc-mobile .invoice-paper { padding-top: 18px; }
        .ppc .ppc-mobile .invoice-payment { order: 0; flex: 1 1 0; display: flex; justify-content: flex-end; min-height: 0; margin: 0; padding: 0; container: invoice-phone / size; }
        .ppc .ppc-mobile .invoice-phone { display: flex; flex-direction: column; width: min(52cqw, calc(100cqh / 2.05)); height: 100cqh; padding: 8px 14px 10px; border: 6px solid var(--invoice-device, #1c2f3e); border-radius: calc(var(--border-radius, 11px) * 3); background: var(--ppc-surface, #fff); box-shadow: 0 0 0 1px var(--invoice-device-edge, #85929a), 0 24px 36px -18px rgb(24 42 55 / 45%); }
        .ppc .ppc-mobile .invoice-phone__hardware { display: flex; min-height: 14px; font-size: 12px; }
        .ppc .ppc-mobile .invoice-phone__island { width: 34%; height: 14px; }
        .ppc .ppc-mobile .invoice-phone__brand { display: flex; margin: 20px 0 16px; font-size: 13px; white-space: nowrap; }
        .ppc .ppc-mobile .invoice-payment__success { display: grid; justify-items: center; gap: 12px; text-align: center; }
        .ppc .ppc-mobile .invoice-payment__check { flex: none; width: 44px; height: 44px; border: 6px solid var(--invoice-check-ring, #edf6f0); font-size: 18px; }
        .ppc .ppc-mobile .invoice-payment__success h4 { font-size: clamp(15px, 9cqw, 18px); line-height: 1.25; white-space: nowrap; }
        .ppc .ppc-mobile .invoice-payment__success p { margin-top: 4px; font-size: 14px; }
        .ppc .ppc-mobile .invoice-payment__amount { justify-content: center; gap: 4px; margin: 16px 0 0; text-align: center; }
        .ppc .ppc-mobile .invoice-payment__amount > strong { font-size: 28px; }
        .ppc .ppc-mobile .invoice-payment__amount > span { font-size: 13px; }
        .ppc .ppc-mobile .invoice-payment__details { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
        .ppc .ppc-mobile .invoice-payment__details > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .ppc .ppc-mobile .invoice-payment__details > div > span { display: block; font-size: 13px; }
        .ppc .ppc-mobile .invoice-payment__details strong { font-size: 14px; white-space: nowrap; }
        .ppc .ppc-mobile .invoice-phone__home { display: block; width: 36%; height: 4px; margin: 12px auto 0; }
    }
    /* A shorter phone keeps the payment itself: the result, the amount, the
       method and the status. */
    @container invoice-phone (max-height: 470px) {
        .ppc .ppc-mobile .invoice-phone__brand { margin: 12px 0 8px; }
        .ppc .ppc-mobile .invoice-payment__success { gap: 8px; }
        .ppc .ppc-mobile .invoice-payment__check { width: 36px; height: 36px; border-width: 5px; font-size: 15px; }
        .ppc .ppc-mobile .invoice-payment__success p,
        .ppc .ppc-mobile .invoice-payment__details > div > span { display: none; }
        .ppc .ppc-mobile .invoice-payment__amount { margin-top: 12px; }
        .ppc .ppc-mobile .invoice-payment__amount > strong { font-size: 24px; }
    }
    @container invoice-phone (max-height: 400px) {
        .ppc .ppc-mobile .invoice-phone__brand { display: none; }
        .ppc .ppc-mobile .invoice-phone__hardware { margin-bottom: 16px; }
    }
    /* A tall screen shows the whole invoice, its dates and the thank-you
       line, instead of stretching the gaps. */
    .ppc .ppc-mobile--roomy .invoice-showcase { container: invoice / size; }
    @container invoice (min-height: 650px) {
        .ppc .ppc-mobile .invoice-paper__dates { display: grid; margin-top: 12px; }
    }
    @container invoice (min-height: 690px) {
        .ppc .ppc-mobile .invoice-paper__thanks { display: block; margin-top: 12px; font-size: 14px; color: var(--invoice-muted); }
    }

    /* Websites: the site's hero takes the height. */
    .ppc .ppc-mobile .web-page__hero { height: 220px; }
    .ppc .ppc-mobile--roomy .web-page__hero { height: clamp(140px, calc(220px + var(--mobile-room-delta, 0px)), 560px); }
    .ppc .ppc-mobile .web-platform { margin-top: 16px; gap: 8px; }
    .ppc .ppc-mobile .web-platform__wp strong { font-size: 16px; }
    .ppc .ppc-mobile .web-platform__wp small,
    .ppc .ppc-mobile .web-platform__tools { font-size: 14px; }
    /* As on larger screens, the same site on a phone stands in front of the
       browser's lower right and reaches down beside the platform note; the
       services strip and the note leave it that corner. */
    @media (min-height: 701px) {
        /* A slim, even bezel: the screen's corners follow the frame's, and
           the phone is its own compositing layer so its slow float moves
           smoothly instead of stepping a pixel at a time. */
        .ppc .ppc-mobile .web-phone { display: block; z-index: 2; right: 0; bottom: -72px; width: 32%; max-width: 160px; padding: 4px; border-width: 1px; border-radius: calc(var(--border-radius, 11px) * 2); will-change: transform; backface-visibility: hidden; }
        .ppc .ppc-mobile .web-phone__island { top: 4px; width: 30%; height: 10px; left: 35%; }
        .ppc .ppc-mobile .web-phone__brand { padding: 16px 10px 10px; border-radius: calc(var(--border-radius, 11px) * 2 - 5px) calc(var(--border-radius, 11px) * 2 - 5px) 0 0; font-size: 14px; }
        .ppc .ppc-mobile .web-phone__hero { height: 40cqw; max-height: 200px; }
        .ppc .ppc-mobile .web-phone__hero > div { padding: 12px 10px; gap: 8px; }
        .ppc .ppc-mobile .web-phone__hero strong { font-size: clamp(18px, 5.4cqw, 24px); }
        .ppc .ppc-mobile .web-phone__footer { padding: 10px 6px 16px; border-radius: 0 0 calc(var(--border-radius, 11px) * 2 - 5px) calc(var(--border-radius, 11px) * 2 - 5px); font-size: 12px; }
        .ppc .ppc-mobile .web-phone__home { bottom: 9px; }
        .ppc .ppc-mobile .web-page__services { justify-content: flex-start; gap: 12px; padding-right: calc(min(32%, 160px) + 8px); }
        .ppc .ppc-mobile .web-platform { min-height: 72px; padding-right: calc(min(32%, 160px) + 16px); }
        .ppc .ppc-mobile .web-platform__tools { flex-wrap: wrap; gap: 4px 16px; padding-left: 40px; }
    }

    /* Insights: the revenue chart takes the height. The description stays. */
    .ppc .ppc-panel[data-ppc-slug="insights"] .ppc-mobile__desc { display: block; }
    .ppc .ppc-mobile .insight-workspace { --insight-chart-height: 116px; }
    .ppc .ppc-mobile--roomy .insight-workspace { --insight-chart-height: clamp(64px, calc(116px + var(--mobile-room-delta, 0px)), 440px); }
}
@media screen and (max-width: 739px) and (min-height: 500px) and (max-height: 700px) {
    /* Short phones: the portal keeps the project, the next visit and both
       updates; the greeting and the privacy note give way. */
    .ppc .ppc-mobile .client-portal-showcase .portal-greeting,
    .ppc .ppc-mobile .client-portal-showcase .portal-privacy { display: none; }
    .ppc .ppc-mobile .portal-overview { min-height: 0; }
    .ppc .ppc-mobile .portal-window__brand { padding-block: 8px; }
    .ppc .ppc-mobile .portal-overview { padding-block: 8px; }
    .ppc .ppc-mobile .portal-next-visit { padding-block: 6px; }
    .ppc .ppc-mobile .portal-update { padding-block: 4px; }
    /* The client's photo ends above the progress steps, clear of "Complete". */
    .ppc .ppc-panel .ppc-mobile .portal-client { top: 56px; width: 70px; height: 88px; mask-image: none; }

    /* The job's title keeps one line, so the photos keep their height. */
    .ppc .ppc-mobile .pm-shots > strong { font-size: 16px; line-height: 1.35; }
    /* The last route stop is smaller here. */
    .ppc .ppc-mobile .auto-route { padding-bottom: 36px; }
    /* The reminder's note would sit on the route back to the booking. */
    .ppc .ppc-mobile--short .auto-route__stop--followup .auto-route__label > span:not(.auto-route__role) { display: none; }
    .ppc .ppc-mobile--short .auto-route__stop--followup .auto-route__label { width: 160px; }

    /* Websites: the description already names hosting, WordPress and SEO. */
    .ppc .ppc-mobile .web-platform__tools { display: none; }
    .ppc .ppc-mobile .web-platform { margin-top: 12px; }
    .ppc .ppc-mobile .web-page__services { padding-block: 12px; }

    /* Insights: a tighter dashboard frame keeps the chart a useful size. */
    .ppc .ppc-mobile .insight-toolbar { padding: 10px 12px; }
    .ppc .ppc-mobile .insight-body { padding: 12px; gap: 12px; }
    .ppc .ppc-mobile .insight-metric { padding: 8px; }
    .ppc .ppc-mobile .insight-chart__plot { margin-top: 8px; }
    .ppc .ppc-mobile .insight-analysis { gap: 12px; }
    .ppc .ppc-mobile .insight-sources { padding-top: 8px; }
    .ppc .ppc-mobile .insight-source p { display: none; }

    /* Invoices: the thank-you line and the reassurance give way. */
    .ppc .ppc-mobile .invoice-paper__thanks,
    .ppc .ppc-mobile .invoice-payment__success p { display: none; }
}