/* Stable centered presentation. One original Hana pane per feature. */
#hf-rail{height:280vh!important;overflow-anchor:none}
.hf-sticky{overflow:clip!important}
#hf-mac{left:50%;top:50%;width:min(54vw,1080px,86vh);pointer-events:none!important}
#hf-liveapp{pointer-events:none!important}
#hf-cap2{left:50%;top:0!important;width:90vw;max-width:1000px;white-space:normal;font-size:clamp(32px,4vw,60px);line-height:1.15}
#hf-cap2 .hf-cap2sub{margin:14px auto 0;max-width:560px;font:14px/1.5 Arial,sans-serif}
.hf-tour-cards{position:absolute;inset:0;z-index:20;opacity:0;visibility:hidden;pointer-events:none;background:none!important;transition:opacity .35s}
.hf-tour-cards.is-visible{opacity:1;visibility:visible}
.hf-tour-card{position:absolute;box-sizing:border-box;width:clamp(190px,19.5vw,320px);padding:20px 22px 23px;text-align:left;color:#edf2fa;border:0;border-radius:32px;cursor:pointer;text-shadow:0 1px 3px #030916;transform:translateY(-50%) scale(.95);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s;will-change:transform;isolation:isolate}
.hf-tour-card:nth-child(odd){left:max(16px,calc(50% - 950px));transform-origin:center}
.hf-tour-card:nth-child(even){right:max(16px,calc(50% - 950px));transform-origin:center}
.hf-tour-card:nth-child(-n+2){top:33%}.hf-tour-card:nth-child(n+3){top:74%}
.hf-tour-card:nth-child(n){opacity:var(--reveal,0);pointer-events:none;translate:0 calc((1 - var(--reveal,0)) * 24px)}
.hf-tour-card.is-revealed{pointer-events:auto}
.hf-tour-card[aria-current=true]{transform:translateY(-50%) scale(1.025);opacity:var(--reveal,0)}
.hf-tour-card:focus-visible{outline:2px solid #4a9eff;outline-offset:5px}
.hf-tour-card>*{position:relative;z-index:1}.hf-tour-card>.web-glass-surface{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hf-tour-card.web-live-glass{background:transparent;box-shadow:none;border:0;backdrop-filter:none}
.hf-tour-card.web-glass-ready{background:transparent}
.tour-art{display:block;margin:0 -8px 12px}.story-art{height:clamp(92px,9vw,145px);width:100%;display:block;overflow:visible}.story-art>svg{width:100%;height:100%;display:block;overflow:visible}
.tour-card-head{display:flex;align-items:center;gap:5px;margin-bottom:10px}
.hf-tour-card small{font:10px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#b6cbe2}.tour-arrow{margin-left:auto;color:#80c6ff}
.hf-tour-card strong{display:block;font:700 clamp(18px,1.65vw,26px)/1.15 Arial,sans-serif;letter-spacing:-.025em}
.hf-tour-card p{margin:12px 0 0;font:13px/1.5 Arial,sans-serif;color:#d9e5f1}
.found-file{animation:file-hover 6s ease-in-out infinite;filter:drop-shadow(0 0 6px #80caff50)}
.discovery-light{transform-origin:150px 75px;animation:discovery-breathe 6s ease-in-out infinite}
.sync-photo{animation:photo-arrive 5s ease-in-out infinite;animation-delay:var(--photo-delay);transform-box:fill-box;transform-origin:center}
.duplicate-keep{animation:confirm-copy 7s ease-in-out infinite}.copy-0,.copy-2{animation:compare-copies 7s ease-in-out infinite}
.tour-art *{animation-play-state:paused}.is-playing .tour-art *{animation-play-state:running}
@keyframes file-hover{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}
@keyframes discovery-breathe{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes photo-arrive{0%,80%,100%{opacity:.65;filter:brightness(.9)}25%,50%{opacity:1;filter:brightness(1.1)}}
@keyframes confirm-copy{0%,15%{opacity:.15}30%,85%{opacity:1}100%{opacity:.15}}
@keyframes compare-copies{0%,15%,100%{opacity:1}35%,85%{opacity:.58}}
@media(min-width:1051px) and (max-height:800px){
 #hf-cap2{font-size:32px}#hf-cap2 .hf-cap2sub{font-size:12px;margin-top:10px}
 .hf-tour-card{padding:14px 18px 17px}.story-art{height:75px}.tour-art{margin-bottom:8px}.hf-tour-card strong{font-size:19px}.hf-tour-card p{font-size:11.5px;line-height:1.4;margin-top:9px}.tour-card-head{margin-bottom:7px}.hf-tour-card small{font-size:9px}
 .hf-tour-card:nth-child(-n+2){top:32%}.hf-tour-card:nth-child(n+3){top:74%}
}
@media(max-width:1050px){
 #hf-mac{width:min(82vw,70vh);top:38%}
 #hf-cap2{font-size:30px}
 .hf-tour-cards{inset:auto 2vw 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:stretch}
 .hf-tour-card:nth-child(n){position:relative;inset:auto;width:100%;padding:14px 12px 17px;transform:scale(.95);transform-origin:center;border-radius:24px}
 .hf-tour-card[aria-current=true]{transform:scale(1.015)}
 .story-art{height:85px}.tour-art{margin-bottom:8px}.hf-tour-card strong{font-size:17px}.hf-tour-card small{font-size:8px}.tour-arrow{display:none}.hf-tour-card p{font-size:11px;line-height:1.4;margin-top:8px}
}
@media(max-width:600px){
 #hf-mac{width:92vw;top:32%}
 #hf-cap2{font-size:25px;max-width:92vw}#hf-cap2 .hf-cap2sub{font-size:11px;max-width:330px}
 .hf-tour-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;bottom:12px}
 .hf-tour-card:nth-child(n){padding:10px 13px 13px;border-radius:23px}
 .story-art{height:65px}.tour-art{margin:0 -5px 4px}.tour-card-head{margin-bottom:5px}.hf-tour-card small{font-size:8px}.hf-tour-card strong{font-size:16px}.hf-tour-card p{font-size:10px;line-height:1.35;margin-top:7px}
}
@media(max-width:600px) and (max-height:740px){.story-art{height:48px}.hf-tour-card p{display:none}.hf-tour-card strong{font-size:15px}.hf-tour-cards{bottom:10px}#hf-mac{top:39%}}
@media(prefers-reduced-motion:reduce){.hf-tour-card,.hf-tour-cards{transition:none}.tour-art *{animation:none!important}}
#hf-stars{mask-image:none;-webkit-mask-image:none}
.hf-grid,.hf-glow,.hf-floor{display:none}

/* Native HTML startup view remains until the original renderer signals ready. */
.hf-boot-preview{position:absolute;inset:0;display:flex;background:#080d14;color:#d6dfea;text-align:left;font-family:Arial,sans-serif;container-type:inline-size}
.hf-boot-preview aside{width:21%;flex:none;padding:4% 1.2%;box-sizing:border-box;background:#0c121e;border-right:1px solid #25303d}
.hf-boot-preview aside img{width:78%;margin:0 0 24% 6%}.hf-boot-preview aside span{display:block;padding:5% 4%;font-size:1.15cqw;line-height:1.4;margin-bottom:3%;border-radius:6px}.hf-boot-preview .selected{background:#1b2939;color:white}
.hf-boot-preview main{flex:1;padding:8% 5%;text-align:center}.hf-boot-preview h2{font-family:'Unbounded',Arial,sans-serif;font-size:3.4cqw;margin:0 0 4%;color:#f4f7fc}.hf-boot-preview p{font-size:1cqw;color:#9aaabd;line-height:1.5}.boot-search{display:flex;align-items:center;gap:3%;text-align:left;margin:9% auto 0;width:80%;border:1px solid #64788e;border-radius:50px;padding:2.5% 4%;font-size:1.4cqw;color:#91b1d2;background:#151f2d}.boot-search span{color:#aebac8}
/* Same clear Hana panes, sampling the visible moving cable. */
#how{isolation:isolate}.how-live-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#how .how-live-host{background:transparent;position:relative;isolation:isolate;padding:24px;gap:24px;overflow:visible}
#how .how-card.web-live-glass{background:transparent;border:0;box-shadow:none;transform:none!important;opacity:1!important;padding:30px;isolation:isolate}
#how .how-card>.web-glass-surface{z-index:-1}#how .hw-track,#how .hw-fill,#how .hw-plug{visibility:hidden}
#how .how-card p,#how .how-tag{color:#e0e9f1;text-shadow:0 1px 4px #02060b}
@media(max-width:600px){#how .how-live-host{padding:4px;gap:18px}#how .how-card.web-live-glass{padding:26px}}
.hf-boot-preview aside img{position:static!important;display:block!important;height:auto!important;opacity:1!important;transform:none!important}

#how .how-live-host>.web-glass-surface{display:none}

.tour-play{display:block;margin-top:12px;font:600 12px/1.2 Arial,sans-serif;color:#a6dcff}.hf-tour-card{cursor:pointer}
@media(max-width:600px){.tour-play{font-size:10px;margin-top:7px}}

@media(max-width:600px){.hf-tour-cards{bottom:8px;gap:5px}.tour-art{margin-bottom:2px}.story-art{height:54px}.hf-tour-card p{margin-top:6px}.hf-tour-card:nth-child(n){padding:9px 12px 10px}}

/* Fade first GPU frame instead of popping a fully rendered pane into view. */
@keyframes pane-arrival{from{opacity:0}to{opacity:1}}
.web-glass-surface{animation:pane-arrival .65s ease-out both}
@media(prefers-reduced-motion:reduce){.web-glass-surface{animation:none}}

/* 16-inch 2021 MacBook Pro, Space Gray: frontal proportions from Apple reference. */
#hf-mac{container-type:inline-size}
.hf-mlid{padding:1.35% 1.35% 2.9%;border-radius:2.7cqw 2.7cqw .7cqw .7cqw;background:linear-gradient(100deg,#222326,#090a0b 2%,#050506 98%,#343537);box-shadow:0 30px 55px -18px #000b,inset 0 0 0 1px #696a6e,inset 0 0 0 3px #1d1e20}
.hf-mlid::before{background:linear-gradient(150deg,#9b9ca0,#3a3b3e 35%,#65666a 70%,#292a2c)}
.hf-mscr{aspect-ratio:3456/2234;border-radius:1.3cqw 1.3cqw .15cqw .15cqw}
.hf-mcam{z-index:8;top:1.32cqw;width:10.4%;height:1.9cqw;border-radius:0 0 .5cqw .5cqw;background:#050506;box-shadow:none}
.hf-mcam::after{content:"";position:absolute;left:50%;top:.30cqw;transform:translateX(-50%);width:.65cqw;height:.65cqw;border-radius:50%;background:radial-gradient(circle at 42% 35%,#223544,#0b1119 40%,#111214 58%,#020304 80%);box-shadow:0 0 0 .16cqw #101113}
.hf-mbase{width:118.5%;left:-9.25%;height:3.9cqw;margin-top:-.15cqw;border-radius:.25cqw .25cqw 1.8cqw 1.8cqw;background:linear-gradient(90deg,#3d3e42,#999a9e 1.3%,#65666a 3%,#77787c 49%,#6b6c70 96%,#a0a1a4 98.7%,#444549);box-shadow:inset 0 .15cqw .15cqw #c4c5c766,inset 0 -1cqw 1cqw -.4cqw #292a2e,0 1.2cqw 2cqw -.6cqw #0009}
.hf-mbase::before{width:15%;height:1.15cqw;border-radius:0 0 1cqw 1cqw;background:linear-gradient(90deg,#333438,#797a7e 7%,#8d8e91 50%,#797a7e 93%,#333438);box-shadow:inset 0 -.12cqw .2cqw #b3b4b744}
.hf-mbase::after{content:"";position:absolute;left:5%;right:5%;bottom:-.48cqw;height:.5cqw;background:linear-gradient(90deg,#252629 0 5%,transparent 5% 95%,#252629 95%);border-radius:0 0 .6cqw .6cqw}

@media(max-width:600px){#hf-mac{width:82vw;top:31%}.hf-tour-cards{gap:28px}.story-art{height:46px}}

#how .how-ic{top:18px;right:22px}#how .how-ic svg{width:46px;height:46px;opacity:1;filter:drop-shadow(0 3px 5px #0005)}
#how .feats-h{text-shadow:0 3px 5px #0006,0 10px 26px #0008}
#morefeats .feats-h{letter-spacing:0;font-kerning:normal}
.ph-search{box-sizing:border-box;flex-shrink:0}.ph-typed{flex-shrink:0}
.hf-grid{display:none}
.app-scan-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 27px;border:0;border-radius:11px;background:linear-gradient(135deg,#4a9eff,#32c7df);color:#08111f;font:700 15px Arial;text-decoration:none;box-shadow:0 6px 22px -8px #4a9eff99,inset 0 1px 0 #ffffff2e;transition:filter .15s,transform .15s,box-shadow .15s}
.app-scan-cta:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 28px -8px #4a9effbf,inset 0 1px 0 #ffffff38}
.app-scan-cta:focus-visible{outline:2px solid #e5f4ff;outline-offset:4px}

.ph-search{display:inline-grid!important;grid-template-columns:.58em max-content .05em;width:max-content!important}
.ph-sicon{grid-area:1/1}.ph-typed,.ph-reserve{grid-area:1/2}.ph-reserve{visibility:hidden;pointer-events:none}.ph-caret{grid-area:1/3}

/* Hover previews interactivity; selection remains the larger persistent state. */
@media(hover:hover) and (pointer:fine){
 .hf-tour-card.is-revealed:hover{transform:translateY(calc(-50% - 4px)) scale(.99);opacity:var(--reveal,0)}
 .hf-tour-card.is-revealed[aria-current=true]:hover{transform:translateY(calc(-50% - 4px)) scale(1.045)}
 .hf-tour-card:hover .tour-arrow{transform:translate(2px,-2px);color:#d9efff}
 .hf-tour-card:hover .tour-play{color:#e9f6ff}
}
.tour-arrow{transition:transform .25s ease,color .25s ease}
@media(prefers-reduced-motion:reduce){.hf-tour-card,.tour-arrow{transition:none!important}}

/* Calm, looping feature stories; all inherit visibility and reduced-motion gates. */
.archive-row{animation:archive-conveyor 10s linear infinite}.archive-row:nth-child(even){animation-direction:reverse;animation-duration:13s}
@keyframes archive-conveyor{to{transform:translateX(-129px)}}
.discovery-light{animation:search-rays 8s ease-in-out infinite;transform-origin:150px 75px}
@keyframes search-rays{0%,100%{opacity:.65;transform:rotate(-5deg) scale(.97)}50%{opacity:1;transform:rotate(7deg) scale(1.06)}}
.duplicate-copy{transform-box:fill-box;transform-origin:center}.copy-0,.copy-2{animation:duplicate-recede 8s ease-in-out infinite}.copy-1{animation:duplicate-select 8s ease-in-out infinite}
.duplicate-keep,.duplicate-reject{animation:duplicate-verdict 8s ease-in-out infinite}
@keyframes duplicate-recede{0%,20%,100%{transform:scale(1);opacity:1}40%,80%{transform:translateY(-6px) scale(.84);opacity:.48}}
@keyframes duplicate-select{0%,20%,100%{transform:scale(1)}40%,80%{transform:translateY(3px) scale(1.1)}}
@keyframes duplicate-verdict{0%,26%,95%,100%{opacity:0}40%,80%{opacity:1}}
.sync-upload{animation:sync-upload 4.2s ease-in-out infinite;animation-delay:var(--upload-delay);opacity:0}
@keyframes sync-upload{0%{transform:translateX(-45px) scale(.92);opacity:0}20%,55%{opacity:1}85%,100%{transform:translateX(70px) scale(.8);opacity:0}}
.tour-art *{animation-play-state:paused}.is-playing .tour-art *{animation-play-state:running}
.hf-tour-card strong{font-size:clamp(18px,1.45vw,23px)}
@media(prefers-reduced-motion:reduce){.tour-art *{animation:none!important}.sync-upload{opacity:1}.duplicate-reject{opacity:0}}
#privacy{position:relative;isolation:isolate;overflow:hidden}.privacy-matrix{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mask-image:none}
.testi-placeholder-note{text-align:center;color:#a9bbce;font:12px/1.5 Arial;margin:-22px auto 35px;max-width:600px}.cs-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.cs-placeholder{display:block;font:10px/1.4 Arial;color:#adc6db;margin-top:5px}

.cs-quote{-webkit-line-clamp:unset;display:block;font-size:18px}@media(max-width:640px){.cs-quote{font-size:15px;line-height:1.5}}

.hero-drive-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:none}

/* Compact desktop: keep two feature panes on either side of the notebook. */
@media(min-width:601px) and (max-width:1050px){
 #hf-mac{width:40vw;top:53%}
 .hf-tour-cards{inset:0;display:block}
 .hf-tour-card:nth-child(n){position:absolute;inset:auto;width:24vw;padding:12px;transform:translateY(-50%) scale(.95)}
 .hf-tour-card:nth-child(odd){left:10px}
 .hf-tour-card:nth-child(even){right:10px}
 .hf-tour-card:nth-child(-n+2){top:34%}
 .hf-tour-card:nth-child(n+3){top:77%}
 .hf-tour-card[aria-current=true]{transform:translateY(-50%) scale(1.025)}
 .hf-tour-card strong{font-size:clamp(15px,1.8vw,18px)}
 .story-art{height:clamp(50px,9vh,78px)}
 .tour-art{margin-bottom:6px}
 .tour-card-head{margin-bottom:6px}
 .hf-tour-card p{font-size:11px;line-height:1.4;margin-top:8px}
 .tour-play{margin-top:8px;font-size:11px}
}


/* Deeper tonal contrast, with no saturation boost. Shared drive treatment. */
.hf-fcard .hf-drv{filter:contrast(1.04) saturate(.88) brightness(.90) drop-shadow(0 16px 26px rgba(0,0,0,.6))}
.how-drive img{filter:contrast(1.04) saturate(.88) brightness(.90)}

/* Laptop viewports: reserve room for navigation, title and both card rows. */
@media(min-width:1051px){
 #hf-mac{width:min(50vw,1000px,76vh);top:55%}
 #hf-cap2{font-size:clamp(30px,3vw,46px)}
 .hf-tour-card{width:clamp(210px,18vw,285px);padding:16px 18px 18px}
 .hf-tour-card strong{font-size:clamp(18px,1.2vw,20px);line-height:1.18}
 .hf-tour-card p{font-size:12px;line-height:1.4;margin-top:9px}
 .story-art{height:clamp(58px,8.5vh,92px)}
 .tour-art{margin-bottom:8px}.tour-card-head{margin-bottom:8px}
 .tour-play{margin-top:9px}
 .hf-tour-card:nth-child(-n+2){top:34%}
 .hf-tour-card:nth-child(n+3){top:76%}
}
/* Original Hana pane around the typed hero search; native content stays above it. */
.ph-search.web-glass-pane{isolation:isolate;border:0;border-radius:.22em;box-shadow:none;background:#10151d}
.ph-search.web-glass-ready{background:transparent}
.ph-search>.web-glass-surface{z-index:-1}
.ph-search>.ph-sicon,.ph-search>.ph-typed,.ph-search>.ph-caret{position:relative;z-index:1}

/* Readable fallback while preparing, or on devices without the live GPU material. */
#how .how-card.web-live-glass:not(.web-glass-ready),
.hf-tour-card.web-live-glass:not(.web-glass-ready),
.ph-search.web-glass-pane:not(.web-glass-ready){
 background:rgba(17,27,44,.94);
 box-shadow:inset 0 1px 0 rgba(190,216,255,.22),inset 0 -1px 0 rgba(130,159,204,.15);
}
@media(hover:hover) and (pointer:fine){
 #how .how-card{transition:translate .22s ease}
 #how .how-card:hover{translate:0 -4px}
}
@media(prefers-reduced-motion:reduce){#how .how-card:hover{translate:none}}

/* Single-feature carousel: product left, one live Hana pane right. */
#hf-mac{left:34.5%;top:57%;width:min(56vw,1040px,94vh)}
#hf-cap2{top:96px!important;transform:translateX(-50%)!important;width:92vw;max-width:1200px;font-size:clamp(30px,3.2vw,52px)}
.hf-tour-cards.hf-carousel{inset:auto;left:69%;top:55%;width:27%;max-width:440px;display:block;transform:translateY(-50%)}
.hf-carousel .hf-tour-card:nth-child(n),.hf-carousel .hf-tour-card.is-revealed:hover{position:relative;inset:auto;width:100%;padding:26px;transform:none;translate:none;border-radius:32px}
.hf-carousel .story-art{height:clamp(110px,15vh,190px)}
.hf-carousel .hf-tour-card strong{font-size:clamp(23px,2vw,31px);line-height:1.15}
.hf-carousel .hf-tour-card p{font-size:15px;line-height:1.5;margin-top:14px}
.hf-carousel .hf-tour-card small{font-size:11px}
.tour-carousel-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px;pointer-events:auto}
.tour-carousel-controls button{cursor:pointer;color:#e6f0ff;background:#152334;border:1px solid #b5d1ff40;border-radius:50%;width:44px;height:44px;font:22px Arial}
.tour-carousel-controls button:hover{background:#234362}.tour-carousel-controls button:focus-visible{outline:2px solid #4a9eff;outline-offset:4px}
.tour-dots{display:flex;gap:6px}.tour-dots button{width:24px;height:32px;border:0;background:transparent;position:relative}
.tour-dots button::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#627186;left:9px;top:13px}
.tour-dots button[aria-current=true]::after{background:#4a9eff;box-shadow:0 0 9px #4a9eff70}
.tour-dots button:hover{background:transparent}.tour-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-height:760px) and (min-width:761px){.hf-carousel .story-art{height:90px}.hf-carousel .hf-tour-card:nth-child(n){padding:20px}.hf-carousel .hf-tour-card strong{font-size:23px}.hf-carousel .hf-tour-card p{font-size:13px}#hf-cap2{top:80px!important;font-size:30px}}
@media(max-width:760px){
 #hf-mac{left:50%;top:34%;width:82vw}
 #hf-cap2{top:82px!important;font-size:clamp(22px,4vw,30px)}#hf-cap2 .hf-cap2sub{font-size:12px;margin-top:8px}
 .hf-tour-cards.hf-carousel{left:50%;top:auto;bottom:22px;width:90%;max-width:500px;transform:translateX(-50%)}
 .hf-carousel .hf-tour-card:nth-child(n){padding:16px 20px;border-radius:26px}
 .hf-carousel .story-art{height:65px}.hf-carousel .tour-art{margin-bottom:6px}
 .hf-carousel .hf-tour-card strong{font-size:22px}.hf-carousel .hf-tour-card p{display:block;font-size:13px;line-height:1.4;margin-top:8px}
 .hf-carousel .hf-tour-card small{font-size:10px}.hf-carousel .tour-play{font-size:12px;margin-top:10px}
 .tour-carousel-controls{margin-top:12px}
}
@media(max-width:760px) and (max-height:700px){.hf-carousel .story-art{height:42px}.hf-carousel .hf-tour-card strong{font-size:19px}.hf-carousel .hf-tour-card p{font-size:12px}#hf-mac{top:33%;width:82vw}.hf-tour-cards.hf-carousel{bottom:12px}}
@media(max-width:760px) and (max-height:700px){#hf-cap2 .hf-cap2sub{display:none}}
@media(min-width:600px) and (max-width:760px) and (max-height:500px){
 #hf-mac{left:33%;top:58%;width:54vw}#hf-cap2{top:72px!important;font-size:22px}
 .hf-tour-cards.hf-carousel{left:68%;top:59%;bottom:auto;width:29%;transform:translateY(-50%)}
 .hf-carousel .tour-art{display:none}.hf-carousel .hf-tour-card:nth-child(n){padding:12px}
 .hf-carousel .hf-tour-card strong{font-size:16px}.hf-carousel .hf-tour-card p{font-size:11px}
 .tour-carousel-controls{gap:8px;margin-top:8px}.tour-carousel-controls>button{width:34px;height:34px}
}

.scan-complete #hf-t9{visibility:hidden}

/* Shared top edge for the laptop and the single feature pane. */
@media(min-width:761px){
 #hf-rail{--tour-top:clamp(220px,29vh,320px)}
 #hf-rail #hf-mac{top:var(--tour-top)}
 #hf-rail .hf-carousel{top:var(--tour-top);transform:none;translate:0 var(--tour-travel,0px)}
 #hf-cap2{top:clamp(88px,10vh,110px)!important;font-size:clamp(38px,4.3vw,62px)}
}
@media(min-width:761px) and (max-height:760px){
 #hf-rail{--tour-top:190px}
 #hf-cap2{top:80px!important;font-size:36px}
}

/* Consistent translucent loading surface; no opaque black first-load block. */
.ph-search,.ph-search.web-glass-pane:not(.web-glass-ready){background:rgba(29,40,60,.76);box-shadow:inset 0 1px 0 rgba(190,216,255,.22),inset 0 -1px 0 rgba(130,159,204,.15)}

@media(min-width:761px) and (max-width:1250px) and (min-height:761px){#hf-head{padding-inline:32px;padding-bottom:190px}#hf-head h1{font-size:clamp(70px,9.1vw,112px)}}

/* A reserved slide height keeps arrows and dots still through every selection. */
.hf-carousel>.hf-tour-card{display:block;height:var(--tour-card-height,auto)}
/* Extend the glow beyond the old crop, then dissolve all four outer edges. */
.cs-track{inset:-80px -28px;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(0deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
 mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(0deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect}
#mfRail:focus-visible{outline:2px solid #4a9eff;outline-offset:-3px;border-radius:8px}

#hf-cap2 .tour-title-archive{font-family:var(--fdisplay);font-weight:700;white-space:nowrap}
#hf-cap2 .tour-title-action{font-family:Arial,sans-serif;font-weight:400;font-size:1.059em;white-space:nowrap;letter-spacing:-.025em}

.tour-carousel-controls>button{display:grid;place-items:center;padding:0;line-height:1;flex-shrink:0}
.tour-carousel-controls>button svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Mobile composition: reserve explicit, non-overlapping bands for the tour. */
@media(max-width:600px){
 #hf-cap2{top:82px!important;width:calc(100% - 40px);font-size:clamp(23px,6.3vw,32px);line-height:1.08}
 #hf-cap2 .tour-title-archive,#hf-cap2 .tour-title-action{display:block}
 #hf-cap2 .hf-cap2sub{font-size:12px;margin-top:10px}
 #hf-rail #hf-mac{top:calc(202px + 23vw - 3vh);width:78vw}
 .hf-tour-cards.hf-carousel{top:calc(244px + 46vw);bottom:auto;width:calc(100% - 32px);max-width:450px}
 .hf-carousel .hf-tour-card:nth-child(n){padding:18px 20px}
 .hf-carousel .story-art{height:52px}
 .hf-carousel .hf-tour-card strong{font-size:21px}
 .hf-carousel .hf-tour-card p{font-size:14px;line-height:1.4}
 .tour-carousel-controls{gap:22px;margin-top:12px}
 .tour-dots button{width:28px;height:44px}.tour-dots button::after{left:11px;top:19px}
 .sec{padding:64px 0}.wrap{padding-left:20px;padding-right:20px}
 #how .how-steps{margin-top:32px}
 #how .how-card.web-live-glass{padding:24px}
 #how .how-card h3{font-size:20px;line-height:1.2}
 #how .how-card p{font-size:15px;line-height:1.55}
 .mf-cap b{font-size:24px}.mf-cap span{font-size:15px;line-height:1.5}
 .foot .wrap{gap:16px}
}
@media(max-width:600px) and (max-height:740px){
 #hf-cap2{top:76px!important;font-size:23px}
 #hf-cap2 .hf-cap2sub{display:none}
 #hf-rail #hf-mac{top:calc(137px + 20vw - 3vh);width:68vw}
 .hf-tour-cards.hf-carousel{top:calc(152px + 40vw)}
 .hf-carousel .story-art{height:32px}
 .hf-carousel .hf-tour-card:nth-child(n){padding:14px 18px}
 .hf-carousel .hf-tour-card strong{font-size:19px}
 .hf-carousel .hf-tour-card p{font-size:13px;margin-top:7px}
 .hf-carousel .tour-play{margin-top:8px}
}
@media(max-width:600px){
 #hf-head{padding-inline:16px}
 #hf-head .hf-eb{font-size:9px;letter-spacing:.16em}
 #hf-head .hf-sub{font-size:13px;line-height:1.5;max-width:310px;margin-top:18px}
 #hf-head .hf-dl{font-size:14px;padding:14px 26px;min-height:44px}
 #hf-head .hf-dlmeta{font-size:10px;line-height:1.5;max-width:300px;margin-top:16px}
}
/* Short landscape screens retain a complete, usable tour. */
@media(min-width:480px) and (max-height:550px){
 #hf-cap2 .tour-title-archive,#hf-cap2 .tour-title-action{display:inline}
 #hf-cap2{top:72px!important;font-size:25px;line-height:1.1}
 #hf-cap2 .hf-cap2sub{display:none}
 #hf-rail #hf-mac{left:29%;top:120px;width:43vw}
 #hf-rail .hf-carousel{left:57%;top:120px;bottom:auto;width:39%;max-width:none;transform:none;translate:0 var(--tour-travel,0px)}
 .hf-carousel .tour-art{display:none}
 .hf-carousel .hf-tour-card:nth-child(n){padding:14px 18px}
 .hf-carousel .hf-tour-card strong{font-size:18px;line-height:1.15}
 .hf-carousel .hf-tour-card p{font-size:12px;margin-top:7px;line-height:1.4}
 .hf-carousel .tour-card-head{margin-bottom:6px}
 .tour-carousel-controls{margin-top:8px;gap:16px}
 #hf-head{padding-top:76px;padding-bottom:0;justify-content:flex-start}
 #hf-head .hf-eb{font-size:9px;margin-bottom:10px}
 #hf-head .hf-sub{font-size:12px;margin-top:12px;max-width:400px}
 #hf-head .hf-cta{margin-top:12px}
 #hf-head .hf-dl{font-size:13px;padding:10px 22px}
 #hf-head .hf-dlmeta{font-size:9px;margin-top:10px}
}
@media(max-width:600px){
 .cs-dot{min-width:32px;min-height:44px;background-clip:content-box;padding:17px 11px}
 .cs-nav{width:44px;height:44px}
 .mobile-nav{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
 .hf-carousel{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-width:360px){
 .nav .wrap{padding-inline:12px;gap:8px}
 .nav .brand{flex:0 0 70px;min-width:0}
 .nav .brand .bw{max-width:70px;width:70px;height:auto}
 .navlinks{min-width:0;gap:8px}
 .nav .soon{font-size:11px;padding-inline:9px;white-space:nowrap}
 .hf-carousel .hf-tour-card p{font-size:12px}
 .hf-carousel .hf-tour-card:nth-child(n){padding:12px 16px}
 .hf-carousel .story-art{height:24px}
 #hf-rail #hf-mac{top:calc(145px + 20vw - 3vh)}
 .hf-tour-cards.hf-carousel{top:calc(168px + 40vw)}
}
@media(max-width:600px){
 .cs-card{padding:24px 22px}
 .cs-quote{font-size:16px;line-height:1.45}
 .cs-author{gap:8px}.cs-av{width:36px;height:36px}
 .cs-stage:focus-visible{outline:2px solid #72baff;outline-offset:3px}
 .cs-dot{position:relative;padding:0;background:transparent!important;transform:none!important}
 .cs-dot::after{content:'';position:absolute;left:12px;top:18px;width:8px;height:8px;border-radius:50%;background:#ffffff42}
 .cs-dot.on::after{background:var(--acc)}
}

/* DISKY-R65: retain the existing mobile intro's free text/download zone in
   short landscape. Drives enter with the existing scroll-driven scan. */
@media(min-width:480px) and (max-height:550px){
 #hf-fan{bottom:-300px}
 #hf-hint{display:none}
 #hf-head .hf-dl{min-height:44px}
}

@media(min-width:480px) and (max-height:550px){
 #hf-rail #hf-mac{width:min(43vw,calc(140vh - 210px))}
 #hf-fan{bottom:-300px}
 .nav .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
@media(min-width:480px) and (max-height:380px){
 #hf-cap2{top:66px!important;font-size:22px}
 #hf-rail #hf-mac,#hf-rail .hf-carousel{top:100px}
}
@media(min-width:1001px) and (max-height:550px){
 #hf-fan{bottom:-140px}
 #hf-head h1{font-size:66px}
}

/* Small phones in landscape use the same side-by-side tour as larger phones.
   Prioritize the feature name and working controls when vertical space is scarce. */
@media(min-width:480px) and (max-width:699px) and (max-height:360px){
 #hf-head{padding-top:70px}
 #hf-head .hf-eb{display:none}
 #hf-head h1{font-size:40px}
 #hf-head .hf-sub{margin-top:8px}
 #hf-head .hf-cta{margin-top:8px}
 #hf-head .hf-dlmeta{margin-top:8px}
 .hf-carousel .hf-tour-card p{display:none}
 .hf-carousel .hf-tour-card strong{font-size:16px;line-height:1.2}
 .hf-carousel .hf-tour-card:nth-child(n){padding:12px}
}