/* File Upload Relay landing — shared design system (A / B / C variants) */
:root{
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;

  --bg:#FBF9F5;
  --bg-2:#F4F0E8;
  --surface:#FFFFFF;
  --ink:#1A1C22;
  --ink-2:#565A63;
  --ink-3:#8A8E97;
  --line:#EBE6DC;
  --line-2:#DED8CC;

  --primary:#4256E0;
  --primary-600:#3140bd;
  --primary-tint:rgba(66,86,224,.09);
  --accent:#F26B4E;
  --accent-tint:rgba(242,107,78,.12);

  --rscale:1;
  --shadow-sm:0 1px 2px rgba(26,28,34,.05), 0 2px 6px rgba(26,28,34,.04);
  --shadow-md:0 4px 14px rgba(26,28,34,.07), 0 2px 6px rgba(26,28,34,.05);
  --shadow-lg:0 24px 60px -18px rgba(31,33,54,.30), 0 8px 24px -12px rgba(31,33,54,.18);
  --maxw:1140px;
}
body.cool{
  --bg:#FBFCFD;--bg-2:#F1F4F8;--surface:#FFFFFF;
  --line:#E7EBF0;--line-2:#D9DFE7;
  --ink:#171A21;--ink-2:#525862;--ink-3:#888E98;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.018em;margin:0;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.accent{color:var(--accent);}
.prim{color:var(--primary);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:16px;
  border-radius:calc(13px*var(--rscale));padding:13px 22px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px -6px var(--primary);}
.btn-primary:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:0 12px 26px -8px var(--primary);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-sm{padding:10px 16px;font-size:14.5px;}
.btn .ar{transition:transform .15s ease;}
.btn:hover .ar{transform:translateX(3px);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s;}
.nav.scrolled{border-color:var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);}
.nav-in{display:flex;align-items:center;gap:14px;height:70px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--primary);display:grid;place-items:center;box-shadow:0 4px 10px -3px var(--primary);}
.logo .mark svg{width:17px;height:17px;stroke:#fff;}
.nav-links{display:flex;gap:6px;margin-left:18px;}
.nav-links a{font-size:15px;color:var(--ink-2);font-weight:500;padding:8px 12px;border-radius:9px;transition:.14s;}
.nav-links a:hover{color:var(--ink);background:var(--primary-tint);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.nav-right .signin{font-size:15px;font-weight:600;color:var(--ink-2);padding:8px 6px;}
.nav-right .signin:hover{color:var(--ink);}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:62px 0 30px;}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(620px 360px at 50% -60px,var(--primary-tint),transparent 70%),
  radial-gradient(circle at 1px 1px,var(--line-2) 1px,transparent 0);
  background-size:auto, 26px 26px;opacity:.9;-webkit-mask-image:linear-gradient(#000,transparent 78%);mask-image:linear-gradient(#000,transparent 78%);z-index:0;}
.hero-in{position:relative;z-index:1;text-align:center;}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:30px;padding:7px 8px 7px 14px;box-shadow:var(--shadow-sm);}
.pill .new{background:var(--accent-tint);color:var(--accent);font-weight:700;font-size:12px;border-radius:20px;padding:3px 9px;letter-spacing:.01em;}
h1.hero-h{font-size:clamp(40px,6.4vw,72px);margin:22px auto 0;max-width:15ch;font-weight:700;}
h1.hero-h .u{position:relative;white-space:nowrap;color:var(--primary);}
h1.hero-h .u svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.32em;color:var(--accent);}
.hero-sub{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:60ch;margin:22px auto 0;}
.hero-sub b{color:var(--ink);font-weight:600;}
.hero-cta{display:flex;gap:13px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
.hero-trust{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:18px;font-size:14px;color:var(--ink-3);flex-wrap:wrap;}
.hero-trust .d{width:5px;height:5px;border-radius:50%;background:var(--line-2);}
.hero-trust .c{display:inline-flex;align-items:center;gap:7px;}
.hero-trust .c svg{width:16px;height:16px;color:var(--primary);}

/* ---------- product window ---------- */
.stage{position:relative;margin:46px auto 0;max-width:760px;}
.win{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line-2);border-radius:calc(20px*var(--rscale));box-shadow:var(--shadow-lg);overflow:hidden;}
.win-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-2);}
.dots{display:flex;gap:7px;}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2);}
.dots i:nth-child(1){background:#F2756B;}.dots i:nth-child(2){background:#F2C84B;}.dots i:nth-child(3){background:#5FC97E;}
.url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 12px;max-width:340px;margin:0 auto;}
.url svg{width:13px;height:13px;color:var(--ink-3);}
.win-body{padding:34px 30px 30px;text-align:center;}
.brandrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px;}
.brandrow .blogo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2b2f3a,#454b5c);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:18px;box-shadow:var(--shadow-sm);}
.brandrow .bname{font-family:var(--font-display);font-weight:700;font-size:18px;}
.win-body h3{font-size:24px;}
.win-body .ins{color:var(--ink-2);font-size:15px;margin-top:6px;}

.dz{margin:22px auto 0;max-width:520px;border:2px dashed var(--line-2);border-radius:calc(16px*var(--rscale));
  background:var(--bg);padding:30px 22px;cursor:pointer;transition:.16s;position:relative;}
.dz:hover{border-color:var(--primary);background:var(--primary-tint);}
.dz.hot{border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 4px var(--primary-tint);}
.dz .cloud{width:54px;height:54px;margin:0 auto 12px;border-radius:15px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:var(--shadow-sm);color:var(--primary);transition:.16s;}
.dz .cloud svg{width:26px;height:26px;}
.dz.hot .cloud{transform:translateY(-4px) scale(1.04);}
.dz h4{font-size:18px;}
.dz .or{color:var(--ink-3);font-size:14px;margin-top:3px;}
.dz .pick{display:inline-flex;margin-top:14px;font-weight:600;font-size:14.5px;color:#fff;background:var(--primary);padding:9px 18px;border-radius:calc(11px*var(--rscale));box-shadow:0 6px 16px -6px var(--primary);}

.filelist{margin:14px auto 0;max-width:520px;display:flex;flex-direction:column;gap:9px;text-align:left;}
.file{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:calc(12px*var(--rscale));padding:11px 13px;box-shadow:var(--shadow-sm);animation:filein .35s ease;}
@keyframes filein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.file .ic{width:34px;height:34px;border-radius:9px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;flex:0 0 auto;font-weight:700;font-size:11px;font-family:var(--font-body);}
.file .m{flex:1;min-width:0;}
.file .m .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file .m .sz{font-size:12px;color:var(--ink-3);}
.file .bar{height:6px;border-radius:6px;background:var(--bg-2);overflow:hidden;margin-top:6px;}
.file .bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:6px;transition:width 1.2s cubic-bezier(.4,0,.1,1);}
.file .route{font-size:12px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex:0 0 auto;opacity:0;transition:opacity .3s;}
.file.done .route{opacity:1;color:#2EB67D;}
.file .route svg{width:15px;height:15px;}

.win-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);}
.win-foot .rt{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-weight:600;}

/* floating chips around window */
.float{position:absolute;z-index:3;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-md);padding:10px 13px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;}
.float small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);}
.float.f1{top:54px;left:-58px;animation:bob 5.5s ease-in-out infinite;}
.float.f2{bottom:96px;right:-66px;animation:bob 6.2s ease-in-out infinite .8s;}
.float.f3{bottom:-18px;left:42px;animation:bob 5s ease-in-out infinite .4s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ---------- brand marks ---------- */
.mk{border-radius:10px;display:grid;place-items:center;flex:0 0 auto;}
.mk-slack{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:0;width:34px;height:34px;}
.mk-slack i{width:100%;height:100%;border-radius:4px;}
.mk-slack i:nth-child(1){background:#36C5F0;}.mk-slack i:nth-child(2){background:#2EB67D;}
.mk-slack i:nth-child(3){background:#ECB22E;}.mk-slack i:nth-child(4){background:#E01E5A;}
.mk-drive{width:34px;height:34px;position:relative;overflow:hidden;border-radius:9px;background:#fff;border:1px solid var(--line);}
.mk-drive::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:19px solid #0066DA;}
.mk-drive::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:0;height:0;border-left:11px solid #00AC47;border-bottom:19px solid transparent;opacity:.0;}
.mk-dropbox{width:34px;height:34px;background:#0061FF;color:#fff;font-weight:800;font-family:var(--font-display);font-size:15px;}

/* ---------- section scaffolding ---------- */
section{position:relative;}
.sec{padding:84px 0;}
.sec-head{text-align:center;max-width:46ch;margin:0 auto 50px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:14px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.sec-head h2{font-size:clamp(30px,4vw,44px);}
.sec-head p{color:var(--ink-2);font-size:18px;margin-top:14px;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:calc(18px*var(--rscale));padding:28px 26px 26px;box-shadow:var(--shadow-sm);transition:.18s;}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.step .n{font-family:var(--font-display);font-weight:800;font-size:15px;width:38px;height:38px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -5px var(--primary);}
.step h3{font-size:20px;margin:18px 0 8px;}
.step p{color:var(--ink-2);font-size:15.5px;}
.step .il{margin-top:18px;border-top:1px dashed var(--line-2);padding-top:16px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);}

/* integrations */
.intg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:calc(18px*var(--rscale));padding:26px;box-shadow:var(--shadow-sm);transition:.18s;}
.icard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2);}
.icard .top{display:flex;align-items:center;justify-content:space-between;}
.icard .name{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:18px;}
.stat{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;}
.stat.on{color:#1d8a52;background:rgba(46,182,125,.13);}
.stat.off{color:var(--ink-2);background:var(--bg-2);}
.icard p{color:var(--ink-2);font-size:14.5px;margin-top:14px;}
.intg-note{text-align:center;color:var(--ink-3);font-size:14.5px;margin-top:26px;}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:calc(18px*var(--rscale));padding:26px;box-shadow:var(--shadow-sm);transition:.18s;}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.fcard .fi{width:46px;height:46px;border-radius:13px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;margin-bottom:18px;}
.fcard .fi svg{width:23px;height:23px;}
.fcard h3{font-size:18.5px;margin-bottom:8px;}
.fcard p{color:var(--ink-2);font-size:15px;}

/* pricing */
.pricing-bg{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:calc(18px*var(--rscale));padding:26px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.18s;}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.plan.pop{border:1.5px solid var(--primary);box-shadow:0 18px 40px -16px var(--primary);position:relative;}
.plan.pop .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;box-shadow:0 6px 14px -5px var(--primary);}
.plan .pn{font-family:var(--font-display);font-weight:700;font-size:20px;}
.plan .pp{margin:14px 0 4px;display:flex;align-items:baseline;gap:3px;}
.plan .pp .amt{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.02em;}
.plan .pp .per{color:var(--ink-3);font-size:14px;font-weight:500;}
.plan .pd{color:var(--ink-2);font-size:14px;min-height:40px;}
.plan ul{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);}
.plan li svg{width:18px;height:18px;color:var(--primary);flex:0 0 auto;margin-top:1px;}
.plan li b{color:var(--ink);font-weight:600;}
.plan .btn{justify-content:center;width:100%;}
.price-note{text-align:center;color:var(--ink-3);font-size:14px;margin-top:26px;}

/* big CTA */
.cta-sec{padding:90px 0;}
.cta-card{position:relative;overflow:hidden;background:var(--primary);border-radius:calc(28px*var(--rscale));padding:64px 40px;text-align:center;color:#fff;box-shadow:0 30px 70px -24px var(--primary);}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);background-size:24px 24px;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000);}
.cta-card>*{position:relative;}
.cta-card h2{font-size:clamp(30px,4.4vw,46px);max-width:18ch;margin:0 auto;}
.cta-card p{color:rgba(255,255,255,.82);font-size:18px;margin:18px auto 0;max-width:50ch;}
.cta-card .btn-primary{background:#fff;color:var(--primary);box-shadow:0 10px 30px -8px rgba(0,0,0,.4);margin-top:30px;}
.cta-card .btn-primary:hover{background:#fff;transform:translateY(-2px);}
.cta-card .sm{margin-top:14px;font-size:14px;color:rgba(255,255,255,.7);}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}
.foot .logo{margin-bottom:14px;}
.foot .tagline{color:var(--ink-2);font-size:14.5px;max-width:30ch;}
.foot h5{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot ul a{color:var(--ink-2);font-size:14.5px;}
.foot ul a:hover{color:var(--ink);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px;flex-wrap:wrap;gap:12px;}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.rv.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

@media(max-width:880px){
  .nav-links{display:none;}
  .steps,.intg,.feat{grid-template-columns:1fr;}
  .plans{grid-template-columns:repeat(2,1fr);}
  .foot{grid-template-columns:1fr 1fr;}
  .float{display:none;}
  .stage{max-width:560px;}
}
@media(max-width:560px){
  .plans{grid-template-columns:1fr;}
  .foot{grid-template-columns:1fr;}
  .hero-cta .btn{flex:1;justify-content:center;}
}