/* Home: one sky card up top, then a calm, simple page. */
:root{--sky:linear-gradient(180deg,#A6DE8C 0%,#C4EBAC 42%,#E4F5D5 100%);--glass:rgba(255,255,255,.62)}
body{background:#fff}

/* Faint rings radiating from the bottom centre, like the app's sparkle sky */
.rings{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle at 50% 108%,transparent 0 118px,rgba(255,255,255,.42) 119px 120px);
  -webkit-mask:radial-gradient(circle at 50% 100%,#000 20%,transparent 75%);mask:radial-gradient(circle at 50% 100%,#000 20%,transparent 75%)}

/* ---------- Hero card ---------- */
.top{padding:118px clamp(10px,1.6vw,24px) 0}
.hcard{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(24px,2.6vw,36px);background:var(--sky);
  min-height:min(880px,calc(100svh - 120px));padding:clamp(28px,3.4vw,52px) clamp(22px,3.4vw,52px) 0;display:flex;flex-direction:column}
.hcard::after{content:"";position:absolute;left:50%;bottom:-30%;width:900px;height:620px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent);pointer-events:none}
.hcard h1{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  font-size:clamp(40px,5.2vw,80px);letter-spacing:-.01em;line-height:1;white-space:nowrap}
.wire{flex:1;height:1.5px;min-width:40px;background:linear-gradient(90deg,rgba(10,10,10,.05),rgba(10,10,10,.35));position:relative}
.wire i{position:absolute;right:-6px;top:50%;width:30px;height:30px;transform:translate(0,-50%);border-radius:50%;
  background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.45),0 0 24px 6px rgba(255,255,255,.7)}
.wire i::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--mint)}
.hcopy{position:relative;z-index:2;max-width:330px;margin-top:clamp(22px,3vw,40px)}
.hcopy p{font-size:clamp(16px,1.2vw,18px);color:#26351f;line-height:1.5}
.hcopy .get{margin-top:22px}
.hcard .stage{--pw:clamp(220px,18vw,272px);position:relative;z-index:1;margin:clamp(-200px,-11vw,-60px) auto 0;width:var(--pw);flex:1;display:flex;align-items:flex-end}
.hcard .phone{margin-bottom:calc(var(--pw) * -.3);box-shadow:0 0 0 1.5px #2b2b2b inset,0 40px 80px -30px rgba(10,40,10,.45)}

/* Spend cards floating around the phone (tap one and it flies in) */
.spend{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:150px;
  padding:14px 16px 13px;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);cursor:pointer;text-align:left;
  box-shadow:0 18px 40px -18px rgba(20,60,20,.35);transition:transform .2s,box-shadow .2s;animation:bob 7s ease-in-out infinite}
.spend:hover{box-shadow:0 22px 44px -16px rgba(20,60,20,.45),0 0 0 1.5px var(--ink)}
.spend small{font:500 13px/1 var(--body);color:#2f3d29}
.spend small span{color:var(--orange);font-weight:700}
.spend b{font-size:30px;letter-spacing:-.04em}
.spend i{font:500 12px/1 var(--body);font-style:normal;color:#4b5a44;border-bottom:1px solid currentColor;padding-bottom:2px}
.s-a{right:calc(100% + 40px);top:34%;animation-delay:-1s}
.s-b{right:calc(100% + 90px);top:62%;animation-delay:-3s}
.s-c{left:calc(100% + 40px);top:26%;animation-delay:-2s}
.s-d{left:calc(100% + 100px);top:56%;animation-delay:-4.5s}
.spend.flying{animation:none;transition:transform .55s cubic-bezier(.5,0,.75,0),opacity .55s;opacity:0}
.spend.used{visibility:hidden}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.spend{animation:none}}
.hcard .reset{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);border:0;border-radius:999px;padding:9px 16px;
  background:var(--ink);color:#fff;font:600 13px/1 var(--body);cursor:pointer}

.hpromo{position:absolute;z-index:3;right:clamp(14px,1.4vw,22px);bottom:clamp(14px,1.4vw,22px);display:flex;align-items:center;gap:16px;
  width:min(380px,32%);padding:16px 16px 16px 20px;border-radius:18px;background:rgba(10,10,10,.82);color:#fff;text-decoration:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:500 16px/1.3 var(--body);transition:transform .2s}
.hpromo:hover{transform:translateY(-2px)}
.hpromo small{display:block;font:500 12px/1 var(--body);opacity:.65;margin-bottom:8px}
.hp-art{flex:none;width:112px;height:76px;border-radius:12px;background:var(--sky);color:var(--ink);display:flex;flex-direction:column;
  justify-content:center;align-items:center;font:500 12px/1 var(--body)}
.hp-art b{font-size:28px;margin-bottom:4px}

.proofrow{list-style:none;margin:0;padding:34px var(--pad) 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 44px;
  font:400 clamp(17px,1.5vw,21px)/1 var(--display);color:var(--ink)}
.proofrow li::before{content:"✓";font:700 14px/1 var(--body);color:var(--deep);margin-right:8px;vertical-align:2px}

/* ---------- Simple blocks ---------- */
.blk{padding:clamp(80px,10vw,150px) 0}
.blk.tight{padding-top:0}
.dot{display:inline-flex;align-items:center;gap:12px;font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.dot::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(120,216,120,.25)}
.small{font:500 16px/1.3 var(--body);color:var(--ink-2)}
.small.center{text-align:center;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:500}
.statement{font:400 clamp(32px,4.2vw,60px)/1.1 var(--display);letter-spacing:-.005em;max-width:22ch}
.statement span{color:#BDBDBD}

/* Picture + numbers */
.nums{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:900px){.nums{grid-template-columns:.85fr 1.15fr}}
.pic{border-radius:24px;overflow:hidden;aspect-ratio:1/1;position:relative}
.sky-pic{background:var(--sky);display:flex;justify-content:center;align-items:flex-start;padding-top:9%}
.sky-pic img{width:58%;border-radius:12%/5.6%;box-shadow:0 30px 60px -24px rgba(10,40,10,.4);outline:6px solid #0b0b0b}
.statlist{margin:20px 0 0}
.statlist div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #E3F1DA}
.statlist dt{font-size:clamp(64px,7vw,104px);font-weight:500;letter-spacing:-.05em}
.statlist dd{margin:0;text-align:right;color:var(--ink-2);font-size:clamp(15px,1.2vw,17px)}

/* How it works */
.stepb{margin-top:clamp(56px,7vw,110px)}
.st-head{text-align:center;max-width:560px;margin:0 auto}
.st-head .n{display:inline-grid;place-items:center;width:46px;height:36px;border-radius:9px;background:var(--mint);color:var(--deep);font:700 15px/1 var(--num)}
.st-head h3{font-size:clamp(32px,3.6vw,48px);margin-top:22px}
.st-head p{margin-top:14px;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px)}
.bigcard{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(28px,3vw,44px);border-radius:clamp(22px,2.4vw,32px);
  background:var(--sky);height:clamp(420px,46vw,620px);display:flex;justify-content:center}
.bigcard .device{position:relative;z-index:1;width:clamp(220px,22vw,300px);margin-top:clamp(36px,4vw,64px);align-self:flex-start}
.bigcard .device{aspect-ratio:auto;height:auto;margin-inline:0;box-shadow:0 40px 80px -30px rgba(10,40,10,.5)}
.bigcard .device img{height:auto}
.chipcard{position:absolute;z-index:2;padding:14px 18px;border-radius:16px;background:var(--glass);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(20,60,20,.35);min-width:160px}
.chipcard small{display:block;font:500 13px/1 var(--body);color:#2f3d29}
.chipcard b{display:block;font-size:28px;margin-top:10px;letter-spacing:-.04em}
.chipcard.c1{right:calc(50% + clamp(130px,13vw,180px));top:30%}
.chipcard.c2{left:calc(50% + clamp(130px,13vw,180px));top:52%}

/* Big green card: Can I afford it? */
.greencard{display:grid;gap:clamp(28px,4vw,56px);align-items:center;border-radius:clamp(22px,2.4vw,32px);background:var(--sky);
  padding:clamp(28px,4.4vw,64px)}
@media (min-width:900px){.greencard{grid-template-columns:1fr 1fr}}
.greencard .lead{color:#26351f}
.greencard .dot::before{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.4)}
.afford{background:#fff;border-radius:24px;padding:clamp(18px,2vw,26px);box-shadow:0 30px 60px -30px rgba(10,40,10,.35)}
.afford .ask{display:flex;gap:10px;margin-top:0}
.afford .ask .inp{flex:1;height:62px;border-radius:18px;background:#EFF8E8;border-color:transparent;box-shadow:none}
.afford .ask .btn{height:62px;padding:0 24px;border-radius:18px}
.afford .chips{margin-top:14px}
.afford .result{margin-top:16px}
.afford.red{box-shadow:0 0 0 2px var(--red),0 30px 60px -30px rgba(10,40,10,.35)}

/* Features */
.sechead{max-width:640px}
.feats{display:grid;gap:14px;margin-top:clamp(32px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.feat{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;text-decoration:none;
  transition:transform .25s,box-shadow .25s;border:1px solid #E3F1DA}
.feat:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(0,0,0,.25)}
.fart{height:210px;background:var(--sky);display:flex;justify-content:center;overflow:hidden;padding-top:28px}
.fart img{width:52%;height:auto;align-self:flex-start;border-radius:12%/5.6%;outline:5px solid #0b0b0b;transition:transform .35s}
.feat:hover .fart img{transform:translateY(-6px)}
.fart.plain{align-items:center;padding:0;background:#EEF6E6}
.fart.plain{gap:14px;flex-wrap:wrap;align-content:center;padding:0 28px}
.p-ren b{font-size:96px;font-weight:500;letter-spacing:-.05em;color:var(--deep)}
.p-ren span{font:500 15px/1.3 var(--body);color:#3d5a33}
.p-car .tg{padding:9px 14px;border-radius:999px;background:#fff;font:500 15px/1 var(--body);box-shadow:0 6px 16px -8px rgba(20,60,20,.3)}
.p-fac svg{width:86px;height:86px;color:var(--deep)}
.afford .chip{background:#EFF8E8;border:1px solid #DCEFD0}
.fcopy{padding:22px 24px 26px}
.fcopy h3{font-size:24px}
.fcopy p{margin-top:8px;color:var(--ink-2);font-size:16px;padding-right:36px}
.fgo{position:absolute;right:20px;bottom:24px;width:36px;height:36px;border-radius:50%;background:#EFF8E8;display:grid;place-items:center;transition:background .2s,color .2s}
.fgo svg{width:16px;height:16px}
.feat:hover .fgo{background:var(--ink);color:#fff}

/* Two columns: heading left, content right */
.twocol{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){.twocol{grid-template-columns:.8fr 1.2fr}}
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid #E3F1DA}
.linklist a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:24px 4px;border-bottom:1px solid #E3F1DA;text-decoration:none}
.linklist b{font:400 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:-.005em}
.linklist span{grid-column:1;color:var(--ink-2);font-size:16px}
.linklist svg{grid-row:1/3;grid-column:2;width:22px;height:22px;transition:transform .2s}
.linklist a:hover svg{transform:translate(3px,-3px)}
.faq summary::after{background:#EFF8E8}

/* Final dark card */
.darkcard{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(22px,2.4vw,32px);background:#0B0D0A;color:#fff;
  display:grid;gap:24px;align-items:end;padding:clamp(32px,5vw,72px) clamp(28px,5vw,72px) 0;min-height:440px}
@media (min-width:800px){.darkcard{grid-template-columns:1fr auto}}
.darkcard .rings{background:repeating-radial-gradient(circle at 78% 120%,transparent 0 118px,rgba(120,216,120,.16) 119px 120px)}
.darkcard::before{content:"";position:absolute;right:-10%;bottom:-40%;width:760px;height:620px;z-index:-1;
  background:radial-gradient(closest-side,rgba(120,216,120,.42),transparent)}
.dc-copy{align-self:center;padding-bottom:clamp(32px,5vw,72px);position:relative;z-index:1}
.dc-copy .h2{font-size:clamp(44px,6vw,84px)}
.dc-copy p{margin-top:16px;color:rgba(255,255,255,.7);font-size:18px}
.dc-copy .get{margin-top:28px;background:#fff;color:var(--ink)}
.dc-phone{position:relative;z-index:1;width:clamp(220px,20vw,280px);margin-bottom:-90px;justify-self:center}
.dc-phone img{border-radius:13%/6%;outline:8px solid #222}

/* ---------- Smaller screens ---------- */
@media (max-width:1180px){.s-b{right:calc(100% + 40px)}.s-d{left:calc(100% + 40px)}.hpromo{display:none}}
@media (max-width:980px){
  .hcard h1{flex-direction:column;align-items:flex-start;gap:0;white-space:normal}
  .wire{display:none}
  .hcard .stage{margin-top:40px}
  .chipcard.c1{right:auto;left:4%;top:auto;bottom:8%}.chipcard.c2{left:auto;right:4%;top:18%}
}
@media (max-width:760px){
  .top{padding-top:100px}
  .hcard{min-height:0}
  .hcard h1{font-size:clamp(38px,11vw,56px)}
  .hcard .stage{--pw:min(58vw,230px);width:100%;margin-top:30px;display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:8px}
  .spend{position:relative;inset:auto;min-width:0;animation:none;padding:10px 12px;gap:4px;border-radius:12px;flex-direction:row;align-items:center}
  .spend b{font-size:18px}.spend i{display:none}
  .hcard .stage .phone{grid-column:1/-1;justify-self:center;margin-top:18px;width:var(--pw)}
  .spend.used{visibility:visible;transform:none!important;transition:none;opacity:.35}
  .hcard .reset{position:relative;grid-column:1/-1;justify-self:center;transform:none;left:auto;bottom:auto;margin-top:4px}
  .proofrow{gap:10px 22px;font-size:16px}
  .chipcard{min-width:0;padding:10px 14px}.chipcard b{font-size:20px}
  .statement{font-size:clamp(30px,8.4vw,44px)}
  .dc-phone{display:none}
  .darkcard{min-height:0}
}

/* Thin, realistic iPhone bezels everywhere on the home page */
.hcard .phone{padding:1.9%;background:#111;box-shadow:0 0 0 1px #3a3a3a inset,0 0 0 1px rgba(0,0,0,.25),0 40px 80px -30px rgba(10,40,10,.45)}
.hcard .screen{border-radius:13.6%/6.3%}
.bigcard .device{padding:7px;background:#111;border-radius:44px;box-shadow:0 0 0 1px #3a3a3a inset,0 40px 80px -30px rgba(10,40,10,.45)}
.bigcard .device img{border-radius:38px}
.sky-pic img,.fart img{outline:0;border:3px solid #111;box-shadow:0 0 0 1px #3a3a3a,0 30px 60px -24px rgba(10,40,10,.4)}
.dc-phone img{outline:0;border:3px solid #2a2a2a}
/* No grey: body copy in a deep green-black, accents in mint */
.blk,.top{--ink-2:#2F3B2A;--ink-3:#3F5A36}
.faq details{border-color:#E3F1DA!important}

/* Crop the phone at the card edge (tab bar hidden) so it never feels too tall */
.hcard{padding-bottom:0}
@media (max-width:980px){.hcard .stage .phone{margin-bottom:calc(var(--pw) * -.3)}}
/* Real iPhone body proportions (71.5 × 149.6 mm), not the screen's 9:19.5, so the phone doesn't look stretched */
.hcard .phone{aspect-ratio:71.5/149.6}

/* Tab bar icons */
.hcard .tabbar svg{width:5.2cqw;height:5.2cqw;display:block}
.hcard .tabbar span{gap:1.2cqw}
/* Reset sits above the phone, clear of it */
.hcard .reset{top:-56px;bottom:auto;background:rgba(255,255,255,.75);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 20px -10px rgba(20,60,20,.4)}
@media (max-width:760px){.hcard .reset{top:auto;margin:0 0 6px;order:-1}}
/* Slightly tighter letter spacing everywhere */
body{letter-spacing:-.01em}
h1,h2,h3,.h2,.h3{letter-spacing:-.018em}
.hcard h1{letter-spacing:-.022em}
.statement{letter-spacing:-.018em}
.linklist b,.faq summary,.fcopy h3,.st-head h3{letter-spacing:-.018em}

/* How it works: three cards in one row */
.steps3{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.s3{display:flex;flex-direction:column;border-radius:28px;background:var(--sky);overflow:hidden;min-height:560px;transition-delay:calc(var(--i)*90ms)}
.s3-copy{padding:28px 28px 0}
.s3 .n{display:inline-grid;place-items:center;width:44px;height:32px;border-radius:9px;background:#fff;color:var(--deep);font:700 14px/1 var(--num)}
.s3 h3{font-size:clamp(26px,2.3vw,32px);margin-top:20px}
.s3 p{margin-top:10px;color:#2F3B2A;font-size:16px;max-width:30ch}
.s3-art{margin-top:auto;padding-top:28px;display:flex;justify-content:center;height:330px;overflow:hidden}
.s3-art .device{width:230px;aspect-ratio:auto;height:auto;margin:0;padding:6px;background:#111;border-radius:38px;align-self:flex-start;
  box-shadow:0 0 0 1px #3a3a3a inset,0 30px 60px -24px rgba(10,40,10,.45);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.s3-art .device img{height:auto;border-radius:32px}
.s3:hover .device{transform:translateY(-8px)}

/* Perks strip under the hero */
.perks{list-style:none;margin:0 auto;padding:30px 0 0;width:min(1240px,calc(100% - 2*var(--pad)));display:grid;grid-template-columns:repeat(6,1fr)}
.perks li{display:flex;align-items:center;gap:12px;padding:6px 18px;border-left:1px solid #E3F1DA}
.perks li:first-child{border-left:0}
.perks svg{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:#EFF8E8;color:var(--deep)}
.perks b{display:block;font:400 17px/1.15 var(--display);letter-spacing:-.01em}
.perks small{display:block;margin-top:3px;font:500 13px/1.2 var(--body);color:#5b6a54}
@media (max-width:1180px){.perks{grid-template-columns:repeat(3,1fr);row-gap:14px}.perks li:nth-child(4){border-left:0}}
@media (max-width:640px){.perks{grid-template-columns:repeat(2,1fr)}.perks li{border-left:0;padding:6px 4px}}

/* Widgets, drawn as the real thing (no phone) */
.wpic{background:var(--sky);display:grid;place-items:center;padding:8%}
.wpic .wg{position:absolute;border-radius:26px;color:var(--ink);
  background:radial-gradient(120% 90% at 20% 0%,#fff 0%,#F3FCEA 40%,#E6F7D6 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -28px rgba(10,50,10,.45),0 2px 6px rgba(10,50,10,.06)}
.wg small{display:block;font:500 13px/1.1 var(--body);color:#4a5a43}
.wamt{display:flex;align-items:baseline;gap:6px;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.05em;margin-top:auto}
.wamt em{font:600 14px/1 var(--body);font-style:normal;letter-spacing:0;color:#4a5a43}
.wg-s{left:9%;top:10%;width:44%;aspect-ratio:1;padding:20px;display:flex;flex-direction:column;transform:rotate(-4deg)}
.wpill{align-self:flex-start;margin-top:14px;padding:7px 11px;border-radius:999px;background:var(--ink);color:#fff;font:600 12px/1 var(--body)}
.wg-m{right:7%;bottom:10%;width:66%;aspect-ratio:2.1/1;padding:18px;display:grid;grid-template-columns:1fr auto;gap:12px;transform:rotate(2deg)}
.wg-m>div:first-child{display:flex;flex-direction:column}
.wg-m .wamt{font-size:clamp(30px,2.8vw,40px)}
.wfoot{margin-top:10px}
.wside{display:flex;flex-direction:column;gap:8px}
.wside div{background:#000;color:#fff;border-radius:14px;padding:10px 12px;min-width:118px;flex:1;display:flex;flex-direction:column;justify-content:center}
.wside small{color:rgba(255,255,255,.75);font-size:12px}
.wside b{font-size:16px;margin-top:6px;letter-spacing:-.03em}
.wg-ring{position:absolute;right:12%;top:13%;width:86px;height:86px;border-radius:50%;background:rgba(10,30,10,.82);display:grid;place-items:center;
  box-shadow:0 20px 40px -20px rgba(10,50,10,.6);transform:rotate(6deg)}
.wg-ring svg{position:absolute;inset:10px;width:66px;height:66px}
.wg-ring b{color:#fff;font-size:20px;letter-spacing:-.04em}
.wpic:hover .wg-s{transform:rotate(-6deg) translateY(-4px)}.wpic .wg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (max-width:560px){.wg-s{padding:14px;border-radius:20px}.wg-m{padding:12px;border-radius:20px}.wside div{min-width:92px;padding:8px}.wside b{font-size:13px}.wg-ring{width:64px;height:64px}.wg-ring svg{inset:7px;width:50px;height:50px}.wg-ring b{font-size:15px}}
/* Small section labels: a quiet pill, sentence case, no dot */
.dot{gap:0;padding:8px 14px;border-radius:999px;background:#EFF8E8;color:var(--deep);font:600 14px/1 var(--body);letter-spacing:-.005em;text-transform:none}
.dot::before{content:none}
.greencard .dot{background:rgba(255,255,255,.7)}
.small.center{text-transform:none;letter-spacing:-.005em;font-size:15px;font-weight:600}
.perks{padding-top:clamp(40px,4vw,64px)}
/* Section labels: short, black pill, white text */
.dot,.greencard .dot{background:var(--ink);color:#fff;padding:7px 12px;font:500 13px/1 var(--body);letter-spacing:-.02em}
.blk{padding:clamp(48px,5.5vw,84px) 0}.blk.tight{padding-top:0}

/* Less green: the hero keeps the brand sky; everything else goes soft neutral, green only as a small accent */
:root{--soft:#F4F4F1;--hair:#EAEAE6}
.s3,.wpic,.fart,.fart.plain{background:var(--soft)}
.s3 .n{background:var(--ink);color:#fff}
.s3 p{color:var(--ink-2)}
.greencard{background:var(--soft)}
.greencard .lead{color:var(--ink-2)}
.greencard .dot{background:var(--ink)}
.afford{box-shadow:0 24px 50px -30px rgba(0,0,0,.25)}
.perks svg{background:var(--soft);color:var(--ink)}
.perks li{border-color:var(--hair)}
.perks small{color:var(--ink-2)}
.statlist div,.linklist,.linklist a,.faq details{border-color:var(--hair)!important}
.fgo,.faq summary::after,.afford .ask .inp,.afford .chip{background:var(--soft)}
.afford .chip{border-color:var(--hair)}
.feat{border-color:var(--hair)}
.p-ren b{color:var(--ink)}.p-ren span{color:var(--ink-2)}
.p-fac svg{color:var(--ink)}
.blk,.top{--ink-2:#55585A;--ink-3:#6E7173}

/* ---------- The demo phone: Activity / Today / Stats / Settings ---------- */
.hcard .screen{display:flex;flex-direction:column;background:#fff}
.hcard .screen[data-view=today]{background:#EAF6E0 url(/assets/img/sky-phone.webp) center/cover}
.hcard .screen.over[data-view=today]{background-image:url(/assets/img/sky-red.webp)}
.views{position:relative;flex:1;min-height:0}
.v{position:absolute;inset:0;display:flex;flex-direction:column;padding:4cqw 4.2cqw 0;opacity:0;visibility:hidden;transform:translateY(2cqw);transition:opacity .25s,transform .25s,visibility 0s .25s}
.screen[data-view=activity] .v-activity,.screen[data-view=today] .v-today,.screen[data-view=stats] .v-stats,.screen[data-view=settings] .v-settings{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.v-title{margin:0;font:400 6.2cqw/1 var(--display);letter-spacing:-.02em}
.v-sub{margin-top:1.6cqw;font:500 3.2cqw/1.2 var(--body);color:#6b6e70;letter-spacing:-.02em}
.seg{display:flex;margin-top:4cqw;padding:1cqw;border-radius:99px;background:#F2F2F0;font:500 2.9cqw/1 var(--body)}
.seg span{flex:1;text-align:center;padding:2.4cqw 0;border-radius:99px;color:#444}
.seg span.on{background:#000;color:#fff}
.month{display:flex;justify-content:space-between;align-items:center;margin-top:3.6cqw;font:400 3.8cqw/1 var(--display)}
.month i{font:400 5cqw/1 var(--body);font-style:normal;padding:0 1cqw}
.sum3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;margin-top:3.4cqw}
.sum3 div{border:1px solid #E6E6E3;border-radius:2.6cqw;padding:2.4cqw 2.4cqw}
.sum3 small{display:block;font:500 2.7cqw/1 var(--body);color:#6b6e70}
.sum3 b{display:block;margin-top:1.6cqw;font:700 3.3cqw/1 var(--num);letter-spacing:-.05em;white-space:nowrap}
.sum3 b.g{color:#1DA851}
.days{margin-top:2.6cqw;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:2cqw;padding-bottom:2cqw}
.day{border:1px solid #E6E6E3;border-radius:3cqw;padding:2.8cqw 3.4cqw}
.dh{display:flex;align-items:center;gap:1.6cqw}
.dh b{font:400 4cqw/1 var(--display);letter-spacing:-.03em}.dh sup{font-size:2.4cqw;vertical-align:0}
.dh span{font:500 3cqw/1 var(--body);color:#6b6e70}
.dh em{margin-left:auto;font:700 3cqw/1 var(--num);font-style:normal;letter-spacing:-.04em}
.dh em.none{font:500 3cqw/1 var(--body);color:#6b6e70;letter-spacing:-.02em}
.dh i{width:3.8cqw;height:3.8cqw;border-radius:50%;background:#8a8d8f;color:#fff;display:grid;place-items:center;font:600 3cqw/1 var(--body);font-style:normal}
.trows .trow:first-child{border-top:1px solid #EFEFEC;margin-top:2.4cqw}
.trow{display:flex;justify-content:space-between;align-items:center;padding:2cqw 0}
.trow b{display:block;font:400 3.4cqw/1.1 var(--display);letter-spacing:-.02em}
.trow small{display:block;margin-top:.8cqw;font:500 2.6cqw/1.1 var(--body);color:#6b6e70;letter-spacing:-.02em}
.trow em{font:700 3.4cqw/1 var(--num);font-style:normal;letter-spacing:-.05em}
.trow.new{animation:rowin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes rowin{from{opacity:0;transform:translateY(-2cqw) scale(.97);background:#EAF8E0}}
.v-today{padding:0}
.v-today .mid{margin-top:auto}
.donut{position:relative;width:52cqw;aspect-ratio:1;margin:6cqw auto 0;border-radius:50%;transition:background .4s;
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 58.5%);mask:radial-gradient(circle,transparent 58%,#000 58.5%)}
.donut-wrap{position:relative}
.donut + .dlabel{}
.v-stats .dl{position:absolute;left:50%;transform:translate(-50%,-50%);text-align:center}
.cats{margin-top:5cqw;display:flex;flex-direction:column;gap:1.6cqw}
.cat{display:flex;align-items:center;gap:2cqw;border:1px solid #E6E6E3;border-radius:2.6cqw;padding:2.4cqw 3cqw;font:400 3.3cqw/1 var(--display)}
.cat i{width:2.6cqw;height:2.6cqw;border-radius:50%}
.cat small{font:600 2.5cqw/1 var(--body);color:#6b6e70}
.cat b{margin-left:auto;font:700 3.3cqw/1 var(--num);letter-spacing:-.04em}
.cat.bump{animation:rowin .5s}
.set{margin-top:4cqw;border:1px solid #E6E6E3;border-radius:3cqw;padding:0 3.4cqw}
.set div{display:flex;justify-content:space-between;align-items:center;padding:3cqw 0;font:500 3.2cqw/1 var(--body);letter-spacing:-.02em}
.set div+div{border-top:1px solid #EFEFEC}
.set b{font:600 3cqw/1 var(--body);color:#6b6e70}
.tog{width:8cqw;height:4.8cqw;border-radius:99px;background:#34C759;position:relative}
.tog::after{content:"";position:absolute;right:.5cqw;top:.5cqw;width:3.8cqw;height:3.8cqw;border-radius:50%;background:#fff}
.hcard .tabbar{margin-top:0}
.hcard .tabbar button{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;font:500 2.8cqw/1 var(--body);color:#888}
.hcard .tabbar button[aria-pressed=true]{color:#000;font-weight:700}
.hcard .tabbar button[aria-pressed=true] svg *{fill:currentColor}
.hcard .tabbar button[data-view=today][aria-pressed=false] svg circle{fill:none}

/* Spacing fixes */
.s-a{top:20%}.s-b{top:48%}.s-c{top:12%}.s-d{top:40%}
body{letter-spacing:-.02em}
.donut-wrap{position:relative}
.dl{position:absolute;left:50%;top:calc(6cqw + 26cqw);transform:translate(-50%,-50%);text-align:center}
.dl small{display:block;font:500 3cqw/1 var(--body);color:#6b6e70}
.dl b{display:block;margin-top:1.6cqw;font:700 4.6cqw/1 var(--num);letter-spacing:-.05em}
.statement{max-width:none}
/* Afford result: compact so the card barely grows */
.afford .result{padding:16px 18px;border-radius:18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px}
.afford .result .pill{grid-column:1/-1;justify-self:start;padding:5px 10px;font-size:12px}
.afford .result h3{grid-column:1/-1;margin-top:6px!important;font-size:18px}
.afford .result .big{grid-column:1;font-size:clamp(26px,2.4vw,32px);margin:4px 0 0}
.afford .result>p{grid-column:1/-1;font-size:14px;line-height:1.4}
.afford .result .next{grid-column:2;grid-row:3;margin:0;padding:0;background:none}
.afford .result .next p{display:none}
.afford .result .next .get{padding:9px 14px 9px 12px;font-size:14px}
.blk{padding:clamp(64px,7.5vw,112px) 0}.blk.tight{padding-top:0}
.hcard .reset{top:auto;left:calc(100% + 22px);bottom:14%;transform:none}

/* ---- Demo phone v2: bigger phone, app-true type scale and spacing ---- */
.hcard .stage{--pw:clamp(270px,23vw,330px)}
.hcard .status{padding:5.6% 9% 0}
.v{padding:6.5cqw 5.2cqw 0}
.v-title{font-size:8cqw;letter-spacing:-.035em}
.v-sub{margin-top:1.8cqw;font-size:3.5cqw;color:#76797b;letter-spacing:-.035em}
.seg{margin-top:5cqw;padding:1.1cqw;font:500 3.3cqw/1 var(--display);letter-spacing:-.02em}
.seg span{padding:2.9cqw 0}
.month{margin-top:5cqw;font-size:4.6cqw;letter-spacing:-.03em;padding:0 1cqw}
.month i{font:300 6cqw/1 var(--body)}
.sum3{gap:1.6cqw;margin-top:4.6cqw}
.sum3 div{border-radius:3cqw;padding:2.8cqw 2.6cqw;border-color:#E9E9E6}
.sum3 small{font:400 3.1cqw/1 var(--display);color:#76797b;letter-spacing:-.02em}
.sum3 b{margin-top:2cqw;font:400 3.9cqw/1 var(--display);letter-spacing:-.04em}
.sum3 b.g{color:#1FAE52}
.days{margin-top:3.4cqw;gap:2.6cqw}
.day{border-radius:4cqw;padding:3.6cqw 4cqw;border-color:#E9E9E6}
.dh{gap:2cqw}
.dh b{font-size:5cqw;letter-spacing:-.04em}.dh sup{font-size:3cqw}
.dh span{font:400 3.6cqw/1 var(--display);color:#76797b}
.dh em{font:400 3.6cqw/1 var(--display);letter-spacing:-.03em}
.dh em.none{font:400 3.6cqw/1 var(--display);color:#76797b}
.dh i{width:4.4cqw;height:4.4cqw;background:#9b9ea0;font-size:3.6cqw}
.trows .trow:first-child{margin-top:3.4cqw;border-top-color:#EFEFEC}
.trow{padding:3cqw 0 1cqw}
.trow b{font-size:4.4cqw;letter-spacing:-.03em}
.trow small{margin-top:1.2cqw;font:400 3.2cqw/1.1 var(--body);color:#76797b;letter-spacing:-.02em}
.trow em{font:400 4.4cqw/1 var(--display);letter-spacing:-.04em}
/* Stats */
.donut{width:60cqw;margin-top:7cqw}
.dl{top:calc(7cqw + 30cqw)}
.dl small{font:400 3.6cqw/1 var(--display);color:#76797b}
.dl b{font:400 5.6cqw/1 var(--display);letter-spacing:-.04em}
.cats{margin-top:7cqw;gap:2cqw}
.cat{padding:3.6cqw 4cqw;border-radius:3.6cqw;font-size:4.2cqw;letter-spacing:-.03em;gap:2.6cqw;border-color:#E9E9E6}
.cat i{width:3.2cqw;height:3.2cqw}
.cat small{font:400 3cqw/1 var(--display);letter-spacing:-.02em}
.cat b{font:400 4.2cqw/1 var(--display);letter-spacing:-.04em}
/* Settings */
.set{margin-top:5cqw;border-radius:4cqw;padding:0 4cqw;border-color:#E9E9E6}
.set div{padding:4cqw 0;font:400 3.9cqw/1 var(--display);letter-spacing:-.03em}
.set b{font:400 3.5cqw/1 var(--display);color:#76797b;letter-spacing:-.02em}
.tog{width:10cqw;height:6cqw}.tog::after{width:5cqw;height:5cqw}
/* Tab bar like the app */
.hcard .tabbar{padding:3cqw 3cqw 7cqw;border-top:1px solid #EFEFEC}
.hcard .tabbar button{font:400 3cqw/1 var(--display);letter-spacing:-.02em;color:#8d9092;gap:1.6cqw}
.hcard .tabbar button[aria-pressed=true]{color:#000;font-weight:400}
.hcard .tabbar svg{width:6.2cqw;height:6.2cqw}
.hcard .tabbar .plus{width:13cqw;height:13cqw;font-size:8cqw}
.hcard .tabbar button[data-view=settings][aria-pressed=true] svg *{fill:none}.hcard .tabbar button[aria-pressed=true] svg{stroke-width:2.2}
.v{transition:none}
.hcard .phone,.hcard .stage .phone{margin-bottom:clamp(24px,3vw,44px)!important}
@media (max-width:760px){
  .hcard .stage .spend{top:auto!important;left:auto;right:auto}
  .hcard .stage{flex:none;padding-bottom:28px}
  .hcard .stage .phone{margin-bottom:8px!important}
}
.spend small{white-space:nowrap}

/* Hero: a real screenshot in a thin bezel, plus two quiet callouts */
.hcard .stage.shot{--pw:clamp(270px,23vw,330px);display:block;flex:none;margin-top:clamp(-170px,-9vw,-50px)}
.hero-shot{width:var(--pw)!important;aspect-ratio:auto!important;height:auto;margin:0 auto clamp(24px,3vw,44px)!important;padding:7px!important;background:#111;border-radius:48px!important;
  box-shadow:0 0 0 1px #3a3a3a inset,0 50px 90px -40px rgba(10,40,10,.55)!important}
.hero-shot img{height:auto!important;border-radius:41px!important}
.callout{position:absolute;z-index:2;padding:14px 18px;border-radius:16px;background:var(--glass);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 18px 40px -18px rgba(20,60,20,.35);white-space:nowrap}
.callout small{display:block;font:500 13px/1 var(--body);color:#2f3d29}
.callout b{display:block;margin-top:10px;font-size:26px;letter-spacing:-.04em}
.c-a{right:calc(100% + 36px);top:34%}
.c-b{left:calc(100% + 36px);top:24%}
@media (max-width:760px){.hcard .stage.shot{--pw:min(66vw,260px);margin-top:32px}.callout{display:none}}
/* One consistent gap between every section */
.blk,.blk.tight{padding:0;margin-top:clamp(88px,9vw,136px)}
main>section:last-of-type{margin-bottom:clamp(88px,9vw,136px)}
/* Afford result: simple stack, no download button inside, plus Clear */
.afford .result{display:block;padding:18px 20px}
.afford .result .next{display:none}
.afford .result h3{margin-top:10px!important}
.afford .result .big{margin:8px 0 6px}
.afford .clear{display:block;margin:12px auto 0;border:0;background:none;padding:8px 14px;border-radius:999px;font:500 14px/1 var(--display);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.afford .clear:hover{color:var(--ink)}
.afford .clear[hidden]{display:none}

/* Widgets carousel: one real widget at a time, its states, arrows */
.wcar{background:var(--soft);display:flex;flex-direction:column;align-items:center;padding:clamp(20px,2.4vw,30px);aspect-ratio:auto;min-height:clamp(440px,38vw,540px)}
.wc-head{align-self:stretch;text-align:left}
.wc-head b{display:block;font:400 22px/1.1 var(--display);letter-spacing:-.02em}
.wc-head span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.wc-stage{flex:1;display:grid;place-items:center;width:100%;padding:18px 0}
.wc-stage img{display:block;filter:drop-shadow(0 24px 30px rgba(0,0,0,.18));transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wc-stage img.sm{width:min(220px,62%)}
.wc-stage img.md{width:min(440px,100%)}
.wc-stage img.lk{width:min(440px,100%);border-radius:22px}
.wc-stage img.out{opacity:0;transform:scale(.96)}
.wc-states{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:34px}
.wc-states button{border:1px solid var(--hair);background:#fff;border-radius:999px;padding:8px 13px;font:500 13px/1 var(--display);cursor:pointer;color:var(--ink-2)}
.wc-states button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.wc-nav{display:flex;align-items:center;gap:16px;margin-top:14px}
.wc-nav button{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.wc-nav button:hover{transform:scale(1.06)}
.wc-nav svg{width:18px;height:18px}
.wc-nav span{font:500 14px/1 var(--num);min-width:44px;text-align:center;color:var(--ink-2)}

/* Free tools as cards */
.toolcards{display:grid;gap:14px;margin-top:clamp(32px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:24px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(0,0,0,.25)}
.tcard:hover .fgo{background:var(--ink);color:#fff}
.tart{height:170px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.tart b{font-size:56px;font-weight:500;letter-spacing:-.05em}
.tart span{font:500 14px/1 var(--body);color:var(--ink-2)}
.bar3{display:flex;gap:4px;width:62%;height:16px}
.bar3 i{border-radius:5px;background:var(--ink)}.bar3 i:nth-child(2){background:var(--mint)}.bar3 i:nth-child(3){background:#C9CCC6}
/* "Log it in two taps" clip (rendered with Remotion from real app screens) */
.howvid{margin-top:clamp(32px,4vw,52px);border-radius:clamp(22px,2.4vw,32px);overflow:hidden;background:#C4EBAC;aspect-ratio:16/9}
.howvid video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.howvid video{display:none}.howvid{background:#C4EBAC url(/assets/img/log-expense-poster.webp) center/cover}}