:root{--bg:#071b16;--ink:#eaffdc;--lime:#baff70;--muted:#a5b8ad;--line:#365347;--panel:#102a21;--cream:#f3f8e8;--dark:#0b2119;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}::selection{background:var(--lime);color:var(--dark)}
    .shell{max-width:1440px;margin:auto;padding:0 44px}.header{height:90px;border-bottom:1px solid #294236;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-.065em;white-space:nowrap}.brandmark{width:42px;height:42px;display:block;flex:none;border-radius:10px;background:#073323 url("/bagworkpay-logo.png") center/185% no-repeat}.header nav{display:flex;align-items:center;gap:34px;color:#d5e3d8;font-size:15px;font-weight:600}.header nav a:hover,.footer a:hover{color:var(--lime)}.nav-right{display:flex;align-items:center;gap:18px}.pill{border:1px solid #4d6d5d;border-radius:99px;padding:8px 12px;color:#b9cabd;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:0 22px;border:1px solid var(--lime);border-radius:9px;background:var(--lime);color:#102319;font-size:14px;font-weight:800;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:#d0ff9d}.button.dark{background:transparent;color:var(--ink);border-color:#5b7667}.button.dark:hover{background:#16382b}.button .arrow{font-size:19px;line-height:1;font-weight:400}.menu-button,.mobile-nav{display:none}
    .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.83fr);align-items:center;gap:6vw;padding-top:78px;padding-bottom:100px;min-height:660px}.eyebrow{display:flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--lime)}.eyebrow .dash{width:27px;height:2px;background:var(--lime)}h1,h2,h3,p{margin-top:0}.hero h1{max-width:750px;margin:30px 0 26px;font-size:clamp(62px,6.8vw,108px);line-height:.93;letter-spacing:-.095em;font-weight:850}.hero h1 em{font-style:normal;color:var(--lime)}.lead{max-width:560px;color:#bfcdc3;font-size:18px;line-height:1.6;margin-bottom:34px}.actions{display:flex;gap:12px;flex-wrap:wrap}.hero-note{margin-top:26px;color:#849f8f;font-size:13px}.hero-note b{color:#cddccc;font-weight:600}.showcase{position:relative;min-width:0}.showcase:before{content:"";position:absolute;z-index:0;inset:-23px 26px 29px -23px;border:1px solid #477d48;border-radius:20px;transform:rotate(-4deg)}.card{position:relative;z-index:1;background:#f1f7e7;color:var(--dark);border-radius:19px;padding:26px;box-shadow:0 25px 50px #0004;transform:rotate(2deg)}.card-top{display:flex;align-items:center;justify-content:space-between;color:#42624b;font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}.card-top .tiny{display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;background:#35c16d}.token{display:flex;align-items:center;gap:14px;margin:33px 0 26px}.token-avatar{width:56px;height:56px;border-radius:14px;flex:none;background:#073323 url("/bagworkpay-logo.png") center/185% no-repeat}.token strong{display:block;font-size:19px;letter-spacing:-.04em}.token small{display:block;color:#63806b;margin-top:3px}.meter-title{display:flex;justify-content:space-between;color:#496651;font-size:13px;font-weight:700}.meter-title strong{color:#143a26;font-size:14px}.meter{display:flex;gap:4px;height:17px;margin:12px 0 27px}.meter span:first-child{flex:3;background:#baff70;border-radius:4px}.meter span:last-child{flex:7;background:#dbe9d0;border-radius:4px}.card-list{border-top:1px solid #d0dfcc}.card-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d0dfcc;padding:14px 0;font-size:14px}.card-row .person{display:flex;align-items:center;gap:10px;font-weight:650}.av{width:27px;height:27px;border-radius:8px;background:#d8e9ca;display:grid;place-items:center;font-size:11px;color:#2d6136;font-weight:850}.card-row strong{font-weight:800}.card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:20px;color:#40634b;font-size:12px;font-weight:700}.card-foot span:last-child{color:#0a3e25}.corner-label{position:absolute;z-index:2;bottom:-21px;right:-28px;padding:14px 17px;background:var(--lime);color:#173322;border:4px solid var(--bg);border-radius:12px;font-weight:850;font-size:13px;transform:rotate(-5deg)}
    .strip{border-top:1px solid #355243;border-bottom:1px solid #355243;background:#0d271e}.strip-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:76px}.strip span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#8fa99a;font-weight:800}.strip strong{font-size:14px;font-weight:750;color:#d6e8d5}.strip .sep{color:#50735d}
    .section{padding-top:110px;padding-bottom:120px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px}.section h2{max-width:760px;font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-.075em;margin:20px 0 0}.section-head p{max-width:300px;color:#a9bdae;line-height:1.55;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}.step{padding:32px 30px 35px;min-height:290px;background:#0c251c;border-right:1px solid var(--line)}.step:last-child{border:0}.step-num{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #6b8b6d;border-radius:50%;font-size:12px;color:var(--lime);font-weight:800}.step h3{font-size:27px;letter-spacing:-.06em;margin:62px 0 12px}.step p{color:#adbfaf;line-height:1.55;margin:0;max-width:290px}.step:nth-child(2){background:#123022}
    .calculator-wrap{background:var(--cream);color:var(--dark)}.calculator{display:grid;grid-template-columns:.85fr 1fr;gap:10vw;align-items:center;padding-top:110px;padding-bottom:110px}.calculator .eyebrow{color:#287d43}.calculator .eyebrow .dash{background:#287d43}.calculator h2{font-size:clamp(42px,5vw,70px);line-height:1;letter-spacing:-.075em;margin:22px 0}.calculator p{color:#50695a;line-height:1.6;max-width:440px}.calc-panel{border:1px solid #c7d9c2;border-radius:18px;background:#fff;padding:29px;box-shadow:0 18px 45px #31582912}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid #e1e9de}.panel-head h3{margin:0;font-size:20px;letter-spacing:-.04em}.panel-head span{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border:1px solid #cbdcc9;border-radius:99px;padding:7px 10px;color:#5b795e}.field{margin-top:27px}.field label{display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:14px;color:#39533f}.field label strong{color:#153c21}.field input[type=number]{display:block;width:100%;height:53px;margin-top:12px;border:1px solid #cadaCA;border-radius:8px;padding:0 14px;color:#153a22;background:#f8fbf5;font-size:19px;font-weight:800}.field input[type=range]{display:block;width:100%;margin:25px 0 10px;accent-color:#35b455;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#85988a;font-size:12px}.result{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:28px;padding:22px;background:#e7fad7;border-radius:11px}.result small{display:block;color:#4d7450;font-size:13px;margin-bottom:5px}.result strong{font-size:34px;letter-spacing:-.065em}.result .out{font-size:12px;font-weight:800;color:#3e7542}.disclaimer{font-size:12px!important;margin:14px 0 0!important;color:#7b8d7e!important}
    .closing{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;padding-top:115px;padding-bottom:115px}.closing h2{font-size:clamp(48px,6.8vw,96px);letter-spacing:-.09em;line-height:.95;max-width:920px;margin:18px 0 0}.closing h2 span{color:var(--lime)}.footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:110px;color:#a4bbaa;font-size:13px}.footer .brand{color:var(--ink);font-size:19px}.footer .brandmark{width:31px;height:31px}.footer .foot-right{display:flex;gap:26px;align-items:center}
    @media(max-width:1000px){.shell{padding-left:28px;padding-right:28px}.header nav{gap:18px}.hero{grid-template-columns:1fr 1fr;gap:30px}.hero h1{font-size:clamp(60px,7vw,85px)}.showcase{transform:scale(.91);transform-origin:center}.strip-inner{flex-wrap:wrap;justify-content:center;padding-top:22px;padding-bottom:22px;min-height:0}.section-head{align-items:start}.calculator{gap:5vw}}
    @media(max-width:760px){.shell{padding-left:20px;padding-right:20px}.header{height:72px}.brand{font-size:20px}.brandmark{width:34px;height:34px}.header nav,.nav-right .pill{display:none}.menu-button{display:inline-flex;border:1px solid #5f7b68;border-radius:8px;background:none;color:var(--ink);padding:10px 13px;font-size:13px;font-weight:700}.mobile-nav{display:none;position:absolute;z-index:5;top:72px;left:0;right:0;padding:22px;background:#102a21;border-bottom:1px solid var(--line);box-shadow:0 16px 25px #0005}.mobile-nav.open{display:flex;flex-direction:column;gap:18px}.hero{grid-template-columns:1fr;gap:65px;padding-top:68px;padding-bottom:95px;min-height:0}.hero h1{font-size:clamp(58px,13vw,82px)}.lead{font-size:16px}.showcase{width:min(100%,480px);margin:0 auto;transform:none}.card{padding:21px}.corner-label{right:-6px}.strip-inner{gap:14px}.strip .sep{display:none}.strip strong{font-size:12px}.section{padding-top:80px;padding-bottom:80px}.section-head{display:block}.section-head p{margin-top:23px}.steps{grid-template-columns:1fr}.step{min-height:0;border-right:0;border-bottom:1px solid var(--line);padding:27px}.step h3{margin-top:36px}.calculator{grid-template-columns:1fr;gap:30px;padding-top:80px;padding-bottom:80px}.closing{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px}.closing h2{font-size:clamp(55px,11vw,80px)}.closing .button{justify-self:start}.footer{padding-top:25px;padding-bottom:28px;align-items:flex-start;flex-direction:column}.foot-right{flex-wrap:wrap}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

    .token-avatar{background:transparent;display:flex;align-items:center;justify-content:center;border-radius:0;box-shadow:none}.token-avatar img{width:54px;height:54px;object-fit:contain;filter:brightness(0) saturate(100%) invert(21%) sepia(54%) saturate(594%) hue-rotate(94deg)}.wallet-button{min-height:41px;padding:0 15px;font-size:13px}.workspace-wrap{background:#10291f;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.workspace{display:grid;grid-template-columns:.76fr 1fr;gap:7vw;padding-top:106px;padding-bottom:106px}.workspace-intro h2{font-size:clamp(42px,5vw,70px);letter-spacing:-.075em;line-height:1;margin:22px 0}.workspace-intro p{color:#adbeaf;line-height:1.6;max-width:455px}.workspace-note{max-width:430px;margin-top:35px;border-left:2px solid var(--lime);padding-left:17px;color:#c8d9c7;font-size:14px;line-height:1.55}.workspace-panel{background:#e9f4df;color:#123122;border-radius:17px;padding:30px}.form-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}.form-heading h3,.saved-plans h3{font-size:21px;letter-spacing:-.04em;margin:0}.form-heading span{font-size:12px;color:#66836a}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.workspace-panel label{display:block;color:#365640;font-size:13px;font-weight:750}.workspace-panel input,.workspace-panel textarea{display:block;width:100%;border:1px solid #b8cdb7;background:#f8fcf4;border-radius:8px;color:#163a23;padding:13px;font-size:15px;margin-top:8px;outline:none}.workspace-panel input:focus,.workspace-panel textarea:focus{border-color:#3a9d4e;box-shadow:0 0 0 3px #a8dfab70}.workspace-panel textarea{resize:vertical;min-height:88px}.full-field{margin-top:17px}.input-suffix{position:relative;display:block}.input-suffix b{position:absolute;right:15px;top:50%;transform:translateY(-38%);color:#42654a}.save-button{margin-top:20px;background:#113c27;color:#edffe8;border-color:#113c27}.save-button:hover{background:#24633c}.form-status{font-size:13px;color:#597764;margin:12px 0 0}.saved-plans{border-top:1px solid #cadbc7;margin-top:27px;padding-top:23px}.saved-plans h3{font-size:17px;margin-bottom:15px}.empty-drafts{font-size:13px;color:#69816b;margin:0}.draft-item{display:flex;justify-content:space-between;gap:18px;border:1px solid #ccdec7;border-radius:9px;background:#f8fcf4;padding:13px;margin-top:9px}.draft-item strong{display:block;font-size:15px}.draft-item small{display:block;color:#64806a;margin-top:4px}.draft-item span{font-size:13px;font-weight:800;color:#2d8742;white-space:nowrap}
    @media(max-width:1000px){.header nav{gap:17px}.workspace{gap:4vw}}
    @media(max-width:760px){.nav-right>.wallet-button{display:none}.mobile-nav .button{align-self:start}.workspace{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px;gap:30px}.workspace-panel{padding:22px}}
    @media(max-width:420px){.form-grid{grid-template-columns:1fr}}
/* Refinements keep the supplied layout and logo artwork intact. */
body{overflow-x:clip}textarea{font:inherit}button:disabled{cursor:wait;opacity:.65;transform:none}button:focus-visible,textarea:focus-visible{outline:3px solid #5da541;outline-offset:4px}
.skip-link{position:fixed;left:20px;top:-80px;z-index:20;background:var(--lime);color:var(--dark);padding:12px 18px;border-radius:8px}.skip-link:focus{top:12px}
.brandmark{background:transparent url('/bagworkpay-mark.png') center/contain no-repeat;border-radius:0}.token-avatar img{filter:brightness(0) saturate(100%) invert(21%) sepia(54%) saturate(594%) hue-rotate(94deg);border:0;background:transparent}.header nav{white-space:nowrap}.header .pill{font-size:10px;padding:8px 10px}.nav-right{gap:12px}.draft-item>div{min-width:0;overflow-wrap:anywhere}.draft-item small{white-space:pre-wrap}.workspace-panel,.calc-panel{min-width:0}.form-status{min-height:2.5em;line-height:1.5}.input-suffix input{padding-right:38px}.hero .eyebrow{line-height:1.5}
#how,#split,#workspace{scroll-margin-top:28px}
dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:28px;border:1px solid #486550;border-radius:18px;color:var(--ink);background:#102a21;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#00160fbb;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head h2{font-size:26px;letter-spacing:-.05em;margin:0}.dialog-close{background:none;border:1px solid #52735e;border-radius:8px;color:var(--ink);width:36px;height:36px;font-size:25px}dialog p{color:#bed0c1;font-size:14px;line-height:1.6;margin:18px 0}.wallet-options{display:grid;gap:10px}.wallet-option{display:flex;justify-content:space-between;align-items:center;background:#1c3d2e;color:var(--ink);border:1px solid #597760;border-radius:10px;padding:18px;text-align:left}.wallet-option:hover{border-color:var(--lime)}.wallet-option span{color:var(--lime);font-size:13px}.wallet-help{font-size:12px}.wallet-help a{color:var(--lime);text-decoration:underline}#wallet-status{min-height:1em}
@media(min-width:901px) and (max-width:1150px){.header .pill{display:none}.header nav{gap:20px}.header{gap:18px}.brand{font-size:20px}}
@media(max-width:900px){.header{height:72px}.header nav,.nav-right .pill,.nav-right>.wallet-button{display:none}.menu-button{display:inline-flex;border:1px solid #5f7b68;border-radius:8px;background:none;color:var(--ink);padding:10px 13px;font-size:13px;font-weight:700}.mobile-nav{display:none;position:absolute;z-index:5;top:72px;left:0;right:0;padding:22px;background:#102a21;border-bottom:1px solid var(--line);box-shadow:0 16px 25px #0005}.mobile-nav.open{display:flex;flex-direction:column;gap:18px}.mobile-nav a{min-height:32px;display:flex;align-items:center}.mobile-nav .button{align-self:start}}
@media(min-width:901px){.mobile-nav.open{display:none}}
@media(max-width:420px){.card-top{font-size:10px}.card-row{font-size:12px}.card-foot{font-size:10px}.result{align-items:start;flex-direction:column}.panel-head{gap:10px}.panel-head span{font-size:9px;white-space:nowrap}.calc-panel{padding:22px}.draft-item{flex-direction:column;gap:8px}.hero h1{font-size:clamp(43px,13vw,60px)}.hero{padding-top:50px}.showcase:before{left:-8px;right:10px}.card{transform:rotate(1deg)}}
