/* 7.2.6: calmer workflow typography, natural photography and button-free clips. */
.mq-compare-workflow .mq-flow-board {gap:14px}
.mq-compare-workflow .mq-flow-lane {padding:22px 22px 20px; border-radius:22px; background:#eeece8}
.mq-compare-workflow .mq-flow-assisted {background:#eee9f8}
.mq-compare-workflow .mq-flow-label {gap:16px; margin-bottom:18px; font-size:11px; line-height:1.5; letter-spacing:.1em}
.mq-compare-workflow .mq-flow-label>span {font-size:13px; color:#716977}
.mq-compare-workflow .mq-flow-steps {gap:18px}
.mq-compare-workflow .mq-flow-image {height:auto; aspect-ratio:1.6; border-radius:13px}
.mq-compare-workflow .mq-flow-image.notes>img {object-position:58% 85%}
.mq-compare-workflow .mq-flow-image.replay>img {object-position:65% 50%}
.mq-compare-workflow .mq-flow-image.todo>img {object-position:42% 48%}
.mq-compare-workflow .mq-flow-image.conversation>img {object-position:45% 50%}
.mq-compare-workflow .mq-flow-image .mq-flow-poster {object-fit:contain; transform:none}
.mq-compare-workflow .mq-flow-image video[hidden],
.mq-compare-workflow .mq-flow-image .mq-flow-poster[hidden] {display:none}
.mq-compare-workflow .mq-flow-image .mq-flow-example {left:0; right:0; bottom:0; padding:6px 10px; font-size:8px; line-height:1.3; letter-spacing:.025em; color:#756b81; background:linear-gradient(transparent,#fff)}
.mq-compare-workflow .mq-flow-caption {display:grid; grid-template-columns:24px minmax(0,1fr) 18px; align-items:start; gap:8px; padding:17px 0 0}
.mq-compare-workflow .mq-flow-number {font-size:11px; line-height:1.5; padding-top:4px; color:#85798f; font-variant-numeric:tabular-nums}
#main-content .mq-compare-workflow .mq-flow-caption h3 {font-size:clamp(19px,1.75vw,23px); line-height:1.2; font-weight:500; letter-spacing:-.035em; margin:0 0 7px; text-wrap:balance}
#main-content .mq-compare-workflow .mq-flow-caption p {font-size:13px; line-height:1.5; color:#736b7a; margin:0; text-wrap:pretty}
.mq-compare-workflow .mq-flow-arrow {font-size:20px; line-height:1.35; color:#9f8db5}
.mq-compare-workflow .mq-flow-step:last-child .mq-flow-caption>div {grid-column:2 / -1}
.mq-real-scenes {padding:48px 0 54px}
.mq-real-scenes-heading {margin-bottom:26px}
#main-content .mq-real-scenes-heading h2 {font-size:clamp(34px,3.7vw,48px); line-height:1.12; letter-spacing:-.045em; margin:10px 0 0}
.mq-real-scenes-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.mq-real-scene {position:relative; isolation:isolate; overflow:hidden; margin:0; border-radius:22px; aspect-ratio:1.5; background:#e6e1d8}
.mq-real-scene>img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.65,.3,1)}
.mq-real-scene-interview>img {object-position:55% 50%}
.mq-real-scene-learning>img {object-position:53% 50%}
.mq-real-scene::after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(transparent 44%,rgba(20,22,26,.7))}
.mq-real-scene figcaption {position:absolute; z-index:2; left:26px; right:26px; bottom:25px; color:#fff}
#main-content .mq-real-scene figcaption>span {font-size:10px; font-weight:550; letter-spacing:.14em; line-height:1.4; color:#fff}
#main-content .mq-real-scene h3 {font-size:clamp(26px,2.8vw,36px); font-weight:500; line-height:1.15; letter-spacing:-.035em; color:#fff; margin:9px 0 0}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .mq-real-scene:hover>img {transform:scale(1.035)}
}
@media(max-width:700px) {
 .mq-compare-workflow .mq-flow-board {gap:10px}
 .mq-compare-workflow .mq-flow-lane {padding:10px; border-radius:15px}
 .mq-compare-workflow .mq-flow-label {min-height:68px; display:block; margin-bottom:10px; font-size:9px; letter-spacing:.07em}
 .mq-compare-workflow .mq-flow-label>span {font-size:11px; line-height:1.45; margin-top:6px; max-width:15ch}
 .mq-compare-workflow .mq-flow-steps {gap:18px}
 .mq-compare-workflow .mq-flow-image {height:auto; aspect-ratio:.97; border-radius:9px}
 .mq-compare-workflow .mq-flow-image.notes>img {object-position:58% 87%}
 .mq-compare-workflow .mq-flow-image.conversation>img {object-position:42% 50%}
 .mq-compare-workflow .mq-flow-image .mq-flow-example {font-size:7px; padding:5px 6px; line-height:1.35; max-width:100%}
 .mq-compare-workflow .mq-flow-caption {position:relative; display:block; padding:12px 0 18px; min-height:134px}
 .mq-compare-workflow .mq-flow-number {display:block; padding:0; font-size:10px; line-height:1.2; margin-bottom:6px}
 #main-content .mq-compare-workflow .mq-flow-caption h3 {font-size:18px; line-height:1.18; min-height:2.36em; margin-bottom:7px; text-wrap:initial}
 #main-content .mq-compare-workflow .mq-flow-caption p {font-size:12px; line-height:1.4}
 .mq-compare-workflow .mq-flow-arrow {left:auto; right:1px; top:9px; bottom:auto; font-size:17px; line-height:1; transform:rotate(90deg)}
 .mq-real-scenes {padding:28px 0 36px}
 .mq-real-scenes-heading {margin-bottom:21px}
 #main-content .mq-real-scenes-heading h2 {font-size:34px}
 .mq-real-scenes-grid {grid-template-columns:1fr; gap:14px}
 .mq-real-scene {border-radius:17px; aspect-ratio:1.2}
 .mq-real-scene figcaption {left:22px; right:22px; bottom:22px}
 #main-content .mq-real-scene h3 {font-size:29px}
}
@media(max-width:360px) {
 .mq-compare-workflow .mq-flow-lane {padding:8px}
 .mq-compare-workflow .mq-flow-label {min-height:70px}
 #main-content .mq-compare-workflow .mq-flow-caption h3 {font-size:16px}
 #main-content .mq-compare-workflow .mq-flow-caption p {font-size:11px}
 .mq-compare-workflow .mq-flow-caption {min-height:133px}
 .mq-compare-workflow .mq-flow-image .mq-flow-example {font-size:6px}
}
@media(prefers-reduced-motion:reduce) {
 .mq-real-scene>img {transition:none}
}