/* swiperoll.app home: the live mini demo inside each phone (round 13). Built by demo.js, only with JS and motion allowed.
   Sizes are in em of the stage (phone width / 20), so the app scales with the phone. */
.act[hidden] { display: none; }
.act { margin: 2px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 900px) { .act { justify-content: flex-start; } }
.act .button { min-height: 44px; padding: 0 22px; font-size: 1rem; border: 0; font-family: inherit; font-weight: 600; cursor: pointer; }
.act .button[hidden] { display: none; }
[data-demo] .act { min-height: 44px; }
.act .button:disabled { opacity: .5; cursor: default; }

.demo { -webkit-user-select: none; user-select: none; position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #030813; color: #fff; line-height: 1.25; text-align: center; overflow: hidden; }
.demo[hidden] { display: none; }
.demo *, .demo *::before, .demo *::after { box-sizing: border-box; }
.demo :where(button) { touch-action: manipulation; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.demo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.demo svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo h3 { margin: 0; font-size: 1.25em; font-weight: 750; letter-spacing: -.01em; }
.demo p { margin: 0; }
.dm-sub { font-size: .78em; color: var(--text-2); }
.dm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: max(2.7em, 32px); padding: 0 1.1em; border-radius: 999px; background: var(--button); font-weight: 600; font-size: .9em; }
.dm-btn.ghost { background: rgba(255, 255, 255, .12); }
.dm-btn:disabled { opacity: .5; }
.dm-top { padding: 3.6em .9em .5em; }
.dm-top b { display: block; font-size: 1.1em; }

/* deck */
.dk-bar { display: block; height: .22em; margin-top: .5em; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.dk-bar u { display: block; height: 100%; width: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.dk-stack { position: relative; flex: 1; margin: .5em .9em; outline: none; }
.dk-stack:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 1.6em; }
@media (pointer: coarse) { .dk-stack:focus-visible { outline: none; } } /* Safari marks a touched deck as focus-visible; the ring is for keyboards */
.dk-card { position: absolute; inset: 0; border-radius: 1.5em; overflow: hidden; background: #0A1424; border: 2px solid rgba(135, 202, 243, .22); touch-action: none; cursor: grab; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .3s; will-change: transform; }
.dk-card.drag { transition: none; cursor: grabbing; }
.dk-card.gone { pointer-events: none; }
.st { position: absolute; top: .9em; padding: .1em .55em; border: .16em solid; border-radius: .45em; font-weight: 800; font-size: 1.2em; letter-spacing: .04em; opacity: 0; background: rgba(3, 8, 19, .35); }
.st-k { left: .8em; color: var(--keep); transform: rotate(-12deg); }
.st-m { right: .8em; color: var(--marked); transform: rotate(12deg); }
.st-f { left: 50%; top: auto; bottom: 1em; margin-left: -1.4em; color: var(--sky); padding: .25em .5em; border-radius: 50%; }
.st-f svg { width: 2.2em; height: 2.2em; fill: currentColor; stroke-width: 1.6; }
.dk-btns { display: flex; justify-content: center; gap: .7em; padding: .2em .6em 1em; }
.dk-b { position: relative; width: max(2.9em, 32px); height: max(2.9em, 32px); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.dk-b::after { content: ""; position: absolute; inset: -.5em; }
.dk-b.m { color: var(--marked); } .dk-b.k { color: var(--keep); } .dk-b.f { color: var(--sky); }
.dk-b:disabled { opacity: .35; }
.dk-done, .dm-res { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; gap: .6em; padding: 1.5em; background: #030813; }
.dk-done[hidden], .dm-res[hidden] { display: none; }
.dm-chk { width: 4em; height: 4em; border-radius: 50%; display: grid; place-items: center; border: .25em solid var(--keep); color: var(--keep); }
.dm-chk.sky { border-color: var(--sky); color: var(--sky); }
.dm-chk svg { width: 2em; height: 2em; stroke-width: 2.6; }

/* similar */
.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin: .6em .9em; }
.sm-p { position: relative; aspect-ratio: 4 / 5; border-radius: 1.1em; overflow: hidden; border: .18em solid rgba(255, 255, 255, .15); }
.sm-p.keep { border-color: var(--keep); } .sm-p.mark { border-color: var(--marked); }
.sm-bd { position: absolute; top: .4em; left: .4em; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sm-bd svg { width: 1.1em; height: 1.1em; stroke-width: 2.8; }
.sm-p.keep .sm-bd { background: var(--keep); } .sm-p.mark .sm-bd { background: var(--marked); }
.sm-best { position: absolute; bottom: .4em; left: .4em; padding: .1em .6em; border-radius: 99px; background: rgba(3, 8, 19, .75); font-size: .72em; font-weight: 700; }
.sm-cap { font-size: .9em; font-weight: 650; margin-bottom: .6em; }

/* bin review grid */
.bn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin: .6em .9em; transition: opacity .6s; }
.bn-grid > div { aspect-ratio: 1; border-radius: .7em; overflow: hidden; position: relative; }
.bn-grid > div::after { content: ""; position: absolute; top: .3em; right: .3em; width: 1em; height: 1em; border-radius: 50%; background: var(--marked); }
.bn-big { display: block; font-size: 1.15em; font-weight: 750; }
.dm-top .dm-sub { display: block; }

/* backup */
.bk { justify-content: center; gap: .9em; padding: 3.6em 1.1em 1.5em; text-align: left; }
.bk h3 { text-align: center; }
.bk-row { display: grid; grid-template-columns: 1fr auto; gap: .3em .6em; font-size: .85em; }
.bk-row i { grid-column: 1 / -1; display: block; height: .5em; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.bk-row u { display: block; height: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }
.bk-row b { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.bk-now { text-align: center; font-size: .78em; color: var(--text-2); }
.steps[data-lit] li { transition: opacity .3s; }
.steps[data-lit="0"] li { opacity: .3; }
.steps[data-lit="1"] li:nth-of-type(n+2) { opacity: .3; }
.steps[data-lit="2"] li:nth-of-type(n+3) { opacity: .3; }

/* free up sheet */
.fu { background: transparent; justify-content: flex-end; }
.fu::before { content: ""; position: absolute; inset: 0; background: rgba(3, 8, 19, .72); }
.fu-sheet { position: relative; display: grid; gap: .7em; padding: 1.1em 1em 1.2em; border-radius: 1.6em 1.6em 0 0; background: #0E1C30; text-align: center; border-top: 1px solid rgba(135, 202, 243, .25); }
.fu-big { font-size: 1.7em; font-weight: 800; }
.fu-warn { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .55em .7em; border-radius: 1em; background: rgba(251, 191, 36, .12); color: var(--pending); font-size: .82em; font-weight: 600; }
.fu-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.fu-prog { height: .5em; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.fu-prog u { display: block; height: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .dk-card, .dk-bar u, .bn-grid { transition: none; } }
.pop-warn { transition: opacity .25s; }
.fu-open .pop-warn { opacity: 0; pointer-events: none; }

/* beat 2: a big phone to try the deck on (no storage bar, no action row; Next lives inside the recap) */
.beat.big .storage { display: none; }
[data-demo="deck"] .act { min-height: 0; }
@media (min-width: 900px) { .beat.big { padding-top: 12px; padding-bottom: 24px; } }
.dk-hint { align-self: center; margin: 0 0 .5em; padding: .35em .9em; border-radius: 999px; background: rgba(63, 175, 243, .16); color: #fff; font-size: .74em; font-weight: 600; white-space: nowrap; transition: opacity .3s; }
.dk-hint.off { opacity: 0; }
.dk-hand { position: absolute; left: 50%; top: 52%; z-index: 20; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; color: #fff; opacity: 0; pointer-events: none; }
.dk-hand svg { width: 100%; height: 100%; stroke-width: 1.6; filter: none; }
.dk-hand.go { animation: dk-hand 1.3s ease-in-out 1; }
.dk-card.nudge { animation: dk-nudge 1.2s ease-in-out 1; }
@keyframes dk-nudge { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(1.2em) rotate(3.5deg); } 65% { transform: translateX(-1.2em) rotate(-3.5deg); } }
@keyframes dk-hand { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: .95; } 30% { transform: translateX(1.2em); } 65% { transform: translateX(-1.2em); } 90% { opacity: .95; } 100% { opacity: 0; transform: translateX(0); } }
.dk-toast { position: absolute; left: 50%; top: 9em; z-index: 30; display: inline-flex; align-items: center; gap: .45em; padding: .4em .9em; border-radius: 999px; background: rgba(3, 8, 19, .92); border: 1px solid rgba(255, 255, 255, .22); font-size: .85em; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, -.4em); transition: opacity .2s, transform .2s; pointer-events: none; }
.dk-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dk-toast svg { width: 1.15em; height: 1.15em; }
.dk-toast.k svg { color: var(--keep); } .dk-toast.m svg { color: var(--marked); } .dk-toast.f svg { color: var(--sky); }
.dk-rows { display: grid; gap: .55em; text-align: left; margin: .3em 0 .5em; font-size: .95em; font-weight: 600; }
.dk-rows div { display: flex; align-items: center; gap: .6em; }
.dk-rows svg { width: 1.4em; height: 1.4em; }
.dk-rows .k svg { color: var(--keep); } .dk-rows .m svg { color: var(--marked); } .dk-rows .f svg { color: var(--sky); }
.dk-done a.dm-btn { text-decoration: none; color: #fff; padding: 0 1.8em; }
.demo a.dm-btn { text-decoration: none; color: #fff; }
@media (prefers-reduced-motion: reduce) { .dk-card.nudge, .dk-hand.go { animation: none; } }
@media (min-width: 900px) { .beat.big .copy { grid-area: 1 / 1 / 3 / 2; align-self: center; } }

/* 44px hit areas: keep the drawn size, extend the tap area */
.dm-btn { position: relative; }
.dm-btn::after { content: ""; position: absolute; inset: -6px -4px; }
.dk-b::after { inset: -8px; }
.demo .sm-p, .demo .dk-card { touch-action: manipulation; }
.demo .dk-card { touch-action: none; }
/* beat 2 on phones: a big phone to play with (paid for here only: smaller headline, 24px headroom, no cue) */
@media (max-width: 899px) {
  .beat.big { padding-top: 24px; padding-bottom: 8px; }
  .beat.big h2.display { font-size: 1.6rem; }
  .beat.big .copy { gap: 4px; margin-bottom: 6px; }
  .beat.big .points li { font-size: 14px; }
  .beat.big .cue { display: none; }
}
/* touch phones: the phone ends where the small viewport ends, so its buttons stay above Safari 26's floating toolbar */
@media (max-width: 899px) and (pointer: coarse) { .beat.big { padding-bottom: max(calc(100lvh - 100svh + var(--ext) + 6px), calc(var(--ext) + 34px)); } }

/* ---------- Round 14 ---------- */
.sub2 { display: flex; align-items: flex-start; gap: 6px; margin: 0; max-width: 31em; font-size: 12.5px; line-height: 1.25; color: var(--text-2); text-align: left; }
.sub2 svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dk-also { display: flex; align-items: center; justify-content: center; gap: .35em; font-size: .72em; max-width: 17em; }
.dk-also svg { width: 1.3em; height: 1.3em; flex: none; stroke: var(--sky); }

/* similar group, as in the app */
.sm { padding-bottom: .8em; }
.sm .dm-top { text-align: left; padding: 3.6em 1em .3em; }
.sm .dm-top h3 { font-size: 1.15em; }
.sm-grid { gap: .5em; margin: .5em 1em; }
.sm-p { border-radius: 1em; }
.sm-hint { padding: 0 1em; text-align: left; font-size: .7em; }
.sm-go { margin: .6em 1em 0; width: calc(100% - 2em); }
.sm-alt { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin: .5em 1em 0; }
.sm-alt .dm-btn { font-size: .8em; color: var(--text-2); }

/* the bin flight inside the phone (the app's own screen) */
.bf-view { position: absolute; inset: 0; z-index: 7; display: none; background: #030813; padding: 3.6em .8em 1em; overflow: hidden; }
.bf-view.on { display: flex; flex-direction: column; justify-content: center; }
.bf-view .bf { width: 100%; background: none; border: 0; padding: 0; gap: 1em; }
.bf-view .bf-row { gap: .35em; }
.bf-view .bf-slot { width: 2.45em; height: 2.45em; }
.bf-view .bf-plus { min-width: 2.4em; height: 2em; font-size: .85em; }
.bf-view .bf-binw { width: 8.5em; margin-top: 1.4em; }
.bf-view .bf-cap { font-size: .95em; }
.bf-view .bf-cap small { display: block; margin-top: .35em; font-size: .72em; font-weight: 500; color: var(--text-3); }

/* the review screen, the permission alert and the clean screen */
.bn { padding: 3.4em .8em .6em; text-align: left; }
.bn-nav { display: flex; align-items: center; justify-content: center; gap: .6em; font-size: .8em; margin-bottom: .6em; position: relative; }
.bn-nav span { position: absolute; left: 0; font-size: 1.7em; line-height: 1; color: var(--text-2); }
.bn-h { font-size: 1.35em; letter-spacing: -.02em; }
.bn-sub { font-size: .7em; color: var(--text-2); margin: .1em 0 .6em; }
.bn-sub .red { color: var(--marked); font-weight: 700; }
.bn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin: 0; }
.bn-grid button { position: relative; aspect-ratio: 1; border-radius: .6em; overflow: hidden; }
.bn-grid button img { transition: opacity .2s; }
.bn-grid button i { position: absolute; top: .25em; right: .25em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--marked); display: grid; place-items: center; }
.bn-grid button i svg { width: .9em; height: .9em; stroke: #fff; stroke-width: 3; }
.bn-grid button.off img { opacity: .35; }
.bn-grid button.off i { display: none; }
.bn-del { margin-top: auto; width: 100%; background: var(--button); }
.bn-del:disabled { opacity: .5; }
.bn-note { margin-top: .5em; font-size: .6em; color: var(--text-3); text-align: center; }
.bn-alert { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.bn-alert[hidden] { display: none; }
.bn-box { width: 88%; padding: 1em .8em .8em; border-radius: 1.3em; background: rgba(58, 62, 72, .97); border: 1px solid rgba(255, 255, 255, .14); text-align: center; font-size: .85em; }
.bn-box b { display: block; font-size: 1em; font-weight: 700; }
.bn-box p { font-size: .8em; color: rgba(255, 255, 255, .8); margin: .4em 0 .6em; }
.bn-prev { display: block; width: 62%; aspect-ratio: 4 / 3; margin: 0 auto .7em; border-radius: .7em; overflow: hidden; }
.bn-box > div { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.bn-box button { min-height: max(2.3em, 34px); border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .9em; font-weight: 600; position: relative; }
.bn-box button::after { content: ""; position: absolute; inset: -6px -3px; }
.bn-box button[data-yes] { background: #0A84FF; }
.bn-done { position: absolute; inset: 0; z-index: 9; display: grid; align-content: center; justify-items: center; gap: .55em; padding: 1.5em; background: #030813; text-align: center; }
.bn-done[hidden] { display: none; }
.bn-amber { font-size: 1.5em; font-weight: 800; color: var(--pending); letter-spacing: -.02em; }

/* the backup screen */
.bk { justify-content: flex-start; gap: .7em; padding: 3.4em .8em .8em; text-align: left; }
.bk h3 { text-align: left; font-size: 1.1em; }
.bk-card { padding: .7em .8em; border-radius: 1.2em; border: 1px solid rgba(135, 202, 243, .22); background: #07111F; display: grid; gap: .55em; }
.bk-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .15em .5em; font-size: .78em; }
.bk-row b { font-size: 1.45em; font-weight: 800; font-variant-numeric: tabular-nums; }
.bk-row b.sky { color: var(--sky); }
.bk-row small { color: var(--text-2); font-size: .85em; }
.bk-row i { grid-column: 1 / -1; display: block; height: .45em; border-radius: 9px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bk-row u { display: block; height: 100%; background: var(--text-3); transform-origin: 0 50%; transform: scaleX(0); }
.bk-row u.sky { background: var(--sky); }
.bk-ic svg { width: 1.3em; height: 1.3em; color: var(--text-2); }
.bk-ic.sky svg { color: var(--sky); }
.bk-meta { display: flex; justify-content: space-between; font-size: .72em; color: var(--text-2); }
.bk-meta b { color: #fff; font-weight: 600; font-size: 1.05em; }
.bk-fly { gap: .4em; }
.bk-lane { position: relative; height: 5.5em; border-radius: .9em; background: #030813; display: flex; align-items: center; justify-content: space-between; padding: 0 1em; overflow: hidden; }
.bk-phone { width: 1.8em; height: 3em; stroke: var(--text-2); }
.bk-drv { width: 3.6em; height: auto; color: var(--sky); }
.bk-dots { position: absolute; left: 3.2em; right: 5em; top: 50%; border-top: 2px dotted rgba(255, 255, 255, .35); }
.bk-th { position: absolute; left: 3em; top: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; border-radius: .5em; object-fit: cover; opacity: 0; }
.bk-now { font-size: .78em; }
.bk-foot { font-size: .62em; color: var(--text-3); }
.bk-done { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: .7em; padding: 3.4em .8em .8em; background: #030813; }
.bk-done[hidden] { display: none; }
.bk-hero { height: 6.5em; border-radius: 1.1em; border: 1px solid rgba(135, 202, 243, .25); background: #07111F; display: grid; place-items: center; position: relative; }
.bk-hero svg { width: 5em; height: auto; color: var(--sky); }
.bk-ok { position: absolute; top: 1em; right: 32%; width: 1.9em; height: 1.9em; border-radius: 50%; border: .15em solid var(--sky); display: grid; place-items: center; color: var(--sky); background: #030813; }
.bk-ok svg { width: 1.1em; height: 1.1em; stroke-width: 3; }
.bk-line { display: flex; align-items: center; gap: .6em; padding: .65em .8em; border-radius: 999px; border: 1px solid rgba(135, 202, 243, .22); background: #07111F; font-size: .8em; font-weight: 600; }
.bk-line svg { width: 1.3em; height: 1.3em; color: var(--sky); flex: none; }
.bk-line em { margin-left: auto; color: var(--text-3); font-style: normal; }
.bk-doneb { margin-top: auto; align-self: stretch; }

html { touch-action: manipulation; }

/* beat 4: the flight takes the whole phone screen, the bin about 55% of its width */
.bf-view.on { justify-content: space-evenly; padding-top: 4.4em; }
.bf-view .bf { flex: 1; align-content: space-evenly; }
.bf-view .bf-binw { width: 10.2em; margin-top: 0; }
.bf-view .bf-cap { font-size: 1.05em; }
.bn-done .dm-btn { margin-top: .3em; }
/* the live demo already shows the copy, check and warning inside the phone: drop the side cards that repeat it (round 14) */
.demo-on[data-demo="backup"] .pop, .demo-on[data-demo="freeup"] .pop { display: none; }
.fu .fu-sheet { min-height: 58%; align-content: start; padding-top: 1.4em; }
.fu-sheet[hidden], .fu-chk[hidden], .fu-go[hidden] { display: none; }
.fu-t { font-size: 1.15em; }
.fu-warn svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fu-chk { display: grid; gap: .45em; }

/* beat 3 start: the month grid, then a short scan that finds the look-alikes (owner, round 14) */
.smx { padding-bottom: .8em; }
.smx .dm-top { text-align: left; padding: 3.6em 1em .5em; }
.smx .dm-top h3 { font-size: 1.15em; }
.smx-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; margin: 0 1em; border-radius: .9em; overflow: hidden; }
.smx-grid i { position: relative; aspect-ratio: 1; overflow: hidden; display: block; }
.smx-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s, transform .35s; }
.smx-grid i::after { content: ""; position: absolute; inset: 0; border: .2em solid var(--sky); border-radius: .3em; opacity: 0; transition: opacity .3s; }
.smx.found .smx-grid i:not(.hit) img { opacity: .25; }
.smx.found .smx-grid i.hit::after { opacity: 1; }
.smx.found .smx-grid i.hit img { transform: scale(.94); }
.smx-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, rgba(63, 175, 243, 0), rgba(63, 175, 243, .35) 85%, rgba(135, 202, 243, .9)); opacity: 0; transform: translateY(-100%); pointer-events: none; }
.smx.scan:not(.found) .smx-scan { opacity: 1; animation: smx-scan 1.1s linear forwards; }
@keyframes smx-scan { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
.smx-status { display: flex; align-items: center; justify-content: center; gap: .5em; margin: .9em 1em 0; font-size: .78em; color: var(--text-2); }
.smx-spin { display: none; width: 1em; height: 1em; border-radius: 50%; border: .15em solid rgba(135, 202, 243, .3); border-top-color: var(--sky); animation: smx-spin .7s linear infinite; }
.smx.scan:not(.found) .smx-spin { display: inline-block; }
.smx.found .smx-txt { color: #fff; font-weight: 650; }
@keyframes smx-spin { to { transform: rotate(360deg); } }
.smx[hidden] { display: none; }

/* bin flight: ~50 photos drop into the open lid, above the bin (round 14) */
.bf-fly { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.bf-p { position: absolute; display: block; border-radius: .6em; overflow: hidden; border: 2px solid rgba(255, 255, 255, .25); background: #0A1424; will-change: transform, opacity; }
.bf-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-more { aspect-ratio: 1; border-radius: .7em; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--text-2); font-weight: 700; font-size: .9em; }
.bf-view .bf-binw { width: 13em; }
/* in-phone Next: the primary action of the result screen */
.demo a.dm-next { margin-top: .8em; min-width: 8em; padding: 0 1.8em; }
.bk-done a.dm-next { align-self: stretch; margin-top: auto; }

/* backup lane: photos fly from the phone into a big drive; a check shows on the drive while reading back (round 14) */
.bk-lane { height: 8.5em; padding: 0 1.1em; }
.bk-phone { width: 2.2em; height: 3.7em; }
.bk-dw { position: relative; display: block; }
.bk-drv { width: 6em; display: block; }
.bk-dots { left: 3.6em; right: 7.4em; }
.bk-fp { position: absolute; border-radius: .45em; object-fit: cover; border: 1.5px solid rgba(255, 255, 255, .35); pointer-events: none; z-index: 2; will-change: transform, opacity; }
.bk-dchk { position: absolute; top: -.5em; right: -.4em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #031424; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }
.bk-dchk svg { width: 1em; height: 1em; stroke-width: 3; }
.bk-lane.checking .bk-dchk { opacity: 1; transform: scale(1); animation: bk-pulse .6s ease-in-out infinite alternate; }
@keyframes bk-pulse { to { transform: scale(1.12); } }
.demo .bk-drv { width: 6em; height: 4.8em; color: var(--sky); }
.demo .bk-phone { width: 2.2em; height: 3.7em; }
.demo .bk-dchk svg { width: 1em; height: 1em; stroke-width: 3; }
/* Delete sits right under the photos, centred, so it is always in view (owner, round 14) */
.bn-del { margin: 1em auto 0; width: 86%; min-height: 3em; font-size: 1em; }

/* ===== Round 14: one fixed spot for every main button, centred in the phone screen (owner) ===== */
.phone .screen { position: relative; }
.demo .dm-main, .phone .screen .dm-main { position: absolute; left: 50%; top: 64%; z-index: 20; width: 74%; min-height: 3em; margin: 0; padding: 0 1em; transform: translate(-50%, -50%); background: var(--button); color: #fff; font-size: 1em; font-weight: 650; text-decoration: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.dm-main[hidden] { display: none !important; }
a.dm-free { font-size: 12px; }
/* the content of each screen sits above the spot; secondary actions sit below it */
.dk-done, .dm-res, .bn-done { align-content: start; padding-top: 3.6em; }
.dk-done .dm-btn.ghost { position: absolute; left: 50%; top: calc(64% + 2.4em); transform: translateX(-50%); }
.sm .sm-grid { width: 66%; margin: .4em auto 0; }
.sm .sm-hint { position: absolute; left: 0; right: 0; top: 72%; text-align: center; }
.sm .sm-alt { position: absolute; left: 1em; right: 1em; top: 79%; margin: 0; }
.bn .bn-note { position: absolute; left: 1em; right: 1em; top: calc(64% + 2.2em); }
.bk-done a.dm-next { align-self: auto; margin-top: 0; }
.fu .fu-sheet { min-height: 62%; }
/* backup: the photos fly only into the drive inside the phone */
.demo-on[data-demo="backup"] .flyer { display: none; }

/* swipe summary: a tidy card of counts, one short line on voice and gesture, then Next on the fixed spot (owner, round 14) */
.dk-done { gap: .7em; padding: 4.2em 1em 0; }
.dk-done h3 { font-size: 1.2em; margin: 0; }
.dk-done .dm-chk { width: 3.2em; height: 3.2em; }
.dk-rows { width: 100%; margin: .2em 0 0; padding: .3em .9em; border-radius: 1em; background: #0A1626; font-size: .85em; gap: 0; }
.dk-rows div { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: .5em; padding: .55em 0; }
.dk-rows div + div { border-top: 1px solid rgba(255, 255, 255, .08); }
.dk-rows span { font-weight: 600; }
.dk-rows b { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.dk-rows .k b { color: var(--keep); } .dk-rows .m b { color: var(--marked); } .dk-rows .f b { color: var(--sky); }
.dk-also { flex-direction: column; gap: .3em; max-width: none; font-size: .72em; color: var(--text-2); }
.dk-ic { display: flex; gap: .5em; }
.dk-done .dm-btn.ghost { background: none; color: var(--text-2); font-weight: 600; top: calc(64% + 2.2em); }
.demo:has(.dk-done:not([hidden])) .dk-toast { display: none; }
.smx-grid { grid-template-columns: repeat(4, 1fr); }
.smx-status { position: absolute; left: 0; right: 0; top: 73%; margin: 0; }
.smx .dm-top { padding-top: 4.2em; }
.bn-note[hidden] { display: none; }
.bn .bn-note { top: 70%; }
.demo .dm-main, .phone .screen .dm-main { white-space: nowrap; width: 82%; font-size: .95em; }
/* screen 5: hide the screenshot's own buttons so the fixed Next is the only one */
.dm-veil { position: absolute; left: 0; right: 0; top: 51%; bottom: 0; z-index: 19; background: #030813; }
a.dm-free { font-size: .95em; }
.dm-veil { top: 45%; }
.bk-start { display: flex; flex-direction: column; gap: .8em; padding: 4.2em 1em 0; text-align: left; }
.bk-start[hidden] { display: none; }
.bk-start .bk-hero svg { width: 5em; height: 4em; color: var(--sky); }
.bk-start .dm-sub { font-size: .8em; line-height: 1.35; }
/* screens 6 and 7 keep the storage bar: Free up moves it from about 61 to about 109 GB */
.beat.big[data-beat="backup"] .storage, .beat.big[data-beat="free-up"] .storage { display: block; }
.fu .fu-sheet { min-height: 68%; padding-top: 1.2em; }
/* screen 8 on phones: the one line already says it; the round badges would cover the bigger phone */
@media (max-width: 899px) { [data-beat="yours-alone"] .pop { display: none; } }

/* screen 8: an app-style list fills the middle and hides the faded rows of the screenshot (owner, round 14) */
.demo.pv { inset: 31% 0 0 0; background: #030813; padding: .6em 1em 0; text-align: left; display: block; }
.pv-h { margin: 0 0 .5em .2em; font-size: .62em; font-weight: 600; color: var(--text-2); }
.pv-list { border-radius: 1em; background: #0A1626; border: 1px solid rgba(135, 202, 243, .14); padding: 0 .8em; }
.pv-row { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: .6em; padding: .7em 0; }
.pv-row + .pv-row { border-top: 1px solid rgba(255, 255, 255, .07); }
.pv-ic { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; background: rgba(63, 175, 243, .14); color: var(--sky); }
.demo .pv-ic svg { width: 1.15em; height: 1.15em; }
.pv-t { display: grid; gap: .1em; }
.pv-t b { font-size: .82em; }
.pv-t small { font-size: .66em; color: var(--text-2); }
.pv-ok { color: var(--keep); }
.demo .pv-ok svg { width: 1.1em; height: 1.1em; stroke-width: 2.8; }
.pv-row { padding: .45em 0; }
.pv-h { margin-bottom: .35em; }
.demo.pv { padding-top: .4em; }

/* Free up result: the month's photos leave the phone for the drive, the gigabytes count up (owner, round 14) */
.fx { position: absolute; inset: 0; z-index: 4; padding: 4.2em 1em 0; background: #030813; text-align: center; }
.fx[hidden] { display: none; }
.fx-h { margin: 0 0 .6em; font-size: 1.1em; }
.fx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25em; }
.fx-grid i { position: relative; aspect-ratio: 1; border-radius: .35em; display: block; outline: 1.5px dashed transparent; outline-offset: -1.5px; transition: outline-color .3s; }
.fx-grid i.gone { outline-color: rgba(135, 202, 243, .3); }
.fx-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .35em; z-index: 2; will-change: transform, opacity; }
.fx-drv { position: relative; width: 6.4em; margin: 1.6em auto 0; color: var(--sky); }
.demo .fx-drv svg { width: 6.4em; height: 5.1em; display: block; }
.fx-ok { position: absolute; top: -.3em; right: -.5em; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #031424; opacity: 0; transform: scale(.3); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.demo .fx-ok svg { width: 1em; height: 1em; stroke-width: 3; }
.fx.done .fx-ok { opacity: 1; transform: scale(1); }
.fx-gb { margin: .8em 0 0; display: grid; gap: .1em; }
.fx-gb b { font-size: 1.9em; font-weight: 800; color: var(--sky); font-variant-numeric: tabular-nums; }
.fx-gb span { font-size: .78em; color: var(--text-2); }
.fx-sub { position: absolute; left: 0; right: 0; top: 71%; font-size: .72em; opacity: 0; transition: opacity .4s; }
.fx.done .fx-sub { opacity: 1; }
.demo-on[data-demo="freeup"] .flyer { display: none; }

/* ===== Round 14: Bin + Saved and Backup + Free up are one screen each (owner) ===== */
.beat.merged { display: none !important; }
.beat.big[data-beat="bin"] .storage { display: block; }
.cf-box { position: absolute; left: 50%; top: 22%; width: 0; height: 0; z-index: 30; pointer-events: none; }
.cf-box .cf { position: absolute; width: .5em; height: .8em; border-radius: .12em; margin: -.4em 0 0 -.25em; }
.bn-done .sky { color: var(--sky); }
.fu-in .fu-sheet { animation: fu-rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fu-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
/* the under-phone buttons (screens 1 and 9) are for phones only; demo.css .act would otherwise show them on desktop */
.beat p.act.act-m { display: none; }
@media (max-width: 899px) { .beat[data-beat="full"] p.act.act-m, .beat[data-beat="get"] p.act.act-m { display: flex; } }
.beat[data-beat="get"] .legend { visibility: hidden; }

/* Main buttons: 0.5 s after one appears, a small hand taps it and the button breathes (owner, round 14). Motion only when allowed. */
@media (prefers-reduced-motion: no-preference) {
  .dm-main, .beat .act-m .button, .beat .cta .button { animation: btn-breathe 2.6s ease-in-out .5s infinite; }
  .dm-main::before, .beat .act-m .button::before, .beat .cta .button::before {
    content: ""; position: absolute; right: 9%; bottom: -.95em; width: 1.7em; height: 1.7em; z-index: 2; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%2306172C'%20stroke='white'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2011V10a2%202%200%200%200-4%200M14%2010V9a2%202%200%200%200-4%200v1M10%209.5V4a2%202%200%200%200-4%200v10'/%3E%3Cpath%20d='M18%2011a2%202%200%201%201%204%200v3a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.9-6-2.3l-3.6-3.6a2%202%200%200%201%202.8-2.8L7%2015'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0; animation: hand-in .4s ease-out .5s forwards, hand-tap 2.6s ease-in-out .9s infinite;
  }
  .beat .act-m .button, .beat .cta .button { position: relative; }
  .dm-main:active, .dm-main:hover { animation-play-state: paused; }
}
@keyframes btn-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
.beat .act-m .button, .beat .cta .button { --tx: 0; }
@keyframes btn-breathe-flat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: no-preference) { .beat .act-m .button, .beat .cta .button { animation-name: btn-breathe-flat; } }
@keyframes hand-in { from { opacity: 0; transform: translate(.4em, .4em); } to { opacity: .9; transform: none; } }
@keyframes hand-tap { 0%, 60%, 100% { transform: none; } 70% { transform: translate(-.15em, -.25em) scale(.9); } 80% { transform: none; } }
.phone .screen button.dm-main { border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }