html{color-scheme:light}

:root{
  --dg:#123a30; --dg2:#0c2a22; --vg:#00aa70; --vg2:#16c68c;
  --mint:#d3e8de; --cream:#e3e8e5; --ink:#0b1a15; --ink-soft:#56655f;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;

  --canvas:#ffffff;
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --hair:rgba(11,26,21,.11);
  --hair-strong:rgba(11,26,21,.17);
  --nav-bg:rgba(252,253,252,.8);
  --panel:#ffffff;
  --panel-desc:#56655f;
  --hover:#eef3f0;
  --eyebrow:#1a7a52;
  --block:var(--dg);
  --block-soft:#eef2ef;
  --surface:#ffffff;
}
@media (prefers-color-scheme:dark) and (min-width:99999px){
  html{color-scheme:light}
:root{
    --canvas:#080d0c; --fg:#eef3f0; --fg-soft:#9bb4ab;
    --hair:rgba(255,255,255,.12); --hair-strong:rgba(255,255,255,.2);
    --nav-bg:rgba(11,15,13,.72);
    --panel:#131f1a; --panel-desc:#9cb3a8; --hover:rgba(255,255,255,.06);
    --eyebrow:#7fd2ad;
    --block:#10241e; --block-soft:#111814; --surface:#0f241f;
  }}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{font-family:var(--font);background:var(--canvas);color:var(--fg);font-weight:400;line-height:1.6;overflow-x:hidden}

a{color:inherit;text-decoration:none}

svg{display:block}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.04}

.eyebrow{font-size:13.5px;font-weight:700;color:var(--eyebrow)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:700;padding:13px 26px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}

.btn-green{color:#fff!important;background:var(--vg);color:#04180f}

.btn-green:hover{background:var(--vg2);transform:translateY(-1px)}

.btn .ar{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}


/* ---------------- NAV ---------------- */
.bar{position:sticky;top:0;z-index:200;background:var(--nav-bg);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid var(--hair)}

.bar-inner{max-width:1160px;margin:0 auto;height:60px;padding:0 28px;display:flex;align-items:center;gap:4px}

.brand{display:flex;align-items:center;margin-right:22px;flex-shrink:0}

.brand svg{height:22px;width:auto}

.lg-l{display:none}
@media (prefers-color-scheme:dark) and (min-width:99999px){.lg-d{display:none}.lg-l{display:block}}

.nav{display:flex;align-items:center;flex:1}

.nav-btn{font-family:inherit;font-size:14.5px;font-weight:500;color:var(--fg);background:none;border:0;cursor:pointer;padding:9px 13px;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;opacity:.8;transition:opacity .12s}

.nav-btn:hover{opacity:1}

.chev{width:9px;height:9px;transition:transform .2s;opacity:.55}

.nav-item{position:relative}

.nav-item[data-open="true"] .nav-btn{opacity:1}

.nav-item[data-open="true"] .chev{transform:rotate(180deg)}

.actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}

.signin{font-size:14.5px;font-weight:500;opacity:.8}

.signin:hover{opacity:1}

.cta-sm{font-size:14px;font-weight:700;background:var(--vg);color:#fff;padding:9px 18px;border-radius:999px;transition:background .15s,color .15s}

.cta-sm:hover{background:var(--fg);color:var(--canvas)}

.panel{position:absolute;top:calc(100% + 12px);left:0;background:var(--panel);border:1px solid var(--hair);border-radius:14px;box-shadow:0 30px 70px -24px rgba(7,22,18,.3);padding:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}

.nav-item[data-open="true"] .panel{opacity:1;visibility:visible;transform:translateY(0)}

.panel.c1{min-width:280px}

.panel.c2{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:2px;min-width:540px}

.panel.c4{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:2px;min-width:800px}

.grp{padding:8px}

.grp-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow);padding:2px 10px 8px}

.mlink{display:block;padding:8px 10px;border-radius:9px}

.mlink:hover{background:var(--hover)}

.mlink .l{font-size:14px;font-weight:600;display:block}

.mlink .d{font-size:11.5px;color:var(--panel-desc);display:block;margin-top:1px;line-height:1.4}

.ham{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}

.ham span{display:block;width:22px;height:2px;background:var(--fg);margin:4px 0;border-radius:2px}

.drawer{display:none}


/* ---------------- PHONE (realistic app frame) ---------------- */
.phone{position:relative;width:272px;height:592px;background:#101613;border-radius:44px;padding:10px;box-shadow:0 22px 44px -26px rgba(10,20,16,.42),0 2px 6px rgba(10,20,16,.22);flex-shrink:0}

@keyframes hlpulse{0%,100%{background:linear-gradient(90deg,#f2fbf6,#fff)}50%{background:linear-gradient(90deg,#e2f6ec,#fff)}}

@keyframes offpulse{0%,100%{outline-color:#00aa70}50%{outline-color:#7fd8b4}}

.vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;border-top:1px solid var(--hair);padding-top:38px}

.vmv h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:12px}

.vmv p{font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.5}

.vmv .vp{font-weight:400;color:var(--fg-soft);font-size:14.5px;margin-top:8px}

@keyframes tipbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-7px)}}

@keyframes chippulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}


/* ---------------- HERO ---------------- */
.hero{padding:84px 0 40px;background:var(--canvas);overflow:hidden}

.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:center}

.hero .wrap > :only-child{grid-column:1 / -1}

.hero h1{font-size:clamp(42px,6vw,76px);letter-spacing:-.045em;line-height:.99}

.hero h1 em{font-style:normal;color:var(--vg)}

.hero .sub{font-size:19px;color:var(--fg-soft);max-width:460px;margin-top:24px;font-weight:400}

.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

@keyframes float{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-10px)}}

@keyframes scroll{to{transform:translateX(-50%)}}


/* ---------------- LAYERED BLOCK (Stripe move) ---------------- */
.block{margin:64px auto;max-width:1160px;padding:0 28px}

@keyframes grain{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}

@keyframes prog{from{width:0}to{width:100%}}


/* ---------------- EDITORIAL SECTIONS ---------------- */
.sec{padding:92px 0}

.sechead{max-width:680px;margin-bottom:52px}

.sechead h2{font-size:clamp(30px,4vw,46px);margin:14px 0}


/* final: dark block on white */
.final-inner{background:var(--block);color:#fff;border-radius:20px;padding:88px 60px;text-align:center;position:relative;overflow:hidden}

.final-inner h2{font-size:clamp(32px,4.8vw,58px);letter-spacing:-.045em;max-width:15ch;margin:0 auto;position:relative;z-index:2}

.final-inner p{font-size:17.5px;color:rgba(255,255,255,.8);margin:16px auto 30px;max-width:44ch;position:relative;z-index:2}

.final-inner .hero-cta{justify-content:center;position:relative;z-index:2}


/* footer: white, hairline */
.foot{border-top:1px solid var(--hair);padding:64px 0 30px}

.foot .top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px;margin-bottom:46px}

.foot .brand{margin-bottom:16px}

.foot .brand svg{height:21px;width:auto}

.foot .blurb{font-size:14px;max-width:250px;color:var(--fg-soft)}

.fcol .fh{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px}

.fcol a{display:block;font-size:14px;color:var(--fg);opacity:.66;padding:5px 0;transition:color .12s,opacity .12s}

.fcol a:hover{opacity:1;color:var(--vg)}

.foot .btm{border-top:1px solid var(--hair);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--fg-soft)}

.foot .btm a{margin-left:18px}


.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

.rv.in{opacity:1;transform:none}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;text-align:center}
  .hero .sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .foot .top{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .nav,.actions{display:none}
  .ham{display:block}
  body[data-drawer="true"] .drawer{display:block}
  .drawer{position:fixed;inset:60px 0 0 0;z-index:150;background:var(--canvas);overflow-y:auto;padding:14px 24px 48px}
  .d-item{border-bottom:1px solid var(--hair)}
  .d-btn{width:100%;font-family:inherit;font-size:17px;font-weight:600;color:var(--fg);background:none;border:0;cursor:pointer;padding:17px 4px;display:flex;justify-content:space-between;align-items:center}
  .d-btn .chev{width:12px;height:12px;stroke:var(--fg)}
  .d-item[data-open="true"] .d-btn .chev{transform:rotate(180deg)}
  .d-panel{max-height:0;overflow:hidden;transition:max-height .3s}
  .d-item[data-open="true"] .d-panel{max-height:1400px}
  .d-link{display:block;padding:10px 4px;font-size:15px;opacity:.85}
  .d-act{margin-top:22px;display:flex;flex-direction:column;gap:10px}
  .d-act .signin{border:1px solid var(--hair-strong);text-align:center;border-radius:999px;padding:12px}
  .d-act .cta-sm{text-align:center;padding:13px}}
@media (max-width:600px){
  .wrap,.block{padding:0 18px}
  .sec{padding:64px 0}
  .block{margin:48px auto}
  .hsteps,.pstats,.vmv{grid-template-columns:1fr}
  .foot .top{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

@keyframes washmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@keyframes washglow{0%,100%{transform:translate(0,0)}50%{transform:translate(14%,12%)}}

header a[aria-current="page"]{color:var(--vg)!important;font-weight:700}

/* --- card variant of the value grid (Platform / Partners / Pricing) --- */
.vmv.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;border-top:0;padding-top:8px}

.vmv.cards>div{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:26px 24px;margin:0}

.vmv.cards h3{margin:0 0 4px}

.vmv.cards .vp{margin-top:8px}