@font-face{font-family:"Inter";src:url(/assets/fonts/inter-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-700.woff2) format("woff2");font-weight:700 800;font-display:swap}
/* Paydate website: the app's own design language (tokens from the app's Theme) */
:root{
  --bg:#EEF3EC; --card:#FFFFFF; --ink:#111312; --ink2:rgba(60,64,62,.66); --ink3:rgba(60,64,62,.42);
  --sep:rgba(60,64,62,.14); --fill:rgba(118,128,120,.12);
  --tint:#00874F; --tint-ink:#fff; --deep:#00462A;
  --glass:rgba(255,255,255,.55); --glass-edge:rgba(255,255,255,.8);
  --og1:#0B3F29; --og2:#11663F; --og3:#1F8A5E; --og4:#3E9B4F;
  --mesh:radial-gradient(70% 40% at 0% 0%,rgba(173,214,118,.55),transparent 70%),radial-gradient(60% 35% at 100% 5%,rgba(0,163,97,.22),transparent 70%),radial-gradient(70% 45% at 90% 100%,rgba(205,230,197,.9),transparent 70%),#EEF3EC;
  /* SF Pro, like the app: the system font on iPhone, iPad and Mac (nothing to download). Inter, a close match, elsewhere. */
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --fh:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif; --fh-set:normal;
  --r:26px; --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -16px rgba(0,60,35,.18);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B100D; --card:#1C1F1D; --ink:#F4F6F4; --ink2:rgba(235,240,236,.64); --ink3:rgba(235,240,236,.38);
  --sep:rgba(255,255,255,.1); --fill:rgba(118,128,120,.24);
  --tint:#3DCB7A; --tint-ink:#06130B; --deep:#8FCB8A;
  --glass:rgba(40,46,42,.55); --glass-edge:rgba(255,255,255,.12);
  --mesh:radial-gradient(70% 40% at 0% 0%,rgba(0,163,97,.28),transparent 70%),radial-gradient(60% 35% at 100% 5%,rgba(108,190,69,.14),transparent 70%),radial-gradient(70% 45% at 90% 100%,rgba(0,108,78,.35),transparent 70%),#0B100D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -16px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--mesh) no-repeat top/100% 1600px,var(--bg);color:var(--ink);font:17px/1.5 var(--f);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:var(--tint);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
h1,h2,h3,.serif{font-family:var(--fh);font-variation-settings:var(--fh-set);font-weight:700;letter-spacing:-.025em}

/* glass top bar, like the app's floating bars */
.top{position:sticky;top:12px;z-index:10;padding:0 12px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 10px 0 14px;background:var(--glass);border:1px solid var(--glass-edge);border-radius:999px;backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);box-shadow:0 8px 24px -14px rgba(0,60,35,.3)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 21px/1 var(--fh);font-variation-settings:var(--fh-set)}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px}
.nav{display:flex;gap:4px;background:var(--fill);border-radius:999px;padding:3px}
.nav a{color:var(--ink);font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px}
.nav a:hover{text-decoration:none;background:rgba(255,255,255,.5)}
.nav a[aria-current]{background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.12)}

/* hero */
.hero{padding:56px 0 24px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow)}
h1{font-size:clamp(44px,6.4vw,74px);line-height:1;margin:20px 0 18px}
h1 em{font-style:normal;color:var(--tint)}
.lede{font-size:clamp(18px,2vw,21px);color:var(--ink2);max-width:33ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--tint);color:var(--tint-ink);font-weight:600;padding:14px 22px;border-radius:999px;font-size:16px;box-shadow:0 8px 20px -10px rgba(0,135,79,.7)}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.note{font-size:14px;color:var(--ink2);margin-top:16px}

.phones{position:relative;height:640px}
.phones .phone{position:absolute;width:262px;filter:drop-shadow(0 30px 34px rgba(10,60,35,.28))}
.phone.a{left:2%;top:0;transform:rotate(-4deg);z-index:2}
.phone.b{right:0;top:64px;transform:rotate(4deg)}
.chip{position:absolute;z-index:3;background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow);font-size:13px;color:var(--ink2);line-height:1.25}
.chip b{display:block;font:700 24px/1.1 var(--fh);font-variation-settings:var(--fh-set);color:var(--tint);margin-top:2px}
.chip.c1{left:-6px;bottom:70px}
.chip.c2{right:-4px;top:8px}

/* list card, like the app's rows */
.listcard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 20px}
.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--sep)}
.row:last-child{border-bottom:0}
.tile{flex:none;width:44px;height:44px;border-radius:13px;background:var(--fill);display:grid;place-items:center;font-size:24px}
.row b{display:block;font-weight:600}
.row span{color:var(--ink2);font-size:15px}
.strip{padding:20px 0 8px}
.strip .listcard{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;padding:8px 22px}
.strip .row{border-bottom:0}

/* sections */
section.block{padding:72px 0}
h2{font-size:clamp(32px,4.2vw,46px);line-height:1.06;margin:0 0 12px}
.sub{color:var(--ink2);font-size:19px;max-width:52ch;margin:0 0 32px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.f{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.f .tile{margin-bottom:14px}
.f h3{margin:0 0 6px;font-size:21px}
.f p{margin:0;color:var(--ink2);font-size:16px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .shot{order:2}
.shot{display:flex;justify-content:center}
.shot .phone{width:300px;filter:drop-shadow(0 30px 34px rgba(10,60,35,.25))}
.split .listcard{margin-top:6px}
h2 em{font-style:normal;color:var(--tint)}
.together .row span{display:block}
.split .row{padding:12px 0}

/* the app's payday card */
.payday{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--og3),var(--og2) 45%,var(--og1));color:#fff;border-radius:32px;padding:52px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;box-shadow:0 30px 60px -30px rgba(0,70,42,.6)}
.payday::before{content:"💵 ✨ 💸 ✨ 💵";position:absolute;right:28px;top:18px;font-size:22px;letter-spacing:14px;opacity:.28;transform:rotate(-8deg)}
.payday h2{color:#fff}
.payday p{color:rgba(255,255,255,.78);font-size:18px;margin:0 0 20px}
.payday a{color:#fff;font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:9px 14px;border-radius:999px;font-size:15px;font-weight:600}

.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.devices > div{background:var(--card);border-radius:var(--r);padding:24px 18px 22px;text-align:center;box-shadow:var(--shadow)}
.devices .tile{margin:0 auto 12px;width:64px;height:64px;font-size:34px;line-height:1;border-radius:18px;padding:0;box-shadow:none}
.devices b{display:block;font:700 19px/1.2 var(--fh);font-variation-settings:var(--fh-set)}
.devices small{color:var(--ink2);font-size:14px}

.plus{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plan{background:var(--card);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.plan.hl{box-shadow:0 0 0 2px var(--tint),var(--shadow)}
.plan h3{margin:0 0 2px;font-size:26px}
.plan .p{color:var(--ink2);margin:0 0 10px}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--sep)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";flex:none;margin-top:2px;width:22px;height:22px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}

.final{text-align:center;padding:72px 0 96px}
.final img{width:112px;height:112px;margin:0 auto 22px;filter:drop-shadow(0 18px 24px rgba(0,70,42,.3))}
.final .sub{margin:0 auto 26px}
.final .cta{justify-content:center}

/* docs */
.doc{padding:44px 0 80px}
.doc h1{font-size:clamp(38px,5vw,54px);margin:8px 0 6px}
.doc .meta{color:var(--ink2);margin:0 0 28px}
.doc h2{font-size:26px;margin:40px 0 10px}
.doc p,.doc li{color:var(--ink)}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.paper{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:8px 34px 30px}
.callout{background:linear-gradient(150deg,var(--og3),var(--og2) 50%,var(--og1));color:#fff;border-radius:var(--r);padding:22px 24px;margin:0 0 24px}
.callout p{margin:0;color:#fff}
.callout b{color:#fff}
details.q{background:var(--card);border-radius:20px;margin:10px 0;padding:0 20px;box-shadow:var(--shadow)}
details.q summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:600;position:relative}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"›";position:absolute;right:2px;top:13px;font-size:24px;color:var(--ink3);transition:transform .2s}
details.q[open] summary::after{transform:rotate(90deg)}
details.q > div{padding:0 0 18px}
details.q > div p{margin:0 0 10px;color:var(--ink2)}
.doc h2.sect{font-size:24px;margin:34px 0 8px}
.contact{display:flex;gap:16px;align-items:center;background:linear-gradient(150deg,var(--og3),var(--og2) 50%,var(--og1));color:#fff;border-radius:var(--r);padding:22px 24px;margin:6px 0 30px}
.contact .tile{background:rgba(255,255,255,.16)}
.contact p{margin:0;color:rgba(255,255,255,.8)}
.contact b{display:block;font-size:18px}
.contact a{color:#fff}

/* footer */
footer{padding:28px 0 48px;color:var(--ink2);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;border-top:1px solid var(--sep);padding-top:24px}
footer nav{display:flex;gap:18px}
footer a{color:var(--ink2)}
footer a:hover{color:var(--ink)}

@media (max-width:900px){
  .hero .wrap,.split,.payday{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .phones{height:540px;max-width:520px;margin:0 auto;width:100%}
  .phones .phone{width:226px}
  .features{grid-template-columns:1fr 1fr}
  .strip .listcard,.devices{grid-template-columns:1fr 1fr}
  .split.rev .shot{order:0}
  .payday{padding:36px 26px}
  .plus{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .top{top:8px;padding:0 8px}
  .nav a{padding:7px 10px}
  .nav .hide-s{display:none}
  .features{grid-template-columns:1fr}
  .phones{height:430px}
  .phones .phone{width:178px}
  .chip{padding:10px 12px}
  .chip b{font-size:19px}
  .chip.c2{display:none}
  .shot .phone{width:250px}
  section.block{padding:52px 0}
  .strip .listcard{grid-template-columns:1fr;gap:0}
  .strip .row{border-bottom:1px solid var(--sep)}
  .strip .row:last-child{border-bottom:0}
  .paper{padding:4px 20px 22px}
}

/* themes */
.groups{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px}
.groups span{background:var(--card);border-radius:999px;padding:9px 14px;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
.reel{display:flex;gap:18px;overflow-x:auto;padding:10px max(20px,calc((100vw - 1080px)/2)) 30px;scroll-snap-type:x mandatory;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel figure{margin:0;flex:none;width:210px;scroll-snap-align:center;text-align:center}
.reel img{width:100%;filter:drop-shadow(0 18px 22px rgba(10,60,35,.22))}
.reel figcaption{margin-top:10px;font:700 17px/1.2 var(--fh);font-variation-settings:var(--fh-set)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:8px}
.tgrid .row span,.listcard .row span{display:block}
@media (max-width:700px){.tgrid{grid-template-columns:1fr}.reel figure{width:170px}}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.prices div{position:relative;background:var(--fill);border-radius:18px;padding:14px 10px 12px;text-align:center}
.prices b{display:block;font:700 26px/1.1 var(--fh);font-variation-settings:var(--fh-set);color:var(--ink)}
.prices span{display:block;font-size:13px;color:var(--ink2);margin-top:4px;line-height:1.3}
.prices .best{background:var(--tint);color:var(--tint-ink)}
.prices .best b,.prices .best span{color:var(--tint-ink)}
.prices .best span{opacity:.85}
.prices i{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;background:var(--card);color:var(--tint);padding:3px 9px;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap}
.fine{font-size:13px;color:var(--ink3);margin:12px 0 0}
@media (max-width:420px){.prices b{font-size:22px}}

/* tile emoji: always centered, never clipped */
.tile{line-height:1;overflow:visible;text-align:center}
/* Mac */
.macstack{position:relative;max-width:1000px;margin:8px auto 0;padding-bottom:20%}
.macstack img{border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 40px 80px -30px rgba(0,60,35,.45)}
.macstack .m1{position:relative;width:86%;z-index:2}
.macstack .m2{position:absolute;width:74%;right:0;top:22%;z-index:1}
/* Widgets + Watch */
.glance-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.homescreen{background:radial-gradient(60% 50% at 30% 30%,#2b5c79,transparent 70%),radial-gradient(70% 60% at 90% 80%,#7a4a22,transparent 70%),#111;border-radius:40px;padding:30px 26px 18px;box-shadow:0 40px 70px -30px rgba(0,0,0,.5)}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wd{position:relative;overflow:hidden;color:#fff;border-radius:26px;padding:16px 18px;background:linear-gradient(160deg,#3d7a57,#2d5c42 60%,#284f3a);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.wd.sm{aspect-ratio:1/1;display:flex;flex-direction:column}
.wd.lg{grid-column:1/-1}
.wt{font-size:15px;font-weight:600;opacity:.9}
.wt.big{font-size:22px;opacity:1}
.wbig{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-top:6px}
.wbig.c{font-size:72px;text-align:center;margin-top:auto}
.wsub{font-size:15px;opacity:.8}
.wsub.c{text-align:center;font-size:18px;margin-bottom:auto}
.wbar{height:6px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:auto}
.wbar i{display:block;height:100%;border-radius:3px;background:#b9df93}
.wfoot{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-top:8px}
.late{color:#f6c58a!important}
.whead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.togo{color:#b9df93;font-weight:600;font-size:15px}
.wrow{display:grid;grid-template-columns:22px 28px 1fr auto;gap:8px;align-items:center;padding:6px 0}
.wrow i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.wrow em{font-style:normal;font-size:22px;line-height:1;text-align:center}
.wrow b{display:block;font-size:17px;font-weight:600;line-height:1.2}
.wrow small{display:block;font-size:13px;opacity:.75;font-weight:600}
.wrow span{font-size:17px;font-weight:700}
.wfl{position:absolute;font-size:26px;opacity:.55;pointer-events:none}
.wfl.a{right:8px;top:4px;transform:rotate(-15deg)}
.wfl.b{right:10px;bottom:6px;transform:rotate(10deg);font-size:20px}
.wfl.c{right:40px;bottom:10px;font-size:20px}
.wfl.d{left:44%;top:4px;font-size:20px}
.wlabel{text-align:center;color:#fff;font-size:13px;margin-top:10px;opacity:.85}
.watches{display:flex;flex-wrap:wrap;gap:26px;justify-content:center}
.watch{position:relative;width:190px;height:226px;border-radius:52px;background:linear-gradient(150deg,#3a3d3c,#151716);padding:13px;box-shadow:0 30px 50px -24px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.25)}
.watch .crown{position:absolute;right:-9px;top:52px;width:11px;height:40px;border-radius:5px;background:linear-gradient(90deg,#555,#2a2a2a)}
.watch .btn{position:absolute;right:-5px;top:112px;width:6px;height:36px;border-radius:3px;background:#2a2a2a}
.wscreen{height:100%;border-radius:40px;background:#000;color:#fff;overflow:hidden;padding:16px 14px;position:relative;font-family:var(--f)}
.face .time{font-size:40px;font-weight:300;letter-spacing:-.02em;line-height:1;text-align:right;color:#fff}
.face .date{font-size:11px;font-weight:700;color:#3DCB7A;text-align:right;margin-top:2px}
.rect{margin-top:7px;background:#1c1f1d;border-radius:12px;padding:7px 10px}
.rt{font-size:10px;font-weight:800;color:#3DCB7A;letter-spacing:.04em}
.rb{font-size:20px;font-weight:700;line-height:1.1}
.rs{font-size:10px;color:#aaa}
.circs{display:flex;gap:10px;margin-top:7px;justify-content:center}
.circ{position:relative;width:44px;height:44px;border-radius:50%;background:#1c1f1d;display:grid;place-items:center}
.circ svg{position:absolute;inset:2px;transform:rotate(-90deg)}
.circ .tr{fill:none;stroke:#2b332e;stroke-width:4}
.circ .fg{fill:none;stroke:#3DCB7A;stroke-width:4;stroke-linecap:round}
.circ div{position:relative;text-align:center;line-height:1}
.circ b{display:block;font-size:15px}
.circ small{font-size:8px;color:#aaa}
.circ.emo span{font-size:22px;line-height:1}
.app{padding-top:14px}
.atop{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#3DCB7A}
.atop span:last-child{color:#fff}
.ay{font-size:12px;color:#aaa;margin-top:16px}
.aamt{font-size:38px;font-weight:700;color:#3DCB7A;letter-spacing:-.02em;line-height:1.1}
.aline{font-size:12px;margin-top:6px;color:#ddd}
.apill{margin-top:12px;background:#1c1f1d;border-radius:14px;padding:9px 10px;font-size:13px;font-weight:600;text-align:center}
.lock{border-radius:40px;padding:26px 18px 20px;background:radial-gradient(70% 50% at 20% 10%,#3b7a5a,transparent 70%),radial-gradient(70% 60% at 90% 90%,#2b4f79,transparent 70%),#0f1712;box-shadow:0 40px 70px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px}
.ltime{text-align:center;color:#fff;font-size:52px;font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:14px}
.ltime small{display:block;font-size:15px;font-weight:600;letter-spacing:0;opacity:.85;margin-bottom:4px}
.pnote{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 13px;border-radius:20px;background:rgba(245,245,245,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#111;text-align:left}
.pnote img{width:34px;height:34px;border-radius:8px;margin-top:2px}
.pnote .nh{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:1px}.pnote .nh b{font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:11px}
.pnote > div > b{font-size:15px;font-weight:600}.pnote p{margin:1px 0 0;font-size:14px;line-height:1.3;color:#222}
.nact{display:flex;gap:6px;margin-top:8px}.nact span{flex:1;text-align:center;font-size:13px;font-weight:600;padding:7px 4px;border-radius:12px;background:rgba(0,0,0,.07)}
.lock .wcap{color:rgba(255,255,255,.7);margin-top:4px}
.wcap{flex-basis:100%;text-align:center;color:var(--ink2);font-size:15px;margin:6px 0 0}
@media (max-width:900px){.glance-grid{grid-template-columns:1fr}.macstack .m1{width:92%}.macstack .m2{width:80%}}
@media (max-width:560px){.homescreen{padding:20px 14px 14px;border-radius:30px}.wgrid{gap:12px}.wd{border-radius:20px;padding:12px 13px}.wbig{font-size:32px}.wbig.c{font-size:54px}.wt{font-size:12px}.wt.big{font-size:18px}.wsub{font-size:12px}.wfoot{font-size:11px}.wrow{grid-template-columns:18px 24px 1fr auto;gap:6px}.wrow b,.wrow span{font-size:14px}.wrow small{font-size:11px}.watches{gap:14px}.watch{zoom:.78}.wfl{opacity:.28;font-size:18px!important}.togo{position:relative;z-index:1}}

.devices .tile.ic{background:var(--fill)}
.tile.ic svg{width:34px;height:34px;fill:none;stroke:var(--tint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.circ{width:50px;height:50px}
.circ b{font-size:16px}
.circ small{display:block;font-size:8px;margin-top:1px}

/* hero: Paydate on every device. The MacBook big at the back, the iPad in front on the right, the iPhone in front
   between them and the Apple Watch at the front right, overlapping like a product shot. */
.devset{position:relative;width:112%;aspect-ratio:1/.54;container-type:inline-size}
.devset img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.dv-scr{position:absolute;inset:3.2%;border-radius:1.4cqw;overflow:hidden;background:linear-gradient(160deg,#d8eed6,#9fd0a6)}
.dv-scr img{object-fit:contain;object-position:center;padding:3%}
.dv-mac{position:absolute;left:0;bottom:6%;width:70%;z-index:1;filter:drop-shadow(0 3cqw 3.5cqw rgba(10,60,35,.22))}
.dv-lid{position:relative;aspect-ratio:16/10.4;background:#111;border-radius:2cqw 2cqw .4cqw .4cqw;box-shadow:inset 0 0 0 .25cqw #c9ccca}
.dv-lid .dv-scr{inset:2.6% 2.4% 3.4%;border-radius:.7cqw}
.dv-notch{position:absolute;left:50%;top:2.6%;transform:translateX(-50%);width:9%;height:3.2%;background:#111;border-radius:0 0 .6cqw .6cqw;z-index:2}
.dv-base{height:2.1cqw;margin:0 -5%;background:linear-gradient(#e6e8e7,#b4b8b6 70%,#9da19f);border-radius:0 0 2.6cqw 2.6cqw;position:relative}
.dv-base::before{content:"";position:absolute;left:41%;right:41%;top:0;height:40%;background:#a7aba9;border-radius:0 0 .8cqw .8cqw}
.dv-ipad{position:absolute;right:2%;bottom:4.5%;width:47%;aspect-ratio:4/3;background:#111;border-radius:2.4cqw;box-shadow:inset 0 0 0 .25cqw #c9ccca,0 3cqw 4cqw -1.5cqw rgba(10,60,35,.35);z-index:2}
.dv-ipad .dv-scr{inset:3.6%;border-radius:1.4cqw}
.dv-phone{position:absolute;left:41%;bottom:1.5%;width:13.5%;z-index:3;filter:drop-shadow(0 3cqw 3cqw rgba(10,60,35,.35))}
.dv-phone img{height:auto}
/* Apple Watch: a rounded case with a black screen edge, the Digital Crown and side button, and a sport band
   running off the top and bottom, so it reads as a watch at a glance. */
.dv-watch{position:absolute;right:0;bottom:0;width:11.5%;z-index:4;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 2.2cqw 2.4cqw rgba(0,0,0,.35))}
.dv-watch .band{display:block;width:74%;height:3.6cqw;background:linear-gradient(90deg,#1f4f37,#2f7a52 50%,#1f4f37)}
.dv-watch .band.b1{border-radius:1.6cqw 1.6cqw .3cqw .3cqw;margin-bottom:-.6cqw;box-shadow:inset 0 .4cqw .6cqw rgba(255,255,255,.12)}
.dv-watch .band.b2{border-radius:.3cqw .3cqw 1.6cqw 1.6cqw;margin-top:-.6cqw;box-shadow:inset 0 -.4cqw .6cqw rgba(0,0,0,.25)}
.dv-watch .case{position:relative;width:100%;aspect-ratio:41/49;border-radius:2.9cqw;padding:.45cqw;z-index:1;
  background:linear-gradient(145deg,#e9ebea,#9a9e9c 45%,#6e7270);box-shadow:inset 0 .12cqw .2cqw rgba(255,255,255,.7),inset 0 -.12cqw .2cqw rgba(0,0,0,.3)}
.dv-watch .crown{position:absolute;right:-.75cqw;top:22%;width:.9cqw;height:16%;border-radius:.35cqw;
  background:repeating-linear-gradient(180deg,#b9bdbb 0 .18cqw,#7d817f .18cqw .3cqw);box-shadow:0 0 0 .05cqw rgba(0,0,0,.25)}
.dv-watch .side{position:absolute;right:-.45cqw;top:48%;width:.5cqw;height:20%;border-radius:.25cqw;background:linear-gradient(90deg,#a2a6a4,#6e7270)}
.dv-wscr{height:100%;border-radius:2.5cqw;background:#000;color:#fff;padding:.9cqw 1cqw 1cqw;display:flex;flex-direction:column;font-family:var(--f);line-height:1.12;
  box-shadow:inset 0 0 0 .35cqw #000,inset 0 0 0 .4cqw #1b1b1b}
.dv-wscr .wbar{display:flex;justify-content:space-between;align-items:baseline}
.dv-wscr .t{font-size:.95cqw;font-weight:700;color:#3DCB7A}
.dv-wscr .clk{font-size:.95cqw;font-weight:600;color:#fff}
.dv-wscr .y{font-size:.85cqw;color:#a7a7a7;margin-top:auto}
.dv-wscr b{font-size:2.4cqw;font-weight:700;color:#3DCB7A;letter-spacing:-.02em}
.dv-wscr .l{font-size:.8cqw;color:#ddd;margin-top:.25cqw}
@media (max-width:900px){.devset{width:100%;max-width:680px;margin:8px auto 0}}

/* footer: where Paydate comes from */
footer .origin{max-width:560px;margin:0 auto 28px;padding:0 20px;text-align:center;color:var(--ink2);font-size:15px;line-height:1.6}
footer .origin p{margin:0}
footer .origin .thanks{margin-top:12px;font-style:italic}

/* ---------- Desktop: a full-screen landing and room to breathe, with a gentle guided scroll ---------- */
@media (min-width:1024px) and (min-height:700px){
  /* Every section, and each step of the story, is a stop: scrolling settles on the next one.
     Each section is at least one full screen and they sit edge to edge (no gaps), so a scroll always lands on the
     next stop instead of being pulled back. The header floats on top. */
  html{scroll-snap-type:none}
  main > section:not(.story){scroll-snap-align:start}
  .story .snap,.burst-stop{scroll-snap-align:start}
  .top{position:fixed;left:0;right:0;top:12px}
  main > section:not(.story){min-height:100svh;margin-top:0!important;margin-bottom:0!important;box-sizing:border-box}
  .story{margin-top:0}
  section.band{margin:0}
  .story .snap{position:absolute;left:0;width:1px;height:100svh}
  .hero{min-height:100svh;height:100svh;display:flex;align-items:center;padding:96px 0 72px;position:relative;box-sizing:border-box}
  .hero .wrap{width:100%}
  section.block{padding:120px 0 80px!important;display:flex;flex-direction:column;justify-content:center}
  section.block h2{font-size:clamp(40px,4.4vw,60px)}
  section.block .sub{font-size:21px;margin-bottom:44px}
  .strip{padding:0 0 24px}
  .final{display:flex;flex-direction:column;justify-content:center;padding:120px 0 80px}
}
/* the "keep going" nudge at the bottom of the landing */
.cue{display:none}
@media (min-width:1024px) and (min-height:700px){
  .cue{display:block;position:absolute;left:50%;bottom:22px;width:30px;height:48px;margin-left:-15px;border:2px solid var(--ink3);border-radius:16px}
  .cue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--ink2)}
  .motion .cue span{animation:cue 1.8s ease-in-out infinite}
}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1;transform:translateY(14px)}100%{opacity:0;transform:translateY(16px)}}

/* ---------- Motion (only when the visitor hasn't turned on Reduce Motion) ---------- */
.motion .devset > div{opacity:0;transform:translateY(36px) scale(.97);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.motion .devset.go > div{opacity:1;transform:none}
.motion .devset .dv-mac{transition-delay:.05s}
.motion .devset .dv-ipad{transition-delay:.25s}
.motion .devset .dv-phone{transition-delay:.45s}
.motion .devset .dv-watch{transition-delay:.65s}
.motion .hero h1,.motion .hero .eyebrow,.motion .hero .lede,.motion .hero .cta,.motion .hero .note{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.motion .hero .eyebrow{animation-delay:.05s}.motion .hero h1{animation-delay:.12s}.motion .hero .lede{animation-delay:.22s}
.motion .hero .cta{animation-delay:.32s}.motion .hero .note{animation-delay:.4s}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.motion .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.motion .rv.in{opacity:1;transform:none}
.rain{position:fixed;top:-40px;z-index:50;pointer-events:none;animation:rain 2.2s cubic-bezier(.4,.1,.6,1) forwards}
@keyframes rain{to{transform:translate(var(--sway),110vh) rotate(260deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Emoji stand on their own: no shaded box behind them. */
.tile{background:none!important;box-shadow:none!important;width:auto;min-width:34px;height:auto;font-size:28px}
.tile.ic{min-width:44px}

/* Desktop landing: the words centered on top, then the devices as big as the screen allows underneath. */
@media (min-width:1024px) and (min-height:700px){
  .hero{align-items:flex-start;padding:116px 0 32px}
  .hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
  .hero .wrap > div:first-child{display:flex;flex-direction:column;align-items:center}
  .hero h1{font-size:clamp(46px,4.8vw,74px);line-height:1.02;margin:14px 0 10px}
  .hero h1 em{display:block}
  .hero .lede{max-width:54ch;font-size:19px;margin:0 auto 18px}
  .hero .cta{justify-content:center}
  .hero .note{text-align:center}
  /* Width follows the space left under the words, so the whole lineup always fits on the first screen. */
  .devset{width:min(100%,max(560px,calc((100svh - 500px) / .54)));max-width:1180px;margin:-58px auto 0}
}

/* ---------- Full-width color bands (no rounded card, no gradient) ---------- */
section.band{position:relative;overflow:hidden;padding:110px 0!important;margin:56px 0}
section.band.green{background:#1F6B45;color:#fff}
section.band.green .payday{background:none;box-shadow:none;border-radius:0;padding:0}
section.band.green .payday::before{content:none}
section.band.green .pills span{background:none;border:1px solid rgba(255,255,255,.35)}
section.band.cosmic{background:#1E1640;color:#F3EEFF}
section.band.cosmic h2{color:#fff}
section.band.cosmic h2 em{color:#C9B4FF}
section.band.cosmic .sub,section.band.cosmic .note{color:rgba(243,238,255,.72)}
section.band.cosmic .eyebrow{background:rgba(201,180,255,.16);color:#F3EEFF;box-shadow:none}
section.band.cosmic .listcard{background:rgba(255,255,255,.06);box-shadow:none}
section.band.cosmic .row{border-color:rgba(255,255,255,.1)}
section.band.cosmic .row b{color:#fff}
section.band.cosmic .row span{color:rgba(243,238,255,.68)}
section.band.cosmic .wrap{position:relative;z-index:1}
/* A few emoji drifting slowly in the night sky, like the app's cosmic setup screen. */
.drift{position:absolute;inset:0;pointer-events:none}
.drift span{position:absolute;font-size:30px;opacity:.5}
.motion .drift span{animation:drift 9s ease-in-out infinite}
.motion .drift span:nth-child(2n){animation-duration:11s;animation-delay:-3s}
.motion .drift span:nth-child(3n){animation-duration:13s;animation-delay:-6s}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-18px) rotate(8deg)}}
@media (max-width:900px){section.band{padding:72px 0!important}.drift span{font-size:22px}}

/* "On every Apple device": a small picture of each device with Paydate on it, standing on the same line. */
.devices .vis{height:190px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px}
.devices .vis img{display:block;width:100%;height:100%;object-fit:contain}
.m-phone{width:84px;filter:drop-shadow(0 14px 16px rgba(10,60,35,.28))}
.m-phone img{height:auto}
.m-ipad{width:186px;aspect-ratio:4/3;background:#111;border-radius:14px;padding:7px;box-shadow:inset 0 0 0 1.5px #c9ccca,0 16px 22px -10px rgba(10,60,35,.35)}
.m-ipad .scr,.m-mac .scr{width:100%;height:100%;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#d8eed6,#9fd0a6)}
.m-ipad img,.m-mac .scr img{padding:3%}
.m-mac{width:196px;filter:drop-shadow(0 14px 18px rgba(10,60,35,.25))}
.m-mac .lid{position:relative;aspect-ratio:16/10.4;background:#111;border-radius:10px 10px 3px 3px;padding:5px 5px 7px;box-shadow:inset 0 0 0 1.5px #c9ccca}
.m-mac .lid i{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:18px;height:5px;background:#111;border-radius:0 0 3px 3px;z-index:1}
.m-mac .scr{border-radius:4px}
.m-mac .base{height:9px;margin:0 -12px;background:linear-gradient(#e6e8e7,#b4b8b6 70%,#9da19f);border-radius:0 0 12px 12px}
.m-watch{width:78px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3))}
.m-watch .band{display:block;width:74%;height:26px;background:linear-gradient(90deg,#1f4f37,#2f7a52 50%,#1f4f37)}
.m-watch .band:first-child{border-radius:12px 12px 2px 2px;margin-bottom:-4px}
.m-watch .band:last-child{border-radius:2px 2px 12px 12px;margin-top:-4px}
.m-watch .case{position:relative;width:100%;aspect-ratio:41/49;border-radius:20px;padding:3px;z-index:1;background:linear-gradient(145deg,#e9ebea,#9a9e9c 45%,#6e7270)}
.m-watch .crown{position:absolute;right:-5px;top:22%;width:6px;height:16%;border-radius:2px;background:repeating-linear-gradient(180deg,#b9bdbb 0 1.4px,#7d817f 1.4px 2.4px)}
.m-watch .scr{height:100%;border-radius:17px;background:#000;color:#fff;padding:7px 7px 8px;display:flex;flex-direction:column;text-align:left;line-height:1.1;font-family:var(--f)}
.m-watch .t{font-size:7px;font-weight:700;color:#3DCB7A}
.m-watch .y{font-size:6px;color:#a7a7a7;margin-top:auto}
.m-watch .scr b{font:700 17px/1.1 var(--f);color:#3DCB7A;margin:0;letter-spacing:-.02em}
.m-watch .l{font-size:6px;color:#ddd}
.devices > div{padding-top:30px}

/* ---------- The scroll story (inspired by Apple's product pages) ---------- */
.story{position:relative;height:400svh;background:#0B100D;color:#F4F6F4;margin-top:40px}
.story-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;
  max-width:1180px;margin:0 auto;padding:0 40px}
.story-words{position:relative;height:60svh}
.story .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.story .step.on{opacity:1;transform:none}
.story .k{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#3DCB7A;margin-bottom:14px}
.story h2{color:#fff;font-size:clamp(40px,5.2vw,76px);line-height:1.02;margin:0 0 18px}
.story h2 em{color:#3DCB7A;font-style:normal;display:block}
.story p{font-size:clamp(18px,1.6vw,22px);color:rgba(244,246,244,.66);max-width:30ch;margin:0}
.story .dots{position:absolute;left:0;bottom:-6svh;display:flex;gap:8px}
.story .dots i{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.25);transition:width .4s,background .4s}
.story .dots i.on{width:26px;background:#3DCB7A}
.story-phone{position:relative;justify-self:center;width:min(330px,34vh);aspect-ratio:715/1479;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.story-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.story-phone img.on{opacity:1;transform:none}
@media (max-width:900px){
  .story{height:400svh}
  .story .snap{display:none}
  .story-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;padding:88px 22px 24px;align-content:start}
  .story-words{height:250px}
  .story .step{justify-content:flex-start}
  .story h2{font-size:32px}.story p{font-size:16px}
  .story .dots{bottom:0}
  .story-phone{width:min(220px,46vw);align-self:start}
}
@media (prefers-reduced-motion:reduce){.story .step,.story-phone img{transition:none}}
/* Phones: the mini devices shrink so all four fit, two by two. */
@media (max-width:700px){
  .devices .vis{height:132px;margin-bottom:12px}
  .devices .vis > div{zoom:.64}
  .devices > div{padding:20px 10px 18px;min-width:0}
}
@media (max-width:900px){.devices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- Real device frames (from the device mockup library): the screen sits behind the frame ---------- */
.fr{position:relative}
.fr .fx-frame{position:relative;display:block;width:100%;height:auto;z-index:1;pointer-events:none}
.fr .fx-screen{position:absolute;z-index:0;overflow:hidden;background:linear-gradient(160deg,#d8eed6,#9fd0a6)}
.fr .fx-screen img{width:100%;height:100%;object-fit:contain;object-position:center;padding:3%}
.fr-mac .fx-screen{left:11.77%;top:6.66%;width:76.46%;height:82.63%}
.fr-ipad .fx-screen{left:3.93%;top:5.45%;width:92.27%;height:89.28%;border-radius:2%}
.fr-watch .fx-screen{left:11.27%;top:23.99%;width:73.21%;height:52.02%;background:#000}
/* hero sizes: the frames set their own shape */
.dv-mac.fr{aspect-ratio:auto;background:none;box-shadow:none;width:72%}
.dv-ipad.fr{aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;width:44%}
.dv-watch.fr{display:block;width:11%;padding:0;background:none;border-radius:0;box-shadow:none;aspect-ratio:auto;filter:drop-shadow(0 2cqw 2cqw rgba(0,0,0,.3))}
.dv-watch.fr::after{content:none}
.dv-watch.fr .fx-screen{border-radius:0;box-shadow:none;padding:.5cqw .6cqw;justify-content:center}
.dv-watch.fr .fx-screen .t,.dv-watch.fr .fx-screen .clk{font-size:.8cqw}
.dv-watch.fr .fx-screen .y{font-size:.7cqw;margin-top:.6cqw}
.dv-watch.fr .fx-screen b{font-size:2cqw}
.dv-watch.fr .fx-screen .l{font-size:.65cqw}
/* device section */
.devices .vis{height:200px}
.devices .m-fr{width:100%;max-width:230px;align-self:flex-end}
.devices .m-fr.w{max-width:96px}
.m-fr.fr-watch .fx-screen{display:flex;flex-direction:column;justify-content:center;padding:6px 7px;color:#fff;line-height:1.1;text-align:left}
.m-fr.fr-watch .t{font-size:8px;font-weight:700;color:#3DCB7A}
.m-fr.fr-watch .y{font-size:7px;color:#a7a7a7;margin-top:6px}
.m-fr.fr-watch b{font:700 16px/1.1 var(--f);color:#3DCB7A;margin:0}
.m-fr.fr-watch .l{font-size:7px;color:#ddd}
.devices p{margin:8px auto 0;max-width:30ch;color:var(--ink2);font-size:15px;line-height:1.45}
.devices > div{text-align:center}
/* the nav's one button */
.nav a.navcta{background:var(--tint);color:var(--tint-ink);font-weight:700}

.devset .fr{position:absolute}
.devset .fr .fx-frame{height:auto}
.devset .fr .fx-screen img{height:100%}

/* ---------- A budget bursting with personality: the iPhone Duo opens as you scroll ---------- */
.burst{position:relative;height:260svh;background:var(--bg);overflow:clip}
.burst-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:30px;max-width:1180px;margin:0 auto;padding:0 40px;overflow:visible}
.burst .k{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tint)}
.burst h2{font-size:clamp(40px,4.8vw,68px);line-height:1.03;margin:14px 0 18px}
.burst h2 em{display:block}
.burst p{font-size:clamp(17px,1.5vw,21px);color:var(--ink2);max-width:34ch;margin:0}
.duo-wrap{position:relative;display:grid;place-items:center;perspective:1800px;height:520px}
.duo{position:relative;width:560px;height:407px;transform-style:preserve-3d;transition:transform .05s linear}
.duo .shadow{position:absolute;left:52%;right:4%;bottom:-26px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(22px);transform:translateZ(-4px);transition:left .1s}
.duo.isopen .shadow,.duo .shadow.wide{left:6%}
.duo .half{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d}
.duo .half.right{left:50%}
.duo .half.left{left:0;transform-origin:100% 50%}
.duo .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.duo .face.back{transform:rotateY(180deg);overflow:visible}
/* The open Duo (iPhone Duo bezel, Paydate on the inner screen) is one picture; each half shows its side of it. */
.duo .ui{position:absolute;top:0;left:0;width:560px;height:407px;background:url(/assets/duo-inner.webp) 0 0/100% 100% no-repeat}
.duo .half.right .ui{left:-280px}
/* The folded Duo: the outer screen, hinge edge on the left. */
.duo .cover{position:absolute;top:0;left:0;height:407px;width:292px;background:url(/assets/duo-outer.webp) 0 0/100% 100% no-repeat}
.duo .otitle{position:absolute;left:8.6%;top:6.6%;font-weight:700;font-size:15px;line-height:1.1;color:#111;letter-spacing:-.01em}
.duo .otitle small{display:block;font-size:8px;font-weight:500;color:#6b7468;letter-spacing:0}
/* The control rail iOS 27 puts on the right of the Duo, folded or open. */
.duo .rail{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;color:#111;transform:translateX(-50%)}
.duo .rail.out{left:86.5%;padding-top:57px}
.duo .rail.in{left:92%;padding-top:39px}
.duo .rt{font-size:8px;font-weight:700}
.duo .rw{display:block;width:16px;height:16px;margin-top:3px}.duo .rw svg{width:100%;height:100%}
.duo .rb{width:24px;height:24px;margin-top:12px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.12),inset 0 0 0 .5px rgba(0,0,0,.08);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;color:#2f7d4a}
.duo .rtabs{position:absolute;top:59.5%;display:flex;flex-direction:column;gap:2px;padding:3px;border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 2px 8px rgba(0,0,0,.1),inset 0 0 0 .5px rgba(0,0,0,.08)}
.duo .rtabs span{width:20px;height:22px;display:grid;place-items:center;border-radius:99px;font-size:12px}
.duo .rtabs .on{background:rgba(0,0,0,.08)}
.duo .pop{position:absolute;left:50%;top:50%;width:0;height:0;transform:translateZ(60px);pointer-events:none}
.duo .pop span{position:absolute;left:0;top:0;font-size:38px;opacity:0;will-change:transform,opacity}
@media (max-width:900px){
  .burst{height:240svh}
  .burst-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:84px 22px 20px;align-content:start;gap:0}
  .burst h2{font-size:34px}.burst p{font-size:16px}
  .duo-wrap{height:340px}
  .duo{zoom:.56}
}

/* ---------- Motion details ---------- */
/* Your stars: the phone floats, as if by magic */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1deg)}}
.motion #stars .shot .phone{animation:floaty 6s ease-in-out infinite;will-change:transform}
/* Privacy: the pills drop into place from above */
.motion #privacy .pills span{opacity:0;transform:translateY(-140px) rotate(var(--r,0deg))}
.motion #privacy .pills.in span{animation:pilldrop .9s cubic-bezier(.3,1.45,.55,1) forwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes pilldrop{0%{opacity:0;transform:translateY(-140px) rotate(var(--r,0deg))}35%{opacity:1}100%{opacity:1;transform:none}}
/* Widgets: the notifications arrive one by one, newest on top */
.lock .pn{display:grid;grid-template-rows:1fr;overflow:hidden;border-radius:20px}
.lock .pn > .pnote{min-height:0}
.motion .lock .pn{grid-template-rows:0fr;margin-top:-10px;transition:grid-template-rows .55s cubic-bezier(.2,.9,.3,1),margin-top .55s}
.motion .lock .pn > .pnote{opacity:0;transform:translateY(-24px) scale(.94);transition:opacity .35s ease .1s,transform .6s cubic-bezier(.3,1.4,.5,1) .05s}
.motion .lock .pn.on{grid-template-rows:1fr;margin-top:0}
.motion .lock .pn.on > .pnote{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .motion #stars .shot .phone{animation:none}
  .motion #privacy .pills span{opacity:1;transform:none}
  .motion .lock .pn{grid-template-rows:1fr;margin-top:0}.motion .lock .pn > .pnote{opacity:1;transform:none}
}
/* Widgets and notifications: tighter, so it fits about one screen */
#widgets .glance-grid{margin-top:28px;align-items:start}
#widgets .homescreen{padding:22px 22px 14px}
#widgets .wgrid{gap:14px}
#widgets .lock{padding:20px 16px 16px;gap:8px}
#widgets .ltime{font-size:46px;margin-bottom:8px}
#widgets .pnote{padding:9px 12px}
@media (min-width:1024px) and (min-height:700px){#widgets.block{padding:96px 0 48px!important}}

/* Themes: four short facts above the row of phones */
.tfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.tfacts div{background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.14)}
.tfacts b{display:block;font-size:16px;margin-bottom:3px}
.tfacts span{font-size:14px;color:var(--ink2);line-height:1.35}
@media (max-width:900px){.tfacts{grid-template-columns:1fr 1fr}}
/* Story: emoji taps on the payday card */
.story-phone .taps{position:absolute;inset:0;z-index:3;cursor:pointer}
.taps .finger{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(255,255,255,.7);pointer-events:none}
.taps .em{position:absolute;font-size:22px;line-height:1;pointer-events:none;will-change:transform,opacity}
.burst-words{position:relative;z-index:5}
.burst .duo-wrap{z-index:1}
.burst-canvas{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:4;pointer-events:none}
.burst-stage{position:sticky}

/* Nav: below tablet width the section links fold into a menu */
.nav .menu{display:none}
@media (max-width:900px){
  .nav .hide-s{display:none}
  .nav{position:relative;align-items:center}
  .nav .menu{display:grid;place-content:center;gap:5px;width:38px;height:34px;border:0;border-radius:999px;background:none;cursor:pointer;padding:0;margin-left:2px}
  .nav .menu i{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease}
  .top.open .nav .menu i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .top.open .nav .menu i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .top.open .nav .hide-s{display:block;position:absolute;right:0;width:200px;padding:12px 16px;background:var(--card);box-shadow:0 12px 30px rgba(0,0,0,.25);border-radius:0;font-size:16px}
  .top.open .nav .hide-s:nth-child(1){top:46px;border-radius:16px 16px 0 0}
  .top.open .nav .hide-s:nth-child(2){top:91px}
  .top.open .nav .hide-s:nth-child(3){top:136px}
  .top.open .nav .hide-s:nth-child(4){top:181px;border-radius:0 0 16px 16px}
  .nav a.navcta{white-space:nowrap}
}
@media (max-width:1023px){main > section[id]{scroll-margin-top:80px}}
/* Back-to-back color bands meet edge to edge (no strip of page between them) */
section.band + section.band{margin-top:0!important}
section.band:has(+ section.band){margin-bottom:0!important}
@media (max-width:700px){section.band{padding:72px 0!important}}
.reel figcaption small{display:block;font-size:12px;font-weight:500;color:var(--ink3);margin-top:2px;letter-spacing:.02em}

/* Phones and small tablets: the devices first, then the words, all on the first screen */
@media (max-width:900px){
  .hero{padding:78px 0 20px;min-height:100svh;box-sizing:border-box;display:flex;align-items:center}
  .hero .wrap{display:flex;flex-direction:column;gap:6px;width:100%}
  .hero .devset{order:-1;width:100%;max-width:520px;margin:0 auto 4px}
  .hero .eyebrow{font-size:12px;padding:6px 11px}
  .hero h1{font-size:clamp(34px,9.5vw,48px);margin:12px 0 8px}
  .hero .lede{font-size:16px;margin:0 0 16px;max-width:36ch}
  .hero .lede .lx{display:none}
  .hero .cta{flex-wrap:nowrap;gap:8px}
  .hero .cta .btn{padding:12px 16px;font-size:15px;white-space:nowrap}
  .hero .note{font-size:12px;margin-top:12px}
}
@media (max-width:900px) and (max-height:700px){.hero .devset{max-width:400px}.hero h1{font-size:32px}}
@media (max-width:900px){
  .hero{align-items:flex-start;padding-top:64px}
  .hero .devset{width:112%;max-width:600px;margin:-6% -6% 2px;align-self:center}
}

/* ---------- Your stars: the floating phone with its features drifting around it ---------- */
#stars .stars-wrap{text-align:center}
#stars .stars-head{max-width:640px;margin:0 auto}
#stars .stars-head .sub{margin-left:auto;margin-right:auto}
#stars .orbit{position:relative;width:min(94vw,1060px);height:620px;margin:28px 0 0;left:50%;transform:translateX(-50%)}
#stars .orbit .shot{position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0}
#stars .orbit .phone{width:290px}
#stars .oc{position:absolute;width:236px;text-align:left;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:start;
  padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(201,180,255,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);color:#F3EEFF}
#stars .oc i{grid-row:span 2;font-style:normal;font-size:26px;line-height:1.1}
#stars .oc b{font-size:15px;color:#fff}
#stars .oc span{font-size:13px;line-height:1.35;color:rgba(243,238,255,.72)}
#stars .o1{left:2%;top:40px}  #stars .o2{left:0;top:250px}  #stars .o3{right:2%;top:70px}
#stars .o4{right:0;top:290px} #stars .o5{left:50%;margin-left:-118px;top:auto;bottom:-24px;z-index:2}
#stars .stars-note{margin-top:44px}
@keyframes ocfloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
#stars .oc{animation:ocfloat 5s ease-in-out infinite}
#stars .o2{animation-delay:-1.2s}#stars .o3{animation-delay:-2.4s}#stars .o4{animation-delay:-3.1s}#stars .o5{animation-delay:-.6s}
/* they drift out from behind the phone */
.motion #stars .oc{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.6);transition:opacity .6s ease,transform 1s cubic-bezier(.2,1.2,.3,1)}
.motion #stars .o1{--fx:260px;--fy:120px}.motion #stars .o2{--fx:270px;--fy:-60px}.motion #stars .o3{--fx:-260px;--fy:110px}
.motion #stars .o4{--fx:-270px;--fy:-80px}.motion #stars .o5{--fx:0;--fy:-180px}
.motion #stars .orbit.in .oc{opacity:1;transform:none}
.motion #stars .orbit.in .o2{transition-delay:.15s}.motion #stars .orbit.in .o3{transition-delay:.3s}
.motion #stars .orbit.in .o4{transition-delay:.45s}.motion #stars .orbit.in .o5{transition-delay:.6s}
@media (max-width:900px){
  #stars .orbit{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  #stars .orbit .shot{position:relative;left:auto;transform:none;grid-column:1/-1;justify-self:center;margin-bottom:8px}
  #stars .orbit .phone{width:220px}
  #stars .oc{position:relative;inset:auto!important;margin:0!important;width:auto;grid-template-columns:1fr;padding:12px}
  #stars .oc i{grid-row:auto;font-size:22px;margin-bottom:4px}
  #stars .o5{grid-column:1/-1}
  .motion #stars .oc{--fx:0!important;--fy:-40px!important}
  #stars .stars-note{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){#stars .oc{animation:none}}
@media (max-width:900px){#stars .orbit{width:auto;left:auto;transform:none}}
.listcard .row.rv{opacity:0;transform:translateX(-18px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.listcard .row.rv .tile{transform:scale(.4) rotate(-20deg);transition:transform .7s cubic-bezier(.3,1.6,.5,1);transition-delay:inherit}
.listcard .row.rv.in{opacity:1;transform:none}.listcard .row.rv.in .tile{transform:none}
/* Phones: Together reads header first, then the phone, then the list */
@media (max-width:900px){
  #together .split{display:flex;flex-direction:column;gap:0}
  #together .split > div:not(.shot){display:contents}
  #together .eyebrow{order:1;align-self:flex-start}
  #together h2{order:2}
  #together .sub{order:3}
  #together .shot{order:4;margin:22px 0 26px}
  #together .listcard{order:5}
  #together .note{order:6}
}
@media (max-width:900px){#together h2,#together .sub{text-align:left;align-self:stretch}}
/* ---------- Language picker ---------- */
.top .wrap{gap:8px}
.lang{position:relative;margin-left:auto}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink);padding:8px 11px;border-radius:999px;background:var(--fill);white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang[open] summary{background:var(--card)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:var(--card);border-radius:16px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.28);display:flex;flex-direction:column;z-index:20}
.lang-menu a{color:var(--ink);font-size:15px;font-weight:600;padding:9px 12px;border-radius:10px}
.lang-menu a:hover{text-decoration:none;background:var(--fill)}
.lang-menu a[aria-current]{color:var(--tint)}
.lang-menu a[aria-current]::after{content:" ✓"}
@media (max-width:560px){.lang summary{padding:8px 9px}.lang summary span{display:none}}
/* Thai: taller lines and no tight tracking so the script breathes */
:lang(th) h1,:lang(th) h2,:lang(th) h3{line-height:1.28;letter-spacing:0}
:lang(th) body,:lang(th) p{line-height:1.7}
:lang(th) .burst h2,:lang(th) .hero h1{line-height:1.25}
/* Longer Spanish and French headlines */
:lang(es) .hero h1,:lang(fr) .hero h1{font-size:clamp(34px,4.4vw,66px)}
@media (max-width:900px){.hero .cta{flex-wrap:wrap}.hero .cta .btn{flex:1 1 auto;justify-content:center}.hero .note{line-height:1.5}}
/* ---------- Launch sign-up ---------- */
.notify-form{display:flex;gap:8px;max-width:460px;margin:22px auto 0;padding:6px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(128,128,128,.22),0 18px 40px -22px rgba(0,0,0,.45)}
.notify-form input[type=email]{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:500 17px/1.2 var(--f);padding:10px 16px;outline:none}
.notify-form input[type=email]::placeholder{color:var(--ink3)}
.notify-form:focus-within{box-shadow:inset 0 0 0 2px var(--tint),0 18px 40px -22px rgba(0,0,0,.45)}
.notify-form .btn{flex:none;padding:12px 22px}
.notify-form .btn:disabled{opacity:.6}
.notify-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nmsg{margin:16px auto 0;font-size:16px;font-weight:600;max-width:460px}
.nmsg.ok{color:var(--tint);font-size:19px}.nmsg.err,.nmsg.bad{color:#E5484D}
.nfine{margin:12px auto 0;font-size:13px;color:var(--ink3);max-width:460px}
@media (max-width:480px){.notify-form{flex-direction:column;border-radius:22px}.notify-form .btn{justify-content:center}.notify-form input[type=email]{text-align:center}}

/* ---------- Press kit ---------- */
.press .kit{display:flex;gap:22px;align-items:center;background:var(--card);border-radius:24px;padding:22px;box-shadow:var(--shadow);margin:22px 0 10px}
.press .kit img{width:112px;height:112px;border-radius:25px;flex:none}
.press .kit b{display:block;font-size:20px}.press .kit span{display:block;color:var(--ink2);margin:2px 0 14px}
.press .kit small{display:block;color:var(--ink3);margin-top:10px;font-size:13px}
.press .facts{display:grid;grid-template-columns:140px 1fr;gap:10px 18px;margin:0}
.press .facts dt{font-weight:700}.press .facts dd{margin:0;color:var(--ink2)}
.press .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.press .shots img{width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.25))}
@media (max-width:560px){.press .kit{flex-direction:column;text-align:center}.press .facts{grid-template-columns:1fr;gap:2px}.press .facts dd{margin-bottom:10px}.press .shots{grid-template-columns:repeat(2,1fr)}}
.press .sig{color:var(--ink3);font-style:italic;margin-top:14px}
/* FAQ: anchored at the top so opening an answer only pushes things below it down */
#faq.block{justify-content:flex-start!important}
@media (min-width:1024px) and (min-height:700px){#faq.block{padding-top:140px!important}}
details.q{overflow:hidden}
#faq > .wrap{width:100%;box-sizing:border-box}