/* Relay website. Same fonts, colours and mascot as the app.
   Layout: one left-aligned column of reading width, with the hero and the three phones
   allowed to go wider. The one moving thing is a file crossing from one phone to the other. */
@font-face{font-family:'Jakarta';font-weight:400;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jakarta';font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Jakarta';font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Jakarta';font-weight:700;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Jakarta';font-weight:800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Mono';font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hand';font-weight:600;font-display:swap;src:url(/fonts/caveat-latin-600-normal.woff2) format('woff2')}

:root{
  --bg:#F5F6FF; --paper:#FFFFFF; --ink:#0E1440; --muted:#535A8A; --line:#E2E4F8;
  --indigo:#4F46E5; --indigo-deep:#3730A3; --violet:#7C3AED; --lav:#ECEBFF; --peri:#A5A8F5; --mint:#047857; --mint-soft:#D1FAE5;
  --sans:'Jakarta',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hand:'Hand','Segoe Print','Bradley Hand',cursive;
  --wide:1160px; --read:680px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo)}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:12px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(30px,4.2vw,46px);font-weight:800}
h3{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:24px}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:34em}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--paper);padding:8px 12px;z-index:10}

/* ---- header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:24px;margin-left:auto}
.top nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.top nav a:hover{color:var(--indigo)}
.beta{font-size:13px;font-weight:700;color:var(--indigo-deep);background:var(--lav);border-radius:99px;padding:3px 10px;letter-spacing:0}

/* ---- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:99px;font:800 16px var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--indigo);color:#fff;box-shadow:0 10px 24px -12px rgba(79,70,229,.8)}
.btn.primary:hover{background:var(--indigo-deep)}
.btn.plain{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.plain:hover{box-shadow:inset 0 0 0 1.5px var(--peri)}
.btn.small{min-height:42px;padding:0 18px;font-size:15px}
.btn svg{flex:none}

/* ---- hero */
.hero{padding:48px 0 24px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(48px,7.4vw,92px);font-weight:800;letter-spacing:-.045em;line-height:.95}
.hero h1 span{color:var(--indigo)}
.hero h1 i{font-style:normal;margin-left:-.07em}
.hero .lede{margin-top:22px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hint{margin-top:16px;font-size:15px;color:var(--muted);max-width:30em}
.hint b{color:var(--ink)}
.invite-note{margin-top:22px;font-size:14.5px;color:var(--indigo-deep);background:var(--lav);border-radius:14px;padding:10px 14px;max-width:30em}

.stage{position:relative;aspect-ratio:1;width:100%}
.stage .phone-l{position:absolute;left:0;top:32%;width:46%}
.stage .phone-r{position:absolute;right:0;top:16%;width:45%}
.stage svg.air{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* show the right install button first, once site.js knows the device */
/* without the script: Android button and both phone hints; with it, one route per device */
.only-apple,.only-desktop,.hint-desktop{display:none}
[data-platform=ios] .only-apple,[data-platform=desktop] .only-desktop{display:inline-flex}
[data-platform=ios] .only-android,[data-platform=desktop] .only-android{display:none}
[data-platform=desktop] .hint-desktop{display:block}
[data-platform=android] .hint-apple,[data-platform=desktop] .hint-apple{display:none}
[data-platform=ios] .hint-android,[data-platform=desktop] .hint-android{display:none}

/* ---- sections */
section{padding:88px 0}
section.tight{padding-top:24px}
.head{max-width:var(--read);display:flex;flex-direction:column;gap:14px;margin-bottom:44px}

/* three phones */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:22px;counter-increment:s}
.steps .cap{display:grid;grid-template-columns:36px 1fr;gap:12px}
.steps .cap::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:800}
.steps .cap p{color:var(--muted);font-size:15.5px;margin-top:4px}

.phone{--w:100%;position:relative;width:min(100%,250px);align-self:center;padding:8px;border-radius:40px;background:#0A0B14;box-shadow:0 0 0 2px #A3A8BD,0 0 0 4px #5E6378,0 40px 60px -30px rgba(14,20,64,.55)}
.phone.galaxy{border-radius:26px;padding:6px;box-shadow:0 0 0 2px #3B3E4A,0 0 0 3px #1C1E26,0 40px 60px -30px rgba(14,20,64,.55)}
.phone .screen{position:relative;border-radius:33px;overflow:hidden}
.phone.galaxy .screen{border-radius:20px}
.phone img{width:100%}
.phone .sb{position:absolute;inset:0 0 auto 0;height:12%;max-height:30px;display:flex;align-items:center;justify-content:space-between;padding:2px 22px 0 28px;font:700 12.5px var(--sans);color:var(--ink)}
.phone .sb.dark{color:#fff}
.phone .sb i{display:flex;gap:4px;align-items:center}
.phone .sb svg{height:9px;width:auto;fill:currentColor}
.phone .island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:99px;background:#000}
.phone.galaxy .sb{padding:0 18px 0 20px;font-weight:600;font-size:11.5px;height:24px}
.phone.galaxy .hole{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:#000}

/* why */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;max-width:980px}
.why div{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.why .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff}
.why p{color:var(--muted);font-size:15.5px;margin-top:4px}
.ic.blue{background:linear-gradient(145deg,#60A5FA,#3B82F6)}.ic.green{background:linear-gradient(145deg,#34D399,#10B981)}
.ic.violet{background:linear-gradient(145deg,#A78BFA,#8B5CF6)}.ic.amber{background:linear-gradient(145deg,#FCD34D,#F59E0B)}
.ic.pink{background:linear-gradient(145deg,#F9A8D4,#EC4899)}.ic.indigo{background:linear-gradient(145deg,#818CF8,#4F46E5)}

/* safety */
.safety{background:var(--ink);color:#E9EAFB;border-radius:40px;margin-inline:12px}
.safety .head p{color:#B9BCE6}
.safety h2{color:#fff}
.flow{background:#161C4D;border-radius:28px;padding:20px 24px;margin-bottom:44px}
.flow svg{width:100%;height:auto;display:block}
.layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px}
.layers > div{border-top:1px solid #2B336F;padding-top:20px}
.layers h3{color:#fff}
.layers p{color:#B9BCE6;font-size:15.5px;margin-top:6px}
.layers code{display:block;margin-top:10px;font:400 12.5px/1.55 var(--mono);color:#C7CAFF}
.limits{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;border-top:1px solid #2B336F;padding-top:32px}
.limits ul{margin:12px 0 0;padding-left:20px;color:#B9BCE6;font-size:15.5px}
.limits li+li{margin-top:6px}
.limits a{color:#C7CAFF}

/* get */
.get{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.get > div{background:var(--paper);border-radius:28px;padding:28px;display:grid;grid-template-columns:1fr 132px;gap:8px 24px;align-content:start;box-shadow:inset 0 0 0 1.5px var(--line)}
.get h3{font-size:22px}
.get .for{font-weight:700;color:var(--indigo);font-size:15px}
.get ol{grid-column:1;margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:15.5px}
.get ol li+li{margin-top:6px}
.get ol b{color:var(--ink)}
.get .qr{grid-column:2;grid-row:1 / span 3;align-self:start;background:#fff;border-radius:16px;padding:10px;box-shadow:inset 0 0 0 1.5px var(--line)}
.get .qr svg{display:block;width:100%;height:auto}
.get .qr small{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:6px}
.get .btn{grid-column:1 / -1;justify-self:start;margin-top:18px}
[data-platform=ios] .get > div:last-child{order:-1}
.invite{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--lav);border-radius:24px;padding:20px 24px;color:var(--indigo-deep)}
.invite b{color:var(--ink)}

/* beta */
.betabox{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--paper);border-radius:32px;padding:32px;box-shadow:inset 0 0 0 1.5px var(--line)}
.betabox .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.betabox p{color:var(--muted);margin-top:6px}

footer{padding:40px 0 56px;color:var(--muted);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer a{color:var(--muted)}
footer .brand{font-size:18px}

/* ---- the mascot gently bobs; the file flies (see the SVG); both stop for reduced motion */
.bob{animation:bob 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes bob{50%{transform:translateY(-6px)}}
.parked{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bob{animation:none}.flying{display:none}.parked{display:inline}}

/* ---- narrow screens */
@media (max-width:900px){
  .top nav{display:none}
  .hero .wrap{grid-template-columns:1fr}
  .hero{padding-top:24px}
  .stage{max-width:560px;margin:8px auto 0}
  .steps{grid-template-columns:1fr;gap:56px;max-width:420px}
  .why,.layers,.limits,.get{grid-template-columns:1fr}
  .betabox{grid-template-columns:1fr}
  .betabox .links{justify-content:flex-start}
  section{padding:64px 0}
  .safety{border-radius:28px;margin-inline:8px}
}
@media (max-width:520px){
  .wrap{padding-inline:18px}
  .get > div{grid-template-columns:1fr}
  .get .qr{display:none}
  .ctas .btn{flex:1 1 100%}
  .flow{padding:12px}
}

/* ---- 404 */
.lost{min-height:100vh;display:grid;align-items:center;padding:48px 0}
.lost .wrap{display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:var(--read)}
.lost h1{font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.04em}