/* Separate desktop concept. Shared homepage styles stay untouched. */
.desktop-version .topbar{max-width:1500px}
.desktop-version .topbar nav{gap:26px}
.desktop-hero{max-width:1620px;margin:auto;display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.65fr);gap:64px;align-items:center;padding:70px 64px 84px}
.desktop-copy{min-width:0}
.desktop-copy h1{font:400 clamp(46px,4.15vw,70px)/1.02 InstrumentSerif,serif;letter-spacing:-1.2px;max-width:500px;margin:20px 0 0;text-wrap:balance}
.desktop-copy .studio-note{max-width:440px;padding:25px 26px 20px;margin-top:28px}
.desktop-copy .studio-note h2{font-size:30px;line-height:1.05;text-wrap:balance}
.desktop-copy .studio-note>p{font-size:18px;max-width:none}
.desktop-copy .studio-note-bottom{gap:16px;flex-wrap:wrap}
.desktop-copy .studio-note-bottom>span{font-size:13px}
.desktop-copy .photo-desk{min-height:0;gap:23px;margin-top:30px}
.desktop-copy .photo-desk .pinned{width:114px}
.desktop-copy .photo-desk .pinned:nth-child(2){margin-top:18px}
.desktop-copy .photo-desk .pinned img{height:112px;object-fit:cover}
.desktop-copy .photo-desk .pinned figcaption{font-size:12px;padding-top:8px}
.desktop-copy .drag-hint{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font:400 23px/1.2 InstrumentSerif,serif;color:#fff;margin-top:18px}
.desktop-copy .reset-photos{margin-left:0;min-height:32px;border-bottom-color:#ffffffa0;font:18px/1.2 Narrow,'Arial Narrow',sans-serif}
.desktop-stage{position:relative;min-width:0;margin:0;padding-bottom:60px}
.desktop-hand-note{display:block;text-align:center;font:25px InstrumentSerif,serif;margin-bottom:22px;transform:rotate(2deg)}
.desktop-stage>figcaption{font-size:13px;line-height:1.4;color:#c4c4c4;margin-top:20px;max-width:65%}
.desktop-window{--window-bg:#1b1b1c;--window-bar:#242425;--window-line:#ffffff14;--tile:#2e2e30;--tile-alt:#353537;--window-text:#b5b5b8;overflow:hidden;background:var(--window-bg);border:1px solid #ffffff45;border-radius:12px;box-shadow:0 28px 65px #0006,0 2px 3px #0004;color:var(--window-text);aspect-ratio:1.46;display:flex;flex-direction:column;min-width:0;text-align:left}
.window-chrome{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--window-bar);border-bottom:1px solid var(--window-line);font-size:12px}
.window-controls{display:flex;gap:6px;flex:1}
.window-controls i{width:8px;height:8px;border-radius:50%;border:1px solid #888;display:block}
.window-chrome>span:nth-child(2){font:22px InstrumentSerif,serif;letter-spacing:-.3px}
.window-status{flex:1;text-align:right;font-size:10px;white-space:nowrap}
.window-body{display:flex;flex:1;min-height:0}
.window-sidebar{width:15%;border-right:1px solid var(--window-line);padding:24px 14px;display:flex;align-items:flex-start;flex-direction:column;gap:16px;flex:none}
.window-sidebar img{width:32px;height:32px;object-fit:contain;margin-bottom:16px}
.sidebar-line{display:block;width:100%;height:5px;border-radius:2px;background:var(--window-line)}
.sidebar-line.selected{background:#8c8c8e;height:6px}
.sidebar-line.short{width:65%}
.sidebar-line.bottom{margin-top:auto;width:50%}
.window-content{flex:1;min-width:0;padding:26px 25px;overflow:hidden}
.window-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--window-line);padding-bottom:20px;margin-bottom:22px;font:24px InstrumentSerif,serif;white-space:nowrap}
.window-search svg{width:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4}
.search-shortcut{font:11px Narrow,'Arial Narrow',sans-serif;margin-left:auto;border:1px solid var(--window-line);border-radius:3px;padding:3px 5px}
.placeholder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.placeholder-tile{display:flex;flex-direction:column;gap:8px;min-width:0}
.placeholder-tile i{height:120px;background:var(--tile);border:1px solid var(--window-line);border-radius:4px;display:block}
.placeholder-tile b{width:63%;height:4px;background:var(--window-line);display:block;border-radius:2px}
.placeholder-tile:nth-child(3n+2) i{height:154px;background:var(--tile-alt)}
.placeholder-tile:nth-child(3n) i{height:90px}
.placeholder-tile:nth-child(5) i{height:90px}
.desktop-companion{position:absolute;right:-14px;bottom:-12px;display:flex;align-items:center;gap:14px}
.desktop-companion>span{font:20px/1.05 InstrumentSerif,serif;width:140px;text-align:right;transform:rotate(-4deg)}
.desktop-companion img{width:126px;height:126px;object-fit:contain;filter:drop-shadow(0 12px 12px #0005)}
.desktop-how{padding-top:65px;padding-bottom:85px}
/* Let the grain begin underneath the paper tear, with no exposed grid strip. */
.desktop-version .desktop-how{margin-bottom:0;z-index:1}
/* Keep the grain behind content and animate a cached raster tile. */
.desktop-version .film-grain-bottom::before{z-index:0;mix-blend-mode:normal;background-image:url('assets/desktop/film-grain-tile.png')}
.desktop-version .film-grain-bottom>*{position:relative;z-index:1}

.desktop-how .section-heading{max-width:1400px;margin:0 auto 40px}
.desktop-how .section-heading h2{font-size:clamp(40px,4vw,58px)}
.desktop-section-note{font-size:16px;line-height:1.4;margin-top:16px;color:#666}
.desktop-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:1400px;list-style:none;padding:0;margin:0 auto}
.desktop-steps>li{min-width:0}
.window-light{--window-bg:#f5f5f3;--window-bar:#eaeae7;--window-line:#24242416;--tile:#e2e2df;--tile-alt:#d8d8d4;--window-text:#747470;border-color:#24242430;box-shadow:0 12px 20px #24242415,0 2px 3px #24242418}
.desktop-steps .desktop-window{aspect-ratio:1.36;border-radius:7px}
.desktop-steps .window-chrome{height:28px;padding:0 9px}
.desktop-steps .window-chrome>span:nth-child(2){font-size:16px}
.desktop-steps .window-controls{gap:3px}
.desktop-steps .window-controls i{width:5px;height:5px}
.desktop-steps .window-status{font-size:8px}
.desktop-steps .window-sidebar{padding:13px 7px;gap:10px}
.desktop-steps .window-sidebar img{width:20px;height:20px;margin-bottom:6px}
.desktop-steps .window-content{padding:16px 13px}
.desktop-steps .window-search{font-size:17px;gap:6px;padding-bottom:12px;margin-bottom:12px}
.desktop-steps .window-search svg{width:13px}
.desktop-steps .search-shortcut{display:none}
.desktop-steps .placeholder-grid{gap:8px}
.desktop-steps .placeholder-tile i{height:61px}
.desktop-steps .placeholder-tile:nth-child(3n+2) i{height:82px}
.desktop-steps .placeholder-tile:nth-child(3n) i{height:45px}
.desktop-steps .placeholder-tile{gap:5px}
.desktop-steps .placeholder-tile b{height:3px}
.desktop-steps .how-caption{max-width:360px;margin-top:25px}
.desktop-steps .how-caption h3{font-size:32px;margin-top:12px}
.desktop-steps .how-caption p{font-size:19px}
.desktop-showcase{max-width:1280px;padding:12px 70px 90px;margin:auto;text-align:center}
.desktop-showcase h2{font:400 clamp(50px,5.5vw,80px)/1.02 InstrumentSerif,serif;letter-spacing:-1px;margin:24px 0}
.desktop-showcase-copy{font-size:22px;line-height:1.45;color:#ccc;margin-bottom:44px}
.desktop-showcase>.desktop-window{max-width:1060px;margin:auto;aspect-ratio:1.8}
.desktop-showcase .placeholder-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.desktop-placeholder-caption{font-size:13px;margin-top:20px;color:#aaa}
.desktop-finds{max-width:620px;margin:76px auto 0}
.desktop-finds h3{font:400 40px/1.1 InstrumentSerif,serif;margin:16px 0}
.desktop-finds>p:last-child{font-size:20px;line-height:1.5;color:#ccc}
.desktop-version .footer-links{flex-wrap:wrap}
.desktop-version .closing-caption{max-width:260px;margin-inline:auto}
@media(min-width:1700px){.desktop-hero{padding-inline:60px;gap:80px}.desktop-copy h1{font-size:74px}.desktop-stage .desktop-window{aspect-ratio:1.5}}
@media(max-width:1150px){.desktop-hero{padding:55px 40px 70px;gap:34px;grid-template-columns:minmax(290px,.9fr) minmax(0,1.3fr)}.desktop-copy h1{font-size:52px}.desktop-copy .studio-note{padding:22px}.desktop-copy .studio-note h2{font-size:27px}.desktop-stage .window-content{padding:22px 16px}.desktop-stage .window-sidebar{padding:20px 10px}.desktop-stage .window-search{font-size:21px}.window-status{font-size:8px}.desktop-stage .placeholder-grid{gap:10px}.desktop-stage .placeholder-tile i{height:85px}.desktop-stage .placeholder-tile:nth-child(3n+2) i{height:110px}.desktop-companion img{width:102px;height:102px}.desktop-companion>span{font-size:18px;width:120px}.desktop-steps{gap:22px}.desktop-steps .window-status{display:none}.desktop-steps .how-caption h3{font-size:29px}}
@media(max-width:850px){.desktop-hero{grid-template-columns:1fr;gap:48px;padding:45px 32px 70px}.desktop-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}.desktop-copy>.eyebrow{grid-column:1/-1}.desktop-copy h1{font-size:56px;grid-column:1;margin-top:22px}.desktop-copy .studio-note{grid-column:2;grid-row:2/5;margin-top:22px}.desktop-copy .photo-desk{grid-column:1}.desktop-copy .drag-hint{grid-column:1}.desktop-stage{max-width:760px;width:100%;justify-self:center}.desktop-stage .desktop-window{aspect-ratio:1.5}.desktop-stage .window-search{font-size:25px}.desktop-stage .placeholder-tile i{height:120px}.desktop-stage .placeholder-tile:nth-child(3n+2) i{height:154px}.desktop-steps{grid-template-columns:1fr;max-width:520px;gap:52px}.desktop-steps .window-status{display:inline}.desktop-steps .desktop-window{aspect-ratio:1.6}.desktop-steps .how-caption{max-width:420px}.desktop-showcase{padding-inline:32px}.desktop-showcase>.desktop-window{aspect-ratio:1.6}}
@media(max-width:560px){.desktop-version .topbar nav{gap:12px 20px;font-size:15px}.desktop-hero{padding:35px 24px 65px;gap:38px}.desktop-copy{display:block}.desktop-copy h1{font-size:clamp(44px,12vw,61px);max-width:390px;letter-spacing:-.6px}.desktop-copy .studio-note{max-width:none;margin-top:28px;padding:23px}.desktop-copy .studio-note h2{font-size:30px}.desktop-copy .photo-desk{display:none}.desktop-copy .drag-hint{display:none}.desktop-hand-note{font-size:22px;margin-bottom:18px}.desktop-stage .desktop-window{border-radius:7px;aspect-ratio:1.2}.window-chrome{height:29px;padding:0 9px;gap:5px}.window-chrome>span:nth-child(2){font-size:17px}.window-controls{gap:4px}.window-controls i{width:5px;height:5px}.window-status{font-size:7px}.desktop-stage .window-sidebar{padding:14px 8px;gap:12px}.window-sidebar img{width:24px;height:24px;margin-bottom:10px}.desktop-stage .window-content{padding:20px 14px}.desktop-stage .window-search{font-size:19px;padding-bottom:14px;margin-bottom:14px}.window-search svg{width:14px}.search-shortcut{display:none}.desktop-stage .placeholder-grid{gap:8px}.desktop-stage .placeholder-tile i{height:72px}.desktop-stage .placeholder-tile:nth-child(3n+2) i{height:94px}.desktop-stage .placeholder-tile:nth-child(3n) i{height:55px}.desktop-companion{right:-4px;bottom:3px;gap:8px}.desktop-companion img{width:82px;height:82px}.desktop-companion>span{font-size:16px;width:105px}.desktop-stage>figcaption{font-size:11px;max-width:56%;margin-top:15px}.desktop-how{padding:48px 24px 60px}.desktop-how .section-heading h2{font-size:42px}.desktop-steps .how-caption h3{font-size:32px}.desktop-showcase{padding:0 24px 65px}.desktop-showcase h2{font-size:51px}.desktop-showcase-copy{font-size:20px;margin-bottom:30px}.desktop-showcase>.desktop-window{aspect-ratio:1.2}.desktop-showcase .placeholder-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.desktop-showcase .window-content{padding:20px 14px}.desktop-showcase .window-sidebar{padding:14px 8px;gap:12px}.desktop-showcase .window-search{font-size:19px;padding-bottom:14px;margin-bottom:14px}.desktop-showcase .placeholder-tile i{height:72px}.desktop-showcase .placeholder-tile:nth-child(3n+2) i{height:94px}.desktop-showcase .placeholder-tile:nth-child(3n) i{height:55px}.desktop-finds{margin-top:54px}.desktop-finds h3{font-size:36px}.desktop-finds>p:last-child{font-size:19px}.desktop-version footer{font-size:15px}.desktop-version .footer-links{gap:18px}}

/* Real Mac app captures. No simulated window chrome or product controls. */
.desktop-capture{overflow:hidden;min-width:0;border:1px solid #ffffff38;border-radius:12px;background:#111;box-shadow:0 28px 65px #0006,0 2px 3px #0004}
.desktop-capture>img{display:block;width:100%;height:auto}
.desktop-steps .desktop-capture{aspect-ratio:1.36;border-radius:7px;box-shadow:0 12px 20px #24242420,0 2px 3px #24242418}
.desktop-steps .desktop-capture>img{height:100%;object-fit:cover;object-position:left top}
.desktop-steps .capture-organize>img{object-fit:contain;object-position:center}
.desktop-showcase>.desktop-capture{max-width:1060px;margin-inline:auto}
.desktop-capture-caption{font-size:13px;margin-top:20px;color:#aaa}
@media(max-width:560px){.desktop-stage .desktop-capture{border-radius:7px}.desktop-steps .desktop-capture{aspect-ratio:1.36}}

/* Native folder opening and a reversible photo-drop demo. */
.desktop-companion{z-index:110}
.desktop-version .desktop-companion-floating{position:fixed;right:24px;bottom:24px;display:block}
.folder-target{position:relative;flex:none;display:block;width:126px;height:126px;padding:0;border:0;border-radius:12px;background:none;color:#fff;cursor:pointer;touch-action:manipulation}
.desktop-companion .folder-target>img{width:100%;height:100%;object-fit:contain}
.folder-target canvas{position:absolute;left:-25%;top:-25%;width:150%;height:150%;opacity:0;pointer-events:none;filter:drop-shadow(0 12px 12px #0005)}
.desktop-companion-floating .folder-target>img,.desktop-companion-floating .folder-target canvas{filter:drop-shadow(0 4px 4px #0004) drop-shadow(0 14px 16px #0006)}
.folder-target[data-ready]>img{opacity:0}
.folder-target[data-ready] canvas{opacity:1}
.folder-target:focus,.folder-target:focus-visible{outline:none}
.folder-target[data-folder-movable]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;translate:var(--drag-x,0px) var(--drag-y,0px)}
.folder-target[data-folder-movable]>img{pointer-events:none;-webkit-user-drag:none}
.folder-target[data-folder-movable].is-dragging{cursor:grabbing;outline:none}
.folder-speech{position:absolute;right:0;bottom:calc(100% + 8px);z-index:1;max-width:calc(100vw - 32px);padding:11px 16px;border:1px solid #24242418;border-radius:15px;background:#fff;color:#242424;box-shadow:0 4px 16px #0003;font:18px/1.15 Narrow,'Arial Narrow',sans-serif;white-space:nowrap;pointer-events:none;animation:folder-speech-in .18s ease-out}
.folder-speech[hidden]{display:none}
.folder-speech::after{content:"";position:absolute;right:20px;top:100%;border:7px solid transparent;border-top-color:#fff}
.folder-speech[data-placement="below"]{top:calc(100% + 8px);bottom:auto}
.folder-speech[data-placement="below"]::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}
.folder-speech[data-align="left"]{left:0;right:auto}
.folder-speech[data-align="left"]::after{left:20px;right:auto}
@keyframes folder-speech-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.desktop-version .drag-card.is-dragging,.desktop-version .drag-card.is-filing{z-index:100}
.desktop-version .drag-card.is-filing{pointer-events:none}
.desktop-version .drag-card.is-filed{visibility:hidden;pointer-events:none}
.desktop-version .drag-card:focus-visible{outline:2px solid #fff;outline-offset:6px}
.desktop-version .drag-card.is-dragging,.desktop-version .drag-card.is-filing{outline:none}
.folder-demo-busy .marker-trail{display:none}
.desktop-version .mac-download{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;cursor:pointer}
.desktop-version .mac-download{text-decoration:none}
.desktop-version .mac-download span{font:inherit}
.desktop-version .mac-download:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.desktop-version .mac-download-icon{width:17px;height:20px;flex:none}
.desktop-copy .studio-note-bottom .mac-download{padding:10px 16px;border:1px solid #000;border-radius:999px;background:#000;color:#fff;font:18px/1.2 Narrow,'Arial Narrow',sans-serif;min-height:44px;text-align:left;white-space:nowrap}
.desktop-version .topbar .web-app-link{min-height:44px}
.desktop-copy .mac-download-group{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.desktop-copy .studio-note .mac-download-status{font:12px/1.3 Narrow,'Arial Narrow',sans-serif;color:#707070;margin:8px 0 0;align-self:stretch;text-align:center}
.desktop-version .closing-note .mac-download{gap:10px}
.desktop-version .topbar>.mobile-soon-note{position:absolute;right:28px;top:calc(100% + 24px);width:174px;max-width:none;margin:0;padding:20px 18px 17px;border:1px solid #ffffff50;border-radius:1px;background:#e9e5dc;color:#292824;box-shadow:2px 5px 12px #0004;font:400 25px/1.05 InstrumentSerif,serif;transform:rotate(-5deg)}
.mobile-soon-note::before{content:"";position:absolute;top:-9px;left:54px;width:58px;height:18px;background:#f5efe0b8;border:1px solid #ffffff28;transform:rotate(8deg)}
@media(max-width:1150px){.folder-target{width:102px;height:102px}}
@media(max-width:560px){.folder-target{width:82px;height:82px}}
@media(max-width:560px){.desktop-version .desktop-companion-floating{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media(max-width:850px){.desktop-version .desktop-hero{padding-top:145px}}
@media(max-width:560px){.desktop-version .topbar>.mobile-soon-note{right:16px;width:154px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.folder-target{scroll-behavior:auto}.folder-speech{animation:none}}

/* The original onboarding scene, fitted to the walkthrough's 1.36:1 frames. */
.onboarding-preview{position:relative;background:#7396b8}
.onboarding-desktop-scene{display:block;width:100%;height:100%}
.onboarding-preview canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.onboarding-preview[data-ready] .onboarding-static-folder{visibility:hidden}

/* Portrait Finds capture preserves the full user-selected Mac window. */
.finds-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);max-width:1120px;gap:48px;align-items:center;text-align:left;padding-top:50px}
.finds-showcase h2{font-size:clamp(48px,5vw,72px)}
.finds-showcase .desktop-showcase-copy{max-width:430px;margin-bottom:0}
.finds-showcase-preview{min-width:0;width:100%;margin:0}
.finds-showcase-preview .desktop-capture{border-radius:15px}
.finds-showcase-preview .desktop-capture-caption{text-align:center}
@media(max-width:850px){.finds-showcase{grid-template-columns:1fr;gap:36px;text-align:center}.finds-showcase-intro{max-width:600px;margin-inline:auto}.finds-showcase .desktop-showcase-copy{margin-inline:auto;max-width:480px}.finds-showcase-preview{max-width:360px;margin-inline:auto}}
@media(max-width:560px){.finds-showcase{padding-top:12px}.finds-showcase h2{font-size:46px}.finds-showcase-preview .desktop-capture{border-radius:10px}}