/* Tesor marketing site. Layout is mostly inline in the pages; this file holds
   what repeats, and the rules that reshape the pages on small screens. */
body{margin:0;background:#F8F6FD;color:#14102E;font-family:"Onest",-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:#14102E;text-decoration:none}a:hover{color:#B04CFF}
img{max-width:100%}
.page{display:flex;flex-direction:column;width:100%;min-height:100vh;box-sizing:border-box;background:#F8F6FD}
/* pulling the page past its end (the elastic scroll on a Mac or a phone) uncovers what is behind it:
   a strip in the footer's colour is pinned to the bottom of the window, behind the page */
body::before{content:"";position:fixed;left:0;right:0;bottom:0;height:50vh;z-index:-1;background:linear-gradient(90deg,#281E69 0%,#201757 100%)}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px;box-sizing:border-box}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;box-sizing:border-box;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ink{color:#FFFFFF;background:#14102E}.btn-ink:hover{color:#FFFFFF}
.btn-line{color:#14102E;background:transparent;box-shadow:inset 0 0 0 2px #14102E}.btn-line:hover{color:#14102E}
.btn-white{color:#14102E;background:#FFFFFF}.btn-white:hover{color:#14102E}

h1,h2,h3{margin:0;letter-spacing:-0.045em;line-height:0.94}
h1{font-size:120px;font-weight:900}
h2{font-size:84px;font-weight:900}
h3{font-size:40px;font-weight:900;letter-spacing:-0.03em;line-height:1}
/* the gradient is clipped to the text box, and an italic glyph leans out of it on the right:
   the box is widened by a little padding, and the same negative margin keeps the layout as it was */
.grad{background:linear-gradient(90deg,#4318D6 0%,#8B3DFF 45%,#E85BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:0.12em;margin-right:-0.12em}
.lead{font-size:22px;color:#4A4567;margin:0;line-height:1.4}
p.body{font-size:19px;color:#4A4567;margin:0;line-height:1.5}

.phone{aspect-ratio:460/1000;border-radius:44px;background:#14102E;padding:9px;box-sizing:border-box;box-shadow:0 40px 90px rgba(20,16,46,0.28)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px}
.band{border-radius:48px;overflow:hidden;position:relative}
.stage .phone{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 62%,transparent 96%)}

.tile{position:relative;overflow:hidden;border-radius:36px;padding:44px;box-sizing:border-box;min-height:560px;display:flex;flex-direction:column;gap:14px}
.tile .art{margin-top:auto;padding-top:28px}
.tile p{margin:0;font-size:19px;color:#4A4567;max-width:380px;line-height:1.4}

/* the footer starts on the same vertical line as the header logo, and carries the same logo */
.foot .foot-stack{padding:0 64px}
.foot a{color:#CFC8F0;font-size:18px}.foot a:hover{color:#FFFFFF}
.foot h4{margin:0 0 20px;font-size:18px;font-weight:600;letter-spacing:0;line-height:1.4;color:#FFFFFF}

/* download page: two tabs driven by a pair of hidden radios */
.dl-radio{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:13px 26px;border-radius:999px;color:#6B6690;cursor:pointer}
#dl-m:checked ~ * label[for="dl-m"],#dl-b:checked ~ * label[for="dl-b"]{background:#FFFFFF;color:#14102E;box-shadow:0 2px 10px rgba(20,16,46,0.10)}
#dl-m:checked ~ .only-browser,#dl-m:checked ~ * .only-browser{display:none!important}
#dl-b:checked ~ .only-mobile,#dl-b:checked ~ * .only-mobile{display:none!important}
#dl-m:focus-visible ~ * label[for="dl-m"],#dl-b:focus-visible ~ * label[for="dl-b"]{outline:2px solid #8B3DFF;outline-offset:2px}

/* text pages */
.doc h1{font-size:72px;font-weight:900;line-height:0.98}
.doc .upd{margin:22px 0 0;font-size:16px;color:#8C91A6}
.doc h2{font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin:52px 0 0}
.doc p{margin:16px 0 0;font-size:18px;line-height:1.6;color:#3D3860}
.doc b{color:#14102E;font-weight:700}
.doc a{text-decoration:underline}

@media (max-width:1000px){
  h1{font-size:64px}h2{font-size:48px}h3{font-size:30px}
  .two,.three{grid-template-columns:1fr!important}
  .hidesm{display:none!important}
  .stage{height:560px!important}.stage .side{display:none!important}.stage .main{width:280px!important;margin-left:-140px!important}
  .foot-grid{grid-template-columns:1fr 1fr!important}.foot-grid>:first-child{grid-column:1/-1}
  .pad-band{padding:56px 40px!important;min-height:0!important}
  .wallet-band{padding:56px 40px 0!important}
  .wallet-art{height:600px!important;max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:600px){
  h1{font-size:38px}h2{font-size:36px}h3{font-size:26px}
  .lead{font-size:19px}p.body{font-size:17px}
  .wrap{padding:0 16px}
  .band{border-radius:32px}
  header .wrap,.hdr-on-dark .wrap{padding:0 20px!important;height:68px!important}
  header,.hdr-on-dark{padding-top:6px!important}
  header .btn,.hdr-on-dark .btn{min-height:42px!important;padding:0 20px!important;font-size:12px!important}
  /* on a phone the header keeps the mark only: the wordmark is cut off, the rest is scaled down */
  header .wrap>a:first-child,.hdr-on-dark .wrap>a:first-child{flex:none;width:64px!important;overflow:hidden;margin-left:-9px!important;transform:scale(0.7);transform-origin:left center}
  header .wrap>a:first-child img,.hdr-on-dark .wrap>a:first-child img{flex:none;max-width:none;margin-left:0!important}
  /* sections sit closer together: the desktop gaps are too tall for one column */
  main>section{padding-top:22px!important;padding-bottom:22px!important}
  /* the first block of every page clears the floating header */
  main>section:first-child{padding-top:108px!important}
  main>section.doc{padding-bottom:56px!important}
  main>section#chat{padding-top:56px!important}
  main>section#download{padding-bottom:48px!important}
  .two{gap:16px!important}
  #chat .two,.wallet-band,.pad-band{gap:28px!important}
  .sec-stack{gap:28px!important}
  .tile{padding:28px;min-height:0;border-radius:28px}
  .tile .art{padding-top:36px}
  .pad-band{padding:36px 22px!important}
  .wallet-band{padding:40px 22px 0!important}
  .wallet-copy{gap:20px!important;padding-bottom:0!important}
  .wallet-art{height:400px!important}
  .wallet-art .phone:first-child{width:230px!important;bottom:-100px!important}
  .wallet-art .phone:last-child{width:200px!important;bottom:-170px!important}
  /* the drawn security card: tighter, so the title stays on one line */
  .sec-art{padding:12px!important;border-radius:28px!important;gap:10px!important}
  .sec-card{padding:18px 16px 20px!important;border-radius:20px!important}
  .sec-list{padding:4px 16px!important}
  .sec-list>div{font-size:16px!important;height:56px!important}
  .sec-confirm{gap:10px!important}
  .sec-confirm>span{width:40px!important;height:40px!important}
  .sec-confirm>span svg{width:20px;height:20px}
  .sec-confirm-text>span:first-child{font-size:16px!important;white-space:nowrap}
  .sec-confirm-text>span:last-child{font-size:14px!important;white-space:nowrap}
  /* the row of app icons has to fit inside the card */
  .get-ios{padding:0 20px!important}
  .get-panel{height:164px!important;padding-bottom:30px!important;border-radius:0 0 44px 44px!important}
  .get-dock{gap:10px!important;padding:10px!important;border-radius:24px!important}
  .get-dock img{width:52px!important;height:52px!important}
  .get-body{padding:28px 0 32px!important;gap:20px!important}
  .get-body-ext{padding:36px 20px 28px!important}
  .three>.band{min-height:0!important;padding:30px 24px!important}
  .dl-title{font-size:42px!important}
  .dl-panel{height:420px!important}
  .dl-panel .phone{width:220px!important}
  .doc h1{font-size:44px}.doc h2{font-size:22px;margin-top:40px}.doc p{font-size:17px}
  /* the footer at phone scale */
  .foot{padding:40px 0 26px!important}
  .foot-stack{gap:28px!important}
  .foot-grid{gap:26px 16px!important}
  .foot .foot-stack{padding:0 20px}
  .foot-brand{gap:14px!important}
  .foot-logo{height:44.8px!important;margin-left:-9px!important;max-width:none}
  .foot-social svg{width:21px;height:21px}
  .foot h4{font-size:15px;margin-bottom:12px}
  .foot a{font-size:15px}
  .foot-links{gap:10px!important}
  .foot-legal{font-size:12px!important;gap:10px!important;padding-top:18px!important}
}