/* Front page: small vignettes inside the text-only bands, in the same idiom
   as the how-it-works figures. home-figures.js adds .play to each band the
   first time it scrolls into view (or .still under reduced motion, where
   every vignette sits on its finished frame). */

/* photos used only here */
.ph-print { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e9dcc4'/%3E%3Crect x='10' y='10' width='80' height='80' fill='%23f6efe0'/%3E%3Crect x='16' y='16' width='68' height='58' fill='%23c9b89a'/%3E%3Ccircle cx='38' cy='40' r='10' fill='%23a58f6b'/%3E%3Cpath d='M16,74 L44,50 L60,62 L72,52 L84,66 L84,74 Z' fill='%238c7756'/%3E%3C/svg%3E"); background-size: cover; }
.ph-chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23dcf1e0'/%3E%3Crect x='14' y='22' width='56' height='36' rx='10' fill='%2325d366'/%3E%3Crect x='30' y='58' width='56' height='30' rx='10' fill='%23fff'/%3E%3Cpath d='M20,58 L26,68 L32,58 Z' fill='%2325d366'/%3E%3C/svg%3E"); background-size: cover; }
.ph-indoor { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f0e2cf'/%3E%3Crect y='62' width='100' height='38' fill='%23b08a5c'/%3E%3Crect x='14' y='18' width='30' height='40' fill='%23f9f2df'/%3E%3Cpath d='M14,18 h30 M29,18 v40 M14,38 h30' stroke='%23c9b08c' stroke-width='3'/%3E%3Crect x='58' y='42' width='30' height='20' rx='4' fill='%23e5453a'/%3E%3Crect x='60' y='62' width='4' height='10' fill='%23732c26'/%3E%3Crect x='82' y='62' width='4' height='10' fill='%23732c26'/%3E%3C/svg%3E"); background-size: cover; }
.ph-cam1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23cfe6f2'/%3E%3Crect y='60' width='100' height='40' fill='%23a3c48c'/%3E%3Ccircle cx='70' cy='30' r='12' fill='%23f2c14e'/%3E%3Cpath d='M0,60 L30,30 L52,60 Z' fill='%23557a5b'/%3E%3C/svg%3E"); background-size: cover; }
.ph-cam2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f4d9c2'/%3E%3Crect y='66' width='100' height='34' fill='%237c8fa6'/%3E%3Ccircle cx='50' cy='44' r='16' fill='%23e58f74'/%3E%3Ccircle cx='50' cy='44' r='9' fill='%23f7c08b'/%3E%3C/svg%3E"); background-size: cover; }

/* ---------------------------------------------- Scan. Confirm. Apply. glyphs */

/* one-shot when the band arrives: the magnifier looks left and right, the pin
   drops in, the tick draws itself */
#how .step-glyph svg { overflow: visible; }
#how.play article:nth-child(1) .step-glyph svg { animation: pgt-look 1.6s ease-in-out .1s 1; transform-origin: 44% 44%; }
#how.play article:nth-child(2) .step-glyph svg { animation: pgt-drop .8s cubic-bezier(.3, 1.4, .4, 1) .7s 1 both; }
#how .step-glyph .tick { stroke-dasharray: 40; stroke-dashoffset: 0; }
#how.play article:nth-child(3) .step-glyph .tick { animation: pgt-tick .6s ease-out 1.4s 1 both; }
@keyframes pgt-look { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes pgt-drop { 0% { transform: translateY(-18px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pgt-tick { 0% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 0; } }

/* ---------------------------------------------- Why do photos lose their place? */

.pf { position: relative; height: 150px; margin: 0 0 18px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 8px 22px rgba(22, 24, 28, .05); overflow: hidden; }
.pf .lab {
  position: absolute; left: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--sub);
}
.pf .th {
  position: absolute; width: 36px; height: 36px; border-radius: 9px; background-size: cover;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(22, 24, 28, .16); transform: translate(-50%, -50%);
}
.pf .th::after {
  /* the location dot: green = has GPS, grey = none, amber = filled by the app */
  content: ''; position: absolute; right: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--certain); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pf .th.none::after { background: #a1a7b0; }
.pf .th.none .why {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; color: var(--sub); white-space: nowrap; letter-spacing: .2px;
}
.pf .th.none .why b { color: var(--likely); font-weight: 800; }

/* left: an ordinary library timeline with three holes in it — the holes fill */
.pf-gaps .line { position: absolute; left: 22px; right: 22px; top: 70px; height: 2px; background: rgba(0, 0, 0, .09); }
.pf-gaps .th { top: 70px; }
.pf-gaps .th.none { --hold: 0s; }
#problem.play .pf-gaps .th.none { animation: pgt-fill 7s ease infinite; animation-delay: var(--hold); }
#problem.play .pf-gaps .th.none::after { animation: pgt-fill-dot 7s ease infinite; animation-delay: var(--hold); }
@keyframes pgt-fill {
  0%, 30%   { border-color: #fff; }
  38%, 86%  { border-color: var(--likely); }
  94%, 100% { border-color: #fff; }
}
@keyframes pgt-fill-dot {
  0%, 30%   { background: #a1a7b0; transform: scale(1); }
  34%       { transform: scale(1.5); }
  38%, 86%  { background: var(--likely); transform: scale(1); }
  94%, 100% { background: #a1a7b0; transform: scale(1); }
}
#problem.still .pf-gaps .th.none { border-color: var(--likely); }
#problem.still .pf-gaps .th.none::after { background: var(--likely); }

/* right: the phone's track above, the camera's roll below; connectors climb
   from each camera photo to the track and the camera photos take amber */
.pf-tracks .lab.a { top: 14px; }
.pf-tracks .lab.b { top: 96px; }
.pf-tracks .row { position: absolute; left: 90px; right: 22px; height: 2px; background: rgba(0, 0, 0, .09); }
.pf-tracks .row.a { top: 44px; }
.pf-tracks .row.b { top: 112px; }
.pf-tracks .row.a::before {
  /* the phone's GPS track: a soft green line under the phone photos */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 4px; border-radius: 2px;
  background: rgba(47, 209, 90, .35);
}
.pf-tracks .th { width: 32px; height: 32px; }
.pf-tracks .th.a { top: 44px; }
.pf-tracks .th.b { top: 112px; }
.pf-tracks .th.b::after { background: #a1a7b0; }
.pf-tracks .link {
  position: absolute; width: 0; top: 60px; height: 36px; border-left: 2px dashed rgba(255, 176, 32, .9);
  transform-origin: bottom center; transform: scaleY(0);
}
#problem.play .pf-tracks .link { animation: pgt-link 8s ease infinite; animation-delay: var(--hold); }
#problem.play .pf-tracks .th.b { animation: pgt-fill 8s ease infinite; animation-delay: var(--hold); }
#problem.play .pf-tracks .th.b::after { animation: pgt-fill-dot 8s ease infinite; animation-delay: var(--hold); }
@keyframes pgt-link {
  0%, 22%   { transform: scaleY(0); opacity: 1; }
  30%, 86%  { transform: scaleY(1); opacity: 1; }
  94%, 100% { transform: scaleY(1); opacity: 0; }
}
#problem.still .pf-tracks .link { transform: scaleY(1); }
#problem.still .pf-tracks .th.b { border-color: var(--likely); }
#problem.still .pf-tracks .th.b::after { background: var(--likely); }

@media (max-width: 560px) {
  .pf .th.none .why { display: none; }
  .pf .th { width: 30px; height: 30px; border-radius: 8px; }
  .pf .th::after { width: 10px; height: 10px; right: -5px; top: -5px; }
  .pf-tracks .lab { left: 10px; }
  .pf-tracks .row { left: 64px; right: 14px; }
}

/* ---------------------------------------------- 1,200 photos. Under ten minutes. */

.speed-stats {
  display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap;
  margin: -8px 0 38px;
}
.speed-stats .stat { min-width: 150px; }
.speed-stats .n {
  font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -1.4px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.speed-stats .n small { font-size: .5em; font-weight: 700; letter-spacing: -.3px; margin-left: 4px; color: var(--sub); }
.speed-stats .l { font-size: 12.5px; color: var(--sub); margin-top: 6px; font-weight: 600; }
.speed-stats .arrow { font-size: 22px; color: #c2c7ce; margin: 0 4px 22px; }
.speed-stats .stat:nth-child(5) .n { color: #1f9e44; }
@media (max-width: 560px) { .speed-stats { gap: 12px; } .speed-stats .arrow { display: none; } .speed-stats .stat { min-width: 120px; } }

/* the small art on each speed article */
.speed-art { position: relative; height: 62px; margin: 0 0 14px; }
/* 1: a stack becoming one card with a "40" and a tick */
.speed-art .stk {
  position: absolute; left: 0; top: 10px; width: 40px; height: 40px; border-radius: 10px;
  background-size: cover; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(22, 24, 28, .16);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1); transition-delay: var(--d, 0s);
  transform: translateX(var(--sx));
}
#speed.play .speed-art .stk, #speed.still .speed-art .stk { transform: translateX(var(--fx, 0)) rotate(var(--sr)); }
.speed-art .cnt {
  position: absolute; left: 34px; top: 2px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--pill); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; opacity: 0; transform: scale(.6); transition: opacity .3s ease 1.1s, transform .3s cubic-bezier(.2, 1.4, .4, 1) 1.1s;
}
.speed-art .tick {
  position: absolute; left: 66px; top: 20px; width: 26px; height: 26px; border-radius: 50%; background: var(--certain);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6);
  transition: opacity .3s ease 1.3s, transform .3s cubic-bezier(.2, 1.4, .4, 1) 1.3s;
}
.speed-art .tick svg { width: 14px; height: 14px; }
#speed.play .speed-art .cnt, #speed.play .speed-art .tick,
#speed.still .speed-art .cnt, #speed.still .speed-art .tick { opacity: 1; transform: scale(1); }
/* 2: two timeline bars, sliver vs band */
.speed-art .mb { position: absolute; left: 0; right: 0; height: 12px; border-radius: 4px; overflow: hidden; background: #e9ebef; display: flex; }
.speed-art .mb.one { top: 12px; } .speed-art .mb.two { top: 36px; }
.speed-art .mb i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform .7s ease-out; }
.speed-art .mb .s { background: rgba(47, 209, 90, .8); }
.speed-art .mb .g { background: var(--likely); }
.speed-art .mb .g.v { background: var(--uncertain); }
.speed-art .mb i:nth-child(1) { transition-delay: .2s; } .speed-art .mb i:nth-child(2) { transition-delay: .8s; } .speed-art .mb i:nth-child(3) { transition-delay: 1.4s; }
.speed-art .mb.two i:nth-child(1) { transition-delay: .5s; } .speed-art .mb.two i:nth-child(2) { transition-delay: 1.1s; } .speed-art .mb.two i:nth-child(3) { transition-delay: 1.7s; }
#speed.play .speed-art .mb i, #speed.still .speed-art .mb i { transform: scaleX(1); }
.speed-art .mbl { position: absolute; right: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; }
.speed-art .mbl.one { top: -4px; color: #1f9e44; } .speed-art .mbl.two { top: 50px; color: #9b3fd1; }
/* 3: a card swiped to the bin, and the arrow that brings it back */
.speed-art .bin { position: absolute; left: 0; top: 8px; width: 34px; height: 40px; }
.speed-art .bin svg { width: 100%; height: 100%; }
.speed-art .sw {
  position: absolute; left: 96px; top: 12px; width: 44px; height: 30px; border-radius: 8px; background-size: cover;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(22, 24, 28, .16);
}
#speed.play .speed-art .sw { animation: pgt-swipe 6s ease-in-out infinite; }
.speed-art .ret {
  position: absolute; left: 40px; top: 44px; width: 60px; height: 14px;
}
.speed-art .ret path { stroke-dasharray: 90; stroke-dashoffset: 90; }
#speed.play .speed-art .ret path { animation: pgt-return 6s ease-in-out infinite; }
#speed.still .speed-art .ret path { stroke-dashoffset: 0; }
@keyframes pgt-swipe {
  0%, 12%  { transform: translateX(0) rotate(0); opacity: 1; }
  30%, 62% { transform: translateX(-70px) translateY(6px) rotate(-10deg) scale(.7); opacity: 0; }
  78%, 100%{ transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes pgt-return {
  0%, 44%  { stroke-dashoffset: 90; opacity: 0; }
  50%      { opacity: 1; }
  74%, 86% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100%{ stroke-dashoffset: 0; opacity: 0; }
}

/* ---------------------------------------------- Your library never leaves your device. */

.priv-art {
  display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 30px;
  margin: 0 0 30px; padding: 22px 30px; border-radius: 18px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.priv-art svg { width: 100%; height: auto; display: block; }
.priv-art .pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.priv-art .pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #e9eaec;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.priv-art .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--certain); box-shadow: 0 0 0 3px rgba(47, 209, 90, .22); }
/* the packet tries to leave the phone and is stopped: the dashed line runs to
   the wall, the wall flashes, the line fades */
.priv-art .try { stroke-dasharray: 6 6; stroke-dashoffset: 0; }
#privacy-band.play .priv-art .try { animation: pgt-try 4s linear infinite; }
#privacy-band.play .priv-art .wall { animation: pgt-wall 4s ease infinite; }
#privacy-band.play .priv-art .cloud { animation: pgt-cloud 4s ease infinite; }
@keyframes pgt-try {
  0%   { stroke-dashoffset: 48; opacity: 0; }
  10%  { opacity: .9; }
  55%  { stroke-dashoffset: 0; opacity: .9; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pgt-wall {
  0%, 50%  { stroke: rgba(255, 255, 255, .35); }
  58%      { stroke: #ff5b5b; }
  75%, 100%{ stroke: rgba(255, 255, 255, .35); }
}
@keyframes pgt-cloud {
  0%, 50%  { opacity: .35; }
  58%      { opacity: .7; }
  75%, 100%{ opacity: .35; }
}
@media (max-width: 720px) { .priv-art { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .priv-art svg { max-width: 320px; } .priv-art .pills { grid-template-columns: 1fr; } }