/* One quiet action row: label / position on the left, playback and information on the right. */
body.visitor-flow #main .media-action-row{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;min-height:44px;height:auto;width:min(620px,calc(100vw - 48px));margin:8px auto 0;padding:0;color:#65736b}
body.visitor-flow #main .media-action-row :is(button,summary){min-height:44px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit}
body.visitor-flow #main .media-action-row :is(.city-toggle,.portfolio-auto,.portfolio-info summary){width:44px;min-width:44px;height:44px;padding:13px;border-radius:0;display:grid;place-items:center}
body.visitor-flow #main .media-action-row :is(.city-toggle,.portfolio-auto) svg{width:18px;height:18px}
body.visitor-flow #main .media-action-row :is(.city-app-link,.media-text-action){flex:1;min-width:0;width:auto;padding:8px 2px;font-size:clamp(10px,2.7vw,12px);line-height:1.4;text-align:left;white-space:nowrap}
body.visitor-flow #main .city-app-link svg{display:none}
body.visitor-flow #main .city-app-link{justify-content:flex-start}
body.visitor-flow #main .city-media-tools>.city-media-info{order:3}
body.visitor-flow #main .portfolio-info summary{font-size:11px;list-style:none}
body.visitor-flow #main .portfolio-info summary:before,body.visitor-flow #main .portfolio-info summary:after{content:none}
body.visitor-flow #main .portfolio-info summary>span{display:grid;place-items:center;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font:italic 11px/1 Georgia,serif}
body.visitor-flow #main [data-portfolio-count]{flex:none;min-width:32px;font-size:11px;font-variant-numeric:tabular-nums}
body.visitor-flow #main .portfolio-navigation{min-height:0;height:0}
body.visitor-flow #main .portfolio-navigation button{top:calc(28.125vw + 33px)}
body.visitor-flow #main .property-detail>summary[hidden]{display:none}
body.visitor-flow #main .proof-action-row{width:min(530px,calc(100vw - 40px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:8px 0 0;justify-content:space-between;color:#a5b0a9}
body.visitor-flow #main .proof-action-row :is(.proof-controls,.proof-gallery-tools){display:contents}
body.visitor-flow #main .proof-action-row .proof-counter{position:static;transform:none;order:0;font-size:10px;white-space:nowrap;min-width:32px}
body.visitor-flow #main .proof-action-row .proof-gallery-tools button{order:1;width:auto;min-width:0;padding:8px 3px;font-size:clamp(10px,2.65vw,11px);white-space:nowrap}
body.visitor-flow #main .proof-action-row [data-proof-auto]{order:2;flex:0 0 44px}
body.visitor-flow #main .proof-action-row .phone-media-info{order:3;flex:0 0 44px}
body.visitor-flow #main .proof-side-arrow{border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#9caaa1}
body.visitor-flow #main .proof-side-arrow svg{width:16px;height:16px;stroke-width:1.4}
body.visitor-flow #main :is(.phone-video-toggle,.gm-play,.partnerfilm-control){border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.visitor-flow #main .partnerfilm-control{width:44px;height:44px}
/* Real app symbols, a fine selected accent and tactile feedback; no extra animation loop. */
body.visitor-flow #ecosystem .app-tabs{gap:10px}
body.visitor-flow #ecosystem .app-tabs button{position:relative;background:linear-gradient(150deg,#fff,#f8faf9);border:1px solid #e6ebe8;border-radius:18px;color:#66756d;box-shadow:0 2px 5px -3px #14271b18;transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .2s}
body.visitor-flow #ecosystem .app-tabs button svg{width:23px;height:23px;stroke-width:1.55;transition:transform .25s}
body.visitor-flow #ecosystem .app-tabs button[aria-selected=true]{background:linear-gradient(145deg,#fff,#f1f7f4);border-color:#b9d4c6;color:#17654a;box-shadow:inset 0 1px 0 #fff,0 4px 12px -8px #164a3245}
body.visitor-flow #ecosystem .app-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:6px;left:calc(50% - 7px);width:14px;height:2px;border-radius:2px;background:#2c7c5b}
@media(hover:hover){body.visitor-flow #ecosystem .app-tabs button:hover{border-color:#bdd1c5;transform:translateY(-1px)}}
body.visitor-flow #ecosystem .app-tabs button:active{transform:scale(.98)}
/* Content-sized captions: the related process follows the actual text, never a reserved blank area. */
body.visitor-flow #ecosystem .app-description{min-height:0}
body.visitor-flow #ecosystem .app-story>.process-disclosure{width:100%;margin:12px 0 0}
body.visitor-flow #ecosystem .app-story>.process-disclosure>summary{font-size:12px;min-height:44px;padding-block:6px}
@media(prefers-reduced-motion:reduce){body.visitor-flow #ecosystem .app-tabs button,body.visitor-flow #ecosystem .app-tabs button svg{transition:none;transform:none}}
body.visitor-flow #main [data-gallery-stage]{grid-template-columns:minmax(0,1fr)}
body.visitor-flow #main .proof-action-row{left:auto;transform:none;justify-self:center}

/* Captions belong to the same baseline as their playback/info controls. */
body.visitor-flow #main .caption-action-row{width:min(530px,calc(100vw - 40px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:8px 0 0;text-align:left;white-space:nowrap;justify-content:flex-end;overflow:visible}
body.visitor-flow #main .caption-action-row .media-caption-label{flex:1;min-width:0;order:0;font-size:clamp(9.5px,2.65vw,11px);line-height:1.4;letter-spacing:-.01em}
body.visitor-flow #main .caption-action-row .phone-video-toggle{order:1;flex:0 0 44px;width:44px;height:44px;padding:0;margin:0}
body.visitor-flow #main .caption-action-row .phone-media-info{order:2;flex:0 0 44px;width:44px;margin:0}
body.visitor-flow #main .caption-action-row .phone-media-info summary{width:44px;height:44px;padding:0}

/* Compact, static explanations: figures and relationships first, details below. */
.visitor-flow .info-visual{display:grid;gap:5px;margin:12px 0;padding:13px 10px;border-radius:12px;background:#f0f5f2;color:#314b3e;text-align:center;line-height:1.45}
.visitor-flow .info-step{display:block;min-width:0}
.visitor-flow .info-step strong{display:block;font-size:14px;line-height:1.4;color:#1f6f57;font-weight:600}
.visitor-flow .info-step small{display:block;margin-top:3px;font-size:10px;line-height:1.5;color:#66746c}
.visitor-flow .info-arrow{display:block;color:#87998c;font-size:12px;line-height:1}
.visitor-flow .info-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.visitor-flow .info-chips>span{padding:4px 8px;background:#f0f5f2;color:#315841;border-radius:7px;font-size:10px;line-height:1.5}
.visitor-flow .info-metrics{display:grid;gap:8px;margin:12px 0}
.visitor-flow .info-metrics>span{display:grid;gap:3px;padding:10px 12px;background:#f0f5f2;border-radius:10px;line-height:1.4}
.visitor-flow .info-metrics small{font-size:10px;color:#66746c}
.visitor-flow .info-metrics strong{font-size:13px;color:#1f6f57;font-weight:600}
.visitor-flow .info-metrics>span>span{font-size:12px;color:#314b3e;font-variant-numeric:tabular-nums}
.visitor-flow .info-note{display:block;margin-top:12px;color:inherit;font-size:11px;line-height:1.6}
.visitor-flow .phone-media-info>p{max-height:min(560px,65svh);overflow-y:auto;overscroll-behavior:contain}
.visitor-flow .dark-block .journey-info .info-visual{background:#ffffff0c;color:#c9d8cf}
.visitor-flow .dark-block .journey-info .info-step strong{color:#9ac9b5}
@media(max-width:820px){
 body.visitor-flow #main .phone-media-info>p{position:fixed;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 40px));max-height:calc(100svh - 180px);z-index:90;margin:0;border:0}
}

.visitor-flow .phone-media-info>p[popover]::backdrop{background:transparent;pointer-events:none}