/* Hybrid: preserve Spectral Flow and make its floating content explain the work. */
.hybrid .hero .wrap{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:52px;min-height:650px;padding-block:30px}
.hybrid .hero{padding-bottom:40px}
.hybrid .motto{font-size:clamp(50px,5.8vw,82px);line-height:.98}
.hybrid .hero .lede{max-width:45ch;line-height:1.65}
.hybrid-demo{padding:10px 0 0;min-width:0}
.task-choices{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:25px}
.task-choices button{font-size:14px;border:1px solid #606276;border-radius:8px;padding:8px 14px;min-height:44px;background:#101219e8;cursor:pointer}
.task-choices button:hover{border-color:var(--mint)}
.task-choices button[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#07170f}
.input-sheet{width:87%;padding:22px 25px;background:#10141eef;border:1px solid #666b7d;border-radius:14px;transform:rotate(-2deg)}
.sheet-label{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--cyan)}
.input-sheet>p:not(.sheet-source){font:400 22px/1.35 var(--display)}
.sheet-source{margin-top:13px;color:#b6c8d3;font-size:13px}
.flow-connector{height:48px;display:flex;align-items:center;gap:8px;margin-left:24px;color:#d6c7fa;font-size:12px}
.flow-connector svg{width:65px;height:42px;flex-shrink:0}
.output-sheet{position:relative;margin-left:35px;border-radius:14px;padding:24px 26px;background:#eff7f3;color:#20342e;box-shadow:0 20px 50px -18px #030806b3}
.output-sheet .sheet-label{color:#315f50}.draft-state{font-size:12px;font-weight:500;color:#704b1f;background:#fae8ca;border-radius:4px;padding:3px 7px}
#work-output{font-size:16px;line-height:1.6}
.review-line{margin-top:20px;border-top:1px solid #b7d2c6;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.review-line>span{font-size:13px;font-weight:600;color:#315f50}
#work-check{background:#173f33;color:#f0fbf5;border:0;border-radius:8px;font:500 13px var(--body);padding:12px 14px;min-height:44px;cursor:pointer}
#work-check:hover{background:#235c49}
#work-check:focus-visible{outline-color:#245541}
#work-checklist{font-size:14px;line-height:1.55;margin-top:15px;padding-top:12px;border-top:1px solid #b7d2c6;color:#254c3e}
.hybrid-disclosure{margin:18px 0 0 35px;font-size:12px;color:#ded5f0;text-shadow:0 1px 3px #08090b}
.motion-toggle{display:block;margin:12px 0 0 35px;padding:0;min-height:32px;background:transparent;border:0;color:#c6c6d4;text-decoration:underline;text-underline-offset:4px;font-size:12px;cursor:pointer}
.motion-toggle:hover{color:white}
.flow-connector span,.hybrid-disclosure,.motion-toggle{background:#08090be8;border-radius:4px;padding:3px 6px;width:fit-content}
@media(max-width:920px){.hybrid .hero .wrap>div:first-child{position:relative;isolation:isolate}.hybrid .hero .wrap>div:first-child::before{content:"";position:absolute;inset:-18px -16px;z-index:-1;background:#08090be8;pointer-events:none}}
@media(min-width:921px) and (max-width:1140px){.hybrid .hero .wrap{gap:30px}.hybrid .motto{font-size:64px}.input-sheet{width:94%}.output-sheet{margin-left:16px}.hybrid-disclosure,.motion-toggle{margin-left:16px}}
@media(max-width:920px){.hybrid .hero .wrap{grid-template-columns:1fr;gap:48px;min-height:0;padding-top:24px}.hybrid .hero .lede{max-width:52ch}.hybrid .motto{max-width:12ch}.hybrid-demo{max-width:600px;width:100%;margin-inline:auto}.hybrid .flow{width:150%;right:-50%;top:20%;bottom:0}}
@media(max-width:540px){.hybrid .motto{font-size:52px}.hybrid .hero .wrap{gap:38px;padding-top:18px}.hybrid .tagline{font-size:25px;max-width:24ch}.hybrid .hero .actions{gap:10px;margin-top:24px}.hybrid .hero .actions .btn{padding-inline:16px;font-size:14px}.task-choices{gap:6px;margin-bottom:23px}.task-choices button{font-size:13px;padding-inline:11px}.input-sheet{width:93%;padding:20px}.input-sheet>p:not(.sheet-source){font-size:21px}.output-sheet{margin-left:14px;padding:21px}.flow-connector{margin-left:14px;font-size:11px}.flow-connector svg{width:42px}.hybrid-disclosure,.motion-toggle{margin-left:14px}.hybrid-disclosure{max-width:32ch;font-size:12px}.sheet-label{font-size:12px}.review-line{gap:8px}.hybrid .hero{padding-bottom:22px}}

/* Keep long display words inside the narrowest supported phone layout. */
@media(max-width:920px){.hybrid .hero .wrap{grid-template-columns:minmax(0,1fr)}.hybrid .hero .wrap>div{min-width:0}}
@media(max-width:540px){.hybrid .motto{font-size:clamp(40px,13.2vw,52px)}}
.hybrid .motion-toggle{min-height:44px}