/* The entire opening viewport is the capture canvas. */
.landing .site-head{background:#0858bc;color:#fff;backdrop-filter:none}
/* Match the selection's dimming without changing the header's sticky position. */
.landing .site-head::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .3s}
.landing.capture-selecting .site-head::after{opacity:1;transition:none}
.landing .site-head .mark,.landing .site-head .nav a,.landing .site-head .text-link{color:#fff}
.landing .site-head .nav a:hover{background:#ffffff18}
.landing .site-head .btn-blue{background:#fff;color:#0758ba}
.landing .site-head :focus-visible{outline-color:#fff}
.landing .hero{padding:0;background:#0858bc}
.landing .hero-wrap{max-width:none;padding:0;margin:0}
.landing .hero-desktop{width:100%;height:clamp(680px,calc(100svh - 80px),880px);min-height:0;margin:0;border-radius:0;background:radial-gradient(ellipse at 50% 90%,#227cef 0%,transparent 68%),linear-gradient(180deg,#0858bc,#0967d4)}
.landing .hero-copy{top:clamp(26px,4.5vh,52px);left:24px;right:24px;width:auto;max-width:none;text-align:center}
.landing .hero-kicker{font-size:11px;letter-spacing:.16em;color:#d9eaff}
.landing .hero h1{max-width:1000px;font-size:clamp(52px,min(6.1vw,10.4vh),96px);line-height:1.03;letter-spacing:-.055em;margin:22px auto 0}
.landing .hero h1 em{color:#b9ddff}
.landing .hero .lead{font-size:18px;line-height:1.65;max-width:630px;margin:24px auto 0;color:#f1f7ff}
.landing .hero .lead br{display:block}
.landing .hero-ctas{display:flex;justify-content:center;gap:24px;margin-top:26px}
.landing .hero-source{display:inline-flex;align-items:center;gap:8px;margin:0;padding:12px 0;font-size:14px}
.landing .hero-note{max-width:none;margin:17px auto 0;color:#d9eaff;font-size:12px}
.landing .hero-desktop .dock{bottom:69px;box-shadow:0 14px 40px #00357438}
.landing .hero-desktop .demo-try{bottom:136px;background:transparent;font-size:12px;font-weight:500;max-width:85%;min-height:24px;padding:0;color:#e4f1ff}
.landing .demo-disclosure{position:absolute;bottom:22px;left:20px;right:20px;margin:0;font-size:10px;color:#d8eaff;pointer-events:none}
.landing .demo-disclosure>span{display:none}
.landing .hero-desktop .shelf{top:50%;left:24px;right:auto;bottom:auto;width:166px;padding:8px 8px 8px 24px;filter:drop-shadow(0 12px 26px #003b8055);transform:translate(-30px,-50%)}
.landing .hero-desktop .shelf.on{transform:translateY(-50%)}
.landing .hero-desktop .shelf.hidden-by-user{transform:translate(-30px,-50%)}
.landing .hero-desktop .shelf-edge{left:4px}
.landing .hero-desktop .dictated{left:50%;top:auto;width:min(460px,calc(100% - 40px));min-height:62px;padding:12px 14px;transform:translateX(-50%);font-size:13px;line-height:1.45}
.landing .hero-desktop .dictated.on{display:flex;align-items:center}
.landing .hero-desktop .pill-status{top:4px;padding:6px 10px;font-size:11px}
.landing .hero-desktop.dictating{min-height:var(--dictation-height);max-height:none}
.landing .hero-copy:focus-visible{outline-color:white}

/* A crisp, pausable illustration of the existing Shelf drag-and-drop workflow. */
.handoff{border-radius:24px;background:var(--g-sky);overflow:hidden;min-width:0}
.handoff-scene{position:relative;height:442px;--source-x:36px;--source-y:148px;--target-x:158px;--target-y:210px;--target-w:calc(100% - 204px)}
.handoff-label{position:absolute;top:34px;left:28px;font:600 10px var(--font);letter-spacing:.12em;color:#48648c}
.handoff-message{position:absolute;right:28px;top:107px;width:calc(100% - 168px);background:#fff;border:1px solid #d4e0f1;border-radius:14px;box-shadow:0 20px 40px #163c721a;overflow:hidden}
.message-head{display:flex;gap:8px;align-items:center;padding:15px 16px;border-bottom:1px solid #edf0f6;font-size:12px;color:#314660}
.message-head>span:last-child{margin-left:auto;color:#8b98aa;letter-spacing:2px}
.message-icon{display:grid;place-items:center;background:#eaf2ff;color:#0760c9;border-radius:7px;width:25px;height:25px;font-size:17px}
.message-body{padding:17px}
.message-body>p{font-size:12px;color:#354966;margin-bottom:14px}
.message-drop{height:126px;position:relative;border:1px dashed #b7c8e1;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:#f4f8fd}
.message-drop>span{color:#6a7d96;font-size:10px}
.handoff-result{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.handoff-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px;background:#f4f8fd;color:#365372;font-size:10px;opacity:0}
.handoff-loading i{width:16px;height:16px;flex:none;border:2px solid #cfddf0;border-top-color:#1068d5;border-radius:50%}
.message-compose{margin-top:16px;display:flex;align-items:center;justify-content:space-between;color:#8795a8;font-size:10px;gap:4px}
.send-icon{border-radius:7px;background:#1068d5;color:white;width:25px;height:25px;display:grid;place-items:center;font-size:17px}
.handoff-shelf{position:absolute;left:24px;top:103px;width:100px;background:#ffffffed;border:1px solid #d2dff0;border-radius:13px;padding:10px;box-shadow:0 15px 34px #173c7626}
.handoff-shelf-head{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#365372;margin-bottom:12px}.handoff-shelf-head .mark{width:19px;height:19px}
.handoff-source{height:60px;border:2px solid #3f89e7;border-radius:7px;overflow:hidden;box-shadow:0 0 0 3px #dbeaff}
.handoff-source img{width:100%;height:100%;object-fit:cover}
.shelf-placeholder{height:48px;margin-top:9px;border:1px solid #e0e8f1;border-radius:6px;background:#f4f5f9;padding:10px}.shelf-placeholder i{display:block;background:#ced8e5;height:3px;margin:4px 0;border-radius:2px}.shelf-placeholder i:nth-child(2){width:70%}.shelf-placeholder.second{background:#e8f0e9}.shelf-placeholder.second i{background:#bbd0c2}.shelf-count{font-size:8px;color:#617792;text-align:center;margin-top:11px}
.handoff-flight{position:absolute;left:var(--source-x);top:var(--source-y);width:var(--source-w,76px);height:var(--source-h,60px);z-index:3;opacity:0;filter:drop-shadow(0 15px 18px #16427438)}
.handoff-flight>img{width:100%;height:100%;object-fit:cover;border:2px solid #fff;border-radius:8px}
.handoff-pointer{position:absolute;width:24px;height:30px;bottom:-17px;right:-10px;filter:drop-shadow(0 3px 2px #23457825)}
.handoff-success{position:absolute;left:28px;bottom:22px;color:#275a49;background:#effbf4;border:1px solid #cbe7d8;border-radius:999px;padding:6px 11px;font-size:10px}
.handoff figcaption{padding:10px 26px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#4c6484;font-size:11px}
.handoff figcaption>span{max-width:210px}.handoff button{flex:none;border:1px solid #b4c7e3;border-radius:999px;padding:9px 12px;color:#23558f;font-size:10px;background:#ffffff7a;min-height:36px}
.handoff.has-animation .handoff-flight{animation:handoff-flight 5s cubic-bezier(.45,0,.2,1) infinite paused}
.handoff.has-animation .handoff-source img{animation:handoff-source 5s linear infinite paused}
.handoff.has-animation .handoff-result,.handoff.has-animation .handoff-success{animation:handoff-result 5s linear infinite paused}
.handoff.has-animation .handoff-loading{animation:handoff-loading 5s linear infinite paused}
.handoff.has-animation .handoff-loading i{animation:handoff-spin .65s linear infinite paused}
.handoff.is-playing .handoff-flight,.handoff.is-playing .handoff-source img,.handoff.is-playing .handoff-result,.handoff.is-playing .handoff-success,.handoff.is-playing .handoff-loading,.handoff.is-playing .handoff-loading i{animation-play-state:running}
@keyframes handoff-flight{0%{left:var(--source-x);top:var(--source-y);opacity:0}4%,10%{left:var(--source-x);top:var(--source-y);opacity:1}40%,44%{left:calc(var(--target-x) + (var(--target-w) - var(--source-w,76px))/2);top:calc(var(--target-y) + (var(--target-h) - var(--source-h,60px))/2);opacity:1}44.01%,100%{left:calc(var(--target-x) + (var(--target-w) - var(--source-w,76px))/2);top:calc(var(--target-y) + (var(--target-h) - var(--source-h,60px))/2);opacity:0}}
@keyframes handoff-source{0%,4%,92%,100%{opacity:1}10%,86%{opacity:.15}}
@keyframes handoff-loading{0%,44%,48.01%,100%{opacity:0}44.01%,48%{opacity:1}}
@keyframes handoff-spin{to{transform:rotate(360deg)}}
@keyframes handoff-result{0%,48%,94%,100%{opacity:0}48.01%,87%{opacity:1}}
@media(max-width:1000px){.handoff{max-width:650px;width:100%;justify-self:center}.handoff-scene{height:470px;--target-y:210px}.handoff-message{max-width:390px}.handoff-scene{--target-w:min(354px,calc(100% - 204px))}}
@media(max-width:760px){
  .landing .hero-desktop{height:max(620px,calc(100svh - 64px));max-height:800px}
  .landing .hero-copy{top:47px;left:20px;right:20px}
  .landing .hero h1{font-size:clamp(43px,8.7vw,65px);margin-top:23px;letter-spacing:-.05em;line-height:1.07}
  .landing .hero h1 br:first-child{display:block}
  .landing .hero-kicker{font-size:9px}
  .landing .hero .lead{font-size:15px;max-width:350px;margin-top:22px}.landing .hero .lead br{display:block}
  .landing .hero-ctas{flex-direction:column;gap:8px;margin-top:24px}.landing .hero-ctas .btn{font-size:14px;padding:0 20px}.landing .hero-source{font-size:12px;padding:8px}
  .landing .hero-note{font-size:10px;margin-top:9px}
  .landing .hero-desktop .dock{bottom:64px}.landing .hero-desktop .demo-try{bottom:124px;font-size:11px}
  .landing .demo-disclosure{font-size:9px;bottom:17px;left:28px;right:28px;max-width:330px;margin:auto}
  .landing .hero-desktop .shelf{top:auto;bottom:162px;left:12px;right:12px;width:auto;padding:0;filter:none}
  .landing .hero-desktop .shelf.on{transform:none}.landing .hero-desktop .shelf.hidden-by-user{transform:translateX(-30px)}
  .landing .hero-desktop .shelf-list{grid-auto-columns:62px;justify-content:start}.landing .hero-desktop .tile{max-height:62px}
  .handoff-scene{height:404px;--source-x:28px;--source-y:148px;--target-x:130px;--target-y:209px;--target-w:calc(100% - 160px)}
  .handoff-label{left:20px;font-size:9px}.handoff-message{right:16px;width:calc(100% - 132px)}.message-head{padding:14px 12px;gap:5px}.message-head>span:last-child{display:none}.message-body{padding:13px}.message-body>p{font-size:10px;min-height:16px;margin-bottom:15px}.message-drop{height:108px}.handoff-shelf{left:16px;width:88px;padding:10px}.handoff-source{height:60px}.handoff-success{bottom:9px;left:16px}.handoff figcaption{padding:14px 16px 21px;font-size:10px}.handoff figcaption>span{max-width:150px}
}
@media(max-width:370px){.landing .hero h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.handoff:not(.motion-requested) .handoff-flight,.handoff:not(.motion-requested) .handoff-loading{display:none}.handoff:not(.motion-requested) .handoff-result,.handoff:not(.motion-requested) .handoff-success,.handoff:not(.motion-requested) .handoff-source img{animation:none;opacity:1}}