/* Slipky landing components. Tokens come from site.css. */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(79,70,229,.62),rgba(79,70,229,.18) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(79,70,229,.16),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(79,70,229,0) 0,rgba(79,70,229,0) 14px,rgba(99,102,241,.34) 44px,rgba(165,180,252,.2) 49px,rgba(79,70,229,.06) 78px,rgba(79,70,229,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); pointer-events:none;}
.hero .copy{max-width:940px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(32px,8vw,54px); line-height:1.12; letter-spacing:-.02em; font-weight:800; color:#fff; text-wrap:balance;}
.hero .lead{margin:24px auto 0; max-width:60ch; font-size:17px; line-height:1.65; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.kw{display:inline-block; font-weight:600; line-height:1.25; padding:1px 8px 2px; margin:0 1px; border-radius:7px; border:1px solid transparent;}
.kw-b{color:#c7d2fe; background:rgba(129,140,248,.2); border-color:rgba(165,180,252,.3);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.kw-v{color:#fcd34d; background:rgba(245,158,11,.16); border-color:rgba(252,211,77,.3);}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.hero .actions,.final .actions{justify-content:center;}
@media(max-width:520px){ .actions .btn{width:100%; white-space:normal; line-height:1.25; padding-top:12px; padding-bottom:12px;} }
/* inline objects inside the h1, text supplied by CSS */
.ob{display:inline-block; vertical-align:baseline; position:relative; white-space:nowrap;}
.ob-acc{height:.8em; padding:0 .42em; margin:0 .08em; vertical-align:-.04em; border-radius:99px; background:linear-gradient(180deg,#6366f1,#4f46e5); box-shadow:0 0 .9em rgba(79,70,229,.75), inset 0 .04em .06em rgba(255,255,255,.35), 0 0 0 .03em rgba(165,180,252,.4);}
.ob-acc::before{content:"3 accounts"; display:block; font-family:var(--display); font-weight:800; font-size:.42em; line-height:1.9; color:#fff; letter-spacing:0;}
.ob-pay{height:.8em; padding:0 .42em; margin:0 .08em; vertical-align:-.04em; border-radius:.22em; background:#0f2a22; border:.03em solid rgba(95,224,161,.55); box-shadow:0 0 .8em rgba(18,183,106,.35);}
.ob-pay::before{content:"+ $49.00"; display:block; font-family:var(--display); font-weight:800; font-size:.42em; line-height:2.1; color:#5fe0a1; letter-spacing:0;}
@media(prefers-reduced-motion:no-preference){
  .ob-pay{animation:payPop .5s 1.1s cubic-bezier(.3,1.6,.5,1) both;}
  @keyframes payPop{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}
}
.pills{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.hframe{position:relative; margin:56px auto 0; max-width:1040px; border-radius:30px; padding:10px; background:linear-gradient(160deg,rgba(165,180,252,.5),rgba(129,140,248,.22) 40%,rgba(79,70,229,.1)); box-shadow:0 0 0 1px rgba(165,180,252,.18), 0 40px 140px -30px rgba(79,70,229,.65);}
.hframe-in{border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#121a2c,#0c111e); border:1px solid rgba(255,255,255,.08);}
.hframe-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--dline); text-align:left;}
.hframe-bar .pill{min-height:30px; padding:0 12px; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff;}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.7);}
.hframe-body{padding:20px 12px 24px;}
@media(min-width:900px){ .hframe-body{padding:32px 36px;} }
@media(max-width:560px){ .hframe{padding:6px; border-radius:24px; margin-top:44px;} .hframe-bar .caption{display:none;} }

/* product demos */
.dm{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:left; font-size:13.5px; box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.dm-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--tint);}
.dm-dot{width:9px; height:9px; border-radius:50%; background:#cbd2de;}
.dm-title{margin-left:10px; font-family:var(--display); font-weight:700; color:var(--ink);}
.dm-sync{margin-left:auto; font-size:12px; color:var(--muted);}
.dm-cols{display:grid; grid-template-columns:1fr;}
@media(min-width:760px){ .dm-cols{grid-template-columns:1.35fr 1fr;} .dm-feed{border-left:1px solid var(--line); border-top:0;} }
.dm-tbl .tr{display:grid; grid-template-columns:1.5fr .8fr .8fr .8fr; gap:8px; padding:11px 14px; border-top:1px solid var(--line); align-items:center;}
.dm-tbl .th{border-top:0; font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.dm-tbl .r{text-align:right; font-variant-numeric:tabular-nums;}
.st{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12.5px;}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.st.on{color:#085c3a;} .st.off{color:#6b4400;}
.dm-feed{padding:12px 14px 14px; border-top:1px solid var(--line); background:#fcfcfe;}
.feed-h{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px;}
.fe{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:9px 0; border-top:1px solid var(--line);}
.fe:first-of-type{border-top:0;}
.fe b{font-variant-numeric:tabular-nums;}
.fe .to{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fe .fs{grid-column:1 / -1; position:relative; height:22px;}
.fe .fs i{position:absolute; left:0; top:0; font-style:normal; font-size:12px; font-weight:600; padding:2px 9px; border-radius:99px; border:1px solid transparent;}
.s-p{background:#fff7e0; color:#6b4400; border-color:#f0d68a !important;}
.s-d{background:#e8f8f0; color:#085c3a; border-color:#a9e3c6 !important;}
.s-n{background:#eef0f4; color:#3d4556; border-color:#cfd5e0 !important;}
@media(prefers-reduced-motion:no-preference){
  .fe{animation:feIn .5s var(--ease) both;}
  .fe1{animation-delay:.5s;} .fe2{animation-delay:1.3s;} .fe3{animation-delay:2.1s;}
  .fe .s-d{animation:swapIn .3s ease both;} .fe1 .s-d{animation-delay:2.2s;} .fe3 .s-d{animation-delay:3.6s;}
  .fe .s-p{animation:swapOut .3s ease both;} .fe1 .s-p{animation-delay:2.2s;} .fe3 .s-p{animation-delay:3.6s;}
  .st.on{animation:none;}
  @keyframes feIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  @keyframes swapIn{from{opacity:0;} to{opacity:1;}}
  @keyframes swapOut{from{opacity:1;} to{opacity:0;}}
  .fe .s-d{opacity:0; animation-fill-mode:forwards;} .fe .s-p{animation-fill-mode:forwards;}
  .cp{animation:feIn .5s var(--ease) both;} .cp1{animation-delay:.2s;} .cp2{animation-delay:.6s;} .cp3{animation-delay:1s;}
  .bar i{animation:grow 1.1s .5s var(--ease) both;}
  @keyframes grow{from{width:0;}}
}
@media(prefers-reduced-motion:reduce){ .fe .s-p{display:none;} }
@media(prefers-reduced-motion:no-preference){ .fe .s-d{opacity:0;} }
.dm-copy .cp{padding:14px 16px; border-top:1px solid var(--line);}
.cp-t{display:flex; justify-content:space-between; gap:12px; align-items:baseline;}
.cp-t b{font-family:var(--display); font-size:15px; color:var(--ink);}
.sc{font-family:var(--mono); font-weight:700; color:var(--accent-dk); font-size:13px;}
.cp p{margin:6px 0 10px; color:var(--body);}
.cp-f{display:flex; align-items:center; gap:14px;}
.cta{font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--soft); color:var(--accent-dk); border:1px solid var(--soft-line);}
.bar{flex:1; height:6px; border-radius:99px; background:var(--line); overflow:hidden;}
.bar i{display:block; height:100%; width:var(--w); background:var(--accent); border-radius:99px;}

/* sections */
.home .sec h3{font-size:19px; letter-spacing:-.02em; margin:0 0 6px;}
.twocol{display:grid; gap:28px; max-width:1000px;}
@media(min-width:800px){ .twocol{grid-template-columns:1fr 1fr; gap:56px;} }
.twocol p{color:var(--body); font-size:16.5px; line-height:1.65;}
.steps{display:grid; gap:0 56px; max-width:1040px;}
@media(min-width:900px){ .steps{grid-template-columns:1fr 1fr;} .steps li:nth-child(2){border-top:0;} }
.steps li{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line-strong);}
.steps li:first-child{border-top:0;}
.steps .n{width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--display); font-weight:800; display:flex; align-items:center; justify-content:center;}
.steps p{color:var(--body); line-height:1.6;}
.cols{display:grid; gap:48px; align-items:start;}
@media(min-width:900px){ .cols{grid-template-columns:1fr 1.05fr; gap:72px; align-items:center;} }
.ticks{margin-top:22px; display:grid; gap:10px;}
.ticks li{position:relative; padding-left:26px; color:var(--body);}
.ticks li::before{content:""; position:absolute; left:0; top:.5em; width:12px; height:7px; border-left:2.4px solid var(--accent); border-bottom:2.4px solid var(--accent); transform:rotate(-45deg);}
.more{margin-top:22px; font-weight:600; color:var(--accent-dk);}
.panel .dm{box-shadow:0 24px 60px -30px rgba(10,13,20,.45);}
.defs{display:grid; gap:0; max-width:900px;}
.defs > div{display:grid; gap:6px; padding:22px 0; border-top:1px solid var(--dline);}
@media(min-width:800px){ .defs > div{grid-template-columns:260px 1fr; gap:40px;} }
.defs dt{font-family:var(--display); font-weight:700; font-size:18px; color:#fff;}
.defs dd{margin:0; color:var(--dtext2); line-height:1.65;}
.defs code{font-family:var(--mono); font-size:.9em; background:rgba(255,255,255,.08); border-radius:6px; padding:1px 6px;}
.ptable{border-collapse:collapse; width:100%; min-width:460px; font-size:16px;}
.ptable th,.ptable td{text-align:left; padding:16px 18px; border-bottom:1px solid var(--line);}
.ptable thead th{background:var(--tint); font-family:var(--display); font-size:13.5px;}
.ptable tbody th{font-family:var(--display); font-weight:700;}
.ptable td:nth-child(2){font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;}
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
.note{margin-top:16px; color:var(--muted); font-size:14.5px;}
.faq details{border-top:1px solid var(--line-strong);}
.faq details:last-child{border-bottom:1px solid var(--line-strong);}
.faq summary{cursor:pointer; list-style:none; min-height:56px; padding:16px 36px 16px 0; font-family:var(--display); font-weight:700; font-size:17px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:4px; top:12px; font-size:24px; font-weight:400; color:var(--accent-dk);}
.faq details[open] summary::after{content:"\2212";}
.faq .ans{padding:0 0 20px; color:var(--body); line-height:1.65; max-width:70ch;}
.faq .ans a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px;}
.final{text-align:center;}
.final .title,.final .sub{margin-left:auto; margin-right:auto;}
.final::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 120%,rgba(79,70,229,.5),transparent 70%); pointer-events:none;}
.final .wrap{position:relative;}
.home .sec.alt .head,.home .sec .head{margin-bottom:40px;}
.dark .title{color:#fff;}
@media(prefers-reduced-motion:reduce){ *{animation:none !important;} }
.nb{white-space:nowrap;}