/* Shared reading sizes and responsive densities. The measured frame keeps the
   complete mobile composition within the space below the feature navigation. */
.ppc-mobile-frame { display: none; }
@media screen and (max-width: 1024px) {
    .ppc {
        --feature-title: 28px;
        --feature-body: 16px;
        --feature-detail: 14px;
        --feature-meta: 13px;
    }
    .ppc.ppc--pinned .ppc-panel,
    .ppc.ppc--pinned .ppc-panel + .ppc-panel {
        justify-content: center;
        overflow: hidden;
    }
    .ppc .ppc-panel:focus { outline: none; }
    body:has(.ppc--pinned.ppc--engaged) #backToTop { visibility: hidden; }
    .ppc-mobile-frame {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        max-width: 620px;
        margin: auto;
        overflow: clip;
    }
    .ppc .ppc-panel .ppc-mobile {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 22px 20px;
        gap: 18px;
        transform: scale(var(--mobile-fit-scale, 1));
        transform-origin: top center;
    }
    .ppc .ppc-mobile__copy { gap: 12px; }
    .ppc .ppc-mobile__kicker { font-size: var(--feature-meta); line-height: 1.4; letter-spacing: .06em; }
    .ppc .ppc-mobile h3 { font-size: var(--feature-title); line-height: 1.2; }
    .ppc .ppc-mobile .ppc-mobile__desc { font-size: var(--feature-body); line-height: 1.5; }
    .ppc .ppc-mobile .ppc-mobile__points { grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 4px; }
    .ppc .ppc-mobile .ppc-mobile__points li { font-size: 15px; line-height: 1.45; }
    .ppc .ppc-mobile__points i { font-size: 12px; }
    .ppc .pm-visual { font-size: var(--feature-body); line-height: 1.45; }
    .ppc .pm-card { padding: 20px; }
    .ppc .pm-card__head { padding-bottom: 16px; }
    .ppc .pm-line { flex-wrap: wrap; gap: 8px 12px; }
    .ppc .pm-meta, .ppc .pm-status { font-size: var(--feature-meta); line-height: 1.45; }
    .ppc .pm-event { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-top: 18px; }
    .ppc .pm-event p { margin-top: 5px; font-size: var(--feature-detail); line-height: 1.5; }
    .ppc .pm-visual .pm-note { padding-top: 16px; margin-top: 16px; font-size: var(--feature-detail); line-height: 1.5; }
    .ppc .pm-checkbook img { max-height: 320px; }
    .ppc .pm-checkbook figcaption { gap: 12px; margin-top: 18px; font-size: var(--feature-detail); }
    .ppc .pm-shots img { height: clamp(150px, 34vw, 220px); }
    .ppc .pm-shots figcaption { margin-top: 8px; font-size: var(--feature-detail); }
    .ppc .pm-shots .pm-meta { margin-top: 16px; }
    .ppc .pm-services { gap: 12px; padding-block: 22px; }
    .ppc .pm-services span { gap: 8px; font-size: var(--feature-detail); }
    .ppc .pm-services i { font-size: 24px; }
    .ppc .pm-site-health dt { font-size: var(--feature-meta); }
    .ppc .pm-site-health dd { font-size: 22px; }
    .ppc .pm-metrics { grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-top: 14px; }
    .ppc .pm-metrics dt { font-size: var(--feature-detail); }
    .ppc .pm-metrics dd { margin-top: 6px; font-size: 26px; }
    .ppc .pm-metrics > div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; }
    .ppc .pm-insights svg { height: 110px; margin-top: 18px; }
    .ppc .pm-chart-key { font-size: var(--feature-meta); }
    .ppc .pm-insights__sources { margin-block: 18px; font-size: var(--feature-detail); }
    .ppc .pm-insights__sources > span { gap: 5px; }
    .ppc .ppc-panel .ppc-mobile--compact { --feature-title: 26px; --feature-body: 15px; padding-block: 16px; gap: 14px; }
    .ppc .ppc-mobile--compact .ppc-mobile__copy { gap: 8px; }
    .ppc .ppc-mobile--compact .ppc-mobile__points { gap: 6px 10px; }
    .ppc .ppc-mobile--compact .ppc-mobile__points li { font-size: 14px; line-height: 1.35; }
    .ppc .ppc-mobile--compact .pm-card { padding: 14px; }
    .ppc .ppc-mobile--compact .pm-card__head { padding-bottom: 10px; }
    .ppc .ppc-mobile--compact .pm-event { padding-top: 12px; gap: 9px; }
    .ppc .ppc-mobile--compact .pm-checkbook img { max-height: 210px; }
    .ppc .ppc-mobile--compact .pm-shots img { height: 130px; }
    .ppc .ppc-mobile--compact .pm-services { padding-block: 14px; }
    .ppc .ppc-mobile--compact .pm-metrics { grid-template-columns: 1.2fr 1.2fr .6fr; gap: 10px; padding-top: 12px; }
    .ppc .ppc-mobile--compact .pm-metrics > div:last-child { grid-column: auto; display: block; }
    .ppc .ppc-mobile--compact .pm-metrics dt { font-size: 13px; }
    .ppc .ppc-mobile--compact .pm-metrics dd { font-size: 21px; }
    .ppc .ppc-mobile--compact .pm-insights svg { height: 80px; margin-top: 12px; }
    .ppc .ppc-mobile--compact .pm-insights__sources { margin-block: 12px; }
    .ppc .ppc-panel .ppc-mobile--short { --feature-title: 24px; --feature-body: 14px; padding-block: 10px; gap: 10px; }
    .ppc .ppc-mobile--short .ppc-mobile__copy { gap: 6px; }
    .ppc .ppc-mobile--short .ppc-mobile__points { gap: 4px 8px; }
    .ppc .ppc-mobile--short .ppc-mobile__points li { font-size: 13px; line-height: 1.3; }
    .ppc .ppc-mobile--short .pm-card { padding: 12px; }
    .ppc .ppc-mobile--short .pm-event { padding-top: 9px; }
    .ppc .ppc-mobile--short .pm-checkbook img { max-height: 145px; }
    .ppc .ppc-mobile--short .pm-checkbook figcaption { margin-top: 10px; }
    .ppc .ppc-mobile--short .pm-shots img { height: 105px; }
    .ppc .ppc-mobile--short .pm-services { padding-block: 10px; }
    .ppc .ppc-mobile--short .pm-insights svg { height: 65px; }
}
@media screen and (max-width: 360px) {
    .ppc .ppc-panel .ppc-mobile { padding-inline: 16px; }
    .ppc .pm-card { padding: 16px; }
    .ppc .pm-checkbook figcaption { flex-direction: column; align-items: center; }
    .ppc .pm-services { gap: 8px; }
    .ppc .pm-services span { font-size: var(--feature-meta); }
}
/* Use the extra width when a tablet or phone is held horizontally. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (max-height: 800px) {
    .ppc-mobile-frame { max-width: 1000px; }
    .ppc .ppc-panel .ppc-mobile {
        display: grid;
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
        align-items: center;
        max-width: none;
        gap: 24px;
        padding-inline: 24px;
    }
    .ppc .ppc-mobile .ppc-mobile__points { grid-template-columns: 1fr; }
    .ppc-mobile--landscape-fit .pm-visual { overflow: clip; }
    .ppc-mobile--landscape-fit .pm-visual > :first-child { transform: scale(var(--mobile-visual-fit-scale, 1)); transform-origin: top center; }
}
@media screen and (max-width: 1024px) and (max-height: 539px) and (prefers-reduced-motion: no-preference) {
    .ppc { --ppc-pinnable: 1; }
    .ppc--pinned .ppc-pin { position: sticky; top: var(--ppc-pin-top, 64px); display: grid; grid-template-rows: auto minmax(0, 1fr); }
    .ppc--pinned .ppc-stage { position: relative; min-height: 0; padding: 0; }
    .ppc--pinned .ppc-panel { position: absolute; inset: 0; align-items: center; border: 0; opacity: 0; visibility: hidden; }
    .ppc--pinned .ppc-panel.is-active { opacity: 1; visibility: visible; }
}