/* 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}

/* ---- one screen at a time */
.panels [data-panel]:not([hidden]){animation:panelIn .35s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panels .hero{min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px);display:grid;align-items:center;padding:24px 0}
.panels section:not(.hero){padding-top:56px}
.panels section.tight[data-panel=get]{padding-top:0}
.panels .safety{margin-top:24px;margin-bottom:24px}
nav.sections a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px}
nav.sections a[aria-current]{background:var(--lav);color:var(--indigo-deep)}
nav.sections a svg{display:none}

/* ---- headings with the app's shifting indigo to violet */
.hero h1 span,section h2,.lost h1{background:linear-gradient(100deg,var(--indigo) 0%,var(--violet) 30%,#DB2777 50%,var(--violet) 70%,var(--indigo) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:inkShift 9s ease-in-out infinite}
.safety h2{background-image:linear-gradient(100deg,#fff 0%,#C7CAFF 30%,#F9A8D4 50%,#C7CAFF 70%,#fff 100%)}
section h2{padding-bottom:.08em}
@keyframes inkShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* phones: the navigation becomes a tab bar at the bottom, like the app */
@media (max-width:900px){
  .top nav.sections{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;gap:0;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line)}
  nav.sections a{flex-direction:column;gap:2px;font-size:11px;padding:6px 4px;border-radius:12px;min-width:56px;text-align:center}
  nav.sections a span{white-space:nowrap}
  nav.sections a svg{display:block}
  nav.sections a[aria-current]{background:none;color:var(--indigo)}
  body{padding-bottom:84px}
  .panels .hero{min-height:calc(100dvh - 68px - 84px)}
}
@media (max-width:380px){nav.sections a{font-size:10px;min-width:48px}}
@media (prefers-reduced-motion:reduce){.hero h1 span,section h2{animation:none}.panels [data-panel]{animation:none!important}}
.top nav.sections{gap:4px}
@media (max-width:900px){.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}}

section[data-panel][hidden]{display:none!important}

/* ---- phone polish */
.beta{white-space:nowrap}
.top{padding-top:env(safe-area-inset-top)}
.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.panels section[data-panel=get]:not(.tight){padding-bottom:24px}
@media (max-width:520px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .top .wrap{gap:12px}
  .hero h1{font-size:44px}
  .panels .hero{padding-top:12px}
  .ctas .btn{min-height:50px}
  footer{padding-bottom:24px}
}
@media (max-width:400px){.beta{display:none}}
a,button{-webkit-tap-highlight-color:transparent}

/* ---- v16: one tab bar everywhere (as on phones), and a cleaner beta label */
.top .btn.primary{margin-left:auto}
.top nav.sections{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 28px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px;box-sizing:border-box;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;box-shadow:0 0 0 1px var(--line),0 18px 40px -18px rgba(14,20,64,.45)}
.top nav.sections a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:6px 2px;border-radius:16px;color:var(--muted);text-decoration:none;font:600 12px/1.1 var(--sans);text-align:center;cursor:pointer;box-sizing:border-box}
.top nav.sections a svg{display:block;width:22px;height:22px;flex:none}
.top nav.sections a span{display:block;white-space:nowrap}
.top nav.sections a:hover{color:var(--indigo)}
.top nav.sections a[aria-current]{background:var(--lav);color:var(--indigo-deep)}
.top nav.sections a:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
body{padding-bottom:104px}
.panels .hero{min-height:calc(100dvh - 68px - 96px)}
@media (max-width:900px){
  .top nav.sections{left:0;transform:none;bottom:0;width:100%;border-radius:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--line)}
  .top nav.sections a{font-size:11px}
  .top nav.sections a[aria-current]{background:none;color:var(--indigo)}
  body{padding-bottom:84px}
  .panels .hero{min-height:calc(100dvh - 68px - 84px)}
}
@media (max-width:380px){nav.sections a{font-size:10px}}

.beta{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:99px;font:700 12px/1 var(--sans);letter-spacing:.01em;color:var(--indigo-deep);background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(120deg,var(--indigo),var(--violet),#DB2777) border-box;border:1.5px solid transparent;white-space:nowrap;vertical-align:middle}
.beta::before{content:'';width:7px;height:7px;border-radius:50%;background:#DB2777;box-shadow:0 0 0 3px color-mix(in srgb,#DB2777 18%,transparent)}
.brand{align-items:center}
@media (max-width:400px){.beta{display:inline-flex;height:22px;padding:0 8px 0 7px;font-size:11px}}
@media (max-width:340px){.beta{display:none}}

.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 96%,transparent)}

/* ---- v17: the tab bar sits at the top, inside the header */
.top .wrap{height:auto;min-height:68px;padding-top:8px;padding-bottom:8px}
.top nav.sections{position:static;transform:none;left:auto;bottom:auto;width:min(520px,100%);margin:0 auto;box-shadow:0 0 0 1px var(--line);border-radius:20px;padding:5px}
.top nav.sections a{min-height:48px}
.top .btn.primary{margin-left:0}
body{padding-bottom:0}
.panels .hero{min-height:calc(100dvh - 90px)}
@media (max-width:900px){
  .top .wrap{flex-wrap:wrap;row-gap:8px}
  .top .brand{margin-right:auto}
  .top nav.sections{order:3;width:100%;border-radius:18px;padding:4px;box-shadow:0 0 0 1px var(--line);bottom:auto}
  .top nav.sections a[aria-current]{background:var(--lav);color:var(--indigo-deep)}
  body{padding-bottom:0}
  .panels .hero{min-height:auto}
}