/* Storage pages (mount-<storage>-on-mac). Builds on compare.css; colours come from the same tokens. */
.plogo{display:block;margin:0 auto 12px}
.body .steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(1040px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.steps li{margin:0;padding:20px 20px 18px;background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;box-shadow:var(--sh);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.steps .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-weight:600;font-size:15px;margin-bottom:10px;box-shadow:0 6px 16px rgba(61,99,255,.3)}
.steps b{display:block;font-weight:600;font-size:18px;margin-bottom:4px;letter-spacing:-.01em}
.steps li>span:last-child{color:var(--gray);font-size:15px;line-height:1.5}
.pwhy li>span:last-child{display:block}
.faq details{margin:0 0 10px;padding:0 18px;background:var(--glass);border:1px solid var(--glass-b);border-radius:18px;box-shadow:var(--sh)}
.faq summary{color:var(--graphite);cursor:pointer;list-style:none;padding:15px 0;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:22px;line-height:1;color:var(--lq)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px;color:var(--gray);font-size:15px;line-height:1.55}
.body .more{margin-top:18px;color:var(--gray)}
.works{margin-top:44px}
.works h2{margin-top:0}
.works ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.works a{display:inline-block;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--graphite);font-size:14px}
.works a:hover{text-decoration:none;border-color:var(--lq)}
@media (max-width:760px){.body .steps{grid-template-columns:1fr;width:auto;margin-left:0;transform:none}}
/* How it works: small animated scenes, pure HTML and CSS */
.body .how{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:min(1040px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.how>li{margin:0;padding:16px 16px 20px;background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;box-shadow:var(--sh);display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-content:start}
.how .hs{grid-column:1/-1;margin-bottom:14px}
.how .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-weight:600;font-size:14px}
.how b{font-weight:600;font-size:18px;letter-spacing:-.01em;align-self:center}
.how .d{grid-column:2;color:var(--gray);font-size:15px;line-height:1.5;margin-top:4px}
.hs{height:196px;border-radius:16px;background:linear-gradient(160deg,rgba(61,99,255,.14),rgba(120,90,255,.08));display:grid;place-items:center;overflow:hidden;padding:14px}
.hs .win{position:relative;width:min(100%,300px);background:var(--surface);border-radius:12px;box-shadow:0 10px 28px rgba(20,20,60,.16);padding:26px 12px 12px;font-size:13px;color:var(--graphite);overflow:hidden}
.hs .dots{position:absolute;left:10px;top:9px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 #febc2e,26px 0 #28c840}
.hs ul{list-style:none;margin:0;padding:0}
.hs img{width:22px;height:22px;flex:none}
.hs-pick .win>b{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:12px;font-weight:600}
.hs-pick li{display:flex;align-items:center;gap:9px;padding:4px 8px;border-radius:8px;margin-bottom:2px}
.hs-pick li.on{background:rgba(61,99,255,.14);animation:hsPick 4.8s ease-in-out infinite}
@keyframes hsPick{0%,20%{background:transparent}35%,85%{background:rgba(61,99,255,.2)}100%{background:transparent}}
.hs .sheet{display:grid;justify-items:center;gap:8px;padding:6px 0 2px;text-align:center}
.hs .sheet .lg{width:34px;height:34px}
.hs .sheet em{font-style:normal;color:var(--gray);font-size:11px}
.hs .btn{display:inline-block;padding:6px 16px;border-radius:99px;background:var(--grad);color:#fff;font-weight:600;font-size:12px;animation:hsPress 4.8s ease-in-out infinite}
@keyframes hsPress{0%,60%{transform:scale(1)}70%{transform:scale(.92)}80%,100%{transform:scale(1)}}
.hs .form{display:grid;gap:5px}
.hs .fld small{display:block;color:var(--gray);font-size:10.5px;margin-bottom:1px}
.hs .val{display:block;height:18px;border-radius:7px;background:rgba(120,120,140,.14);padding:0 8px;overflow:hidden}
.hs .val i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--graphite) 0 5px,transparent 5px 8px);opacity:.55;background-size:100% 6px;background-repeat:no-repeat;background-position:0 center;animation:hsType 4.8s steps(14) infinite}
.hs .fld:nth-child(2) .val i{animation-delay:.5s}.hs .fld:nth-child(3) .val i{animation-delay:1s}
@keyframes hsType{0%{width:0}50%,90%{width:70%}100%{width:0}}
.hs .form .btn{justify-self:end;margin-top:2px}
.hs .fnd{display:grid;grid-template-columns:104px 1fr;gap:10px;min-height:92px}
.hs .side{border-right:1px solid var(--line);padding-right:6px;font-size:11.5px;white-space:nowrap;color:var(--gray)}
.hs .side li{padding:3px 6px;border-radius:6px}
.hs .side li.on{background:rgba(61,99,255,.16);color:var(--graphite);font-weight:600}
.hs .main{display:grid;gap:8px;align-content:start}
.hs .fol{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-weight:600;font-size:12.5px;animation:hsFol 4.8s ease-out infinite}
.hs .fol.dim{opacity:.55;font-weight:500;animation:none}
.hs .gen{width:22px;height:18px;border-radius:5px;background:#7aa7ff}
@keyframes hsFol{0%,15%{opacity:0;transform:translateY(8px)}35%,100%{opacity:1;transform:none}}
.hs .files li{display:flex;align-items:center;gap:9px;padding:6px 4px;font-size:12.5px}
.hs .files .ic{width:16px;height:20px;border-radius:3px;background:#c7d3ff;flex:none}
.hs .files li>span:nth-child(2){flex:1;min-width:0}
.hs .bar{width:78px;height:6px;border-radius:99px;background:rgba(120,120,140,.2);overflow:hidden;font-style:normal}
.hs .bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);animation:hsFlow 4.8s ease-in-out infinite}
.hs .bar.b2 i{animation-delay:1.2s}
@keyframes hsFlow{0%{width:0}60%,100%{width:100%}}
.hs .cl{font-size:11px;color:var(--gray)}
.hs .files .off{opacity:.6}
@media (max-width:760px){.body .how{grid-template-columns:1fr;width:auto;margin-left:0;transform:none}}
@media (prefers-reduced-motion:reduce){.hs *{animation:none!important}.hs .val i{width:70%}.hs .bar i{width:100%}}
/* Per-storage detail: what the app asks for, notes, limits */
.hs .sheet em{display:block;max-width:240px}
.hs .val{display:flex;align-items:center;font-size:11px;color:var(--gray);white-space:nowrap}
.hs .val>span{display:block;overflow:hidden;width:0;animation:hsReveal 4.8s steps(22) infinite}
.hs .fld:nth-child(2) .val>span{animation-delay:.5s}.hs .fld:nth-child(3) .val>span{animation-delay:1s}.hs .fld:nth-child(4) .val>span{animation-delay:1.5s}
.hs .val.sec{color:var(--graphite)}
@keyframes hsReveal{0%{width:0}45%,90%{width:100%}100%{width:0}}
.hs .val i{display:none}
@media (prefers-reduced-motion:reduce){.hs .val>span{width:100%}}
.body .ask{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:0 18px;margin:0 0 14px;padding:6px 20px;background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;box-shadow:var(--sh)}
.ask dt,.ask dd{margin:0;padding:12px 0;border-top:1px solid var(--hair)}
.ask dt:first-of-type,.ask dt:first-of-type+dd{border-top:0}
.ask dt{font-weight:600;font-size:15px;color:var(--graphite)}
.ask dd{color:var(--gray);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.body .note{margin:0 0 12px;padding:14px 20px;background:var(--glass);border:1px solid var(--glass-b);border-radius:18px}
.note b{display:block;font-size:14px;font-weight:600;color:var(--graphite)}
.note p{margin:3px 0 10px;color:var(--gray);font-size:15px;line-height:1.5}
.note p:last-child{margin-bottom:0}
@media (max-width:760px){.body .ask{grid-template-columns:1fr;padding:6px 18px}.ask dt{padding:12px 0 0;border-top:1px solid var(--hair)}.ask dd{padding:2px 0 12px;border-top:0}.ask dt:first-of-type{border-top:0}}