/* AviNat launch website. Brand colours from the app's design tokens (AviNat blue #1666CC, glow
 * #2C7CDB, dark accent #5AA2FF, story sweep #0A6CFF -> #22C8F0). Dark "night" bands carry the
 * security story, light "day" bands show the app. System fonts only (no web fonts, nothing
 * loaded from other sites). Motion is added by site.js and stops under prefers-reduced-motion. */
:root{
  --blue:#1666CC;--blue-2:#2C7CDB;--sky:#5AA2FF;--cyan:#22C8F0;--indigo:#4B5FD8;
  --ink:#05070B;--ink-2:#0A0F18;--ink-3:#111A28;--line-n:rgba(255,255,255,.09);
  --tn:#F3F6FA;--tn-2:#A9B6C8;--tn-3:#7E8B9D;
  --paper:#FFFFFF;--paper-2:#F2F4F7;--line-d:#DDE2E8;--td:#0E1621;--td-2:#4E5B6D;--td-3:#5E6B7C;
  --max:76rem;--r:26px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-family:var(--sans);color:var(--td);background:var(--ink);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;-webkit-font-smoothing:antialiased
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;line-height:1.55;overflow-x:hidden;background:var(--ink)}
img,svg{display:block}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:10px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:max(1.25rem,env(safe-area-inset-left))}
.narrow{max-width:50rem}
.skip{position:absolute;inset-inline-start:1rem;top:-6rem;background:#fff;color:#000;padding:.8rem 1rem;border-radius:12px;z-index:60}
.skip:focus{top:1rem}

/* Header */
.top{position:fixed;inset:0 0 auto;z-index:40;transition:background .3s,border-color .3s,backdrop-filter .3s;border-block-end:1px solid transparent;color:var(--tn)}
.top.is-scrolled,.doc-page .top{background:rgba(5,7,11,.72);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);border-color:var(--line-n)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:750;font-size:1.3rem;letter-spacing:-.02em;color:inherit}
.brand img{width:36px;height:36px;border-radius:9px}
.nav{display:flex;gap:.15rem;margin-inline-start:auto}
.nav a{color:var(--tn-2);text-decoration:none;font-weight:560;font-size:.95rem;padding:.55rem .8rem;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.4rem;border-radius:999px;font-weight:650;font-size:1rem;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn-primary{background:linear-gradient(180deg,#3B8FF2,#1666CC);color:#fff;box-shadow:0 10px 30px -10px rgba(44,124,219,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 36px -10px rgba(44,124,219,1),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-sm{min-height:2.5rem;padding:.45rem 1.1rem;font-size:.93rem}
.stores{display:flex;flex-wrap:wrap;gap:.75rem}
.store{display:inline-flex;align-items:center;gap:.7rem;min-height:3.6rem;padding:.55rem 1.7rem .55rem 1.35rem;border-radius:999px;background:linear-gradient(180deg,#FFFFFF,#DCE7F6);color:#05070B;text-decoration:none;box-shadow:inset 0 1px 0 #fff,inset 0 -6px 12px -8px rgba(22,102,204,.5),0 14px 40px -14px rgba(90,162,255,.7);transition:transform .2s,box-shadow .2s}
a.store:hover{transform:translateY(-2px);box-shadow:0 20px 46px -14px rgba(90,162,255,.95)}
.store svg{width:1.9rem;height:1.9rem;flex:none}
.store span{display:grid;line-height:1.1;text-align:start}
.store small{font-size:.72rem;font-weight:560;opacity:.72}
.store b{font-size:1.18rem;letter-spacing:-.02em}
.store[data-store="google-play"] svg{color:#1666CC}

/* Type */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-block-end:1.25rem}
.eyebrow b{font-weight:600;color:var(--tn-3)}
.eyebrow b::after{content:" —"}
.eyebrow i{width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 .3rem rgba(34,200,240,.18),0 0 1rem var(--cyan)}
h1{font-size:clamp(2.7rem,5.5vw,4.6rem);line-height:1.02;letter-spacing:-.045em;font-weight:780;text-wrap:balance}
h2{font-size:clamp(2.05rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.04em;font-weight:760;text-wrap:balance}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.25}
.grad{background:linear-gradient(100deg,#7DB8FF 5%,#22C8F0 55%,#9FE9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.6;color:var(--tn-2);max-width:40rem;text-wrap:pretty}
.note{font-size:.95rem;color:var(--tn-3);max-width:52rem;margin-block-start:2rem}
.note a,.links a{color:var(--sky);text-underline-offset:.2em}

/* The world: one field of points in 3D behind the whole page. site.js draws it and turns it into a
 * new shape for each part of the story (lattice, dust, padlock, waves, globe, ring). */
.world{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.home{color:var(--tn)}
.home main{position:relative;z-index:1}
.foot-wrap{position:relative;z-index:1}
section{position:relative;padding-block:clamp(5rem,11vw,9.5rem)}
.head{max-width:54rem;margin-block-end:clamp(2.75rem,5vw,4.5rem)}
.head .lead{margin-block-start:1.35rem}
.head.small h2,.head.small h3{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1.15}
.head.small p{margin-block-start:.75rem;color:var(--tn-2);font-size:1.08rem;max-width:40rem}

/* Hero */
.hero{padding-block:clamp(7rem,13vw,10.5rem) 0;overflow:hidden;background:radial-gradient(60rem 36rem at 78% 30%,rgba(44,124,219,.3),transparent 62%),radial-gradient(40rem 26rem at 8% 0%,rgba(34,200,240,.12),transparent 62%)}
.hero h1 .grad{display:block}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-copy .lead{margin-block:1.6rem 2.1rem}
.more{display:inline-flex;align-items:center;gap:.45rem;margin-block-start:1.5rem;color:var(--tn-2);font-weight:600;text-decoration:none;transition:color .2s}
.more:hover{color:#fff}
.more svg{width:1.05rem;height:1.05rem;animation:nudge 2.2s ease-in-out infinite}
.proof{display:flex;flex-wrap:wrap;gap:.9rem 2rem;list-style:none;padding:0;margin:2.4rem 0 0}
.proof li{display:inline-flex;align-items:center;gap:.55rem;font-size:.98rem;font-weight:620;color:#E3ECF8}
.proof svg{width:1.25rem;height:1.25rem;color:var(--cyan);filter:drop-shadow(0 0 7px rgba(34,200,240,.9))}
.hero-stage,.show-stage,.tr-stage{position:relative;display:grid;justify-items:center}
.halo{position:absolute;inset:8% 4% 12%;border-radius:50%;background:radial-gradient(closest-side,rgba(44,124,219,.55),rgba(34,200,240,.14) 55%,transparent);filter:blur(36px);animation:breathe 7s ease-in-out infinite}
/* Phones stand in 3D: a resting angle, and they turn a little toward the pointer (site.js). */
.tilt{position:relative;display:grid;justify-items:center;transform:perspective(80rem) rotateX(var(--rx,3deg)) rotateY(var(--ry,-11deg));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.show-stage .tilt{--ry:12deg}
.tilt .phone{--dw:clamp(15.5rem,24vw,20.5rem);animation:float 8s ease-in-out infinite}
/* Glass: glossy capsules with a light edge on top, like the app's own glass */
.chip,.wire,.j-cipher{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.04) 46%,rgba(120,170,255,.16)),rgba(8,15,29,.8);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 18px -12px rgba(90,162,255,.6),0 22px 50px -22px #000;-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8)}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.75rem;padding:.5rem 1.35rem .5rem .55rem;border-radius:999px;white-space:nowrap;transform:translateZ(5.5rem)}
.chip svg{width:2.35rem;height:2.35rem;padding:.45rem;border-radius:50%;background:radial-gradient(circle at 32% 24%,#8CC2FF,#1666CC 72%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px rgba(44,124,219,.85)}
.chip span{display:grid;line-height:1.25}
.chip b{font-size:.9rem}
.chip small{font-family:var(--mono);font-size:.7rem;color:#B9C7DA}
.chip-a{inset-block-start:15%;inset-inline-end:72%;animation:float 7s ease-in-out -2s infinite}
.chip-b{inset-block-end:25%;inset-inline-start:70%;animation:float 9s ease-in-out -5s infinite}
.wire{position:relative;z-index:2;display:grid;gap:.35rem;justify-items:center;margin-block-start:-2rem;padding:.8rem 1.6rem .9rem;width:min(100%,25rem);border-radius:999px}
.wire span{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#B9C7DA}
.wire span svg{width:.95rem;height:.95rem}
.wire code,.j-cipher code{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:#8FD9F5;white-space:nowrap;overflow:hidden;max-width:100%}
.specs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-block:clamp(3.5rem,7vw,6rem) 0;border-block-start:1px solid var(--line-n)}
.specs div{padding:1.6rem 1.25rem 2.2rem;border-inline-start:1px solid var(--line-n)}
.specs div:first-child{border-inline-start:0;padding-inline-start:0}
.specs dt{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:680;letter-spacing:-.02em;color:#F3F6FA;margin-block-end:.45rem}
.specs dd{margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:#7FBFE6}

/* Privacy: what we don't keep. Each line lights up as it reaches the middle of the screen. */
.vows{list-style:none;padding:0;margin:0}
.vows li{position:relative;display:grid;grid-template-columns:4.25rem minmax(0,1.3fr) minmax(0,1fr);gap:1.25rem clamp(1.5rem,4vw,4.5rem);align-items:end;padding-block:clamp(2.2rem,4.5vw,3.6rem)}
.vows li::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,var(--cyan),rgba(90,162,255,.35) 35%,var(--line-n) 70%)}
.vows .n,.pillars .n{font-family:var(--mono);font-size:.9rem;color:var(--cyan)}
.vows .n{align-self:start;padding-block-start:.9rem}
.vows h3{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.05em;font-weight:780}
.vows h3 span{display:block;color:#6F7C90}
.vows h3 b{font-weight:inherit;padding-block-end:.08em;display:inline-block}
.vows p{color:var(--tn-2);font-size:1.1rem;line-height:1.6;max-width:31rem;padding-block-end:.45rem}
.js .vows li>*{opacity:.18;translate:0 1.2rem;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
.js .vows li>p{transition-delay:.12s}
.js .vows li.is-lit>*{opacity:1;translate:0 0}
.js .vows li::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .1s}
.js .vows li.is-lit::after{transform:scaleX(1)}
.fine{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);margin-block-start:clamp(3.5rem,7vw,5.5rem)}
.fine h3,.facts dt{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tn-3);margin-block-end:1rem}
.fine dl,.fine ul{margin:0;padding:0;list-style:none}
.fine dl div,.fine li{padding-block:.9rem;border-block-start:1px solid var(--line-n);color:var(--tn-2)}
.fine dl div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem}
.fine dd{margin:0;font-family:var(--mono);font-size:.92rem;color:#9FE9FF;text-align:end}
.links{display:flex;flex-wrap:wrap;gap:1.75rem;margin-block-start:2rem;font-weight:620}

/* Security: one message on its way, then the protections as an open list (the padlock turns beside it) */
.journey{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-block-end:clamp(4rem,9vw,7.5rem)}
.j-line{position:absolute;inset-inline:12%;top:2.9rem;height:2px;background:linear-gradient(90deg,transparent,rgba(90,162,255,.55) 12%,rgba(90,162,255,.55) 88%,transparent);z-index:1}
.j-line i{position:absolute;top:-4px;inset-inline-start:0;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px 4px rgba(34,200,240,.8);animation:travel 4.5s cubic-bezier(.6,0,.4,1) infinite}
.j-node{display:grid;justify-items:center;text-align:center}
.j-vis{position:relative;z-index:2;display:grid;place-items:center;height:5.8rem;margin-block-end:1.4rem}
.j-bubble{padding:.65rem 1.1rem;border-radius:1.3rem 1.3rem .35rem 1.3rem;background:#1E63D6;color:#fff;font-weight:560;font-size:1.05rem;box-shadow:0 0 0 6px var(--ink),0 14px 34px -10px rgba(30,99,214,.95)}
.j-bubble.in{border-radius:1.3rem 1.3rem 1.3rem .35rem;background:#fff;color:#0E1621;box-shadow:0 0 0 6px var(--ink),0 14px 34px -14px rgba(255,255,255,.5)}
.j-cipher{display:grid;gap:.3rem;justify-items:center;padding:.7rem 1.5rem .8rem;border-radius:999px;max-width:100%}
.j-cipher em{display:inline-flex;align-items:center;gap:.35rem;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.j-cipher em svg{width:.8rem;height:.8rem}
.j-cipher code{font-size:.74rem;max-width:15rem;white-space:normal;text-align:center;line-height:1.5}
.j-node h3{font-size:1.35rem;letter-spacing:-.025em;margin-block-end:.5rem}
.j-node p{color:var(--tn-2);max-width:19rem}
.pillars{list-style:none;padding:0;margin:0;max-width:47rem;border-block-end:1px solid var(--line-n)}
.pillars li{display:grid;grid-template-columns:4.25rem 1fr;padding-block:clamp(1.6rem,3vw,2.3rem);border-block-start:1px solid var(--line-n)}
.pillars .n{padding-block-start:.55rem;transition:text-shadow .3s}
.pillars li:hover .n{text-shadow:0 0 16px var(--cyan)}
.pillars h3{font-size:clamp(1.5rem,2.7vw,2.15rem);letter-spacing:-.035em;line-height:1.12;margin-block-end:.65rem}
.pillars p{color:var(--tn-2);font-size:1.06rem;max-width:37rem}
.tags{margin-block-start:.9rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:#7FBFE6!important}
.tags span+span::before{content:"·";margin-inline:.65rem;color:var(--tn-3)}

/* The app */
.show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.show-tabs{display:grid}
.show-tab{position:relative;display:grid;gap:.4rem;width:100%;padding:1.25rem 0 1.25rem 1.75rem;border:0;border-inline-start:2px solid var(--line-n);background:none;font:inherit;color:#66738A;text-align:start;cursor:pointer;transition:color .35s}
.show-tab:hover{color:var(--tn-2)}
.show-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.show-kicker svg{width:1.05rem;height:1.05rem}
.show-tab b{font-size:clamp(1.55rem,2.8vw,2.2rem);letter-spacing:-.035em;line-height:1.12;font-weight:740}
.show-body{display:none;color:var(--tn-2);font-size:1.06rem;max-width:30rem;margin-block-start:.2rem}
.show-tab.is-on{color:#fff}
.show-tab.is-on .show-kicker{color:var(--cyan)}
.show-tab.is-on .show-body{display:block}
.show-bar{position:absolute;inset-block:0;inset-inline-start:-2px;width:2px;background:linear-gradient(180deg,var(--sky),var(--cyan));box-shadow:0 0 12px var(--cyan);transform:scaleY(0);transform-origin:50% 0}
.show-tab.is-on .show-bar{transform:scaleY(1)}
.show.is-auto .show-tab.is-on .show-bar{animation:fillY 6s linear both}
.show-panel{grid-area:1/1;opacity:0;transform:translateY(1.2rem) scale(.96);transition:opacity .55s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.show-panel.is-on{opacity:1;transform:none;pointer-events:auto}
.show-out{display:none;margin-block-start:1.75rem;text-align:center;max-width:28rem;margin-inline:auto}
.show-out b{display:block;font-size:1.5rem;letter-spacing:-.03em;margin-block-end:.4rem}
.show-out span{color:var(--tn-2)}
html:not(.js) .show-body{display:block}
html:not(.js) .show-stage .tilt{display:flex;gap:1.5rem;overflow-x:auto;transform:none}
html:not(.js) .show-panel{opacity:1;transform:none;flex:none}

/* Translation and Pro */
#translate{overflow:hidden}
.tr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.tr-copy .lead{margin-block-start:1.35rem}
.ticks{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1rem}
.ticks li{display:grid;grid-template-columns:1.6rem 1fr;gap:.85rem;align-items:start;font-size:1.12rem;color:#E3ECF8}
.ticks svg{width:1.6rem;height:1.6rem;padding:.28rem;border-radius:50%;background:linear-gradient(180deg,#3B8FF2,#1666CC);color:#fff}
.marquee{margin-block:clamp(3.5rem,7vw,6rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee div{display:flex;gap:3rem;width:max-content;animation:slide 60s linear infinite}
.marquee span{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:740;letter-spacing:-.03em;color:rgba(255,255,255,.16);white-space:nowrap}
.marquee span:nth-child(3n+1){color:rgba(125,184,255,.6)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;border-block-start:1px solid var(--line-n)}
.steps li{position:relative;padding-block-start:2rem}
.steps li::before{content:"";position:absolute;top:-5px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px 2px rgba(34,200,240,.8)}
.steps span{display:block;font-family:var(--mono);font-size:.85rem;color:var(--cyan);margin-block-end:.8rem}
.steps h4{font-size:1.2rem;letter-spacing:-.02em;margin-block-end:.5rem}
.steps p{color:var(--tn-2);font-size:.98rem}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faq-grid .head{position:sticky;top:7rem;margin:0}
.shape-space{display:none}
.faq{border-block-start:1px solid var(--line-n)}
.faq details{border-block-end:1px solid var(--line-n)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.5rem 0;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:650;letter-spacing:-.02em;transition:color .2s}
.faq summary:hover{color:var(--sky)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.7rem;height:.7rem;border-inline-end:2px solid var(--cyan);border-block-end:2px solid var(--cyan);transform:rotate(45deg);transition:transform .25s;margin-inline-end:.3rem}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding-block-end:1.6rem;color:var(--tn-2);max-width:44rem;font-size:1.05rem}

/* Download */
.download{padding-block:clamp(7rem,15vw,13rem);text-align:center;overflow:hidden}
.download .wrap{display:grid;justify-items:center}
.download-mark{width:96px;height:96px;border-radius:24px;margin-block-end:2rem;box-shadow:0 30px 70px -20px rgba(44,124,219,.9)}
.download h2{font-size:clamp(2.8rem,8vw,6rem);letter-spacing:-.05em}
.download .lead{margin-block:1.4rem 2.4rem}
.download .stores{justify-content:center}

/* Company and footer */
.company{padding-block:clamp(3.5rem,7vw,5.5rem)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin:0;padding-block-start:2rem;border-block-start:1px solid var(--line-n)}
.facts dd{margin:0;line-height:1.55;color:#DCE6F3}
.facts a{color:var(--sky);text-underline-offset:.2em}
.foot-wrap{background:var(--ink);color:var(--tn-2);padding-block:4rem 2.5rem;border-block-start:1px solid var(--line-n)}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem}
.foot .brand{color:#fff}
.foot p{margin-block-start:.9rem;max-width:18rem}
.foot h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tn-3);font-weight:600;margin-block-end:1rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.legalese{margin-block-start:3rem;padding-block-start:1.75rem;border-block-start:1px solid var(--line-n);font-size:.84rem;color:var(--tn-3);display:grid;gap:.35rem}

/* Reveal on scroll (only when the script runs) */
.js [data-reveal]{opacity:0;transform:translateY(1.6rem);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- The iPhone and the app screens (sizes in iPhone points: 1pt = var(--pt)) ---------- */
.phone{--dw:19rem;--pt:calc(var(--dw)/415);position:relative;z-index:1;width:var(--dw);aspect-ratio:415/874;padding:calc(11*var(--pt));border-radius:calc(64*var(--pt));background:linear-gradient(145deg,#3A4150,#0B0D12 38%,#1B2029 70%,#3A4150);box-shadow:inset 0 0 0 calc(1.5*var(--pt)) rgba(255,255,255,.22),0 calc(60*var(--pt)) calc(110*var(--pt)) calc(-36*var(--pt)) rgba(2,10,28,.85),0 calc(24*var(--pt)) calc(50*var(--pt)) calc(-20*var(--pt)) rgba(44,124,219,.5)}
.phone-screen{--a:#1666CC;--bg:#fff;--grp:#F2F4F7;--txt:#0E1621;--txt2:#5E6B7C;--txt3:#8A94A3;--sep:#DDE2E8;--glass:rgba(255,255,255,.82);--rim:rgba(14,22,33,.09);
  position:relative;width:100%;height:100%;border-radius:calc(54*var(--pt));overflow:hidden;background:var(--bg);color:var(--txt);font-size:calc(16*var(--pt));line-height:1.3;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;letter-spacing:0;text-align:start;isolation:isolate}
.phone-screen>div{position:absolute;inset:0;display:flex;flex-direction:column}
.phone-screen b{font-weight:600}
.phone-screen small{font-size:inherit}
.a-ic{width:calc(22*var(--pt));height:calc(22*var(--pt));flex:none}
.a-status{position:relative;z-index:5;flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(54*var(--pt));padding:calc(8*var(--pt)) calc(30*var(--pt)) 0 calc(42*var(--pt));font-size:calc(16*var(--pt))}
.a-status.on-dark{color:#fff}
.a-island{position:absolute;inset-inline-start:50%;top:calc(11*var(--pt));width:calc(118*var(--pt));height:calc(34*var(--pt));margin-inline-start:calc(-59*var(--pt));border-radius:99px;background:#000}
.a-status span{display:flex;align-items:center;gap:calc(6*var(--pt))}
.a-status svg{height:calc(11.5*var(--pt));width:auto;fill:currentColor}
.a-home{position:absolute;z-index:6;inset-inline-start:50%;bottom:calc(8*var(--pt));width:calc(134*var(--pt));height:calc(5*var(--pt));margin-inline-start:calc(-67*var(--pt));border-radius:9px;background:currentColor;opacity:.85}
.a-av{flex:none;width:calc(54*var(--pt));height:calc(54*var(--pt));border-radius:50%;object-fit:cover}
.a-init{display:grid;place-items:center;color:#fff;font-weight:600;font-size:calc(20*var(--pt))}
.a-init .a-ic{width:calc(28*var(--pt));height:calc(28*var(--pt))}
.h-0{background:#1D5FB4}.h-2{background:#2B7A30}.h-3{background:#8F5300}.h-6{background:#6A3FB5}.h-7{background:#3949AB}
.a-round{position:relative;flex:none;display:grid;place-items:center;width:calc(44*var(--pt));height:calc(44*var(--pt));border-radius:50%;background:var(--glass);box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim),0 calc(3*var(--pt)) calc(10*var(--pt)) rgba(14,22,33,.1)}
.a-round.dark{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 0 calc(.6*var(--pt)) rgba(255,255,255,.16)}
.a-round em,.a-rowend em,.a-seg em,.a-tabbar em{display:grid;place-items:center;min-width:calc(20*var(--pt));height:calc(20*var(--pt));padding-inline:calc(5*var(--pt));border-radius:99px;background:var(--a);color:#fff;font-style:normal;font-weight:600;font-size:calc(12*var(--pt))}
.a-round em{position:absolute;top:calc(-5*var(--pt));inset-inline-end:calc(-5*var(--pt))}

/* Conversation */
.a-chat{background-color:#EDF1F6;background-image:radial-gradient(circle,rgba(22,102,204,.13) calc(1.1*var(--pt)),transparent calc(1.6*var(--pt)));background-size:calc(22*var(--pt)) calc(22*var(--pt))}
.a-chathead{position:relative;z-index:4;flex:none;display:flex;align-items:center;gap:calc(8*var(--pt));padding:calc(4*var(--pt)) calc(12*var(--pt)) calc(8*var(--pt))}
.a-ident,.a-callcap{display:flex;align-items:center;height:calc(44*var(--pt));border-radius:99px;background:var(--glass);box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim),0 calc(3*var(--pt)) calc(10*var(--pt)) rgba(14,22,33,.1)}
.a-ident{gap:calc(8*var(--pt));padding:0 calc(16*var(--pt)) 0 calc(5*var(--pt));margin-inline-end:auto}
.a-ident .a-av{width:calc(34*var(--pt));height:calc(34*var(--pt))}
.a-ident span{display:grid;line-height:1.15}
.a-ident small{font-size:calc(12*var(--pt));color:var(--txt2)}
.a-callcap{gap:calc(18*var(--pt));padding-inline:calc(16*var(--pt));color:var(--a)}
.a-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(5*var(--pt));padding:0 calc(10*var(--pt)) calc(8*var(--pt));overflow:hidden}
.a-notice{align-self:center;display:flex;gap:calc(7*var(--pt));max-width:86%;margin:0 0 calc(6*var(--pt));padding:calc(9*var(--pt)) calc(12*var(--pt));border-radius:calc(14*var(--pt));background:rgba(255,255,255,.9);color:var(--txt2);font-size:calc(12.5*var(--pt));line-height:1.3;box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim)}
.a-notice .a-ic{width:calc(15*var(--pt));height:calc(15*var(--pt));color:var(--a)}
.a-day{align-self:center;margin:0 0 calc(4*var(--pt));padding:calc(3*var(--pt)) calc(11*var(--pt));border-radius:99px;background:#fff;color:var(--txt2);font-size:calc(12*var(--pt));font-weight:600;box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim)}
.a-msg{position:relative;max-width:78%;padding:calc(7*var(--pt)) calc(12*var(--pt));border-radius:calc(18*var(--pt));box-shadow:0 calc(1*var(--pt)) calc(2*var(--pt)) rgba(14,22,33,.08);transform-origin:0 100%}
.a-msg.in{align-self:flex-start;background:#fff;border-end-start-radius:calc(5*var(--pt))}
.a-msg.out{align-self:flex-end;background:#1E63D6;color:#fff;border-end-end-radius:calc(5*var(--pt));transform-origin:100% 100%}
.a-meta{float:inline-end;display:inline-flex;align-items:center;gap:calc(3*var(--pt));margin:calc(6*var(--pt)) 0 0 calc(10*var(--pt));font-size:calc(11*var(--pt));color:var(--txt2)}
.out .a-meta{color:rgba(255,255,255,.88)}
.a-meta .a-ic{width:calc(15*var(--pt));height:calc(15*var(--pt));color:#A8F0FF}
.a-photo{padding:calc(3*var(--pt));width:68%}
.a-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(15*var(--pt))}
.a-photo .a-meta{position:absolute;inset-inline-end:calc(9*var(--pt));bottom:calc(9*var(--pt));margin:0;padding:calc(2*var(--pt)) calc(7*var(--pt));border-radius:99px;background:rgba(0,0,0,.5);color:#fff}
.a-typing{align-self:flex-start;display:none;gap:calc(4*var(--pt));padding:calc(12*var(--pt)) calc(14*var(--pt));border-radius:calc(18*var(--pt));border-end-start-radius:calc(5*var(--pt));background:#fff}
.a-typing i{width:calc(7*var(--pt));height:calc(7*var(--pt));border-radius:50%;background:#8A94A3;animation:dots 1.1s ease-in-out infinite}
.a-typing i:nth-child(2){animation-delay:.15s}.a-typing i:nth-child(3){animation-delay:.3s}
.is-live .a-msg{display:none}
.is-live .a-msg.is-in{display:block;animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
.is-live .a-typing.is-in{display:flex}
.a-composer{flex:none;display:flex;align-items:center;gap:calc(8*var(--pt));padding:calc(4*var(--pt)) calc(10*var(--pt)) calc(26*var(--pt))}
.a-field{flex:1;display:flex;align-items:center;gap:calc(10*var(--pt));height:calc(44*var(--pt));padding-inline:calc(16*var(--pt)) calc(12*var(--pt));border-radius:99px;background:#fff;color:var(--txt3);box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim),0 calc(4*var(--pt)) calc(14*var(--pt)) rgba(0,0,0,.08)}
.a-field .a-ic:first-of-type{margin-inline-start:auto;color:#3B5A8C}
.a-send{flex:none;display:grid;place-items:center;width:calc(46*var(--pt));height:calc(46*var(--pt));border-radius:50%;background:var(--a);color:#fff;box-shadow:0 calc(4*var(--pt)) calc(12*var(--pt)) rgba(44,124,219,.45)}

/* Lists: Chats and Channels */
.a-list{background:#fff}
.a-stories{flex:none;display:flex;gap:calc(14*var(--pt));padding:calc(4*var(--pt)) calc(16*var(--pt)) 0;font-size:calc(12*var(--pt));color:var(--txt2)}
.a-stories>span{display:grid;justify-items:center;gap:calc(5*var(--pt))}
.a-ring,.a-aa{display:grid;place-items:center;width:calc(64*var(--pt));height:calc(64*var(--pt));border-radius:50%;font-style:normal}
.a-ring{padding:calc(3*var(--pt));background:conic-gradient(from 210deg,#0A6CFF,#22C8F0,#0A6CFF);box-shadow:0 0 calc(8*var(--pt)) rgba(47,123,255,.45)}
.a-ring .a-av{width:100%;height:100%;border:calc(2.5*var(--pt)) solid #fff}
.a-ring.mine{background:#C7C7CC;box-shadow:none}
.a-bubble{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:calc(2.5*var(--pt)) solid #fff;background:var(--a);color:#fff;font-style:normal;font-weight:600;font-size:calc(9.5*var(--pt));line-height:1.15;text-align:center;padding:calc(6*var(--pt))}
.a-aa{background:rgba(118,118,128,.12);color:var(--a);font-weight:700;font-size:calc(22*var(--pt))}
.a-title{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(6*var(--pt)) calc(16*var(--pt)) calc(8*var(--pt))}
.a-title b{font-size:calc(34*var(--pt));font-weight:700;letter-spacing:-.02em;color:var(--a);line-height:1.2}
.a-fab{display:grid;place-items:center;width:calc(44*var(--pt));height:calc(44*var(--pt));border-radius:50%;background:var(--a);color:#fff;box-shadow:0 calc(4*var(--pt)) calc(12*var(--pt)) rgba(44,124,219,.45)}
.a-topbtns{flex:none;display:flex;justify-content:flex-end;gap:calc(10*var(--pt));padding:0 calc(16*var(--pt))}
.a-search,.a-seg{flex:none;display:flex;align-items:center;height:calc(40*var(--pt));margin:0 calc(16*var(--pt)) calc(10*var(--pt));border-radius:99px;background:#fff;box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim),inset 0 calc(1*var(--pt)) calc(4*var(--pt)) rgba(14,22,33,.06)}
.a-search{gap:calc(8*var(--pt));padding-inline:calc(14*var(--pt));color:var(--txt2)}
.a-search .a-ic{width:calc(18*var(--pt));height:calc(18*var(--pt))}
.a-seg{height:calc(42*var(--pt));padding:calc(4*var(--pt));font-size:calc(14.5*var(--pt));font-weight:500}
.a-seg span{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(5*var(--pt));height:100%;border-radius:99px}
.a-seg .on{background:rgba(0,0,0,.08);color:var(--a);font-weight:600}
.a-row{flex:none;display:flex;align-items:center;gap:calc(12*var(--pt));height:calc(74*var(--pt));padding-inline:calc(16*var(--pt))}
.a-rowtext{flex:1;min-width:0;display:grid;gap:calc(2*var(--pt));align-self:stretch;align-content:center;border-block-end:calc(.6*var(--pt)) solid var(--sep)}
.a-rowtext b{display:flex;align-items:center;gap:calc(6*var(--pt));font-size:calc(17*var(--pt));white-space:nowrap}
.a-rowtext small{display:block;font-size:calc(15*var(--pt));color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-rowtext small .a-ic{display:inline-block;vertical-align:calc(-2*var(--pt));margin-inline-end:calc(4*var(--pt));width:calc(15*var(--pt));height:calc(15*var(--pt))}
.a-pro{padding:calc(1*var(--pt)) calc(5*var(--pt));border-radius:calc(5*var(--pt));background:var(--a);color:#fff;font-style:normal;font-size:calc(10.5*var(--pt));font-weight:700;letter-spacing:.04em}
.a-rowend{flex:none;display:grid;justify-items:end;gap:calc(5*var(--pt));align-self:stretch;align-content:center;font-size:calc(14*var(--pt));color:var(--txt2);border-block-end:calc(.6*var(--pt)) solid var(--sep);margin-inline-start:calc(-12*var(--pt));padding-inline-start:calc(12*var(--pt))}
.a-rowend.hot{color:var(--a);font-weight:600}
.a-tabbar{position:absolute;z-index:5;inset-inline:calc(14*var(--pt));bottom:calc(22*var(--pt));display:flex;height:calc(62*var(--pt));padding:calc(4*var(--pt));border-radius:99px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(calc(14*var(--pt)));backdrop-filter:blur(calc(14*var(--pt)));box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim),0 calc(8*var(--pt)) calc(26*var(--pt)) rgba(14,22,33,.16);font-size:calc(10.5*var(--pt));font-weight:600}
.a-tabbar span{position:relative;flex:1;display:grid;justify-items:center;align-content:center;gap:calc(2*var(--pt));border-radius:99px}
.a-tabbar .a-ic{width:calc(25*var(--pt));height:calc(25*var(--pt))}
.a-tabbar .on{background:rgba(0,0,0,.08);color:var(--a)}
.a-tabbar em{position:absolute;top:calc(2*var(--pt));inset-inline-end:calc(10*var(--pt));min-width:calc(17*var(--pt));height:calc(17*var(--pt));font-size:calc(10.5*var(--pt))}

/* Call */
.a-call{background:radial-gradient(120% 60% at 50% 38%,#0E2F6E,#06122B 55%,#02060F);color:#fff;align-items:center}
.a-callhead{flex:none;align-self:stretch;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(6*var(--pt)) calc(14*var(--pt)) 0}
.a-calltitle{display:grid;justify-items:center;gap:calc(2*var(--pt));font-size:calc(18*var(--pt))}
.a-calltitle small{display:flex;align-items:center;gap:calc(4*var(--pt));font-size:calc(13*var(--pt));color:rgba(255,255,255,.72)}
.a-calltitle .a-ic{width:calc(12*var(--pt));height:calc(12*var(--pt))}
.a-speaker{display:grid;justify-items:center;gap:calc(4*var(--pt));margin-block:auto;font-size:calc(26*var(--pt))}
.a-speaker small{display:flex;align-items:center;gap:calc(6*var(--pt));font-size:calc(15*var(--pt));color:rgba(255,255,255,.75)}
.a-rings{position:relative;display:grid;place-items:center;width:calc(210*var(--pt));height:calc(210*var(--pt));margin-block-end:calc(12*var(--pt))}
.a-rings .a-av{position:relative;width:calc(140*var(--pt));height:calc(140*var(--pt));box-shadow:0 0 0 calc(3*var(--pt)) rgba(255,255,255,.5),0 0 calc(50*var(--pt)) rgba(47,123,255,.9)}
.a-rings i{position:absolute;inset:calc(35*var(--pt));border-radius:50%;border:calc(1.5*var(--pt)) solid rgba(90,162,255,.7);animation:ring 3s ease-out infinite}
.a-rings i:nth-child(2){animation-delay:1s}.a-rings i:nth-child(3){animation-delay:2s}
.a-rings.light i{border-color:rgba(44,124,219,.5)}
.a-eq{display:flex;align-items:center;gap:calc(2*var(--pt));height:calc(14*var(--pt))}
.a-eq i{width:calc(3*var(--pt));height:100%;border-radius:9px;background:#30D158;animation:eq .8s ease-in-out infinite}
.a-eq i:nth-child(2){animation-delay:.2s}.a-eq i:nth-child(3){animation-delay:.4s}
.a-others{display:flex;gap:calc(28*var(--pt));margin-block-end:calc(22*var(--pt));font-size:calc(13*var(--pt))}
.a-others span{display:grid;justify-items:center;gap:calc(6*var(--pt))}
.a-others .a-av{width:calc(52*var(--pt));height:calc(52*var(--pt));font-size:calc(18*var(--pt))}
.a-sheet{flex:none;align-self:stretch;padding:calc(10*var(--pt)) calc(18*var(--pt)) calc(40*var(--pt));border-radius:calc(30*var(--pt)) calc(30*var(--pt)) 0 0;background:rgba(16,26,48,.92);box-shadow:0 0 0 calc(.6*var(--pt)) rgba(255,255,255,.14)}
.a-grab{display:block;width:calc(38*var(--pt));height:calc(5*var(--pt));margin:0 auto calc(16*var(--pt));border-radius:9px;background:rgba(255,255,255,.4)}
.a-sheet div,.a-tsheet{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;font-size:calc(12.5*var(--pt))}
.a-sheet span,.a-tsheet span{display:grid;justify-items:center;gap:calc(7*var(--pt))}
.a-ctl{display:grid;place-items:center;width:calc(62*var(--pt));height:calc(62*var(--pt));border-radius:50%;background:rgba(255,255,255,.15);color:#fff}
.a-ctl .a-ic{width:calc(27*var(--pt));height:calc(27*var(--pt))}
.a-ctl.on{background:#fff;color:#06122B}.a-ctl.end{background:#DC3545;color:#fff}
.a-ctl.soft{background:#E7F0FB;color:#0E1621}.a-ctl.ink{background:#0E1621;color:#fff}

/* Story */
.a-story{color:#fff;background:#06122B}
.a-storybg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 24%,transparent 62%,rgba(0,0,0,.62))}
.a-story>:not(.a-storybg):not(.a-home){position:relative;z-index:2}
.a-bars{flex:none;display:flex;gap:calc(4*var(--pt));padding:calc(2*var(--pt)) calc(10*var(--pt)) 0}
.a-bars i{position:relative;flex:1;height:calc(3*var(--pt));border-radius:9px;background:rgba(255,255,255,.35);overflow:hidden}
.a-bars .done{background:#fff}
.a-bars .run::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;animation:fill 6s linear infinite}
.a-storyhead{flex:none;display:flex;align-items:center;gap:calc(10*var(--pt));padding:calc(10*var(--pt)) calc(14*var(--pt))}
.a-storyhead .a-av{width:calc(38*var(--pt));height:calc(38*var(--pt))}
.a-storyhead span{display:grid;line-height:1.2;margin-inline-end:auto}
.a-storyhead small{font-size:calc(13*var(--pt));opacity:.8}
.a-caption{margin-block-start:auto;padding:0 calc(20*var(--pt)) calc(18*var(--pt));font-size:calc(22*var(--pt));font-weight:700;line-height:1.2;text-shadow:0 calc(2*var(--pt)) calc(12*var(--pt)) rgba(0,0,0,.5)}
.a-react{flex:none;display:flex;justify-content:space-between;padding:0 calc(18*var(--pt)) calc(10*var(--pt));font-size:calc(27*var(--pt))}
.a-reply{flex:none;height:calc(44*var(--pt));margin:0 calc(14*var(--pt)) calc(30*var(--pt));padding:calc(11*var(--pt)) calc(18*var(--pt));border-radius:99px;border:calc(1.2*var(--pt)) solid rgba(255,255,255,.75);color:rgba(255,255,255,.85)}

/* Translated call */
.a-tcall{align-items:center;background:radial-gradient(90% 50% at 80% 20%,#CFE0FF,transparent 70%),linear-gradient(180deg,#F1F5FF,#E9E6FB)}
.a-tcall .a-callhead{padding-block-end:0}
.a-tname{display:grid;justify-items:center;gap:calc(3*var(--pt));margin-block-start:calc(-34*var(--pt));font-size:calc(24*var(--pt))}
.a-tname small{font-size:calc(15*var(--pt));color:var(--txt2)}
.a-tname em{margin-block-start:calc(4*var(--pt));padding:calc(4*var(--pt)) calc(10*var(--pt));border-radius:99px;background:#fff;font-style:normal;font-size:calc(10.5*var(--pt));color:var(--txt);box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim)}
.a-tcall .a-rings{width:calc(150*var(--pt));height:calc(150*var(--pt));margin:calc(8*var(--pt)) 0 auto}
.a-tcall .a-rings .a-av{width:calc(104*var(--pt));height:calc(104*var(--pt));box-shadow:0 0 0 calc(3*var(--pt)) #fff,0 0 calc(40*var(--pt)) rgba(44,124,219,.6)}
.a-tcall .a-rings i{inset:calc(23*var(--pt))}
.a-captions{align-self:stretch;margin:0 calc(14*var(--pt)) calc(10*var(--pt));padding:calc(12*var(--pt)) calc(14*var(--pt));border-radius:calc(22*var(--pt));background:rgba(255,255,255,.86);box-shadow:0 0 0 calc(.6*var(--pt)) var(--rim)}
.a-captions p{margin:0}
.a-caphead{display:flex;justify-content:space-between;align-items:center;font-size:calc(12.5*var(--pt));margin-block-end:calc(8*var(--pt))!important}
.a-caphead i{padding:calc(4*var(--pt)) calc(10*var(--pt));border-radius:99px;background:#0E1621;color:#fff;font-style:normal;font-weight:600;font-size:calc(11*var(--pt))}
.a-cap{display:grid;margin-block-end:calc(7*var(--pt))!important;font-size:calc(13.5*var(--pt));color:var(--txt2);animation:cap 9s ease-in-out infinite both}
.a-cap small{font-size:calc(11*var(--pt));font-weight:600}
.a-cap b{font-size:calc(15.5*var(--pt));color:var(--txt)}
.a-cap.c2{animation-delay:1.4s}.a-cap.c3{animation-delay:2.8s}
.a-tsheet{align-self:stretch;grid-template-columns:repeat(3,1fr);row-gap:calc(10*var(--pt));margin:0 calc(14*var(--pt)) calc(26*var(--pt));padding:calc(14*var(--pt)) calc(6*var(--pt));border-radius:calc(26*var(--pt));background:rgba(255,255,255,.72);font-size:calc(11.5*var(--pt))}
.a-tsheet .a-ctl{width:calc(52*var(--pt));height:calc(52*var(--pt))}
.a-tsheet .a-ic{width:calc(23*var(--pt));height:calc(23*var(--pt))}

/* Motion */
.hero-copy>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.2s}.hero-copy>:nth-child(4){animation-delay:.32s}.hero-copy>:nth-child(5){animation-delay:.42s}.hero-copy>:nth-child(6){animation-delay:.5s}
.store,.chip{overflow:hidden}
.store{position:relative}
.store::after,.chip::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.7) 50%,transparent 64%);translate:-130% 0;animation:sheen 6s ease-in-out 1.5s infinite;pointer-events:none}
.store+.store::after{animation-delay:1.9s}
.chip::after{background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.28) 50%,transparent 64%);animation-delay:3s}
@keyframes rise{from{opacity:0;translate:0 1.5rem}}
@keyframes sheen{0%,62%{translate:-130% 0}86%,100%{translate:130% 0}}
@keyframes float{50%{translate:0 -12px}}
@keyframes breathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes travelY{0%{top:0;opacity:0}8%,92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes travel{0%{inset-inline-start:0;opacity:0}8%,92%{opacity:1}100%{inset-inline-start:100%;opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{background-position:3rem 3rem}}
@keyframes pin{0%,60%,100%{opacity:.25;transform:scale(1)}20%,40%{opacity:1;transform:scale(1.25)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{from{opacity:0;transform:translateY(calc(10*var(--pt))) scale(.9)}}
@keyframes dots{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(calc(-3*var(--pt)))}}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes cap{0%,4%{opacity:0;transform:translateY(calc(6*var(--pt)))}10%,92%{opacity:1;transform:none}100%{opacity:0}}
[dir=rtl] .marquee div{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .a-cap{opacity:1}
}

/* Document pages (Help Center, legal, link and 404) */
.doc-page{background:var(--ink);color:var(--tn);--line-d:#232B38;--td:#F3F6FA;--td-2:#A9B6C8;--paper-2:#0F1622}
.doc-page main{padding-block-start:4.25rem}
.doc{max-width:46rem;margin-inline:auto;padding-block:3.5rem 5rem;overflow-wrap:break-word}
.doc h1{font-size:clamp(2.1rem,4.5vw,3rem);letter-spacing:-.035em;line-height:1.1;margin-block-end:1.25rem}
.doc h2{font-size:1.5rem;letter-spacing:-.02em;margin:2.6rem 0 .8rem}
.doc h3{font-size:1.12rem;margin:1.8rem 0 .6rem}
.doc p{margin-block:.9rem}
.doc p,.doc li{line-height:1.7}
.doc .lead{color:var(--td-2)}
.doc a{color:var(--sky);text-underline-offset:.2em}
.doc ul,.doc ol{padding-inline-start:1.4rem}
.doc li{margin:.3rem 0}
.doc code{font-family:var(--mono);font-size:.9em;background:#132A47;padding:.1em .35em;border-radius:6px}
.doc hr{border:0;border-block-start:1px solid var(--line-d);margin:2.5rem 0}
.doc .table-wrap{overflow-x:auto;margin:1.25rem 0;border:1px solid var(--line-d);border-radius:14px}
.doc table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.95rem}
.doc th,.doc td{text-align:start;vertical-align:top;padding:.7rem .9rem;border-block-end:1px solid var(--line-d)}
.doc th{background:var(--paper-2)}
.doc tbody tr:last-child td{border-block-end:0}
.crumbs{font-size:.92rem}
.kb{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:0!important;list-style:none}
.kb li{margin:0}
.kb a{display:block;height:100%;padding:1rem 1.1rem;border:1px solid var(--line-d);border-radius:16px;text-decoration:none;color:var(--td);background:var(--ink-2);transition:border-color .2s,box-shadow .2s}
.kb a:hover{border-color:var(--blue-2);box-shadow:0 16px 40px -28px rgba(14,48,102,.6)}
.kb span{display:block;color:var(--td-2);font-size:.92rem;margin-block-start:.25rem}
.center-card{max-width:30rem;margin:3rem auto;text-align:center;border:1px solid var(--line-d);border-radius:28px;padding:2.5rem 1.5rem;box-shadow:0 30px 70px -40px rgba(14,48,102,.5)}
.center-card img{width:88px;height:88px;margin:0 auto 1.25rem;border-radius:22px}
.center-card h1{font-size:clamp(1.7rem,5vw,2.2rem)}
.center-card .btn{width:100%;max-width:18rem;margin-block-start:.5rem;color:#fff}
.handle{font-size:1.25rem;font-weight:700;color:var(--sky);overflow-wrap:anywhere}
.center-card .small{margin-block-start:1.5rem;color:var(--td-2)}

/* Smaller screens */
@media (max-width:64rem){
  .steps,.facts{grid-template-columns:repeat(2,1fr)}
  .chip-a{inset-inline-end:60%}.chip-b{inset-inline-start:58%}
}
@media (max-width:52rem){
  .world{opacity:.55}
  .nav{display:none}
  .top .btn{margin-inline-start:auto}
  .hero-grid,.show,.tr-grid,.fine{grid-template-columns:1fr}
  .hero-copy{text-align:center;display:grid;justify-items:center}
  .stores,.proof{justify-content:center}
  .hero-stage{margin-block-start:1rem}
  .tilt{--ry:-6deg}
  .tilt .phone{--dw:min(17.5rem,72vw)}
  .chip{display:none}
  .specs{grid-template-columns:1fr 1fr}
  .specs div{padding:1.2rem 1rem;border-block-end:1px solid var(--line-n)}
  .specs div:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .vows li{grid-template-columns:1fr;align-items:start;gap:.9rem}
  .vows .n{padding:0}
  .faq-grid{grid-template-columns:1fr}
  .faq-grid .head{position:static;margin-block-end:2rem}
  .shape-space{display:block;height:20rem}
  .journey{grid-template-columns:1fr;gap:2.5rem;padding-inline-start:2rem}
  .j-line{inset:1rem auto 1rem .35rem;width:2px;height:auto;background:linear-gradient(180deg,transparent,rgba(90,162,255,.6) 8%,rgba(90,162,255,.6) 92%,transparent)}
  .j-line i{top:0;inset-inline-start:-4px;animation-name:travelY}
  .j-node{justify-items:start;text-align:start}
  .j-vis{height:auto;margin-block-end:1rem}
  .pillars li{grid-template-columns:3rem 1fr}
  .show-tabs{grid-template-columns:repeat(4,1fr);gap:.4rem}
  .show-tab{padding:.7rem .2rem .6rem;justify-items:center;border:1px solid rgba(255,255,255,.14);border-radius:999px;width:auto;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
  .show-tab.is-on{border-color:rgba(140,194,255,.7);background:linear-gradient(180deg,#3B8FF2,#1666CC);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -8px rgba(44,124,219,.9)}
  .show-tab.is-on .show-kicker{color:#fff}
  .show-tab b,.show-tab .show-body,.show-bar{display:none!important}
  .show-kicker{flex-direction:column;white-space:nowrap;font-size:.62rem;letter-spacing:.06em;gap:.35rem}
  .show-kicker svg{width:1.25rem;height:1.25rem}
  .show-out{display:block}
  .tr-stage{order:2}
  .foot{grid-template-columns:1fr 1fr}
  .kb{grid-template-columns:1fr}
}
@media (max-width:34rem){
  .steps,.facts{grid-template-columns:1fr}
  .steps{border:0;gap:0}
  .steps li{border-block-start:1px solid var(--line-n);padding-block:1.6rem}
  .store{flex:1 1 100%;justify-content:center}
  .fine dl div{display:grid;gap:.2rem}
  .fine dd{text-align:start}
  .foot{grid-template-columns:1fr}
}

/* ---------- Version B, the calmer one (owner, 14 Nov: "I think it's too much ... some words are really big ...
 * can we be in the middle?"). Same page as ../website-launch; only this block, the angles in build.mjs and three
 * numbers in site.js differ: smaller headings, tighter spacing, quieter motion. ---------- */
h1{font-size:clamp(2.3rem,4.2vw,3.5rem);letter-spacing:-.04em;line-height:1.06}
h2{font-size:clamp(1.8rem,3.1vw,2.6rem);letter-spacing:-.035em;line-height:1.1}
.lead{font-size:clamp(1.02rem,1.25vw,1.15rem)}
section{padding-block:clamp(3.5rem,7vw,6rem)}
.hero{padding-block:clamp(6.5rem,10vw,8.5rem) 0}
.head{margin-block-end:clamp(2rem,3.5vw,3rem)}
.specs{margin-block-start:clamp(2.5rem,5vw,4rem)}
.specs dt{font-size:1.02rem}
.vows{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,5rem)}
.vows li{grid-template-columns:2.75rem 1fr;align-items:start;gap:.5rem 0;padding-block:1.75rem}
.vows .n{padding-block-start:.3rem}
.vows h3{grid-column:2;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.03em;font-weight:720}
.vows h3 span{display:inline;color:inherit}
.vows p{grid-column:2;font-size:1rem;max-width:none;padding:0}
.fine{margin-block-start:2.75rem}
.journey{margin-block-end:clamp(3rem,6vw,4.5rem)}
.j-node h3{font-size:1.15rem}
.pillars li{padding-block:1.4rem}
.pillars h3{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.025em}
.pillars p{font-size:1rem}
.show-tab{padding-block:.95rem}
.show-tab b{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.025em}
.show-body{font-size:1rem}
.ticks li{font-size:1.02rem}
.steps h4{font-size:1.08rem}
.faq summary{font-size:1.08rem;padding:1.15rem 0}
.faq p{font-size:1rem}
.download{padding-block:clamp(5rem,10vw,8rem)}
.download h2{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.04em}
.marquee{margin-block:clamp(2.5rem,5vw,4rem)}
.marquee div{animation-duration:95s}
.marquee span{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:650;color:rgba(255,255,255,.13)}
.marquee span:nth-child(3n+1){color:rgba(125,184,255,.4)}
.tilt{transform:perspective(80rem) rotateX(var(--rx,2deg)) rotateY(var(--ry,-6deg))}
.show-stage .tilt{--ry:6deg}
.tilt .phone{--dw:clamp(14rem,20vw,17.5rem)}
.chip{animation:none}
.store::after,.chip::after{display:none}
.halo{animation:none;opacity:.7}
.hero-copy>*{animation-duration:.7s}
.world{opacity:.62}
@media (max-width:52rem){
  .world{opacity:.4}
  .vows{grid-template-columns:1fr}
  .tilt .phone{--dw:min(15.5rem,66vw)}
  .shape-space{height:15rem}
}

/* ---------- Version C, the still one (owner, 14 Nov: "the animation is good, but I don't want it to be big ... and not
 * too much moving. It's disturbing because I really do want to see, but I couldn't see. And even make the words even
 * smaller and rechange some things."). Nothing changes by itself: the phones stand still, the app screens sit side by
 * side, the privacy lines are all visible, the shapes behind are smaller and slower. ---------- */
h1{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.03em;line-height:1.14}
.lead{font-size:clamp(.98rem,1.1vw,1.06rem);max-width:36rem}
.eyebrow{font-size:.72rem;margin-block-end:1rem}
section{padding-block:clamp(3rem,5.5vw,4.75rem)}
.hero{padding-block:clamp(6rem,8.5vw,7.5rem) 0}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hero-copy .lead{margin-block:1.2rem 1.7rem}
.head{max-width:44rem;margin-block-end:clamp(1.75rem,3vw,2.5rem)}
.head .lead{margin-block-start:1rem}
.store{min-height:3.1rem;padding:.4rem 1.4rem .4rem 1.1rem}
.store svg{width:1.6rem;height:1.6rem}
.store b{font-size:1.02rem}
.proof{margin-block-start:1.8rem}
.proof li{font-size:.9rem}
.more{font-size:.95rem;margin-block-start:1.2rem}
.more svg{animation:none}
.specs{margin-block-start:clamp(2rem,4vw,3rem)}
.specs div{padding:1.2rem 1.1rem 1.6rem}
.specs dt{font-size:.95rem}
.chip{display:none}
.tilt{transform:none}
.tilt .phone{--dw:clamp(13rem,17.5vw,15.75rem);animation:none}
.halo{inset:14% 10% 16%;opacity:.55}
.wire{margin-block-start:-1.5rem;padding:.6rem 1.3rem .7rem;width:min(100%,21rem)}
.wire code{font-size:.74rem}
.vows{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3.5vw,3.5rem)}
.vows li{grid-template-columns:2.25rem 1fr;padding-block:1.4rem}
.vows h3{font-size:1.12rem;letter-spacing:-.02em;font-weight:680}
.vows p{font-size:.93rem;line-height:1.55}
.vows .n,.pillars .n{font-size:.78rem}
.js .vows li>*{opacity:1;translate:none}
.js .vows li::after{transform:none}
.fine{margin-block-start:2.25rem;font-size:.95rem}
.fine dl div,.fine li{padding-block:.7rem}
.note{font-size:.88rem;margin-block-start:1.5rem}
.journey{margin-block-end:clamp(2.5rem,5vw,3.5rem)}
.j-line i{animation-duration:8s}
.j-vis{height:4.6rem;margin-block-end:1rem}
.j-line{top:2.3rem}
.j-bubble{font-size:.95rem;padding:.5rem .95rem}
.j-node h3{font-size:1.05rem}
.j-node p{font-size:.93rem}
.pillars{max-width:44rem}
.pillars li{grid-template-columns:3.25rem 1fr;padding-block:1.15rem}
.pillars .n{padding-block-start:.35rem}
.pillars h3{font-size:1.12rem;letter-spacing:-.02em;margin-block-end:.4rem}
.pillars p{font-size:.93rem}
.tags{font-size:.7rem;margin-block-start:.6rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2.25rem);align-items:start}
.shot{margin:0;display:grid;justify-items:center;gap:1.4rem}
.shot .phone{--dw:clamp(9.5rem,17vw,14.25rem)}
.shot figcaption{display:grid;gap:.4rem;justify-items:center;text-align:center}
.shot .show-kicker{color:var(--cyan);font-size:.68rem}
.shot figcaption b{font-size:1.08rem;letter-spacing:-.02em}
.shot figcaption p{font-size:.92rem;color:var(--tn-2);max-width:17rem}
.a-cap{animation:none;opacity:1}
.a-rings i{animation-duration:6s}
.a-rings i:nth-child(2){animation-delay:2s}.a-rings i:nth-child(3){animation-delay:4s}
.a-bars .run::after{animation:none;transform:scaleX(.45)}
.a-eq i{animation-duration:1.6s}
.ticks{margin-block-start:1.6rem;gap:.75rem}
.ticks li{font-size:.97rem}
.marquee{margin-block:clamp(2rem,4vw,3rem)}
.marquee div{animation-duration:220s}
.marquee span{font-size:clamp(1rem,1.5vw,1.25rem)}
.head.small h2,.head.small h3{font-size:clamp(1.25rem,1.9vw,1.55rem)}
.head.small p{font-size:.98rem}
.steps{gap:1.5rem}
.steps li{padding-block-start:1.5rem}
.steps h4{font-size:1rem}
.steps p{font-size:.9rem}
.faq summary{font-size:1rem;padding:1rem 0}
.faq p{font-size:.95rem;padding-block-end:1.2rem}
.download{padding-block:clamp(4.5rem,8vw,6.5rem)}
.download-mark{width:76px;height:76px;border-radius:19px;margin-block-end:1.5rem}
.download h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.download .lead{margin-block:1rem 1.8rem}
.facts{font-size:.95rem}
.js [data-reveal]{transform:translateY(.6rem);transition-duration:.5s}
.hero-copy>*{animation-duration:.5s}
.world{opacity:.55}
@media (max-width:64rem){.vows{grid-template-columns:1fr 1fr}}
@media (max-width:52rem){
  .world{opacity:.35}
  .hero-grid{grid-template-columns:1fr}
  .vows{grid-template-columns:1fr}
  .tilt .phone{--dw:min(14.5rem,62vw)}
  .shape-space{height:13rem}
  .gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-block-end:1rem;margin-inline:-1.25rem;padding-inline:1.25rem}
  .shot{scroll-snap-align:center}
  .shot .phone{--dw:min(14rem,58vw)}
  .journey{padding-inline-start:1.75rem}
  .j-line{top:1rem}
}

/* ---------- Version D, the white one (owner, 14 Nov: "make it maybe white theme, not black like this, and do something
 * different"). Still like version C; white from top to bottom; the first screen has the words in the middle with three
 * phones fanned out under them, and the app part is an open list beside two more screens. ---------- */
:root{--ink:#FFFFFF;--ink-2:#F2F4F7;--ink-3:#E8EDF4;--line-n:rgba(14,22,33,.1);--tn:#0E1621;--tn-2:#4E5B6D;--tn-3:#6B7889;--sky:#1666CC;--cyan:#0A84D8}
.top.is-scrolled,.doc-page .top{background:rgba(255,255,255,.82);border-color:var(--line-n)}
.nav a:hover{color:#0E1621;background:rgba(22,102,204,.08)}
.grad{background-image:linear-gradient(100deg,#1666CC,#0A6CFF 45%,#16A6D8)}
.eyebrow i{box-shadow:0 0 0 .3rem rgba(10,132,216,.14)}
.store{background:linear-gradient(180deg,#2B313D,#05070B);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px -14px rgba(14,22,33,.55)}
a.store:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 20px 40px -14px rgba(22,102,204,.6)}
.store[data-store="google-play"] svg{color:#5AA2FF}
.more:hover{color:#0E1621}
.proof li{color:var(--tn)}
.proof svg{filter:none}
.hero{background:radial-gradient(54rem 30rem at 50% 58%,rgba(44,124,219,.16),transparent 65%),radial-gradient(36rem 22rem at 8% 0%,rgba(34,200,240,.1),transparent 62%),linear-gradient(180deg,#F6F9FD,#FFFFFF 60%)}
.halo{background:radial-gradient(closest-side,rgba(44,124,219,.3),rgba(34,200,240,.1) 55%,transparent);opacity:.9}
.phone{box-shadow:inset 0 0 0 calc(1.5*var(--pt)) rgba(255,255,255,.22),0 calc(46*var(--pt)) calc(80*var(--pt)) calc(-34*var(--pt)) rgba(14,48,102,.5),0 calc(16*var(--pt)) calc(34*var(--pt)) calc(-18*var(--pt)) rgba(14,22,33,.3)}
.chip,.wire,.j-cipher{background:linear-gradient(180deg,#FFFFFF,#EDF2F9);border:1px solid rgba(14,22,33,.08);box-shadow:inset 0 1px 0 #fff,0 18px 40px -22px rgba(14,48,102,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
.wire span{color:#5E6B7C}
.wire code,.j-cipher code{color:#1666CC}
.specs dt{color:var(--tn)}
.specs dd,.fine dd{color:#1666CC}
.tags{color:#1666CC!important}
.j-bubble.in{box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(14,22,33,.1),0 14px 30px -16px rgba(14,48,102,.5)}
.ticks li,.facts dd{color:var(--tn)}
.marquee span{color:rgba(14,22,33,.1)}
.marquee span:nth-child(3n+1){color:rgba(22,102,204,.38)}
.foot-wrap{background:#F2F4F7}
.foot .brand,.foot a:hover{color:#0E1621}
.doc-page{background:#fff;color:#0E1621;--line-d:#DDE2E8;--td:#0E1621;--td-2:#4E5B6D;--paper-2:#F2F4F7}
.doc code{background:#E7F0FB}
.world{opacity:.5}
/* first screen: centred words, three phones */
.hero-center{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;max-width:46rem}
.hero-copy .lead{max-width:40rem}
.stores,.proof{justify-content:center}
.fan{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;justify-items:center;width:min(100%,58rem);margin-block-start:clamp(2.5rem,5vw,4rem)}
.fan .halo{inset:6% 12% 4%}
.fan-mid{position:relative;z-index:2}
.fan-mid .phone{--dw:clamp(13.5rem,19vw,16.75rem)}
.fan-side{position:relative;z-index:1}
.fan-side .phone{--dw:clamp(11rem,15.5vw,13.75rem)}
.fan-l{justify-self:end;transform:translate(22%,-4%) rotate(-7deg)}
.fan-r{justify-self:start;transform:translate(-22%,-4%) rotate(7deg)}
.wire{margin-block-start:-1.75rem;z-index:3}
/* the app: an open list beside two screens */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.featlist{list-style:none;margin:0;padding:0;border-block-end:1px solid var(--line-n)}
.featlist li{display:grid;grid-template-columns:3.25rem 1fr;padding-block:1.25rem;border-block-start:1px solid var(--line-n)}
.featlist .n{font-family:var(--mono);font-size:.78rem;color:var(--cyan);padding-block-start:.2rem}
.featlist .show-kicker{color:var(--cyan);font-size:.68rem;margin-block-end:.35rem}
.featlist h3{font-size:1.12rem;letter-spacing:-.02em;margin-block-end:.35rem}
.featlist p{font-size:.93rem;color:var(--tn-2);max-width:30rem}
.duo-phones{display:flex;justify-content:center;gap:clamp(1rem,2.5vw,2rem)}
.duo-phones .phone{--dw:clamp(10.5rem,15vw,13.5rem)}
.duo-phones .phone+.phone{margin-block-start:3rem}
@media (max-width:52rem){
  .world{opacity:.35}
  .fan{width:100%}
  .fan-mid .phone{--dw:min(13.5rem,56vw)}
  .fan-side .phone{--dw:min(10.5rem,44vw)}
  .fan-l{transform:translate(58%,-3%) rotate(-7deg)}
  .fan-r{transform:translate(-58%,-3%) rotate(7deg)}
  .duo{grid-template-columns:1fr}
  .duo-phones .phone{--dw:min(10.25rem,42vw)}
}

/* ---------- Version D, second pass (owner, 14 Nov: "It's good, but do them design. Push for more. The white one here.").
 * Depth and colour on white: a soft aurora and the app's dotted pattern behind the phones, round glossy icons in the
 * app's own row-icon colours, glossy labels beside the phones, lightly tinted bands, and one deep-blue band to finish. ---------- */
.hero{background:linear-gradient(180deg,#F4F8FE,#FFFFFF 70%)}
.hero::before{content:"";position:absolute;inset:6% -8% auto;height:48rem;background:radial-gradient(30rem 20rem at 26% 66%,rgba(90,162,255,.42),transparent 70%),radial-gradient(28rem 19rem at 74% 68%,rgba(34,200,240,.34),transparent 70%),radial-gradient(24rem 16rem at 50% 44%,rgba(120,110,240,.22),transparent 70%);filter:blur(14px);animation:aurora 40s ease-in-out infinite alternate;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(22,102,204,.2) 1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:radial-gradient(54rem 30rem at 50% 72%,#000 15%,transparent 72%);mask-image:radial-gradient(54rem 30rem at 50% 72%,#000 15%,transparent 72%);pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
@keyframes aurora{to{transform:translate3d(2%,-3%,0) scale(1.07)}}
.fan{width:min(100%,64rem)}
.fan::after{content:"";position:absolute;inset:auto 10% -2.4rem;height:3.2rem;background:radial-gradient(closest-side,rgba(14,48,102,.3),transparent);filter:blur(9px);z-index:0}
.fan-mid .phone{--dw:clamp(14.5rem,21vw,18.5rem)}
.fan-side .phone{--dw:clamp(12rem,17vw,15rem)}
.fan .halo{display:none}
.chip{display:flex;transform:none;z-index:3}
.chip b{color:#0E1621}
.chip small{color:#5E6B7C}
.chip-a{inset-block-start:9%;inset-inline:1% auto}
.chip-b{inset-block:auto 24%;inset-inline:auto 1%}
.wire{box-shadow:inset 0 1px 0 #fff,0 22px 46px -22px rgba(14,48,102,.6)}
/* round glossy icons, in the app's row-icon colours */
.orb{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;color:#fff;background:radial-gradient(circle at 30% 22%,var(--o1),var(--o2) 74%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -7px 10px -7px rgba(0,0,0,.28),0 12px 22px -10px var(--o2)}
.orb svg{width:1.3rem;height:1.3rem}
.o-blue{--o1:#74B4FF;--o2:#1666CC}.o-cyan{--o1:#70CCF5;--o2:#1A8FD1}.o-teal{--o1:#62D6E8;--o2:#1E9BB3}.o-green{--o1:#74DE8E;--o2:#28A745}
.o-indigo{--o1:#A09EF7;--o2:#5856D6}.o-purple{--o1:#DAA2F5;--o2:#AF52DE}.o-pink{--o1:#FF93A9;--o2:#FF2D55}.o-orange{--o1:#FFB56E;--o2:#E8750A}
#privacy .head{margin-inline:auto;text-align:center}
#privacy .head .lead{margin-inline:auto}
#privacy,#features,#faq{background:linear-gradient(180deg,rgba(241,246,253,.9),rgba(241,246,253,.6))}
.vows{column-gap:clamp(1.5rem,3vw,3rem)}
.vows li{grid-template-columns:3.6rem 1fr;padding-block:1.6rem}
.vows li::after{background:var(--line-n)}
.vows h3{align-self:center}
.vows .orb{grid-row:1}
.vows p{grid-column:2}
.pillars li,.featlist li{grid-template-columns:3.9rem 1fr;align-items:start}
.featlist .show-kicker{display:none}
.steps{border:0;gap:1.75rem}
.steps li{padding-block-start:0}
.steps li::before{display:none}
.steps span{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:radial-gradient(circle at 30% 22%,#74B4FF,#1666CC 74%);color:#fff;font-size:.72rem;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 20px -10px #1666CC;margin-block-end:.9rem}
.duo-phones{position:relative}
.duo-phones::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,162,255,.4),rgba(34,200,240,.14) 60%,transparent);filter:blur(30px)}
.duo-phones .phone{position:relative}
.tr-stage .halo{opacity:1;background:radial-gradient(closest-side,rgba(120,110,240,.32),rgba(34,200,240,.14) 58%,transparent)}
/* the finish: one deep-blue band */
#download{background:radial-gradient(42rem 22rem at 50% 118%,rgba(34,200,240,.6),transparent 70%),linear-gradient(135deg,#0C3A86,#1666CC 55%,#2C7CDB);color:#fff}
.download .wrap{position:relative;z-index:1}
.download .grad{background-image:linear-gradient(100deg,#FFFFFF,#CFE8FF)}
.download .lead{color:#DCEBFF}
.download .store{background:linear-gradient(180deg,#FFFFFF,#DFE9F7);color:#05070B;box-shadow:inset 0 1px 0 #fff,0 16px 36px -14px rgba(3,20,56,.7)}
.download .store[data-store="google-play"] svg{color:#1666CC}
.download-mark{box-shadow:0 26px 60px -18px rgba(3,20,56,.8)}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{grid-area:1/1;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.rings i:nth-child(1){width:24rem;height:24rem}.rings i:nth-child(2){width:38rem;height:38rem;border-color:rgba(255,255,255,.13)}.rings i:nth-child(3){width:54rem;height:54rem;border-color:rgba(255,255,255,.08)}
@media (max-width:52rem){
  .chip{display:none}
  .hero::before{height:40rem;inset-block-start:30%}
  .fan-mid .phone{--dw:min(13.5rem,56vw)}
  .fan-side .phone{--dw:min(10.5rem,44vw)}
  #privacy .head{text-align:start}
  .vows li,.pillars li,.featlist li{grid-template-columns:3.4rem 1fr}
  .steps{gap:1.5rem}
  .steps li{border:0;padding-block:0}
}

/* ---------- Version E, the blue one (owner, 14 Nov, pointing at the blue download band: "I think the main page should
 * look like this, and not how it is, and do more. And ... this circle behind it, slow moving ... redesign again.").
 * The whole page is the deep AviNat blue of that band: white words, white glossy buttons and icons, and rings that
 * breathe and turn very slowly behind the first screen and the download part. ---------- */
:root{--ink:#1259B8;--ink-2:#0E4AA0;--line-n:rgba(255,255,255,.17);--tn:#FFFFFF;--tn-2:#D9E8FF;--tn-3:#AFCBF5;--sky:#E3F0FF;--cyan:#A6ECFF}
body{background:linear-gradient(160deg,#0A2E78,#1259B8 46%,#1F72DA) fixed}
.top.is-scrolled,.doc-page .top{background:rgba(10,44,112,.74);border-color:var(--line-n)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.12)}
.top .btn-primary{background:linear-gradient(180deg,#FFFFFF,#DFE9F7);color:#0C3A86;box-shadow:inset 0 1px 0 #fff,0 12px 28px -12px rgba(3,20,56,.8)}
.grad{background-image:linear-gradient(100deg,#FFFFFF,#BFE3FF)}
.eyebrow i{background:#A6ECFF;box-shadow:0 0 0 .3rem rgba(166,236,255,.2),0 0 1rem #A6ECFF}
.store,.download .store{background:linear-gradient(180deg,#FFFFFF,#DFE9F7);color:#05070B;box-shadow:inset 0 1px 0 #fff,0 16px 36px -14px rgba(3,20,56,.75)}
a.store:hover{box-shadow:inset 0 1px 0 #fff,0 22px 44px -14px rgba(166,236,255,.7)}
.store[data-store="google-play"] svg{color:#1666CC}
.proof svg{color:#A6ECFF}
.hero{background:radial-gradient(40rem 22rem at 50% 108%,rgba(34,200,240,.4),transparent 70%)}
.hero::before{background:radial-gradient(30rem 20rem at 26% 66%,rgba(140,200,255,.34),transparent 70%),radial-gradient(28rem 19rem at 74% 68%,rgba(34,200,240,.34),transparent 70%)}
.hero::after{background-image:radial-gradient(circle,rgba(255,255,255,.3) 1px,transparent 1.6px)}
.hero-mark{width:92px;height:92px;border-radius:23px;margin-block-end:1.6rem;box-shadow:0 26px 60px -18px rgba(3,20,56,.85)}
.hero .rings{inset:0 0 auto;height:47rem}
/* the circles: they breathe and turn, very slowly */
.rings i{position:relative;border-color:rgba(255,255,255,.2);animation:ripple 18s ease-in-out infinite alternate}
.rings i:nth-child(2){animation-delay:-6s}.rings i:nth-child(3){animation-delay:-12s}
.rings i:nth-child(4){width:72rem;height:72rem;border-color:rgba(255,255,255,.06);animation-delay:-3s}
.rings i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(255,255,255,.7);animation:spin 52s linear infinite}
.rings i:nth-child(2)::after{animation-duration:74s;animation-direction:reverse;border-top-color:rgba(166,236,255,.6)}
.rings i:nth-child(3)::after{animation-duration:104s}
.rings i:nth-child(4)::after{animation-duration:140s;animation-direction:reverse;border-top-color:rgba(255,255,255,.35)}
@keyframes ripple{from{transform:scale(.95)}to{transform:scale(1.07)}}
.fan::after{background:radial-gradient(closest-side,rgba(3,20,56,.55),transparent)}
.phone{box-shadow:inset 0 0 0 calc(1.5*var(--pt)) rgba(255,255,255,.22),0 calc(50*var(--pt)) calc(90*var(--pt)) calc(-34*var(--pt)) rgba(3,20,56,.85),0 calc(16*var(--pt)) calc(34*var(--pt)) calc(-18*var(--pt)) rgba(3,20,56,.5)}
.specs dd,.fine dd{color:#BFE3FF}
.tags{color:#BFE3FF!important}
#privacy,#features,#faq{background:linear-gradient(180deg,rgba(5,26,72,.34),rgba(5,26,72,.2))}
/* icons: white glossy circles with the app's colours inside */
.orb{background:linear-gradient(180deg,#FFFFFF,#DCE7F6);color:var(--o2);box-shadow:inset 0 1px 0 #fff,inset 0 -6px 10px -7px rgba(12,58,134,.35),0 14px 26px -12px rgba(3,20,56,.8)}
.steps span{background:linear-gradient(180deg,#FFFFFF,#DCE7F6);color:#0C3A86;box-shadow:inset 0 1px 0 #fff,0 12px 22px -12px rgba(3,20,56,.8)}
.steps{border:0}
.j-bubble{box-shadow:0 14px 34px -10px rgba(3,20,56,.9)}
.j-bubble.in{box-shadow:0 14px 34px -12px rgba(3,20,56,.9)}
.j-line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 12%,rgba(255,255,255,.55) 88%,transparent)}
.j-line i{background:#A6ECFF;box-shadow:0 0 18px 4px rgba(166,236,255,.8)}
.marquee span{color:rgba(255,255,255,.16)}
.marquee span:nth-child(3n+1){color:rgba(255,255,255,.5)}
.faq summary::after{border-color:#A6ECFF}
.j-cipher em{color:#1666CC}
.halo,.tr-stage .halo{background:radial-gradient(closest-side,rgba(166,236,255,.45),rgba(255,255,255,.1) 58%,transparent)}
.duo-phones::before{background:radial-gradient(closest-side,rgba(166,236,255,.45),rgba(255,255,255,.1) 60%,transparent)}
#download{background:radial-gradient(42rem 22rem at 50% 118%,rgba(34,200,240,.55),transparent 70%),linear-gradient(180deg,rgba(5,26,72,.45),rgba(5,26,72,.1))}
.download .rings i:nth-child(4){display:none}
.foot-wrap{background:#082659;border-color:var(--line-n)}
.foot .brand,.foot a:hover{color:#fff}
.doc a,.handle{color:#1666CC}
.kb a{background:#fff}
.world{opacity:.6}
@media (max-width:52rem){
  .world{opacity:.4}
  .hero .rings{height:40rem}
  .hero-mark{width:76px;height:76px;border-radius:19px;margin-block-end:1.2rem}
}

/* the invite page the apps link to (avinat.app/invite): one blue screen */
.invite-band{min-height:100vh;display:grid;align-items:center;padding-block:7rem 5rem}
.download h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.08}
.invite-band .links{justify-content:center;margin-block-start:2.2rem}
.invite-band .links a{color:#E3F0FF}