/* Module pages: immersive dark-blue sections, a live dashboard in the hero,
   a scroll story, a glowing bento grid and a dark collections timeline.
   Loaded after landing.css. */

/* ---------- Shared dark section ---------- */
.dark{position:relative;color:#fff;background:linear-gradient(180deg,#06132A 0%,#0A2452 50%,#071A3D 100%);overflow:clip;isolation:isolate;}
.dark .glows{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.dark .glows span{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 20s ease-in-out infinite alternate;}
.dark .glows span:nth-child(1){width:620px;height:620px;left:-180px;top:-140px;background:rgba(28,86,214,.5);}
.dark .glows span:nth-child(2){width:540px;height:540px;right:-160px;top:35%;background:rgba(0,117,204,.42);animation-delay:-7s;}
.dark .glows span:nth-child(3){width:460px;height:460px;left:40%;bottom:-200px;background:rgba(239,162,59,.16);animation-delay:-12s;}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%);}
.dark .eyebrow{color:#8FB3F7;}
.dark .section-head h2{color:#fff;}
.dark .section-head p{color:#C6D2EA;}
.dark .grad-text{background:linear-gradient(100deg,#FFD58A,var(--amber) 45%,#8FB3F7);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero.flush{padding-bottom:40px;}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}

/* ---------- Live dues dashboard (hero) ---------- */
.dash{position:relative;max-width:980px;margin:56px auto 0;padding:22px;border-radius:26px;text-align:left;box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(91,141,242,.55);opacity:0;transform:translateY(60px) rotateX(10deg);transform-origin:50% 100%;animation:dashIn 1.2s cubic-bezier(.2,.8,.2,1) 1s forwards;}
@keyframes dashIn{to{opacity:1;transform:none;}}
.dash::before{content:"";position:absolute;inset:-1.5px;border-radius:27px;padding:1.5px;background:conic-gradient(from var(--a,0deg),rgba(255,255,255,.08),#FFD58A,#5B8DF2,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 6s linear infinite;pointer-events:none;}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.dash-title{display:flex;align-items:center;gap:12px;}
.dash-title .di{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#2a1a00;background:linear-gradient(135deg,#FFE2A8,var(--amber));}
.dash-title b{display:block;font-family:'Sora',sans-serif;font-size:17px;}
.dash-title small{display:block;font-family:var(--label);font-size:13px;color:#8FB3F7;}
.live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(95,211,155,.14);font-family:var(--label);font-size:13px;font-weight:700;color:#7BE3AE;}
.live i{width:8px;height:8px;border-radius:50%;background:#5FD39B;animation:livePulse 1.6s ease-out infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(95,211,155,.7);}70%{box-shadow:0 0 0 9px rgba(95,211,155,0);}100%{box-shadow:0 0 0 0 rgba(95,211,155,0);}}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;}
.st{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}
.st small{display:block;font-family:var(--label);font-size:12.5px;color:#AFC2E6;}
.st b{display:block;margin-top:4px;font-family:'Sora',sans-serif;font-size:24px;letter-spacing:-.02em;transition:color .3s ease;}
.st b.bump{animation:bump .5s ease;}
@keyframes bump{40%{transform:scale(1.08);}}
.st.good b{color:#7BE3AE;} .st.warn b{color:#FFC27A;} .st.blue b{color:#9DBDFB;}
.prog{margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
.prog-row{display:flex;justify-content:space-between;font-family:var(--label);font-size:13px;color:#C6D2EA;}
.prog-row b{color:#7BE3AE;}
.bar{position:relative;height:10px;margin-top:10px;border-radius:10px;background:rgba(255,255,255,.1);overflow:hidden;}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:10px;background:linear-gradient(90deg,#29B6F6,#2FB574);transition:width 1s cubic-bezier(.2,.8,.2,1);}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:barShine 2.4s ease-in-out infinite;}
@keyframes barShine{to{transform:translateX(100%);}}
.roster{margin-top:16px;display:grid;gap:8px;}
.rrow{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:background .4s ease,border-color .4s ease;}
.rrow.flash{background:rgba(95,211,155,.14);border-color:rgba(95,211,155,.4);}
.rrow.flash-warn{background:rgba(239,162,59,.14);border-color:rgba(239,162,59,.4);}
.rrow.flash-blue{background:rgba(91,141,242,.16);border-color:rgba(91,141,242,.45);}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;color:#0B2340;background:#CFE0FF;}
.rname b{display:block;font-family:'Sora',sans-serif;font-size:14.5px;}
.rname small{display:block;font-family:var(--label);font-size:12.5px;color:#AFC2E6;}
.ramt{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;}
.pill{min-width:92px;text-align:center;padding:5px 10px;border-radius:999px;font-family:var(--label);font-size:12.5px;font-weight:700;transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.3,1.6,.5,1);}
.pill.paid{background:rgba(95,211,155,.18);color:#7BE3AE;}
.pill.due{background:rgba(255,194,122,.16);color:#FFC27A;}
.pill.over{background:rgba(255,138,115,.16);color:#FF9B87;}
.pill.auto{background:rgba(157,189,251,.18);color:#9DBDFB;}
.pill.pop{transform:scale(1.15);}
.chipfly{position:absolute;right:18px;top:6px;transform:translateY(0);padding:4px 10px;border-radius:999px;font-family:var(--label);font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;}
.chipfly.go{animation:chipfly 1.6s ease forwards;}
@keyframes chipfly{0%{opacity:0;transform:translateY(8px) scale(.8);}20%{opacity:1;transform:translateY(-14px) scale(1);}75%{opacity:1;transform:translateY(-26px);}100%{opacity:0;transform:translateY(-38px);}}
.chipfly.g{background:#2FB574;color:#fff;} .chipfly.a{background:var(--amber);color:#2a1a00;} .chipfly.b{background:#5B8DF2;color:#fff;}
.dash-toast{position:absolute;right:-28px;bottom:-24px;display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 11px;border-radius:16px;background:#fff;color:#0A1F3D;box-shadow:0 20px 44px -14px rgba(0,0,0,.6);opacity:0;transform:translateY(-10px) scale(.92);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.5,.5,1);z-index:3;}
.dash-toast.show{opacity:1;transform:none;}
.dash-toast .pi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:#fff;background:#2C8F63;}
.dash-toast b{display:block;font-family:'Sora',sans-serif;font-size:14px;}
.dash-toast small{display:block;font-family:var(--label);font-size:12.5px;color:#54627B;}

/* ---------- Scroll story: a billing cycle runs itself ---------- */
.cyc{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.csteps{display:flex;flex-direction:column;}
.cstep{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:30px 0 30px 34px;border-left:2px solid rgba(255,255,255,.12);position:relative;transition:border-color .4s ease;}
.cstep::before{content:attr(data-n);position:absolute;left:-19px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:#8FB3F7;background:#0A2452;border:2px solid rgba(255,255,255,.18);transition:all .4s ease;}
.cstep.active{border-color:var(--amber);}
.cstep.active::before{color:#2a1a00;background:linear-gradient(135deg,#FFD58A,var(--amber));border-color:transparent;box-shadow:0 0 0 8px rgba(239,162,59,.18);}
.cstep .eyebrow{font-size:14px;}
.cstep h3{margin:10px 0 12px;font-size:clamp(24px,2.6vw,34px);opacity:.45;transition:opacity .4s ease;}
.cstep.active h3{opacity:1;}
.cstep p{color:#C6D2EA;max-width:460px;}
.cstep .scene{display:none;}
.stage{position:sticky;top:110px;height:min(560px,calc(100vh - 150px));}
.stage .scene{position:absolute;inset:0;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
.stage .scene.on{opacity:1;transform:none;}
.scene{display:flex;align-items:center;justify-content:center;}
.sc-card{position:relative;width:100%;max-width:520px;padding:26px;border-radius:24px;color:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 60px -20px rgba(91,141,242,.5);}
.sc-card h4{margin:0 0 16px;display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-size:17px;}
.sc-card h4 .di{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#2a1a00;background:linear-gradient(135deg,#FFE2A8,var(--amber));}
.field{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);margin-top:8px;font-size:15px;}
.field span{font-family:var(--label);color:#AFC2E6;}
.field b{font-family:'Sora',sans-serif;white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0);}
.scene.on .field b{animation:typeIn .7s steps(14) forwards;animation-delay:calc(var(--k) * .45s + .3s);}
@keyframes typeIn{to{clip-path:inset(0 0 0 0);}}
.field .cursor-b{display:inline-block;width:2px;height:1em;background:#FFD58A;margin-left:2px;vertical-align:-.15em;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.saved{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(95,211,155,.15);color:#7BE3AE;font-family:var(--label);font-weight:700;font-size:14px;opacity:0;transform:translateY(8px);}
.scene.on .saved{animation:fadeUp .5s ease forwards;animation-delay:2.3s;}
.inv-stack{position:relative;height:200px;margin:4px 0 10px;}
.inv{position:absolute;left:50%;top:10px;width:230px;margin-left:-115px;padding:16px;border-radius:16px;background:#fff;color:#0A1F3D;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);font-size:13px;transform-origin:50% 120%;}
.inv b{display:block;font-family:'Sora',sans-serif;font-size:15px;}
.inv .amt{margin-top:8px;font-family:'Sora',sans-serif;font-weight:800;font-size:24px;color:#1C56D6;}
.inv small{display:block;color:#54627B;font-family:var(--label);}
.scene.on .inv:nth-child(1){animation:fanL .9s cubic-bezier(.2,.8,.2,1) .3s both;}
.scene.on .inv:nth-child(2){animation:fanR .9s cubic-bezier(.2,.8,.2,1) .45s both;}
.scene.on .inv:nth-child(3){animation:fanC .9s cubic-bezier(.2,.8,.2,1) .6s both;}
@keyframes fanL{from{transform:translateY(40px) rotate(0);opacity:0;}to{transform:translateX(-120px) rotate(-12deg);opacity:1;}}
@keyframes fanR{from{transform:translateY(40px) rotate(0);opacity:0;}to{transform:translateX(120px) rotate(12deg);opacity:1;}}
@keyframes fanC{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.chip2{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-family:var(--label);font-size:13px;font-weight:700;opacity:0;transform:scale(.8);}
.scene.on .chip2{animation:popIn .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--k) * .15s + 1.1s);}
@keyframes popIn{to{opacity:1;transform:none;}}
.big-count{margin-top:14px;text-align:center;font-family:'Sora',sans-serif;font-size:15px;color:#C6D2EA;}
.big-count b{display:block;font-size:46px;font-weight:800;color:#7BE3AE;letter-spacing:-.03em;}
.rules{display:grid;gap:10px;}
.rule{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:14.5px;opacity:.5;transition:opacity .4s ease,background .4s ease,border-color .4s ease;}
.rule .rd{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.1);color:#AFC2E6;transition:background .4s ease,color .4s ease;}
.rule em{margin-left:auto;font-style:normal;font-family:var(--label);font-size:12.5px;font-weight:700;color:#AFC2E6;}
.rule.lit{opacity:1;background:rgba(95,211,155,.12);border-color:rgba(95,211,155,.35);}
.rule.lit .rd{background:#2FB574;color:#fff;}
.mail2{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff;color:#0A1F3D;font-size:13.5px;line-height:1.55;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(16px);}
.mail2 b{display:block;font-family:'Sora',sans-serif;}
.scene.on .mail2{animation:fadeUp .6s ease forwards;animation-delay:2.4s;}
.ring-wrap{display:flex;align-items:center;gap:22px;}
.ring{position:relative;flex:none;width:118px;height:118px;}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring circle{fill:none;stroke-width:9;}
.ring .bg{stroke:rgba(255,255,255,.12);}
.ring .fg{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:0;}
.scene.on .ring .fg{animation:ringDown 2.2s linear .3s forwards;}
@keyframes ringDown{to{stroke-dashoffset:302;}}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:30px;line-height:1;}
.ring .num small{display:block;font-family:var(--label);font-size:11px;font-weight:700;color:#AFC2E6;}
.ring-wrap p{color:#C6D2EA;font-size:15px;}
.lines{margin-top:16px;display:grid;gap:2px;}
.lines div{display:flex;justify-content:space-between;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;opacity:0;transform:translateX(-10px);}
.scene.on .lines div{animation:slideIn .45s ease forwards;animation-delay:calc(var(--k) * .3s + 2.6s);}
@keyframes slideIn{to{opacity:1;transform:none;}}
.lines .tot{border:0;font-family:'Sora',sans-serif;font-weight:800;font-size:19px;color:#FF9B87;}
.lines .fee{color:#FFC27A;}
.markrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);}
.markbtn{position:relative;padding:9px 14px;border-radius:999px;border:1px solid rgba(95,211,155,.6);font-family:var(--label);font-size:13px;font-weight:700;color:#7BE3AE;overflow:hidden;}
.markbtn .after{position:absolute;inset:0;display:grid;place-items:center;background:#2FB574;color:#fff;opacity:0;}
.scene.on .markbtn{animation:press .3s ease 1.1s;}
.scene.on .markbtn .after{animation:fadeIn .3s ease 1.3s forwards;}
@keyframes press{50%{transform:scale(.9);}}
@keyframes fadeIn{to{opacity:1;}}
.tap{position:absolute;width:22px;height:22px;opacity:0;}
.scene.on .tap{animation:tapMove 1.3s cubic-bezier(.5,0,.2,1) .2s forwards;}
@keyframes tapMove{0%{opacity:0;transform:translate(60px,60px);}30%{opacity:1;}80%{opacity:1;transform:none;}100%{opacity:0;transform:none;}}
.ledger{margin-top:14px;display:grid;gap:8px;}
.ledger div{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14.5px;opacity:0;transform:translateY(8px);}
.ledger div b{font-family:'Sora',sans-serif;color:#7BE3AE;}
.scene.on .ledger div{animation:fadeUp .5s ease forwards;animation-delay:calc(var(--k) * .25s + 1.6s);}
.scene .bar{margin-top:14px;}
.scene.on .bar i{animation:grow 1.2s cubic-bezier(.2,.8,.2,1) 2.4s forwards;}
@keyframes grow{from{width:45%;}to{width:50%;}}

/* ---------- Bento of capabilities ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:18px;}
.bx{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:24px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease;}
.bx.w2{grid-column:span 2;} .bx.h2{grid-row:span 2;}
.bx::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:conic-gradient(from var(--a,0deg),transparent 0 60%,#FFD58A 75%,#5B8DF2 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s ease;animation:rot 4s linear infinite;pointer-events:none;}
.bx::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),rgba(91,141,242,.3),transparent 60%);opacity:0;transition:opacity .4s ease;pointer-events:none;}
.bx:hover,.bx.reveal.in:hover{transform:translateY(-6px);border-color:rgba(255,213,138,.35);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);}
.bx:hover::before,.bx:hover::after{opacity:1;}
.bx .fi{position:relative;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(135deg,#5B8DF2,#1C56D6);box-shadow:0 12px 26px -10px rgba(28,86,214,.9);transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s ease,color .3s ease;}
.bx:hover .fi{transform:rotate(-8deg) scale(1.08);background:linear-gradient(135deg,#FFD58A,var(--amber));color:#2a1a00;}
.bx h3{position:relative;margin-top:16px;font-size:20px;}
.bx p{position:relative;margin-top:8px;font-size:15px;color:#D5DFF3;}
.bx .viz{position:relative;margin-top:auto;padding-top:18px;}
.ticker{display:flex;align-items:baseline;gap:10px;font-family:'Sora',sans-serif;}
.ticker b{font-size:40px;font-weight:800;color:#FFD58A;letter-spacing:-.03em;}
.ticker small{font-family:var(--label);font-size:13px;color:#AFC2E6;}
.mini-lines{display:grid;gap:6px;margin-top:12px;}
.mini-lines div{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.07);font-size:14px;}
.mini-lines span{color:#AFC2E6;font-family:var(--label);}
.cycle-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cycle-chips span{padding:7px 12px;border-radius:999px;font-family:var(--label);font-size:13px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .4s ease,color .4s ease,border-color .4s ease;}
.cycle-chips span.on{background:linear-gradient(135deg,#FFD58A,var(--amber));color:#2a1a00;border-color:transparent;}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--label);font-size:12.5px;font-weight:700;}
.flow span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);}
.flow i{color:#8FB3F7;font-style:normal;}
.flow span:last-child{background:rgba(255,138,115,.2);color:#FF9B87;}

/* ---------- Tabs section with blue wash ---------- */
.wash{background:radial-gradient(900px 500px at 10% 0%,var(--blue-pale),transparent 70%),radial-gradient(800px 500px at 100% 100%,color-mix(in srgb,var(--amber) 14%,transparent),transparent 70%),var(--paper);}

/* ---------- Dark timeline ---------- */
.dark .tline::before{background:rgba(255,255,255,.12);}
.dark .tl-day{box-shadow:0 0 0 8px #0A2452,0 0 30px rgba(91,141,242,.6);}
.dark .tl-step h3{color:#fff;}
.dark .tl-step p{color:#C6D2EA;}
.dark .badge.auto{background:rgba(95,211,155,.16);color:#7BE3AE;}
.dark .badge.cfg{background:rgba(255,194,122,.16);color:#FFC27A;}
.dark .badge.board{background:rgba(157,189,251,.18);color:#9DBDFB;}
.runner{position:absolute;left:4%;top:21px;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 24px #FFD58A;z-index:2;opacity:0;}
.tline.in .runner{animation:run 5s cubic-bezier(.45,0,.35,1) 2s infinite;}
@keyframes run{0%{left:4%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{left:96%;opacity:0;}}

/* ---------- Payments, dark glass ---------- */
.dark .pay-card{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);}
.dark .pay-card h3{color:#fff;}
.dark .pay-card > p{color:#C6D2EA;}
.dark .rec div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#E4ECFC;}
.dark .rec .ok{color:#7BE3AE;background:rgba(95,211,155,.16);}
.dark .bill{background:linear-gradient(150deg,#0B1A34,#123B99);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.dark .ticks4 div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.dark .ticks4 b{color:#fff;}
.dark .ticks4 p{color:#C6D2EA;}
.dark .ticks4 .tick{background:rgba(95,211,155,.2);stroke:#5FD39B;}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .bx.w2{grid-column:span 2;}
  .dash-toast{right:8px;}
}
@media (max-width:900px){
  .cyc{grid-template-columns:1fr;}
  .stage{display:none;}
  .cstep{min-height:0;padding:26px 0 26px 30px;}
  .cstep h3{opacity:1;}
  .cstep .scene{display:flex;margin-top:22px;}
}
@media (max-width:760px){
  .stats4{grid-template-columns:1fr 1fr;}
  .rrow{grid-template-columns:auto 1fr auto;}
  .rrow .ramt{display:none;}
  .bento{grid-template-columns:1fr;}
  .bx.w2{grid-column:auto;} .bx.h2{grid-row:auto;}
  .dash{padding:16px;border-radius:20px;}
  .st b{font-size:20px;}
  .dash-toast{bottom:-30px;right:0;}
  .ring-wrap{flex-direction:column;align-items:flex-start;}
}
@media (max-width:760px){
  .inv{width:190px;margin-left:-95px;}
  .scene.on .inv:nth-child(1){animation-name:fanLs;}
  .scene.on .inv:nth-child(2){animation-name:fanRs;}
}
@keyframes fanLs{from{transform:translateY(40px);opacity:0;}to{transform:translateX(-62px) rotate(-10deg);opacity:1;}}
@keyframes fanRs{from{transform:translateY(40px);opacity:0;}to{transform:translateX(62px) rotate(10deg);opacity:1;}}

/* ---------- Split hero: text left, live portal right ---------- */
.hero.split{text-align:left;padding:120px 0 90px;}
.split-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center;}
.hero.split .crumbs,.hero.split .hero-ctas,.hero.split .hero-proof{justify-content:flex-start;}
.hero.split .kicker{display:block;margin-top:22px;font-family:var(--label);font-size:15px;font-weight:700;color:#8FB3F7;opacity:0;animation:fadeUp .6s ease .1s forwards;}
.hero.split h1{margin-top:10px;font-size:clamp(34px,4vw,58px);white-space:nowrap;}
.hero.split .lede{margin:18px 0 0;max-width:540px;}
.hero.split .hero-proof{flex-direction:column;align-items:flex-start;gap:8px;}
.hero.split .dash{margin:0;max-width:none;padding:18px;animation-delay:.6s;}
.hero.split .stats4{grid-template-columns:1fr 1fr;margin-top:14px;}
.hero.split .st b{font-size:22px;}
.hero.split .prog{margin-top:10px;padding:12px 14px;}
.hero.split .roster{margin-top:10px;gap:6px;}
.hero.split .rrow{padding:9px 12px;gap:12px;}
.hero.split .av{width:30px;height:30px;font-size:11.5px;}
.hero.split .rname b{font-size:14px;}
.hero.split .rname small{font-size:12px;}
.hero.split .ramt{font-size:14px;}
.hero.split .pill{min-width:80px;}
.hero.split .dash-toast{right:auto;left:-36px;bottom:-22px;}
@media (max-width:1080px){
  .split-grid{grid-template-columns:1fr;gap:44px;}
  .hero.split{text-align:center;}
  .hero.split .crumbs,.hero.split .hero-ctas{justify-content:center;}
  .hero.split .hero-proof{flex-direction:row;justify-content:center;align-items:center;gap:10px 22px;}
  .hero.split .lede{margin-inline:auto;}
  .hero.split .dash{max-width:620px;margin-inline:auto;width:100%;text-align:left;}
  .hero.split .dash-toast{left:8px;}
}
@media (max-width:620px){
  .hero.split{padding-top:104px;}
  .hero.split h1{white-space:normal;font-size:38px;}
  .hero.split .rrow{grid-template-columns:auto 1fr auto;}
}

/* ---------- Scroll story on white ---------- */
.story-light{background:var(--surface);}
.story-light .cstep{border-left-color:var(--line);}
.story-light .cstep::before{color:var(--blue);background:var(--surface);border-color:var(--line);}
.story-light .cstep.active{border-left-color:var(--amber);}
.story-light .cstep h3{color:var(--ink);opacity:.4;}
.story-light .cstep.active h3{opacity:1;}
.story-light .cstep p{color:var(--ink-soft);}
.story-light .eyebrow{color:var(--blue);}
.story-light .sc-card{background:linear-gradient(150deg,#0B2340 0%,#123B99 70%,#1C56D6 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -35px rgba(11,35,64,.55),0 0 0 1px rgba(28,86,214,.08);}
.story-light .sc-card::after{content:"";position:absolute;inset:0;border-radius:24px;background:radial-gradient(300px circle at 100% 0%,rgba(255,213,138,.22),transparent 60%);pointer-events:none;}

/* ---------- Long-form guide ---------- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;}
.toc a{padding:7px 13px;border-radius:999px;background:var(--blue-pale);color:var(--blue);font-family:var(--label);font-size:13.5px;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease;}
.toc a:hover{background:var(--blue);color:#fff;}
.prose h3{scroll-margin-top:100px;}
.prose ol{margin:14px 0 0;padding-left:22px;color:var(--ink-soft);}
.prose ol li{margin-top:8px;}
.prose strong{color:var(--ink);}
.note-legal{margin-top:18px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);font-size:14.5px;color:var(--ink-soft);}
.shot-fig{margin:0 0 22px;border-radius:18px;overflow:hidden;background:#0E1E3B;box-shadow:var(--shadow);}
.shot-fig img{width:100%;aspect-ratio:1260/860;object-fit:cover;object-position:50% 0;}
.shot-fig figcaption{padding:12px 16px;font-family:var(--label);font-size:13px;color:#C6D2EA;}
.guide-side{position:sticky;top:100px;}
@media (max-width:860px){.guide-side{position:relative;top:0;}}
.guide-side .check{position:relative;top:0;}

/* ---------- Capabilities in three stages: Bill, Follow up, Track ---------- */
.lanes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.lane-flow{position:absolute;left:8%;right:8%;top:47px;height:2px;background:rgba(255,255,255,.12);z-index:0;}
.lane-flow i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#FFD58A;box-shadow:0 0 16px #FFD58A;animation:laneRun 4s cubic-bezier(.45,0,.35,1) infinite;}
@keyframes laneRun{0%{left:0;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}
.lane{position:relative;z-index:1;padding:24px;border-radius:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:border-color .4s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
.lane:hover,.lane.reveal.in:hover{transform:translateY(-6px);border-color:rgba(255,213,138,.35);}
.lane-head{display:flex;gap:14px;align-items:center;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);}
.lane-n{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:Sora,sans-serif;font-weight:800;font-size:18px;color:#2a1a00;background:linear-gradient(135deg,#FFE2A8,var(--amber));box-shadow:0 0 0 7px rgba(239,162,59,.15);}
.lane-head b{display:block;font-family:Sora,sans-serif;font-size:22px;}
.lane-head small{display:block;margin-top:2px;font-size:14px;color:#C6D2EA;line-height:1.45;}
.lane ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.lane li{display:flex;gap:14px;align-items:flex-start;padding:14px 12px;border-radius:16px;transition:background .3s ease;opacity:0;transform:translateY(12px);}
.lane.in li{animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0s) + .25s + var(--k) * .12s);}
.lane li:hover{background:rgba(255,255,255,.07);}
.li-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:#fff;background:linear-gradient(135deg,#5B8DF2,#1C56D6);transition:background .3s ease,color .3s ease,transform .4s cubic-bezier(.3,1.6,.5,1);}
.lane li:hover .li-ic{background:linear-gradient(135deg,#FFD58A,var(--amber));color:#2a1a00;transform:rotate(-8deg);}
.lane li b{display:block;font-family:Sora,sans-serif;font-size:16px;}
.lane li small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:#C6D2EA;}
@media (max-width:980px){.lanes{grid-template-columns:1fr;max-width:640px;margin-inline:auto;}.lane-flow{display:none;}}
@media (prefers-reduced-motion:reduce){.lane li{opacity:1;transform:none;}}

/* ---------- Budget bars (accounting story) ---------- */
.bud{display:grid;gap:12px;}
.bud-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:12px;font-size:14.5px;opacity:0;transform:translateX(-10px);}
.scene.on .bud-row{animation:slideIn .45s ease forwards;animation-delay:calc(var(--k) * .2s + .3s);}
.bud-l{font-family:var(--label);color:#C6D2EA;}
.bud-p{font-family:Sora,sans-serif;font-weight:700;text-align:right;}
.bud-bar{position:relative;height:10px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden;}
.bud-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:10px;background:linear-gradient(90deg,#29B6F6,#2FB574);}
.scene.on .bud-bar i{animation:budGrow 1.2s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--k) * .2s + .5s);}
@keyframes budGrow{to{width:var(--w);}}
.bud-row.hot .bud-bar i{background:linear-gradient(90deg,var(--amber),#FF8A73);}
.bud-row.hot .bud-p{color:#FFC27A;}
.scene .saved .ic{flex:none;}
.cyc > *,.cstep,.scene{min-width:0;}
@media (max-width:900px){.cyc{grid-template-columns:minmax(0,1fr);}}
.bud.money .bud-row{grid-template-columns:96px 1fr 70px;}