/* Instrument Sans, not Body. Same job, but a narrower set width, a
   double-storey g and open terminals — it stops the page reading as the
   default fintech SaaS face and gives the numerals somewhere to sit. */
@font-face{font-family:Body;src:url(fonts/InstrumentSans.woff2)format('woff2');font-weight:400 700;font-display:swap}

:root{
  --cream:#F2EAE0; --cream2:#F6EFE6; --cream3:#F0E9DF; --paper:#FBF9F5;
  --blue:#073C93; --blue2:#03388A; --btn:#1341C9; --ribbon:#2C55D4;
  --dark:#171717; --dark2:#1A1A1A; --lime:#D6D34F; --lime2:#C3D24A;
  --ink:#141414; --muted:#6C6862; --faint:#8A857E; --line:rgba(0,0,0,.09);
  --maxw:1560px; --gut:clamp(24px,4.4vw,72px);
  --sec:clamp(84px,9vw,152px);
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.7,0,.2,1);
  --nav:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:96px}
body{position:relative;background:var(--cream);color:var(--ink);
  font-family:Body,system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{text-decoration:none;color:inherit}
section{position:relative;overflow:hidden}
.wrap{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:var(--gut);padding-right:var(--gut);z-index:5}
.disp{font-weight:900;letter-spacing:-.028em;line-height:.9;text-transform:uppercase}
h1.disp{font-size:clamp(44px,6.7vw,112px);letter-spacing:-.034em;line-height:.88}
h2.disp{font-size:clamp(28px,3.6vw,54px)}
/* the two longest headings get their own scale so each keeps its own line breaks */
.story h2.disp{font-size:clamp(26px,3.0vw,44px)}
.save h2.disp{font-size:clamp(26px,3.1vw,46px)}
.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--btn);
  text-transform:uppercase;margin-bottom:20px}
.lede{font-size:clamp(16px,1.3vw,20px);color:#4A463F;max-width:46ch;margin-top:26px}

/* ---------------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(38px);
  transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.40s}
.rvs{opacity:0;transform:translateY(52px) scale(.97);
  transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.rvs.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.rvs{opacity:1!important;transform:none!important;transition:none}
  html{scroll-behavior:auto}
  .float{animation:none!important}
}

/* ------------------------------------------------------------------ nav */
#prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none}
#prog i{display:block;height:100%;width:0;background:var(--btn)}
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav);
  display:flex;align-items:center;transition:height .45s var(--ease),
  background .45s,box-shadow .45s,color .45s}
.nav .in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center}
.nav.stuck{height:62px;background:rgba(246,239,230,.88);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(0,0,0,.07),0 8px 30px rgba(60,45,30,.07)}
.nav.dark{color:#fff}
.nav.dark.stuck{background:rgba(16,16,16,.84);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.nav .logo{font-weight:900;font-size:clamp(20px,1.7vw,27px);letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px}
.nav .logo em{width:8px;height:8px;border-radius:50%;background:var(--btn);
  font-style:normal;transition:transform .5s var(--ease)}
.nav .logo:hover em{transform:scale(1.9)}
.nav ul{display:flex;gap:clamp(20px,2.4vw,46px);list-style:none;margin:0 auto}
.nav ul a{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  position:relative;padding:8px 0;opacity:.72;transition:opacity .3s}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--btn);transition:right .45s var(--ease)}
.nav.dark ul a::after{background:var(--lime)}
.nav ul a:hover{opacity:1}
.nav ul a:hover::after,.nav ul a.on::after{right:0}
.nav ul a.on{opacity:1}
.nav .right{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav .signin{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.pill{background:var(--btn);color:#fff;border-radius:100px;font-size:12px;font-weight:700;
  letter-spacing:.1em;padding:14px 28px;text-transform:uppercase;position:relative;
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.pill::before{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45),transparent 70%)}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(19,65,201,.36)}
.pill:hover::before{transform:translateX(120%);transition:transform .75s}
.burger{display:none;width:34px;height:34px;position:relative}
.burger i{position:absolute;left:5px;right:5px;height:1.8px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:11px}.burger i:nth-child(2){top:17px}.burger i:nth-child(3){top:23px}
.nav.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- ribbon */
/* above section backgrounds and photography, below all copy and cards */
#ribbons{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;
  z-index:2;overflow:hidden}
.rib{position:absolute;pointer-events:none;will-change:transform}
.float{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ----------------------------------------------------------------- hero */
.hero{min-height:min(100vh,1000px);display:flex;align-items:center;
  padding-top:calc(var(--nav) + clamp(30px,5vw,74px));padding-bottom:clamp(40px,6vw,90px)}
.hero .photo{position:absolute;right:0;top:0;width:clamp(420px,46vw,760px);height:100%;z-index:1}
.hero .photo img{width:100%;height:100%;object-fit:cover;object-position:46% 26%}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  var(--cream) 0%,rgba(242,234,224,.86) 14%,rgba(242,234,224,0) 44%)}
.hero .lede{max-width:34ch}
.emboss{position:absolute;font-weight:900;text-transform:uppercase;color:var(--cream);
  letter-spacing:-.04em;z-index:1;user-select:none;line-height:1;
  text-shadow:0 3px 2px rgba(255,255,255,1),0 -3px 3px rgba(154,133,110,.46),
              0 7px 9px rgba(255,255,255,.7),0 -1px 1px rgba(154,133,110,.3)}
.stage{position:relative;margin-top:clamp(28px,4vw,62px);
  height:clamp(320px,35vw,540px);perspective:1600px}

/* --------------------------------------------------------- device chrome */
.dash{position:absolute;background:var(--paper);border-radius:14px;overflow:hidden;
  display:flex;box-shadow:0 40px 90px rgba(60,45,30,.22),0 6px 20px rgba(60,45,30,.10);
  transform-style:preserve-3d;will-change:transform}
.dash .side{width:clamp(84px,7.4vw,120px);flex:none;background:#F4F1EC;
  padding:16px 11px;border-right:1px solid var(--line)}
.dash .side .lg{font-weight:900;font-size:11px;margin:2px 0 16px 6px}
.dash .side i{display:flex;align-items:center;gap:8px;font-style:normal;font-size:9.5px;
  color:var(--muted);padding:7px;border-radius:6px;transition:background .3s,color .3s}
.dash .side i b{width:10px;height:10px;border-radius:50%;border:1.3px solid #B9B4AC;flex:none}
.dash .side i.on{background:#E7EDFB;color:var(--btn);font-weight:600}
.dash .side i.on b{border-color:var(--btn);background:var(--btn)}
.dash .main{flex:1;padding:16px 19px;min-width:0}
.stat{font-size:9.5px;letter-spacing:.09em;color:var(--faint);text-transform:uppercase}
.statv{font-size:clamp(15px,1.5vw,21px);font-weight:700;letter-spacing:-.025em;margin-top:4px}
/* The device shell. Four phones on the page are drawn at four different widths,
   so every radius here is a percentage of the width — one fixed 38px corner
   reads right on the 240px hero phone and wrong on the 166px one. The pair of
   percentages keeps the corner circular against the 9:19 box. */
.phone{position:absolute;padding:5px;
  background:linear-gradient(148deg,#3A3A3E 0%,#0C0C0D 9%,#08080A 52%,#0C0C0D 92%,#43434A 100%);
  border-radius:15.5%/7.3%;
  box-shadow:0 34px 70px rgba(60,45,30,.3),0 0 0 1px rgba(255,255,255,.10) inset;
  will-change:transform}
/* the two hardware buttons. They live *inside* the frame's edge rather than
   sticking out of it — proud tabs read as black rectangles glued to the side at
   the sizes these phones are drawn */
.phone::before,.phone::after{content:"";position:absolute;width:1px;
  border-radius:1px;pointer-events:none;opacity:.55}
.phone::before{right:0;top:24%;height:9%;
  background:linear-gradient(180deg,#5A5A62,#2A2A30)}
.phone::after{left:0;top:17%;height:13%;
  background:linear-gradient(180deg,#5A5A62,#2A2A30)}
.phone .scr{background:var(--paper);border-radius:12.4%/5.8%;overflow:hidden;height:100%;
  position:relative}
/* a true notch: it hangs off the top edge of the screen rather than floating
   below it, which is the single thing that makes the mock read as a phone */
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:42%;
  aspect-ratio:5.1/1;background:#08080A;border-radius:0 0 9px 9px;z-index:4}
/* earpiece slit and camera, sized off the notch so they scale with it */
.phone .notch::before{content:"";position:absolute;left:26%;top:38%;width:34%;height:15%;
  min-height:2px;border-radius:99px;background:#1E1E22}
.phone .notch::after{content:"";position:absolute;right:16%;top:32%;width:11%;
  aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#3C4A63 0%,#151A26 60%,#0B0D12 100%)}
/* the home indicator, added on the screen rather than in markup so every phone
   on the page gets one without touching four separate blocks */
/* percentages here are of the screen's *height*, which runs from 250px on the
   paid phone to 740px on the full-bleed mobile one — clamped so the indicator
   stays the same few pixels it is on a real device at either end */
.phone .scr::after{content:"";position:absolute;left:50%;bottom:clamp(5px,3.2%,9px);
  z-index:3;transform:translateX(-50%);width:min(34%,120px);height:clamp(3px,.9%,4.5px);
  border-radius:99px;background:rgba(14,14,16,.82);pointer-events:none}

/* --------------------------------------------------- app screen interior */
/* The screens are a fixed 9:19.2 box whatever content goes in them, so the
   content is laid out as a column with one section taking the slack. Anything
   top-anchored leaves a white void above the tab bar. */
.appcol{display:flex;flex-direction:column}
.apptop{padding:calc(6% + 14px) 14px 0;display:flex;align-items:center;flex:none}
.appsplit{display:flex;gap:8px;margin-top:12px}
.appsplit > div{flex:1;background:#F4F1EC;border-radius:7px;padding:8px 9px}
.appsplit s{text-decoration:none;display:block;font-size:6.6px;letter-spacing:.08em;
  color:var(--faint)}
.appsplit b{display:block;font-size:11.5px;font-weight:700;letter-spacing:-.02em;
  margin-top:3px}
.appfill{flex:1;min-height:0;background:#F4F1EC;padding:12px 16px 6px;overflow:hidden}
.approw{display:flex;align-items:center;gap:9px;margin-top:11px}
.approw .ic{width:18px;height:18px;border-radius:5px;background:#DCD3C6;flex:none;
  display:block}
.approw .ic.in{background:#D6DEF4}
.approw > span{font-size:9.5px;line-height:1.45;min-width:0}
.approw > span s{display:block;color:#969089;font-size:7.6px;text-decoration:none}
.approw b{margin-left:auto;font-size:9.5px;font-weight:600;white-space:nowrap}
.approw b.up{color:#2E6B18}
/* the tab bar carries the home indicator's safe area itself, so the labels are
   never sat on by the pill */
.appnav{flex:none;background:var(--paper);border-top:1px solid #EDE7DC;display:flex;
  justify-content:space-around;font-size:7px;color:#9A958D;text-align:center;
  padding:8px 0 calc(clamp(5px,3.2%,9px) + 9px)}
.appnav i{display:block;font-style:normal;font-size:9px;margin-bottom:2px}
.appnav .on{color:var(--btn)}
/* chart strokes draw themselves as their screen scrolls into view */
.draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  transition:stroke-dashoffset 1.9s var(--ease)}
.in .draw,.draw.in{stroke-dashoffset:0}
.grow{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease)}
/* an SVG shape's transform-origin resolves against the whole viewBox unless the
   fill box is asked for, so without this the columns scale from the floor of the
   chart instead of from their own base and slide up through the labels */
svg .grow{transform-box:fill-box}
.in .grow,.grow.in{transform:scaleY(1)}
/* stagger the bar chart so the columns rise in sequence left to right */
.in .grow:nth-of-type(1){transition-delay:.04s}
.in .grow:nth-of-type(2){transition-delay:.14s}
.in .grow:nth-of-type(3){transition-delay:.24s}
.in .grow:nth-of-type(4){transition-delay:.34s}
.in .grow:nth-of-type(5){transition-delay:.44s}
.in .grow:nth-of-type(6){transition-delay:.54s}
/* the columns rise with a little overshoot; the baseline draws itself first so
   they have something to stand on */
.mchart .grow{transition:transform .78s cubic-bezier(.22,1.2,.36,1)}
.mchart .mbase{transform:scaleX(0);transform-origin:left;transform-box:fill-box;
  transition:transform .7s var(--ease)}
.in .mchart .mbase{transform:scaleX(1)}
.mchart .mo text{opacity:0;transition:opacity .5s ease .5s}
.in .mchart .mo text{opacity:1}
@media(prefers-reduced-motion:reduce){
  .in .grow{transition-delay:0s!important}
  .mchart .mbase,.mchart .mo text{transition:none}}

/* --------------------------------------------------------------- coming */
.coming{background:var(--cream2);padding:var(--sec) 0}
.coming .grid{display:grid;grid-template-columns:minmax(280px,26%) 1fr;
  gap:clamp(28px,4vw,72px);align-items:start}
/* the thumb is one element that slides, rather than a background switching on
   and off under each label — the movement is what makes it read as a control
   rather than three buttons repainting */
.seg{display:inline-flex;position:relative;background:#E8DFD2;border-radius:100px;
  padding:4px;margin-top:30px;isolation:isolate}
.seg::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;
  left:var(--thumb-x,4px);width:var(--thumb-w,0);border-radius:100px;
  background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:left .42s cubic-bezier(.36,1.02,.3,1),width .42s cubic-bezier(.36,1.02,.3,1)}
.seg b{position:relative;z-index:1;font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--muted);padding:11px 24px;border-radius:100px;cursor:pointer;
  transition:color .3s ease;user-select:none}
.seg b.on{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.seg::before{transition:none}}
.card{background:var(--paper);border-radius:14px;padding:clamp(16px,1.6vw,26px);
  box-shadow:0 28px 64px rgba(60,45,30,.15),0 4px 12px rgba(60,45,30,.06)}
.crow{display:flex;align-items:flex-start;border-bottom:1px solid var(--line);
  padding-bottom:18px;flex-wrap:wrap;gap:14px}
.crow .t{font-size:17px;font-weight:600;min-width:170px;flex:1}
.legend{display:flex;gap:16px;margin-top:12px;font-size:10.5px;color:#7C776F}
.legend s{text-decoration:none;display:flex;align-items:center;gap:6px}
.legend s u{text-decoration:none;width:9px;height:9px;background:var(--btn);display:block}
.legend s.d u{background:none;border-top:2px dotted var(--btn);height:0;width:11px}
.crow .c{flex:1;padding-left:clamp(12px,1.6vw,26px);border-left:1px solid var(--line);
  min-width:118px}
.chartwrap{display:grid;grid-template-columns:1fr minmax(190px,246px);
  gap:clamp(14px,1.6vw,24px);padding-top:18px}
.chart{position:relative;height:clamp(160px,15vw,230px)}
.chart .yl{position:absolute;left:0;top:0;bottom:22px;width:32px;display:flex;
  flex-direction:column;justify-content:space-between;font-size:9.5px;color:#A29C93}
.chart .xl{position:absolute;left:40px;right:8px;bottom:0;display:flex;
  justify-content:space-between;font-size:10.5px;color:#8C877E}
.upcoming{padding-left:clamp(12px,1.6vw,22px);border-left:1px solid var(--line)}
.h{font-size:9.5px;letter-spacing:.13em;color:var(--faint);margin-bottom:12px;
  text-transform:uppercase}
.uprow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.05);font-size:12px}
.uprow s{text-decoration:none;display:block;color:#969089;font-size:10px;margin-top:3px}
.bot3{display:grid;grid-template-columns:1fr 1fr minmax(220px,300px);
  gap:clamp(14px,1.8vw,28px);margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.b3row{display:flex;align-items:center;font-size:12px;padding:6px 0;gap:10px}
.b3row em{font-style:normal;flex:1}
.b3row i{width:8px;height:8px;border-radius:50%;flex:none}
.link{color:var(--btn);font-size:11.5px;margin-top:9px;display:inline-block;
  border-bottom:1px solid transparent;transition:border-color .3s}
.link:hover{border-color:var(--btn)}
.outlook{background:#F6F5EC;border-radius:10px;padding:16px 18px}

/* ----------------------------------------------------------------- paid */
.paid{background:var(--blue);color:#fff;padding:var(--sec) 0}
.paid .h,.paid .stat{color:rgba(255,255,255,.66)}
.paid .grid{display:grid;grid-template-columns:minmax(300px,31%) 1fr;
  gap:clamp(28px,4vw,64px);align-items:start}
.steps{display:flex;margin-top:38px;max-width:360px}
.steps > div{flex:1;position:relative}
.steps .dot{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;
  place-items:center;color:var(--blue);font-size:14px;position:relative;z-index:2;
  transform:scale(0);transition:transform .55s var(--ease)}
.in .steps .dot,.steps.in .dot{transform:scale(1)}
.steps > div:nth-child(2) .dot{transition-delay:.22s}
.steps > div:nth-child(3) .dot{transition-delay:.44s}
.steps .dot.now{background:var(--lime)}
.steps > div::before{content:"";position:absolute;left:15px;right:15px;top:14px;height:2px;
  background:rgba(255,255,255,.4);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease) .18s}
.in .steps > div::before,.steps.in > div::before{transform:scaleX(1)}
.steps > div:last-child::before{display:none}
.steps span{display:block;font-size:11px;letter-spacing:.13em;margin-top:16px;font-weight:600}
.paidphoto{margin-top:clamp(30px,4vw,58px);border-radius:10px;overflow:hidden;
  box-shadow:0 26px 56px rgba(0,10,50,.36)}
.paidphoto img{width:100%;height:clamp(180px,17vw,280px);object-fit:cover;
  transition:transform 1.4s var(--ease)}
.paidphoto:hover img{transform:scale(1.05)}
.paidstage{position:relative;min-height:clamp(460px,50vw,740px)}
.paidstage .phone{z-index:6}
/* light screens must not inherit the blue section's white text */
.paid .phone .scr{color:var(--ink)}
.paid .phone .scr .stat{color:var(--faint)}
.invoice{position:absolute;left:2%;top:0;width:clamp(240px,29vw,440px);z-index:4}
.invoice img{width:100%;filter:drop-shadow(0 26px 44px rgba(0,10,50,.44))}
.invtxt{position:absolute;inset:0;padding:9% 10%;color:#1A1A1A;z-index:2;
  font-size:clamp(7px,.8vw,11px)}
.invtxt .ttl{font-size:1.25em;font-weight:700;letter-spacing:.04em}
.invtxt .sm{font-size:.82em;color:#5C5C5C;margin-top:3px}
.invrow{display:flex;justify-content:space-between;padding:.85em 0;
  border-bottom:1px solid rgba(0,0,0,.12)}
.deposit{position:absolute;right:0;top:20%;width:clamp(190px,18.5vw,280px);background:var(--paper);
  color:var(--ink);border-radius:14px;padding:clamp(16px,1.6vw,26px);
  box-shadow:0 26px 54px rgba(0,10,50,.4);z-index:5}
.deposit .amt{font-size:clamp(26px,2.7vw,40px);font-weight:700;letter-spacing:-.03em;
  margin-top:18px}
.limebar{position:absolute;right:0;top:calc(20% + clamp(160px,16vw,236px));
  width:clamp(190px,18.5vw,280px);background:var(--lime);border-radius:12px;padding:15px 20px;
  font-size:12.5px;color:#2A2E10;z-index:5;display:flex;align-items:center;gap:12px}

/* ---------------------------------------------------------------- taxes */
.taxes{background:var(--cream3);padding:var(--sec) 0}
.taxes .grid{display:grid;grid-template-columns:minmax(260px,23%) 1fr minmax(230px,21%);
  gap:clamp(22px,3vw,54px);align-items:start}
.organizer{width:100%;border-radius:8px}
.pockets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,42px);
  margin-top:-13%;padding:0 4%;position:relative;z-index:4}
.pocket{background:#EFEAE0;border-radius:8px 8px 28px 28px;padding:18px 12px 24px;
  text-align:center;box-shadow:0 12px 26px rgba(60,45,30,.16);
  transition:transform .5s var(--ease)}
.pocket:hover{transform:translateY(-7px)}
.pocket b{display:block;font-size:clamp(11px,1.05vw,15px);font-weight:700;letter-spacing:.09em}
.pocket span{display:block;font-size:clamp(11px,1vw,14px);margin-top:10px;color:#3A3733}
.taxcard{background:var(--paper);border-radius:14px;padding:clamp(16px,1.7vw,26px);
  box-shadow:0 20px 44px rgba(60,45,30,.16)}
.taxcard .amt{font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.03em;
  margin-top:14px}
.taxbtn{background:#DCDC8E;color:#2E3110;border-radius:8px;width:100%;padding:14px;
  font-size:12.5px;font-weight:600;margin-top:20px;transition:background .3s,transform .4s}
.taxbtn:hover{background:#D2D27E;transform:translateY(-2px)}
/* ------------------------------------------------------- the scan screen */
.scan .viewfinder{--vf:#1B1A18;position:relative;flex:none;background:var(--vf);
  padding:14px 15px 26px;display:flex;justify-content:center;overflow:hidden}
/* thermal paper: warm white, monospaced figures, and a torn bottom edge painted
   in over it — the flat beige card it replaced read as a UI panel, not paper */
.receipt{position:relative;width:78%;background:#F7F4EC;padding:10px 11px 13px;
  color:#2B2823;box-shadow:0 6px 18px rgba(0,0,0,.5);
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:7px;
  background:
    linear-gradient(45deg,transparent 49%,var(--vf) 50%) 0 0/8px 7px repeat-x,
    linear-gradient(-45deg,transparent 49%,var(--vf) 50%) 4px 0/8px 7px repeat-x}
.receipt .rc-h{font-size:8.6px;font-weight:700;letter-spacing:.06em;text-align:center;
  margin-top:2px;white-space:nowrap}
.receipt .rc-sub{font-size:6.2px;color:#8B857A;text-align:center;margin-top:2px;
  letter-spacing:.04em;white-space:nowrap}
.receipt .rc-items{margin-top:7px;border-top:1px dashed #B8B0A2;padding-top:6px}
.receipt .rc-items div{display:flex;justify-content:space-between;gap:8px;font-size:6.6px;
  padding:2px 0;letter-spacing:.02em;white-space:nowrap}
.receipt .rc-items b{font-weight:500}
.receipt .rc-total{display:flex;justify-content:space-between;font-size:9px;font-weight:700;
  border-top:1px dashed #B8B0A2;margin-top:8px;padding-top:8px}
.receipt .rc-foot{font-size:5.8px;color:#8B857A;text-align:center;margin-top:6px;
  letter-spacing:.06em}
/* viewfinder framing */
.scan .corner{position:absolute;width:15px;height:15px;border:1.6px solid rgba(255,255,255,.62)}
.scan .corner.tl{left:9px;top:9px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.scan .corner.tr{right:9px;top:9px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.scan .corner.bl{left:9px;bottom:9px;border-right:0;border-top:0;border-radius:0 0 0 3px}
.scan .corner.br{right:9px;bottom:9px;border-left:0;border-top:0;border-radius:0 0 3px 0}
.scan .scanline{position:absolute;left:9px;right:9px;height:1.5px;
  background:linear-gradient(90deg,transparent,#A8C43A,transparent);
  box-shadow:0 0 10px rgba(168,196,58,.8);opacity:.9}
.in .scan .scanline{animation:scanpass 3.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scanpass{0%{top:9px}45%{top:calc(100% - 11px)}55%{top:calc(100% - 11px)}
  100%{top:9px}}
@media(prefers-reduced-motion:reduce){.in .scan .scanline{animation:none;top:38%}}
.scan .caught{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  background:rgba(20,19,17,.78);color:#D6E58A;border-radius:99px;padding:3px 9px;
  font-size:6.4px;letter-spacing:.06em;white-space:nowrap;backdrop-filter:blur(3px)}
.detrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:9.5px;padding:6px 0;border-bottom:1px solid #EDE7DC;color:var(--muted)}
.detrow b{color:var(--ink);font-weight:600}
.detrow b.up{color:#2E6B18}
.detrow b.chip{background:#E7EDFB;color:var(--btn);border-radius:5px;padding:2px 7px;
  font-size:8.5px}
.appbtn{background:var(--btn);color:#fff;border-radius:8px;width:100%;padding:10px;
  font-size:9.5px;font-weight:600;margin-top:13px}
.appbtn.ghost{background:none;border:1px solid #DED8CE;color:#3A3733;margin-top:8px}

/* ------------------------------------------------ the invoice-sent screen */
/* this is the narrowest phone on the page — the body is packed from the top
   rather than centred, so that if anything ever does overflow it runs off the
   bottom instead of colliding with the title bar at the same time */
.sent .sentbody{flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;padding:6px 15px 0;justify-content:flex-start}
.sent .tick{width:44px;height:44px;border-radius:50%;border:2px solid var(--btn);
  display:grid;place-items:center;color:var(--btn);font-size:21px;flex:none}
.sent .sh{font-size:12.5px;font-weight:600;margin-top:11px}
.sent .ss{font-size:8.6px;color:var(--faint);margin-top:3px}
.sent .chase{list-style:none;width:100%;margin-top:14px;padding-left:3px}
.sent .chase li{position:relative;display:flex;align-items:center;gap:8px;
  padding:0 0 10px 14px;font-size:8.4px;color:var(--muted);white-space:nowrap}
.sent .chase li:last-child{padding-bottom:0}
.sent .chase li i{position:absolute;left:0;top:2px;width:7px;height:7px;border-radius:50%;
  border:1.4px solid #CFC7B9;background:var(--paper)}
/* the rail is drawn by each item rather than as one element behind them, so it
   stops cleanly at the last dot whatever the list length */
.sent .chase li::before{content:"";position:absolute;left:3px;top:9px;bottom:0;
  width:1.2px;background:#E4DDD0}
.sent .chase li:last-child::before{display:none}
.sent .chase li.done{color:#3A3733}
.sent .chase li.done i{background:var(--btn);border-color:var(--btn)}
.sent .chase li.now i{border-color:var(--btn);box-shadow:0 0 0 2.5px rgba(19,65,201,.16)}
.sent .chase li s{margin-left:auto;text-decoration:none;color:#9A958D;font-size:7.6px}
.sent .sentfoot{flex:none;padding:0 16px calc(clamp(5px,3.2%,9px) + 12px)}

/* ----------------------------------------------------------------- made */
.made{color:#fff;min-height:clamp(420px,46vw,720px);display:flex;align-items:center;
  padding:var(--sec) 0}
.made .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  will-change:transform}
.made::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,
  rgba(18,12,7,.76) 0%,rgba(18,12,7,.32) 38%,rgba(18,12,7,0) 66%)}
.made blockquote{font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-size:clamp(20px,2.3vw,36px);line-height:1.32;margin-top:32px;max-width:12ch}
.serifM{position:absolute;right:2%;top:2%;font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(200px,32vw,470px);line-height:1;color:#231C15;z-index:3;user-select:none}

/* ----------------------------------------------------------------- save */
.save{background:var(--cream);padding:var(--sec) 0}
/* The ribbon used to run straight through this headline and needed a cream
   scrim over it to stay legible; it now passes below the button instead, so the
   scrim only washed the satin out. The clearance is the fix — see the .save
   ribbon's data-at in the markup. */
.save .grid > div:first-child{position:relative;z-index:1}
.save .grid{display:grid;grid-template-columns:minmax(310px,26%) 1fr minmax(175px,15%);
  gap:clamp(22px,3vw,54px);align-items:center}
.goalbtn{background:var(--btn);color:#fff;border-radius:100px;padding:16px 34px;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;margin-top:30px;
  text-transform:uppercase;transition:transform .4s var(--ease),box-shadow .4s}
.goalbtn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(19,65,201,.36)}
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,52px)}
/* three parts stacked in one square: the photo disc, the progress ring drawn
   just outside it, and the caption below both — outside anything that clips */
.goal{position:relative;margin:0;transition:transform .6s var(--ease)}
.goal:hover{transform:translateY(-9px)}
.goal .disc{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:#EDE6DB;margin:5.5%;box-shadow:0 20px 42px rgba(60,45,30,.2)}
/* the photo fills the disc; the old band cropped to 52% height read as a
   rectangle jammed into a circle, with two hard horizontal cuts */
.goal .disc img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.goal:hover .disc img{transform:scale(1.05)}
/* the number needs a ground of its own, but a hard cream half re-creates the
   band — so the cream is a gradient that fades out before it meets the photo */
.goal .disc::after{content:"";position:absolute;inset:auto 0 0 0;height:54%;
  background:linear-gradient(to top,var(--cream) 0%,var(--cream) 26%,
    rgba(242,234,224,.82) 52%,rgba(242,234,224,0) 100%)}
.goal .amt{position:absolute;z-index:2;bottom:16%;left:6%;right:6%;text-align:center;
  font-size:clamp(16px,1.8vw,27px);font-weight:700;letter-spacing:-.025em}
.goal .of{position:absolute;z-index:2;bottom:9%;left:6%;right:6%;text-align:center;
  font-size:clamp(8px,.72vw,11px);color:#7C776F}
.goal .ring{position:absolute;inset:0;z-index:3;transform:rotate(-90deg);
  pointer-events:none;overflow:visible}
.goal .ring .arc{stroke-dasharray:var(--len,292);stroke-dashoffset:var(--len,292);
  transition:stroke-dashoffset 1.7s var(--ease)}
.in .goal .ring .arc,.goal.in .ring .arc{stroke-dashoffset:var(--off,120)}
.goal .lb{margin-top:clamp(10px,1vw,16px);text-align:center;
  font-size:clamp(9px,.85vw,12px);font-weight:700;letter-spacing:.12em}
.goal .lb s{text-decoration:none;color:#8C877E;font-weight:600;margin-left:.5em}

/* ---------------------------------------------------------------- story */
.story{background:var(--dark2);color:#fff;padding:var(--sec) 0}
.story .grid{display:grid;grid-template-columns:minmax(300px,33%) 1fr;
  gap:clamp(24px,3vw,56px);align-items:start}
.tabs{display:flex;gap:clamp(16px,2vw,34px);margin-top:30px;font-size:12.5px;
  letter-spacing:.1em;color:#9A968F}
.tabs b{padding-bottom:11px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;
  transition:color .3s,border-color .3s}
.tabs b.on{color:#fff;border-bottom-color:var(--lime)}
.dcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.dcard{background:#212121;border:1px solid #2E2E2E;border-radius:12px;
  padding:clamp(13px,1.3vw,20px);display:flex;flex-direction:column;
  min-height:clamp(260px,26vw,370px);transition:border-color .4s,transform .5s var(--ease)}
.dcard:hover{border-color:#3E3E3E;transform:translateY(-6px)}
.dcard .h{color:#B6B2AB;line-height:1.55}
.dcard .foot{margin-top:auto;padding-top:14px;font-size:11px;color:#8C887F;cursor:pointer}
.dcard .foot:hover{color:#fff}

/* ----------------------------------------------------------------- calm */
.calm{background:var(--blue2);color:#fff;padding:clamp(56px,6.4vw,110px) 0}
.calm .grid{display:grid;grid-template-columns:minmax(180px,17%) minmax(230px,26%) auto 1fr;
  gap:clamp(20px,2.6vw,48px);align-items:center}
.secure{background:var(--paper);color:var(--ink);border-radius:12px;
  padding:clamp(15px,1.5vw,24px);box-shadow:0 20px 42px rgba(0,8,40,.34)}
.secure .r{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;gap:12px}
.secure .r.b{border-top:1px solid var(--line);margin-top:8px;padding-top:13px}
.fp{width:clamp(88px,9vw,140px);aspect-ratio:1;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);border-radius:20px;display:grid;place-items:center}
.fp svg path{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset 1.6s var(--ease)}
.in .fp svg path,.fp.in svg path{stroke-dashoffset:0}
.trust div{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-size:13px;
  font-weight:600;letter-spacing:.09em}
.trust div:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- quote */
.quote{background:var(--cream);min-height:clamp(230px,25vw,380px);display:flex;
  align-items:center}
.quote .ph{position:absolute;left:0;top:0;width:clamp(280px,36vw,580px);height:100%;z-index:1}
.quote .ph img{width:100%;height:100%;object-fit:cover}
.quote .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(242,234,224,0) 58%,var(--cream) 98%)}
.quote blockquote{margin-left:auto;width:min(56%,760px);font-family:Georgia,serif;
  font-style:italic;font-size:clamp(21px,2.6vw,42px);line-height:1.32;z-index:4;
  position:relative}

/* ----------------------------------------------------------------- plan */
.plan{background:var(--cream);padding:var(--sec) 0}
.plan .photo{position:absolute;right:0;top:0;width:clamp(360px,52vw,920px);height:100%;z-index:1}
.plan .photo img{width:100%;height:100%;object-fit:cover}
.plan .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(242,234,224,0) 38%)}
.plan .grid{display:grid;grid-template-columns:minmax(280px,29%) minmax(260px,330px) 1fr;
  gap:clamp(24px,3.4vw,64px);align-items:center}
.pricing{background:var(--paper);border-radius:14px;padding:clamp(18px,1.9vw,30px);
  box-shadow:0 26px 56px rgba(60,45,30,.2)}
.pricing .lg{font-weight:900;font-size:clamp(16px,1.4vw,22px)}
.pricing .price{font-size:clamp(26px,2.7vw,40px);font-weight:700;letter-spacing:-.03em;
  margin-top:16px}
.pricing .price i{font-style:normal;font-size:.36em;font-weight:500;color:var(--muted)}
.pricing ul{list-style:none;margin-top:18px}
.pricing li{display:flex;gap:9px;align-items:center;font-size:12.5px;padding:5px 0;
  color:#3A3733}
.pricing li s{text-decoration:none;color:var(--btn)}
.pricing .go{background:var(--btn);color:#fff;border-radius:8px;width:100%;padding:15px;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;margin-top:22px;text-transform:uppercase;
  transition:transform .4s var(--ease),box-shadow .4s}
.pricing .go:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(19,65,201,.34)}

/* --------------------------------------------------------------- footer */
footer{position:relative;overflow:hidden;background:var(--dark);color:#fff;
  padding:clamp(56px,6vw,96px) 0 34px}
footer .grid{display:grid;grid-template-columns:minmax(200px,26%) repeat(3,1fr) auto;
  gap:clamp(20px,3vw,52px)}
footer h5{font-size:11px;letter-spacing:.14em;font-weight:700;margin-bottom:20px}
footer .col a{display:block;font-size:13px;color:#B6B2AB;padding:6px 0;
  transition:color .3s,transform .35s var(--ease)}
footer .col a:hover{color:#fff;transform:translateX(5px)}
.fsoc{display:flex;gap:20px;align-items:flex-start}
.fsoc a{width:24px;height:24px;display:grid;place-items:center;opacity:.85;
  transition:opacity .3s,transform .4s}
.fsoc a:hover{opacity:1;transform:translateY(-3px)}
.fbot{display:flex;gap:clamp(20px,4vw,90px);font-size:10.5px;letter-spacing:.11em;
  color:#8C887F;margin-top:clamp(36px,5vw,72px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
.fbot .up{margin-left:auto;letter-spacing:.11em;font-size:10.5px;color:#8C887F}
.fbot .up:hover{color:#fff}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal.on{opacity:1;visibility:visible}
.modal .veil{position:absolute;inset:0;background:rgba(12,10,8,.72);backdrop-filter:blur(7px)}
.sheet{position:relative;background:var(--paper);border-radius:16px;width:min(520px,100%);
  padding:clamp(26px,3vw,44px);transform:translateY(22px) scale(.97);
  transition:transform .5s var(--ease)}
.modal.on .sheet{transform:none}
.sheet h3{font-size:clamp(24px,2.4vw,34px);font-weight:900;letter-spacing:-.03em;
  text-transform:uppercase}
.sheet p{font-size:14px;color:var(--muted);margin-top:12px}
.field{margin-top:18px}
.field label{display:block;font-size:10px;letter-spacing:.16em;font-weight:700;
  color:var(--faint);margin-bottom:8px}
.field input{width:100%;background:#fff;border:1px solid #DED8CE;border-radius:8px;
  padding:14px;font-family:inherit;font-size:14px;outline:0;transition:border-color .3s}
.field input:focus{border-color:var(--btn)}
.sheet .x{position:absolute;top:14px;right:20px;font-size:26px;color:var(--muted)}
.msg{font-size:12.5px;color:var(--btn);margin-top:14px;min-height:18px}

/* ----------------------------------------------------------- responsive */
@media (max-width:1180px){
  .coming .grid,.paid .grid,.taxes .grid,.save .grid,.story .grid,.plan .grid,
  .calm .grid{grid-template-columns:1fr}
  .dcards{grid-template-columns:repeat(2,1fr)}
  .bot3,.chartwrap{grid-template-columns:1fr}
  .hero .photo{opacity:.5}
  footer .grid{grid-template-columns:1fr 1fr 1fr}
  .quote blockquote{width:60%}
  .plan .photo{opacity:.5}
}
@media (max-width:820px){
  .nav ul{display:none;margin:0}
  .nav.open ul{display:flex;position:fixed;top:62px;left:0;right:0;flex-direction:column;
    gap:0;background:rgba(246,239,230,.98);backdrop-filter:blur(20px);padding:12px 22px 26px;
    border-bottom:1px solid var(--line)}
  .nav.dark.open ul{background:rgba(16,16,16,.98)}
  .nav.open ul a{display:block;padding:16px 0;font-size:14px;
    border-bottom:1px solid rgba(0,0,0,.07)}
  .nav .right{margin-left:auto}
  .nav .signin{display:none}
  .burger{display:block}
  .dcards,.goals,.pockets,footer .grid{grid-template-columns:1fr}
  .pockets{margin-top:16px;gap:12px;padding:0}
  .goals{gap:22px;max-width:320px;margin:0 auto}
  .stage{height:auto;display:flex;flex-direction:column;gap:20px;perspective:none}
  .dash,.phone{position:relative!important;left:auto!important;right:auto!important;
    top:auto!important;width:100%!important;height:auto!important;min-height:320px;
    transform:none!important}
  .invoice{position:relative;width:100%;left:0}
  .deposit,.limebar{position:relative;width:100%;top:auto;margin-top:18px;right:auto}
  .paidstage{min-height:0}
  .quote{flex-direction:column;padding:40px 0}
  .quote .ph{position:relative;width:100%;height:220px}
  .quote blockquote{width:100%;margin:24px 0 0;padding:0 var(--gut)}
  .plan .photo,.serifM{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   COPY OVER THE RIBBON
   The ribbon is meant to cross the page — that is the design. What it must
   not do is take the edge off the type it passes behind. Moving it away at
   one width just moves the collision to another, because the ribbon is sized
   in vw and the headlines are clamped, so the type is protected instead: a
   halo in the section's own ground colour, which is invisible against that
   ground and only shows where satin is behind the letters. No box, no scrim
   over the ribbon, nothing to wash the blue out.
   ═══════════════════════════════════════════════════════════════════════ */
.hero,.coming,.save,.quote,.plan{--halo:242,234,224}
.coming{--halo:246,239,230}
.paid{--halo:7,60,147}
.taxes{--halo:242,234,224}
.made,.story{--halo:23,23,23}
.calm{--halo:3,56,138}
footer{--halo:23,23,23}
.disp,blockquote,.lede,.eyebrow,.tabs b,.steps span,.goalbtn,
footer .col a,footer h5,.fbot span{
  text-shadow:0 0 4px rgba(var(--halo,242,234,224),.92),
              0 0 14px rgba(var(--halo,242,234,224),.85),
              0 0 34px rgba(var(--halo,242,234,224),.6);
}
/* the pill and the primary buttons carry their own ground already */
.goalbtn,.pill,.appbtn{text-shadow:none}
@supports not (color:rgb(0 0 0/1)){
  .disp,blockquote,.lede,.eyebrow{text-shadow:none}
}