/* P: workflow first, then two concrete changes in the business. */
.hero-value{display:block;margin-top:10px;font-weight:300;font-size:1.12em}
.p-impact{background:#f7f7f7}
.p-change{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:40px 0}
.p-change+.p-change{border-top:1px solid #ddd;margin-top:32px;padding-top:64px}
.p-change-copy h3{font-size:clamp(24px,2.4vw,32px);line-height:1.65;margin:18px 0 22px}
.p-change-copy>p:not(.service-label){font-size:14px;line-height:1.95;color:#555}
.p-change-copy .p-payoff{margin-top:24px;color:#000!important;font-weight:700}
.p-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;text-align:center}
.p-before,.p-after{padding:22px 14px;border-radius:12px;background:#eee;display:flex;flex-direction:column;justify-content:center}
.p-after{background:white;border-top:3px solid var(--blue)}
.p-commerce .p-after{border-color:var(--red)}
.p-state{text-align:left;font-weight:700;font-size:11px;margin-bottom:16px}
.p-comparison p{font-size:13px;font-weight:700;min-height:52px;text-align:left}
.p-queue{display:flex;gap:5px;justify-content:center}
.p-queue span{font-size:10px;background:#fff;border:1px solid #ddd;border-radius:5px;padding:12px 5px;flex:1}
.p-after .p-queue span{border-color:var(--blue);color:var(--blue)}
.p-flow-arrow{font-size:21px;padding:8px;color:#777}
.p-expert,.p-ai{display:block;padding:12px 6px;border-radius:5px;font-size:12px;background:#ddd}
.p-ai{background:var(--blue);color:#fff}
.p-product{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 15px;font-weight:700}
.p-product img{width:70px;height:90px;object-fit:contain;background:#fff;border-radius:5px}
.p-comparison small,.p-sync{font-size:10px;line-height:1.7}
.p-sync{color:#000}
.p-integrations .integration-story{margin-top:0;padding-top:0;border-top:0}
@media(max-width:900px){.p-change{grid-template-columns:1fr;gap:28px}.p-change-copy{max-width:650px}.p-comparison{max-width:650px;width:100%}}
@media(max-width:480px){.p-before,.p-after{padding:16px 10px}.p-comparison{gap:8px}.p-product{flex-direction:column}.p-queue{gap:3px}.p-queue span{padding:10px 2px;font-size:9px}.p-comparison p{min-height:72px}.p-change{padding:16px 0}.p-change+.p-change{padding-top:40px}}

.wf-line .workflow-photo img{width:100%;height:100%;left:0;top:0;transform:none;object-fit:cover;object-position:center}

/* Generated explanatory illustrations, with accessible HTML labels. */
.p-change{grid-template-columns:.8fr 1.2fr;gap:36px}
.p-impact-visual{background:#fff;border-radius:12px;padding:20px 14px 12px;overflow:hidden}
.p-impact-visual>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}
.p-visual-labels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 8px 12px}
.p-visual-labels span{display:block;font-size:11px;font-weight:700;color:#666;margin-bottom:8px}
.p-visual-labels>div:last-child span{color:var(--impact-color)}
.p-visual-labels p{font-size:13px;line-height:1.7;font-weight:700}
@media(max-width:1000px){.p-change{grid-template-columns:1fr;gap:26px}.p-impact-visual{width:100%;max-width:760px}}
@media(max-width:480px){.p-impact-visual{padding:16px 4px 12px}.p-visual-labels{gap:12px}.p-visual-labels p{font-size:12px}}

/* P mobile audit: readable content, unobstructed navigation and fit-first image viewer. */
.impact-zoom{display:block;width:100%;padding:0;background:white;text-align:right;cursor:zoom-in}
.impact-zoom img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.impact-zoom-label{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;font-size:12px;font-weight:700}
.screen-fit-toggle{padding:8px 12px;min-height:44px;white-space:nowrap;background:#eee;border-radius:6px;font-size:12px;margin-left:auto}
#screen-dialog .screen-dialog-content img{min-width:0;max-width:100%;width:100%;height:auto}
#screen-dialog.detail-zoom .screen-dialog-content img{width:1400px;min-width:1400px;max-width:none}
@media(max-width:800px){
 .wf-line{grid-template-columns:1fr;gap:32px}
 .wf-line .wf-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 18px}
 .wf-line .workflow-picture{grid-column:1;grid-row:1/3;height:184px;margin:0}
 .wf-line .wf-card h3{grid-column:2;min-height:0;align-self:end;font-size:17px;line-height:1.6;margin:0 0 10px}
 .wf-line .wf-card p{grid-column:2;font-size:14px;line-height:1.8}
 .wf-line .wf-card:not(:last-child):after{content:'↓';left:48px;right:auto;top:auto;bottom:-29px}
 .field-page .review-switch{position:static;transform:none;left:auto;bottom:auto;margin:12px auto 24px;max-width:calc(100% - 32px);width:fit-content;display:flex;flex-wrap:wrap;padding:8px;box-shadow:none}
 .field-page .version-picker select{min-height:44px;font-size:12px;max-width:100%;min-width:0;flex:1}
 .review-index{min-height:44px;display:inline-flex;align-items:center}
 .field-page .quiet-link,.field-page .text-link{min-height:44px;align-items:center;font-size:13px}
 .menu-toggle{min-width:44px;min-height:44px}
 .js .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:600px){
 .field-hero .scan-headline{font-size:clamp(22px,6.9vw,29px)}
 .field-hero-visual .photo-window{aspect-ratio:1.7}
 .hero-agent small{font-size:10px;line-height:1.5;text-align:center}
 .hero-agent strong{font-size:12px}
 .field-actions{gap:12px;flex-wrap:wrap}
 .field-section{padding-block:48px}
 .field-bold .agent-panel h3{font-size:clamp(18px,5.1vw,22px);line-height:1.65}
 .agent-panel{padding:20px}
 .agent-panel>p,.use-case>p:not(.service-label),.enterprise-copy>p:not(.eyebrow),.partner-layout>div>p:not(.eyebrow):not(.detail-label){font-size:14px!important;line-height:1.9}
 .agent-example>figcaption,.section-note{font-size:11px}
 .integration-loop{grid-template-columns:1fr;gap:18px;padding:22px 18px}
 .loop-core{padding:16px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;text-align:left}
 .loop-core img{grid-row:1/3}.loop-core strong{font-size:16px}.loop-core>span{font-size:12px}
 .loop-exchange{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
 .loop-exchange>div{margin:0!important}.loop-exchange svg{display:none}
 .loop-exchange span,.loop-exchange small{font-size:11px}
 .loop-out:after{content:'↓';display:block;font-size:26px;color:var(--blue)}
 .loop-in:after{content:'↑';display:block;font-size:26px;color:var(--green)}
 .loop-systems>p{font-size:12px}.loop-systems>div{grid-template-columns:1fr 1fr}.loop-systems span{font-size:13px}
 .integration-loop>figcaption{font-size:11px;grid-column:1}
 .p-visual-labels p{font-size:13px}.p-visual-labels span{font-size:12px}
 .compact-pip .service-pip{right:12px;bottom:12px;min-width:88px}.service-pip span{font-size:10px}
 #screen-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 24px)}
 .screen-dialog-header{gap:8px;padding:8px}.screen-dialog-header p{font-size:12px;line-height:1.5;min-width:0}
 .screen-close,.dialog-close{min-width:44px;min-height:44px}
 #screen-dialog .screen-dialog-content{max-height:calc(100dvh - 180px)}
 .screen-dialog-note{font-size:11px}.screen-fit-toggle{font-size:11px;padding:8px}
}
@media(max-width:359px){.wf-line .wf-card{grid-template-columns:92px minmax(0,1fr);gap:0 12px}.wf-line .wf-card h3{font-size:16px}.wf-line .wf-card p{font-size:13px}.wf-line .wf-card:after{left:38px!important}}

/* P footer: navigation follows the header and the eight-color brand palette. */
.field-page .footer-links{flex-wrap:wrap;justify-content:flex-end;gap:12px 24px}
.footer-company{display:flex;align-items:center;gap:18px}
.footer-company a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-palette{display:flex;gap:8px}
.footer-palette i{display:block;width:7px;height:7px;border-radius:50%;flex:none}
@media(max-width:800px){.field-page .footer-main{flex-wrap:wrap}.field-page .footer-links{justify-content:flex-start}.footer-links a,.footer-company a{display:inline-flex;align-items:center;min-height:44px}.footer-bottom{flex-wrap:wrap}}

/* Diagram colors from the brand palette. */
.loop-out{color:#000000}
.loop-out svg{stroke:#FF009F}
.loop-out:after{color:#FF009F}

.agent-icon svg{display:block;width:24px;height:24px;flex:none}

.site-header .header-brand-name{position:relative;display:block}
.site-header .header-brand-credit{position:absolute;right:0;top:100%;margin-top:-2px;font-size:10px;line-height:1.2;font-weight:400;letter-spacing:0;white-space:nowrap}