/* ==========================================================================
   DocuVault — landing page
   Palette: monochrome graphite / grey. Type: Inter (thin weights).
   ========================================================================== */

:root{
  --ink:#1d1d1f;
  --ink-soft:#2b2b2e;
  --grey-1:#4b4b50;
  --grey-2:#6e6e73;
  --grey-3:#86868b;
  --grey-4:#a1a1a6;
  --line:#d8d8dc;
  --line-soft:#e6e6ea;
  --bg:#ffffff;
  --bg-2:#f5f5f7;
  --bg-3:#eeeef1;
  --dark:#141416;
  --dark-2:#1f1f22;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;

  --wrap:1240px;
  --gut:clamp(20px,5vw,40px);
  --nav-h:52px;
  --ribbon-h:38px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:200;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(44px,7.4vw,92px);font-weight:150}
h2{font-size:clamp(32px,4.6vw,62px)}
h3{font-size:clamp(20px,2vw,26px);font-weight:300;letter-spacing:-.02em}
h4{font-size:13px;font-weight:500;letter-spacing:.02em}

.thin-em{color:var(--grey-3);font-weight:100}

.eyebrow{
  margin:0 0 22px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-3);
}

.lede{
  margin:26px 0 0;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  font-weight:300;
  color:var(--grey-2);
  max-width:56ch;
}

.sec-head{max-width:820px;margin:0 auto clamp(48px,6vw,88px);text-align:center}
.sec-head--left{max-width:none;margin-inline:0;text-align:left}
.sec-head__sub{margin:26px auto 0;max-width:60ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--grey-2)}
.sec-head--left .sec-head__sub{margin-inline:0}

section{position:relative}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;
  border-radius:999px;
  font-size:15px;font-weight:400;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .45s var(--ease-out),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .45s var(--ease-out);
  will-change:transform;
  white-space:nowrap;
}
.btn--sm{padding:9px 18px;font-size:14px}
.btn--lg{padding:17px 36px;font-size:16.5px}
.btn--xl{
  flex-wrap:wrap;
  padding:22px 46px;
  font-size:19px;
  border-radius:34px;
  line-height:1.2;
}
.btn__ico{width:15px;height:18px;flex:none;margin-top:-2px}
.btn--xl .btn__ico{width:19px;height:23px}
/* second line inside the large buttons: file size, price, reassurance */
.btn__meta{display:none}
.btn--xl .btn__meta{
  display:block;flex:0 0 100%;margin-top:6px;text-align:center;
  font-size:13px;font-weight:300;letter-spacing:0;opacity:.62;
}

.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(0,0,0,.55)}
.btn--ghost{color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--grey-4);background:rgba(0,0,0,.02);transform:translateY(-2px)}
.btn--outline{color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;color:var(--grey-1);
  transition:color .3s var(--ease);
}
.link-arrow i{
  width:16px;height:6px;position:relative;display:inline-block;
  transition:transform .4s var(--ease-out);
}
.link-arrow i::before{content:'';position:absolute;inset:0;border-top:1px solid currentColor;top:3px}
.link-arrow i::after{content:'';position:absolute;right:0;top:0;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.link-arrow:hover{color:var(--ink)}
.link-arrow:hover i{transform:translateX(5px)}

.stars{color:var(--ink);letter-spacing:.14em;font-size:12px}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--grey-4),var(--ink))}

/* ---------- ribbon ---------- */
.ribbon{
  height:var(--ribbon-h);
  display:flex;align-items:center;
  background:var(--bg-3);
  font-size:13px;color:var(--grey-2);
  overflow:hidden;
}
.ribbon__in{display:flex;align-items:center;justify-content:center;gap:14px}
.ribbon p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ribbon__tag{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;flex:none;
}
.ribbon__link{display:inline-flex;align-items:center;gap:5px;color:var(--ink);flex:none}
.ribbon__link svg{width:10px;height:10px;transition:transform .35s var(--ease-out)}
.ribbon__link:hover svg{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(245,245,247,.72);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-stuck{background:rgba(255,255,255,.82);border-bottom-color:var(--line-soft)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:inline-flex;align-items:center;gap:9px}
.brand__mark{width:22px;height:22px;color:var(--ink)}
.brand__name{font-size:17px;font-weight:300;letter-spacing:.02em}

.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav__links a{
  position:relative;font-size:13.5px;color:var(--grey-1);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--ink);
  transition:right .4s var(--ease-out);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__actions{display:flex;align-items:center;gap:12px}

.burger{display:none;width:34px;height:34px;position:relative;border-radius:50%}
.burger span{
  position:absolute;left:9px;width:16px;height:1px;background:var(--ink);
  transition:transform .45s var(--ease-out),opacity .3s;
}
.burger span:first-child{top:15px}
.burger span:last-child{top:20px}
.burger.is-open span:first-child{transform:translateY(2.5px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-2.5px) rotate(-45deg)}

.menu{
  /* JS keeps `top` on the real bottom edge of the nav; this is the value before
     the ribbon scrolls away */
  position:fixed;top:calc(var(--nav-h) + var(--ribbon-h));left:0;right:0;
  z-index:99;
  display:none;                     /* only exists where the burger does */
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  max-height:0;overflow:hidden;
  transition:max-height .6s var(--ease-out);
}
/* The divider belongs to the open panel: a closed menu is 1px of border and
   nothing else, which paints a stray hairline across the page. */
.menu.is-open{max-height:80vh;border-bottom:1px solid var(--line-soft)}
.menu__in{display:flex;flex-direction:column;padding:8px var(--gut) 30px}
.menu__in a{
  padding:16px 0;font-size:21px;font-weight:200;letter-spacing:-.02em;
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.menu.is-open .menu__in a{opacity:1;transform:none}
.menu__cta{margin-top:24px;border-bottom:0!important;justify-content:center;font-size:17px!important;font-weight:400!important;padding:19px 0!important}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(56px,8vw,110px) 0 clamp(60px,7vw,90px);
  background:linear-gradient(180deg,var(--bg-2) 0%,#fafafb 58%,var(--bg) 100%);
  overflow:hidden;
}
.hero__glow{
  position:absolute;top:-22%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:760px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(24px,4vw,60px);align-items:center;
}
.hero__copy{max-width:640px}
.hero h1{margin-bottom:4px}
.hero .lede{max-width:46ch}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
/* the download CTA is the point of the hero: let each button own its line
   rather than shrink to fit next to the other */
.cta-row .btn{flex:1 1 auto;min-width:min(100%,250px)}

.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:30px;font-size:13.5px;color:var(--grey-3);
}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust li:not(:last-child)::after{content:'·';margin-left:16px;color:var(--grey-4)}

.hero__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.hero__device{
  position:relative;width:min(400px,88%);
  animation:float 8s ease-in-out infinite;
}
/* the render ships on a light-grey plate, so it is framed as a product tile */
.hero__device img{
  border-radius:38px;
  box-shadow:0 50px 90px -46px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.03);
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.chip{
  position:absolute;
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.35);
  font-size:12px;
}
.chip svg{width:18px;height:18px;color:var(--grey-1);flex:none}
.chip div{display:flex;flex-direction:column;line-height:1.35}
.chip strong{font-weight:500;font-size:12.5px}
.chip span{color:var(--grey-3);font-size:11.5px}
.chip--1{top:12%;left:-4%}
.chip--2{bottom:19%;right:-6%}
.chip--3{bottom:4%;left:4%}
.chip--3 strong{font-size:19px;font-weight:200;letter-spacing:-.03em}

.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:20px;height:32px;border:1px solid var(--line);border-radius:12px;
}
.scroll-hint span{
  position:absolute;left:50%;top:7px;width:2px;height:6px;border-radius:2px;
  background:var(--grey-4);transform:translateX(-50%);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- stats ---------- */
.stats{padding:clamp(48px,6vw,86px) 0;border-bottom:1px solid var(--line-soft)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{display:flex;flex-direction:column;gap:8px}
.stat b{font-size:clamp(34px,4vw,56px);font-weight:150;letter-spacing:-.04em;line-height:1}
.stat b span{font:inherit;color:inherit;letter-spacing:inherit}
.stat > span{font-size:13.5px;color:var(--grey-3);max-width:20ch}

/* ---------- press marquee ---------- */
.press{padding:clamp(40px,5vw,64px) 0;background:var(--bg-2);overflow:hidden}
.press__label{margin:0 0 28px;text-align:center;font-size:13px;color:var(--grey-3);letter-spacing:.01em}
.marquee{position:relative;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:clamp(40px,6vw,84px);width:max-content;animation:slide 42s linear infinite}
.marquee__track span{
  font-size:clamp(15px,1.6vw,20px);font-weight:300;letter-spacing:.16em;
  color:var(--grey-4);white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- pillars ---------- */
.pillars{padding:clamp(72px,9vw,140px) 0}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.pillar{
  padding:clamp(24px,2.4vw,34px);
  background:var(--bg-2);border-radius:var(--r-xl);
  transition:transform .7s var(--ease-out),background .5s var(--ease),box-shadow .7s var(--ease-out);
}
.pillar:hover{transform:translateY(-8px);background:var(--bg-3);box-shadow:0 40px 70px -50px rgba(0,0,0,.5)}
.pillar__media{
  height:clamp(230px,26vw,330px);margin-bottom:32px;
  border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.4);
}
.pillar__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s var(--ease-out)}
.pillar:hover .pillar__media img{transform:scale(1.035)}
.pillar h3{margin-bottom:14px}
.pillar p{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--grey-2)}

/* ---------- sticky flow ---------- */
.flow{padding:clamp(60px,8vw,120px) 0;background:var(--bg-2)}
.flow__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,80px);align-items:start}
.flow__stage{position:sticky;top:calc(var(--nav-h) + 40px);display:flex;justify-content:center}
.phone{position:relative;width:min(320px,80%)}
.phone__frame{
  position:relative;aspect-ratio:9/19.2;
  border-radius:44px;padding:9px;
  background:linear-gradient(150deg,#3a3a3d,#0f0f10 45%,#2c2c2f);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone__notch{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:78px;height:20px;border-radius:12px;background:#000;z-index:3;
}
.phone__screens{position:absolute;inset:9px;border-radius:36px;overflow:hidden;background:#fff}
.phone__screens img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.03);
  transition:opacity .8s var(--ease-out),transform 1.2s var(--ease-out);
}
.phone__screens img.is-active{opacity:1;transform:none}
.phone__shadow{
  position:absolute;left:12%;right:12%;bottom:-26px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.22),transparent 70%);filter:blur(6px);
}

.flow__steps{padding-top:clamp(0px,2vw,20px)}
.flow__steps .sec-head{margin-bottom:clamp(34px,4vw,60px)}
.step{
  padding:26px 0 28px;border-top:1px solid var(--line);
  opacity:.36;transition:opacity .6s var(--ease);
}
.step.is-active{opacity:1}
.step__num{
  display:block;margin-bottom:12px;
  font-size:11px;letter-spacing:.18em;color:var(--grey-4);font-weight:500;
}
.step h3{margin-bottom:12px}
.step p{margin:0;font-size:15.5px;line-height:1.65;color:var(--grey-2);max-width:46ch}
.flow__steps .btn{margin-top:38px}

/* ---------- feature slider ---------- */
.slider-sec{padding:clamp(72px,9vw,140px) 0;overflow:hidden}
.slider-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,4vw,56px)}
.slider-nav{display:flex;gap:10px;flex:none}
.round{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--grey-1);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .4s var(--ease-out);
}
.round svg{width:15px;height:15px}
.round:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.round:disabled{opacity:.3;pointer-events:none}

.slider{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.slider::-webkit-scrollbar{display:none}
.slider.is-dragging{cursor:grabbing;scroll-snap-type:none}
.slider__track{
  display:flex;gap:clamp(16px,1.8vw,26px);
  padding:4px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 4px;
  width:max-content;
}
.card{
  scroll-snap-align:center;
  flex:none;width:clamp(268px,29vw,360px);
  padding:clamp(26px,2.4vw,36px);
  border:1px solid var(--line-soft);border-radius:var(--r-xl);
  background:linear-gradient(180deg,#fff,var(--bg-2));
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out),border-color .4s var(--ease);
  user-select:none;
}
.card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 36px 60px -46px rgba(0,0,0,.55)}
.card__ico{width:34px;height:34px;margin-bottom:clamp(40px,5vw,74px);color:var(--grey-1)}
.card h3{margin-bottom:12px;font-size:20px}
.card p{margin:0;font-size:15px;line-height:1.62;color:var(--grey-2)}

.slider-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(26px,3vw,40px)}
.dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.dots button{
  width:6px;height:6px;border-radius:50%;background:var(--line);
  transition:background .3s var(--ease),transform .4s var(--ease-out),width .4s var(--ease-out);
}
.dots button.is-active{background:var(--ink);width:20px;border-radius:3px}

/* ---------- sign ---------- */
.sign{padding:clamp(72px,9vw,140px) 0;background:var(--bg-2)}
.sign__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:center}
.ticks{margin-top:38px;display:grid;gap:16px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--grey-1);line-height:1.5}
.ticks li::before{
  content:'';position:absolute;left:0;top:5px;width:16px;height:9px;
  border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:rotate(-45deg) scale(.9);
}
.sign .btn{margin-top:42px}

.sign__art{display:flex;justify-content:center;perspective:1400px}
.paper{
  position:relative;width:min(460px,100%);
  padding:clamp(30px,3.4vw,48px);
  background:#fff;border-radius:var(--r-md);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.5),0 1px 0 var(--line-soft);
  transform:rotateY(-7deg) rotateX(3deg);
  transition:transform 1s var(--ease-out);
}
.sign__art:hover .paper{transform:rotateY(-2deg) rotateX(1deg) translateY(-6px)}
.paper__line{height:8px;border-radius:4px;background:var(--bg-3);margin-bottom:14px}
.paper__line.short{width:64%}
.paper__sig{margin-top:44px;padding-top:14px;border-top:1px solid var(--line)}
.sig{width:100%;height:auto;display:block}
#sigPath{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.6s var(--ease-out)}
.paper.is-signed #sigPath{stroke-dashoffset:0}
.paper__meta{display:flex;justify-content:space-between;gap:14px;margin-top:10px;font-size:11.5px;color:var(--grey-3)}
.paper__seal{
  position:absolute;right:clamp(18px,3vw,34px);bottom:-17px;
  display:flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:11.5px;letter-spacing:.02em;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease-out) .9s,transform .7s var(--ease-out) .9s;
}
.paper__seal svg{width:13px;height:13px}
.paper.is-signed .paper__seal{opacity:1;transform:none}

/* ---------- convert ---------- */
.convert{padding:clamp(72px,9vw,140px) 0}
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.fmt{
  padding:clamp(22px,2.2vw,32px);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .6s var(--ease-out),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.fmt b{font-size:clamp(22px,2.2vw,30px);font-weight:200;letter-spacing:-.03em}
.fmt span{font-size:13px;color:var(--grey-3);line-height:1.45}
.fmt:hover{transform:translateY(-5px);background:var(--ink);border-color:var(--ink);color:#fff}
.fmt:hover span{color:rgba(255,255,255,.66)}

.convert__cta{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:clamp(44px,5vw,72px);text-align:center;
}
.convert__cta span{font-size:13px;color:var(--grey-3)}

/* ---------- security ---------- */
.security{
  position:relative;isolation:isolate;
  padding:clamp(80px,10vw,150px) 0;
  background:var(--dark);color:#fff;overflow:hidden;
}
.security__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;z-index:-1;
}
.security::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,10,11,.94) 0%,rgba(15,15,17,.78) 52%,rgba(15,15,17,.42) 100%);
}
.security__in{max-width:800px}
.security .eyebrow{color:rgba(255,255,255,.5)}
.security h2{color:#fff}
.security .lede{color:rgba(255,255,255,.66)}
.sec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);
  margin:clamp(44px,5vw,68px) 0 clamp(40px,4vw,56px);
}
.sec-grid div{
  display:flex;flex-direction:column;gap:10px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
}
.sec-grid b{font-size:clamp(17px,1.6vw,21px);font-weight:250;letter-spacing:-.02em}
.sec-grid span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.52)}

/* ---------- compare ---------- */
.compare{padding:clamp(72px,9vw,140px) 0}
.table{border-top:1px solid var(--line)}
.table__row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px;
  padding:20px 8px;border-bottom:1px solid var(--line-soft);
  font-size:15px;color:var(--grey-2);align-items:center;
  transition:background .35s var(--ease);
}
.table__row:not(.table__row--head):hover{background:var(--bg-2)}
.table__row span:first-child{color:var(--ink);font-weight:300}
.table__row--head{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-4);
  padding-bottom:14px;
}
.table__row--head span:nth-child(2){color:var(--ink);font-weight:500}
.yes{color:var(--ink)!important;font-weight:400}
.no{color:var(--grey-4)!important}

/* ---------- reviews ---------- */
.reviews{padding:clamp(72px,9vw,140px) 0;background:var(--bg-2);overflow:hidden}
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,4vw,56px)}
.rslider{overflow:hidden;margin-bottom:34px}
.rslider__track{display:flex;transition:transform .9s var(--ease-out)}
/* each slide must be exactly one track width, so the content column is created
   with padding instead of max-width + auto margins */
.quote{
  flex:none;width:100%;margin:0;
  padding-inline:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
}
.quote .stars{margin:0 0 26px}
.quote blockquote{
  margin:0;font-size:clamp(21px,2.9vw,38px);font-weight:200;line-height:1.32;letter-spacing:-.03em;
  max-width:22ch;max-width:min(100%,26ch);
}
.quote figcaption{display:flex;align-items:center;gap:16px;margin-top:clamp(30px,3.4vw,46px)}
.quote figcaption img{width:54px;height:54px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.quote figcaption span{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--grey-3)}
.quote figcaption b{font-weight:400;font-size:15px;color:var(--ink)}

/* ---------- faq ---------- */
.faq{padding:clamp(72px,9vw,140px) 0}
.faq__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:start}
.faq .sec-head{position:sticky;top:calc(var(--nav-h) + 40px)}
.faq .btn{margin-top:34px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line-soft)}
.acc summary{
  position:relative;list-style:none;cursor:pointer;
  padding:26px 44px 26px 0;
  font-size:clamp(16px,1.5vw,19px);font-weight:300;letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--grey-1)}
.acc summary i{position:absolute;right:6px;top:50%;width:13px;height:13px;transform:translateY(-50%)}
.acc summary i::before,.acc summary i::after{
  content:'';position:absolute;background:var(--grey-2);transition:transform .45s var(--ease-out),opacity .3s
}
.acc summary i::before{left:0;top:6px;width:13px;height:1px}
.acc summary i::after{left:6px;top:0;width:1px;height:13px}
.acc details[open] summary i::after{transform:rotate(90deg);opacity:0}
.acc details div{overflow:hidden}
.acc details p{
  margin:0;padding:0 10% 30px 0;font-size:15.5px;line-height:1.68;color:var(--grey-2);
}
.acc details[open] summary{color:var(--ink)}

/* ---------- download ---------- */
.download{padding:clamp(80px,10vw,150px) 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);text-align:center}
.download__in{max-width:900px;margin:0 auto}
.app-badge{display:flex;justify-content:center;margin-bottom:34px}
.app-badge svg{width:74px;height:74px;border-radius:18px;box-shadow:0 26px 44px -26px rgba(0,0,0,.55)}
.download .lede{margin-inline:auto;text-align:center}
/* Android is the only platform, so the section is one oversized button */
.dl-hero{margin:clamp(42px,5vw,64px) auto 34px;max-width:620px}
.dl-hero__btn{
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:36px 46px;
  background:var(--ink);color:#fff;
  border:1px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:0 30px 56px -30px rgba(0,0,0,.6);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background .3s var(--ease);
}
.dl-hero__btn svg{width:42px;height:42px;flex:none;color:#fff}
.dl-hero__btn span{display:flex;flex-direction:column;gap:7px;font-size:14px;color:rgba(255,255,255,.62);text-align:left}
.dl-hero__btn b{font-size:28px;font-weight:300;letter-spacing:-.02em;color:#fff}
.dl-hero__btn:hover{background:#000;transform:translateY(-4px);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.dl-hero__btn:active{transform:translateY(0) scale(.99)}
.dl-hero__spec{margin:24px 0 0;font-size:13px;color:var(--grey-4)}
.fine{margin:0;font-size:12.5px;color:var(--grey-4);line-height:1.6}

.web-alt{margin:0 0 18px;font-size:14px;color:var(--grey-3)}
.web-alt a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .3s var(--ease)}
.web-alt a:hover{border-bottom-color:var(--ink)}

/* ---------- footer ---------- */
.foot{padding:clamp(56px,6vw,84px) 0 30px;background:var(--bg-2);border-top:1px solid var(--line-soft)}
.foot__in{display:grid;grid-template-columns:.9fr 2fr;gap:clamp(34px,5vw,70px)}
.foot__brand p{margin:20px 0 24px;font-size:13.5px;line-height:1.65;color:var(--grey-3);max-width:34ch}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot__cols h4{margin-bottom:18px;color:var(--grey-4);text-transform:uppercase}
.foot__cols a,.foot__note{display:block;margin-bottom:12px;font-size:13.5px;color:var(--grey-2);transition:color .3s var(--ease)}
.foot__cols a:hover{color:var(--ink)}
.foot__note{color:var(--grey-4)}
.foot__base{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(44px,5vw,70px);padding-top:24px;
  border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--grey-4);
}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:98;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px 10px 18px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-soft);border-radius:999px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.35);
  transform:translateY(140%);transition:transform .6s var(--ease-out);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta__txt{display:flex;flex-direction:column;line-height:1.3}
.sticky-cta__txt b{font-size:14px;font-weight:400}
.sticky-cta__txt span{font-size:11.5px;color:var(--grey-3)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
.reveal[data-delay="6"]{transition-delay:.48s}
.reveal[data-delay="7"]{transition-delay:.56s}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1100px){
  .nav__links a:nth-child(n+5){display:none}
  .formats{grid-template-columns:repeat(3,1fr)}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:block}
  .menu{display:block}
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero__copy{max-width:none;margin-inline:auto}
  .hero .lede,.hero__copy{margin-inline:auto}
  .hero .lede{max-width:52ch}
  .cta-row,.hero__trust{justify-content:center}
  .hero__visual{min-height:auto;margin-top:56px}
  .hero__device{width:min(300px,72%)}
  .chip--1{left:-2%}
  .chip--2{right:-2%}
  .scroll-hint{display:none}

  .stats__grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .pillar-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .pillar__media{height:300px}

  .flow__in{grid-template-columns:1fr;gap:44px}
  .flow__stage{position:relative;top:0;order:-1}
  .phone{width:min(260px,64%)}
  .step{opacity:1}

  .sign__in{grid-template-columns:1fr;gap:52px}
  .sign__art{order:-1}
  .faq__in{grid-template-columns:1fr;gap:44px}
  .faq .sec-head{position:relative;top:0}

  .table__row{grid-template-columns:1.3fr 1fr 1fr;font-size:14px}
  .table__row span:nth-child(4){display:none}

  .quote blockquote{max-width:none}
  .sticky-cta{display:flex}
  body{padding-bottom:0}
}

@media (max-width:640px){
  :root{--gut:20px}
  h1{font-size:clamp(38px,10.6vw,54px)}
  h2{font-size:clamp(28px,7.6vw,40px)}
  .ribbon p{font-size:12px}
  .nav__actions .btn{padding:11px 18px;font-size:14px}
  .ribbon__tag{display:none}
  .ribbon__link{display:none}
  .ribbon__in{justify-content:center}

  .cta-row{flex-direction:column;gap:10px}
  .cta-row .btn{width:100%}
  .hero__trust{gap:6px 14px;font-size:12.5px}
  .hero__trust li:not(:last-child)::after{display:none}
  .chip{padding:10px 13px}
  .chip--1{left:2%;top:8%}
  .chip--2{right:2%;bottom:14%}
  .chip--3{display:none}

  .stats{padding:44px 0}
  .stat b{font-size:38px}

  .formats{grid-template-columns:repeat(2,1fr)}
  .sec-grid{grid-template-columns:1fr;gap:16px}

  .btn--xl{padding:19px 26px;font-size:17px}
  .dl-hero__btn{gap:16px;padding:24px 22px}
  .dl-hero__btn svg{width:30px;height:30px}
  .dl-hero__btn b{font-size:21px}
  .dl-hero__btn span{font-size:12.5px}

  .slider-head,.reviews__head{flex-direction:column;align-items:flex-start;gap:22px}
  .slider-nav{align-self:flex-end}
  .card{width:78vw}
  .slider-foot{flex-direction:column;align-items:flex-start;gap:18px}

  .table__row{grid-template-columns:1.2fr 1fr;gap:10px}
  .table__row span:nth-child(3){display:none}

  .foot__cols{grid-template-columns:repeat(2,1fr);gap:10px 20px}
  .foot__base{font-size:11.5px}
  .paper__seal{right:18px}
  .quote figcaption img{width:46px;height:46px}
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  #sigPath{stroke-dashoffset:0}
  .paper__seal{opacity:1;transform:none}
}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:#fff}