/* Hosted variant: Google Fonts instead of embedded base64. Variable Archivo carries the width
   axis, so the web gets the font-stretch 62% design.md 3.2 specified. */



:root{
  --bg:#08080A; --sur:#141418; --sur2:#1D1D22;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.18);
  --fg:#F6F6F4; --fg2:#9A9AA0; --fg3:#84848C;
  --neon:#D8FF3E; --hot:#FF4B2B; --amber:#E0AD1F;
  --holo:linear-gradient(100deg,#FFF4D6 0%,#FFD3E8 11%,#E3CEFF 23%,#C9E4FF 34%,
    #C6F8EC 45%,#FFF0C4 57%,#FFD0E4 69%,#D8D2FF 81%,#C8E8FF 91%,#FFF4D6 100%);
  --f:'Public Sans',system-ui,sans-serif;
  --d:'Archivo',Impact,sans-serif;
  --m:'Geist Mono',ui-monospace,monospace;
}
.h1, .mark, .phmark, .claim h2, .feat h2, .card .num{font-stretch:62%}
*{box-sizing:border-box}
html,body{max-width:100%; overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f);
  font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
a{color:inherit}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px}

/* ---------------- nav ---------------- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.mark{font-family:var(--d); font-weight:900; font-size:17px; letter-spacing:.14em;
  text-transform:uppercase; background:var(--holo); -webkit-background-clip:text;
  background-clip:text; color:transparent; text-decoration:none}
.nav .mark{font-size:27px; letter-spacing:.1em}
.navlink{font-size:14px; color:var(--fg2); text-decoration:none}
.navlink:hover{color:var(--fg)}

/* ---------------- hero ---------------- */
.hero{text-align:center; padding:64px 0 30px}
.pill{display:inline-block; font-family:var(--m); font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--fg2); padding:7px 13px; border-radius:99px;
  box-shadow:inset 0 0 0 1px var(--line2)}
.h1{font-family:var(--d); font-weight:900; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(44px,8vw,84px); line-height:.92; margin:26px auto 0; max-width:13ch;
  text-wrap:balance}
.sub{color:var(--fg2); font-size:18px; line-height:27px; max-width:44ch; margin:22px auto 0}
.sub b{color:var(--fg); font-weight:600}
.cta{display:inline-flex; align-items:center; justify-content:center; height:54px;
  padding:0 30px; margin-top:30px; border-radius:16px; background:var(--neon);
  color:#0A0A08; font-weight:700; font-size:16px; text-decoration:none}
.cta:hover{filter:brightness(1.06)}
.ctasub{font-size:12.5px; color:var(--fg3); margin-top:12px}

/* ---------------- phone ---------------- */
.stage{display:flex; justify-content:center; padding:44px 0 0}
.ph{width:min(375px,92vw); height:660px; border-radius:48px; background:var(--bg);
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px var(--line2), 0 40px 100px rgba(0,0,0,.75)}
.sb{height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px 0 32px; font-family:var(--m); font-size:12px; color:var(--fg)}
.scr{position:absolute; inset:52px 0 0 0; padding:0 22px 24px; display:flex;
  flex-direction:column}
.phmark{font-family:var(--d); font-weight:900; font-size:15px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg)}
.eye{font-family:var(--m); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg3)}
.card{padding:16px 17px; border-radius:17px; background:var(--sur);
  box-shadow:inset 0 0 0 1px var(--line)}
.card + .card{margin-top:10px}
.card .top{display:flex; align-items:baseline; justify-content:space-between}
.card .cty{font-size:15px; font-weight:700}
.card .win{font-family:var(--m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg3)}
.card .num{font-family:var(--d); font-weight:900; font-size:38px; line-height:1; margin-top:8px}
.card .of{font-family:var(--m); font-size:11px; color:var(--fg2); margin-top:4px}
.bar{height:5px; border-radius:3px; background:var(--sur2); margin-top:10px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:3px}
.warnrow{margin-top:10px; font-size:12px; line-height:16px; color:var(--amber)}

/* ---------------- claims band (after Linear) ---------------- */
.band{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px;
  padding:74px 0 10px; border-top:1px solid var(--line); margin-top:84px}
@media(max-width:760px){.band{grid-template-columns:1fr}}
.claim .k{font-family:var(--m); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--neon); margin-bottom:10px}
.claim h2{font-family:var(--d); font-weight:900; text-transform:uppercase; font-size:21px;
  line-height:1.02; letter-spacing:.01em}
.claim p{color:var(--fg2); font-size:14px; line-height:21px; margin-top:9px}
.claim p b{color:var(--fg); font-weight:600}

/* ---------------- feature rows ---------------- */
.feat{display:flex; gap:54px; align-items:center; padding:84px 0 0}
.feat.rev{flex-direction:row-reverse}
@media(max-width:820px){.feat,.feat.rev{flex-direction:column; gap:30px; text-align:center}
  .feat .fx{margin:0 auto}}
.feat .tx{flex:1}
.feat h2{font-family:var(--d); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,44px); line-height:.96; letter-spacing:.01em; text-wrap:balance}
.feat p{color:var(--fg2); font-size:16px; line-height:25px; margin-top:16px; max-width:46ch}
.feat p b{color:var(--fg); font-weight:600}
.feat .fx{flex:0 0 min(400px,92vw); width:min(400px,92vw)}

/* ---- the passport flick ----
   Screen 4 claims that piecing your past together is easy and then showed nothing, and the scan
   step showed a rotated grey rectangle with an emoji in it, which reads as a broken image rather
   than a device working. This is the same component in both places: a booklet with pages turning
   under a scan beam, and a stamp landing each time a page goes over.

   Each leaf flips, then fades out while flipped and returns invisibly, so the loop never snaps
   back in view. Four leaves a quarter-cycle apart means one is always turning. */
.flick{position:relative; height:206px; margin-top:18px; border-radius:18px;
  background:var(--sur); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center; perspective:820px}
.book{position:relative; width:222px; height:134px; transform-style:preserve-3d;
  transform:rotateX(7deg)}
.leaf{position:absolute; top:0; width:111px; height:134px; background:var(--sur2);
  box-shadow:inset 0 0 0 1px var(--line2); backface-visibility:hidden}
.leaf.l{left:0; border-radius:9px 2px 2px 9px}
.leaf.r{left:111px; border-radius:2px 9px 9px 2px; transform-origin:left center;
  animation:flip 5.2s cubic-bezier(.45,.05,.4,1) infinite}
.leaf.r2{animation-delay:1.3s}
.leaf.r3{animation-delay:2.6s}
.leaf.r4{animation-delay:3.9s}
@keyframes flip{
  0%{transform:rotateY(0deg); opacity:1}
  20%{transform:rotateY(-171deg); opacity:1}
  27%{transform:rotateY(-171deg); opacity:0}
  99%{transform:rotateY(0deg); opacity:0}
  100%{transform:rotateY(0deg); opacity:1}
}
/* stamps land on the left page, one per turn */
.stamp{position:absolute; border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--fg3);
  opacity:0; animation:land 5.2s ease-out infinite}
.stamp.a{left:16px; top:22px; width:40px; height:26px; transform:rotate(-9deg)}
.stamp.b{left:62px; top:52px; width:34px; height:24px; transform:rotate(6deg);
  animation-delay:1.3s}
.stamp.c{left:20px; top:80px; width:44px; height:26px; transform:rotate(4deg);
  animation-delay:2.6s}
.stamp.d{left:66px; top:16px; width:32px; height:22px; transform:rotate(-5deg);
  animation-delay:3.9s}
@keyframes land{
  0%,14%{opacity:0}
  22%{opacity:1; box-shadow:inset 0 0 0 1.5px var(--neon)}
  40%{opacity:.85; box-shadow:inset 0 0 0 1.5px var(--fg3)}
  92%{opacity:.85} 100%{opacity:0}
}
.beam{position:absolute; left:0; right:0; height:2px; background:var(--neon);
  box-shadow:0 0 22px 5px rgba(216,255,62,.38); animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%,100%{top:14%} 50%{top:86%}}
@media (prefers-reduced-motion: reduce){
  .leaf.r,.stamp,.beam{animation:none}
  .leaf.r2,.leaf.r3,.leaf.r4{opacity:0}
  .stamp.a,.stamp.b,.stamp.c{opacity:.85}
  .beam{top:50%}
}


/* Search is the real control here, not the eighth chip. The eight offered cover most people,
   but "somewhere else" was reading as one more option of equal weight when it is the door to
   every country there is. */
.field{display:flex; align-items:center; gap:12px; margin-top:20px; height:56px;
  padding:0 17px; border-radius:15px; background:var(--sur2);
  box-shadow:inset 0 0 0 1px var(--line2); color:var(--fg2); font-size:15.5px;
  text-decoration:none}
.field svg{flex:0 0 19px; color:var(--fg3)}
.qlabel{font-family:var(--m); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg3); margin-top:22px}

/* chips, for the countries a user names rather than searches */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px}
.chip{font-size:14px; line-height:1; padding:12px 14px; border-radius:12px; background:var(--sur);
  box-shadow:inset 0 0 0 1px var(--line); color:var(--fg2); text-decoration:none}
.chip.on{background:var(--sur2); color:var(--fg); box-shadow:inset 0 0 0 1px var(--line2)}

/* lock screen, for the notifications that bring the later screens back */
.lock{flex:1; display:flex; flex-direction:column; justify-content:center}
.lock .time{font-family:var(--d); font-weight:900; font-size:78px; line-height:1;
  text-align:center; letter-spacing:-.01em}
.lock .date{font-family:var(--m); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg3); text-align:center; margin-top:8px}
.notif{margin-top:26px; padding:14px 15px; border-radius:18px; background:var(--sur2);
  box-shadow:inset 0 0 0 1px var(--line2); text-decoration:none; display:block; color:var(--fg)}
.notif .app{display:flex; gap:8px; align-items:center; font-family:var(--m); font-size:10px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--fg3)}
.notif .ttl{font-size:15px; font-weight:700; margin-top:9px}
.notif .bd2{font-size:13.5px; line-height:19px; color:var(--fg2); margin-top:3px}



/* ---------------- footer ---------------- */
.foot{margin-top:96px; border-top:1px solid var(--line); padding:34px 0 56px;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline;
  justify-content:space-between; color:var(--fg3); font-size:13px}
.foot a{color:var(--fg2); text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot .legal{width:100%; margin-top:6px; font-size:12.5px; color:var(--fg3)}