/* A work scene and a compact, usable product sample share the stage. */
.workflow-with-photos{padding-top:80px;padding-bottom:80px}
.workflow-with-photos .section-top{margin-bottom:34px}
.workflow-with-photos .app-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:26px}
.workflow-with-photos .app-tabs button{padding:17px 13px;border:1px solid #65869455;border-radius:3px;grid-template-columns:22px 1fr;gap:3px 6px}
.workflow-with-photos .app-tabs strong{font-size:14px}
.workflow-with-photos .app-tabs small{font-size:10px}
.workflow-with-photos .app-tabs button[aria-pressed=true]{border-left-width:3px}
.workflow-with-photos .app-playground{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:24px;max-width:1110px;margin-inline:auto;align-items:stretch}
.workflow-context{margin:0;position:relative;min-width:0;overflow:hidden;border-radius:5px;background:#23323a;color:#fff;min-height:510px}
.workflow-context>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:49% center}
.workflow-context:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07151d33 0%,transparent 35%,#07151d4d 55%,#07151ded 100%);pointer-events:none}
.workflow-context[data-context=expense]>img{object-position:39% center}
.workflow-context[data-context=booking]>img{object-position:56% center}
.workflow-photo-label{position:absolute;z-index:1;top:22px;left:25px;right:25px;font:9px/1.5 monospace;letter-spacing:1.2px;display:flex;justify-content:space-between;align-items:center;color:#fff;text-shadow:0 1px 8px #0008}
.workflow-photo-label b{font:italic 38px/1 Georgia,serif;letter-spacing:-2px}
.workflow-context figcaption{position:absolute;z-index:1;left:28px;right:28px;bottom:27px}
.workflow-context figcaption>span{font:8px/1.6 monospace;letter-spacing:1.4px;color:#d0e8eb}
.workflow-context figcaption h3{font-size:clamp(22px,2.15vw,32px);line-height:1.55;letter-spacing:-.04em;margin:12px 0;font-weight:500;text-wrap:balance}
.workflow-context figcaption p{font-size:12px;line-height:1.9;color:#e2ebee;max-width:320px}
.workflow-context figcaption small{font-size:9px;color:#b5c8d2;display:block;margin-top:20px}
.workflow-with-photos .app-demo-screen{width:100%;max-width:660px;justify-self:end;min-height:0;border-radius:5px;box-shadow:0 16px 40px #0002}
.workflow-with-photos .screen-top{padding:12px 20px;font-size:8px}
.workflow-with-photos #app-demo-content{min-height:0;padding:24px}
.workflow-with-photos .wf-brand-row{margin-bottom:23px}
.workflow-with-photos .wf-brand-row>strong{font-size:31px}
.workflow-with-photos .wf-brand-row>span{font-size:7px;letter-spacing:.7px}
.workflow-with-photos .wf-chat-layout{grid-template-columns:130px minmax(0,1fr);min-height:323px}
.workflow-with-photos .wf-thread{padding:17px 14px}
.workflow-with-photos .wf-chat-nav{padding:20px 10px}
.workflow-with-photos .wf-report-metric>strong{font-size:65px}
.workflow-with-photos .wf-expense-layout{gap:20px}
.workflow-with-photos .wf-action-row{display:flex;gap:17px;margin-top:18px;padding-top:16px}
.workflow-with-photos .wf-action{min-height:44px;padding:11px 15px;gap:20px}
.workflow-with-photos .wf-action-row #demo-status{margin:0;min-height:38px;font-size:10px}
.workflow-with-photos .wf-booking-top h4{font-size:22px;line-height:1.4}
.workflow-with-photos .wf-booking-date{font-size:52px}
.workflow-with-photos .wf-week{margin:16px 0;padding-bottom:12px}
.workflow-with-photos .wf-week>span{padding:6px 2px}
.workflow-with-photos .wf-slot-picker{padding:13px}
.workflow-with-photos .wf-slot-picker label{margin-top:13px}
.workflow-with-photos .wf-slot-picker p{margin-bottom:0}
.workflow-with-photos .plain-explanation{max-width:none;display:grid;grid-template-columns:.85fr 1.35fr;gap:24px;margin:30px auto 0;max-width:1110px;padding-top:23px;border-top:1px solid #65869455}
.workflow-with-photos .plain-explanation>span{font-size:16px;color:#e2eef3}
.workflow-with-photos .plain-explanation p{font-size:12px;line-height:2}
@media(max-width:1100px){
 .workflow-with-photos .app-playground{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:18px}
 .workflow-context figcaption{left:22px;right:22px;bottom:24px}
 .workflow-context figcaption h3{font-size:24px}
 .workflow-with-photos #app-demo-content{padding:21px 18px}
 .workflow-with-photos .wf-chat-layout{grid-template-columns:110px minmax(0,1fr)}
 .workflow-with-photos .app-tabs button{padding:15px 10px}
 .workflow-with-photos .app-tabs strong{font-size:12px}
 .workflow-with-photos .app-tabs small{font-size:9px}
}
@media(max-width:850px){
 .workflow-with-photos .app-playground{grid-template-columns:1fr}
 .workflow-with-photos .app-demo-screen{max-width:660px;justify-self:center}
 .workflow-context{min-height:300px;max-width:660px;width:100%;justify-self:center}
 .workflow-context>img{object-position:center 40%}
 .workflow-context[data-context=expense]>img{object-position:center 47%}
 .workflow-context[data-context=booking]>img{object-position:center 45%}
 .workflow-context:after{background:linear-gradient(90deg,#07151dc9 0%,#07151d55 55%,#07151d0d 100%)}
 .workflow-context figcaption{max-width:300px;bottom:22px}
 .workflow-context figcaption h3{font-size:26px;margin:9px 0}
 .workflow-context figcaption small{margin-top:10px}
 .workflow-photo-label{left:22px;right:22px;top:20px}
 .workflow-photo-label b{font-size:30px}
 .workflow-with-photos .wf-chat-layout{grid-template-columns:145px minmax(0,1fr)}
 .workflow-with-photos .plain-explanation{grid-template-columns:1fr;gap:10px;max-width:660px}
 .workflow-with-photos .app-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}
 .workflow-with-photos .app-tabs strong{font-size:14px}
 .workflow-with-photos .app-tabs small{font-size:10px}
}
@media(max-width:520px){
 .workflow-with-photos{padding-top:60px;padding-bottom:60px}
 .workflow-with-photos .section-top{margin-bottom:25px}
 .workflow-with-photos .app-tabs button{padding:13px 10px;grid-template-columns:18px 1fr;gap:3px}
 .workflow-with-photos .app-tabs strong{font-size:12px}
 .workflow-with-photos .app-tabs small{font-size:9px}
 .workflow-context{min-height:260px}
 .workflow-context:after{background:linear-gradient(180deg,#07151d33,transparent 15%,#07151dbb 70%,#07151df0)}
 .workflow-context>img{object-position:center 28%}
 .workflow-context figcaption{left:19px;right:19px;bottom:17px;max-width:none}
 .workflow-context figcaption>span{font-size:7px;letter-spacing:1px}
 .workflow-context figcaption h3{font-size:22px;line-height:1.4;margin:8px 0}
 .workflow-context figcaption p{font-size:10px;line-height:1.8;max-width:290px}
 .workflow-context figcaption small{font-size:8px;margin-top:9px}
 .workflow-photo-label{left:19px;right:19px;top:16px;font-size:8px}
 .workflow-photo-label b{font-size:29px}
 .workflow-with-photos .screen-top{padding:11px 15px}
 .workflow-with-photos #app-demo-content{padding:20px 16px}
 .workflow-with-photos .wf-brand-row{margin-bottom:20px}
 .workflow-with-photos .wf-brand-row>strong{font-size:29px}
 .workflow-with-photos .wf-brand-row>span{font-size:6px;letter-spacing:.4px}
 .workflow-with-photos .wf-chat-layout{grid-template-columns:1fr;min-height:0}
 .workflow-with-photos .wf-chat-nav{padding:10px 12px}
 .workflow-with-photos .wf-thread{padding:16px 13px}
 .workflow-with-photos .wf-expense-layout{gap:14px}
 .workflow-with-photos .wf-action-row{display:block}
 .workflow-with-photos .wf-action-row #demo-status{font-size:10px;min-height:0;margin-top:10px}
 .workflow-with-photos .plain-explanation>span{font-size:15px}
 .workflow-with-photos .plain-explanation p{font-size:11px}
}