:root{--bg:#F7F8F9;--panel:#FFFFFF;--line:#E3E7EA;--ink:#0F1B24;--muted:#56626C;--blue:#05AAE3;--blueText:#0787B8;--green:#93C04B;--amber:#F8BC3A;--chip:#EEF2F5;--faint:#05AAE31A;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0B1620;--panel:#111F2B;--line:#1E3242;--ink:#F2F6F9;--muted:#93A6B5;--blueText:#5CC8F0;--chip:#172A39;--faint:#05AAE314}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--blueText)}a:hover{color:var(--blue)}
h1,h2,h3,.display{font-family:'Sora',sans-serif;font-weight:500;letter-spacing:-.025em;margin:0}
p{margin:0}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.muted{color:var(--muted)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;font:500 15px 'Geist',sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#04202D}.btn-primary:hover{color:#04202D;filter:brightness(1.06)}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--ink)}.btn-ghost:hover{color:var(--ink);border-color:var(--muted)}
.btn-ink{background:var(--ink);color:var(--bg);min-height:36px;font-size:14px}.btn-ink:hover{color:var(--bg)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.chip{background:var(--chip);border-radius:8px;padding:6px 10px}
/* header */
.site-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand:hover{color:var(--ink)}
.brand span{font-family:'Sora',sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em}
.site-nav{display:flex;align-items:center;gap:24px;font-size:14px}
.site-nav a{color:var(--muted);text-decoration:none}.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink)}
.site-nav .btn-ink{color:var(--bg)}
.bg-chain{position:absolute;left:50%;margin-left:-800px;pointer-events:none;z-index:0}
.bg-chain line,.bg-chain polyline{stroke:var(--faint)}.bg-chain circle{fill:var(--faint)}
main{position:relative;z-index:1}
footer{border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.footer-inner{padding-top:32px;padding-bottom:40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--ink)}
/* home */
.hero{padding-top:72px;padding-bottom:48px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between}
.hero h1{font-size:60px;line-height:1.05;letter-spacing:-.035em;max-width:680px}
.hero-side{max-width:380px;display:flex;flex-direction:column;gap:20px}
.hero-side p{font-size:17px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.app-shot{border-radius:18px;box-shadow:0 30px 80px -40px #0F1B2459;overflow:hidden;display:flex}
.app-side{flex:0 0 200px;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.app-side div{padding:8px 10px;border-radius:8px}.app-side .on{background:var(--chip);color:var(--ink)}.app-side .co{color:var(--ink);font-weight:500;padding-bottom:12px}
.app-main{flex:1;min-width:0;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.app-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.app-tools{display:flex;gap:8px;font-size:13px}.app-tools span{border:1px solid var(--line);border-radius:8px;padding:7px 12px;color:var(--muted)}.app-tools .new{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.table-scroll{overflow-x:auto}
.po-table{min-width:640px;font-size:14px}
.po-row{display:grid;grid-template-columns:150px 1fr 1fr 110px 150px;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.po-row.head{padding:8px 0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.po-row .r{text-align:right}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px}.status .dot{width:8px;height:8px}
.section{padding-bottom:96px}
.bill{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:48px}
.bill h2{font-size:32px;max-width:520px;line-height:1.2}
.bill-nums{display:flex;align-items:center;gap:14px;font-size:14px;flex-wrap:wrap}
.bill-nums .old{border:1px dashed var(--line);border-radius:8px;padding:10px 14px;color:var(--muted);text-decoration:line-through}
.bill-nums .chip{padding:10px 14px}
.section-title{font-size:40px;letter-spacing:-.03em;text-align:center;line-height:1.15;margin-bottom:32px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:16px}
.feature{padding:24px;display:flex;flex-direction:column;gap:20px}
.feature h3{font-size:20px;margin-top:6px;letter-spacing:-.01em}
.small{padding:24px;display:flex;flex-direction:column;gap:10px}.small h3{font-size:18px;letter-spacing:-.01em}.small p{color:var(--muted);font-size:15px}
.inset{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.reserve{display:flex;gap:6px;flex-wrap:wrap;font-size:13px}.reserve .used{background:var(--blue);color:#04202D}
.scan{display:flex;gap:16px;align-items:center}
.scan-photo{flex:1;height:150px;border-radius:12px;background:var(--chip)}
.scan-photo polygon{fill:var(--panel)}
.pdf{width:104px;height:140px;border-radius:6px;background:var(--panel);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:6px}
.pdf i{display:block;height:4px;background:var(--line)}.pdf i:first-child{height:6px;width:60%;background:var(--ink);border-radius:2px}
.pdf small{margin-top:auto;font-size:10px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{border-top:2px solid;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.step h3{font-size:18px;letter-spacing:-.01em}.step p{color:var(--muted);font-size:15px}
.quote{padding:48px 32px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.quote p{font-family:'Sora',sans-serif;font-size:26px;line-height:1.35;letter-spacing:-.01em;max-width:760px}
.cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta h2{font-size:44px;letter-spacing:-.03em;line-height:1.1}
/* pricing */
.page-head{padding-top:64px;padding-bottom:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.page-head h1{font-size:48px;letter-spacing:-.03em;line-height:1.1}
.page-head p{font-size:17px;max-width:540px}
.toggle{display:inline-flex;background:var(--chip);border-radius:999px;padding:4px;margin-top:8px}
.toggle button{min-height:40px;padding:0 18px;border:0;border-radius:999px;font:500 14px 'Geist',sans-serif;cursor:pointer;background:transparent;color:var(--ink)}
.toggle button[aria-pressed=true]{background:var(--panel)}
.price-grid{display:flex;flex-wrap:wrap;gap:16px;padding-bottom:64px}
.plan{flex:1 1 420px;border:2px solid var(--blue);padding:32px;display:flex;flex-direction:column;gap:22px;border-radius:18px}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.big{font-family:'Sora',sans-serif;font-size:52px;letter-spacing:-.03em}
.calc{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px}
.calc label{display:flex;justify-content:space-between;font-size:14px}
.calc input{width:100%;accent-color:#05AAE3;height:44px}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.calc-total strong{font-family:'Sora',sans-serif;font-weight:500;font-size:22px}
.saving{font-size:13px;color:var(--blueText)}
.side{flex:1 1 360px;display:flex;flex-direction:column;gap:16px}
.includes{padding:28px;display:flex;flex-direction:column;gap:12px;font-size:15px;border-radius:18px}
.includes div{display:flex;gap:10px;align-items:center}.includes .dot{width:7px;height:7px;background:var(--blue)}
.note{padding:24px;display:flex;gap:14px;border-radius:18px}.note .dot{margin-top:6px}
.note h3{font-size:17px;letter-spacing:-.01em}.note p{color:var(--muted);font-size:14px}
.faq{max-width:760px;padding-bottom:96px}
.faq h2{font-size:28px;margin-bottom:16px}
details{border-top:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:500}
details p{margin-top:10px;color:var(--muted);font-size:15px}
/* login */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px;position:relative;overflow:hidden}
.login-box{position:relative;z-index:1;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:28px}
.login form{width:100%;padding:28px;display:flex;flex-direction:column;gap:16px}
.login h1{font-size:22px}
.login label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.login input{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:15px 'Geist',sans-serif;background:var(--bg);color:var(--ink)}
.login input:focus{outline:2px solid var(--blue);outline-offset:1px}
@media (max-width:720px){.hide-sm{display:none}.hero h1{font-size:40px}.section-title,.cta h2{font-size:32px}.page-head h1{font-size:36px}.site-nav{gap:16px}}
/* pwa */
.pwa{padding:48px;display:flex;flex-wrap:wrap;gap:48px;align-items:center;border-radius:18px}
.pwa-copy{flex:1 1 420px;display:flex;flex-direction:column;gap:20px}
.pwa-copy h2{font-size:36px;line-height:1.15;letter-spacing:-.03em}
.pwa-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pwa-steps li{display:flex;gap:14px;align-items:flex-start}
.pwa-steps li>span{width:28px;height:28px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.pwa-steps div{display:flex;flex-direction:column;font-size:15px}
.pwa-steps strong{font-weight:500}
.pwa-tags{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.phone{flex:0 0 260px;margin:0 auto;height:520px;border:10px solid var(--ink);border-radius:40px;background:var(--bg);padding:28px 16px 20px}
.phone-screen{height:100%;display:flex;flex-direction:column;gap:10px}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.phone-field{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;display:flex;flex-direction:column}
.phone-field small{font-size:11px}
.phone-off{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:auto}
.phone-btn{background:var(--blue);color:#04202D;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:15px}
@media (max-width:720px){.pwa{padding:28px 20px}.pwa-copy h2{font-size:28px}}
/* branded PO compare */
.brand-pick{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;font-size:14px}
.brand-pick button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:500 14px 'Geist',sans-serif;cursor:pointer}
.brand-pick button[aria-pressed=true]{border-color:var(--ink)}
.compare{--x:50%;position:relative;max-width:820px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -40px #0F1B2480;border:1px solid var(--line);user-select:none;touch-action:pan-y}
.compare{aspect-ratio:8.5/11;max-width:640px;--s:1}
.po-doc{position:absolute;top:0;left:0;width:612px;height:792px;transform:scale(var(--s));transform-origin:0 0;background:#fff;color:#222;font:9.5px/1.35 Helvetica,Arial,sans-serif;padding:36px 36px 40px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.pd-head{display:flex;justify-content:space-between;margin-bottom:18px}
.pd-co{display:flex;flex-direction:column;max-width:260px;color:#555}.pd-co svg{width:48px;height:48px;margin-bottom:6px}.pd-co strong{color:#222;font-size:16px;font-weight:400;margin-bottom:4px}.pd-co span{margin-bottom:1.5px}
.pd-title{display:flex;flex-direction:column;align-items:flex-end}.pd-title b{font-size:26px;margin-bottom:10px}
.pd-title div{display:flex}.pd-title span{width:70px;text-align:right;padding:3px 6px 3px 0}.pd-title em{font-style:normal;width:110px;border:.75px solid #bbb;text-align:center;padding:3px 0}
.pd-two{display:flex;gap:24px;margin-bottom:14px}.pd-two>div{flex:1}
.pd-bar{font-weight:700;padding:4px 8px}
.pd-box{padding:4px 8px;line-height:1.5}
.pd-info{width:100%;border:.75px solid #999;border-collapse:collapse;margin-bottom:14px;table-layout:fixed}
.pd-info th{font-weight:700;padding:4px 5px}.pd-info td{text-align:center;padding:4px 5px;border-right:.5px solid #ccc;height:18px}
.pd-items{flex:1;border:.75px solid #999}
.pd-items table{width:100%;border-collapse:collapse}.pd-items th{font-weight:700;padding:4px 5px}
.pd-items td{padding:4px 5px;border-right:.5px solid #ccc}.pd-items td:last-child{border-right:0}.pd-items .c{text-align:center}.pd-items .r{text-align:right}
.pd-foot{display:flex;gap:24px;margin-top:12px}
.pd-notes{flex:1;border:.75px solid #999}.pd-notes .pd-bar{border-bottom:.75px solid #999}.pd-notes p{margin:0;padding:6px;min-height:50px;line-height:1.4}
.pd-totals{width:200px}.pd-totals div{display:flex;justify-content:space-between;padding:3px 0}
.pd-total{border-top:1px solid #333;margin-top:4px;padding-top:5px !important;font-weight:700}.pd-total span:last-child{padding:2px 6px}
.pd-thanks{text-align:center;margin:20px 0 0;color:#444}
.pd-page{position:absolute;bottom:20px;right:36px;font-size:7px;color:#999}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.compare-handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0004}
.compare{cursor:ew-resize}#compare-range{position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
#compare-range:focus-visible+.x{outline:none}
.compare:focus-within .compare-handle span{outline:3px solid var(--blue);outline-offset:2px}
/* background layer: clipped in its own box so it can never widen the page (iOS Safari ignores overflow on html/body) */
body{position:relative}
.bg-layer{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-v{display:none}
@media (max-width:720px){.bg-h{display:none}.bg-v{display:block;left:auto;right:-60px;margin-left:0;top:120px}}
/* scroll effects (only when JS adds .fx and motion is allowed) */
.fx .rv{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1)}
.fx .rv.in{opacity:1;transform:none;filter:none}
.fx [data-highlight] .w{color:var(--muted);opacity:.45;transition:opacity .25s,color .25s}
.fx [data-highlight] .w.lit{color:var(--ink);opacity:1}
.fx .step{border-top-color:var(--line) !important;position:relative}
.fx .step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:calc(var(--fill,0)*100%);background:var(--c,#05AAE3)}
/* background circles: solid tint so the line stops at their edge */
:root{--faint-solid:#DFF0F7}
@media (prefers-color-scheme:dark){:root{--faint-solid:#0D2533}}
.bg-chain circle{fill:var(--faint-solid)}
/* offline reserve chips */
.reserve .chip{transition:background .35s,color .35s,box-shadow .35s}
.reserve .pending{background:#05AAE326;color:var(--ink);box-shadow:inset 0 0 0 1px #05AAE380}
/* copier glow behind the scanner card */
.scan-card{position:relative;isolation:isolate}
.scan-photo{position:relative;overflow:hidden}
/* scanner card: a thin copier lamp passes behind it once, showing just above and below the card */
.scan-wrap{position:relative;isolation:isolate;display:flex;flex-direction:column}
.scan-wrap .scan-card{position:relative;z-index:1;flex:1}
.scan-light{position:absolute;z-index:0;left:8%;right:8%;top:-7px;bottom:-7px;overflow:hidden;pointer-events:none;border-radius:12px}
.scan-light::before{content:"";position:absolute;top:0;bottom:0;width:26%;left:-26%;background:linear-gradient(90deg,#05AAE300,#05AAE3B3 35%,#BFF0FF 50%,#05AAE3B3 65%,#05AAE300);filter:blur(3px);opacity:0}
.fx .scan-wrap.lit .scan-light::before{animation:lamp 4.4s ease-in-out .3s 2 alternate both}
@keyframes lamp{0%{left:-26%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:.0}}
@media (prefers-reduced-motion:reduce){.scan-light{display:none}}
/* hamburger */
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.site-header{flex-wrap:wrap}
.site-header.collapsed{flex-wrap:nowrap}
.site-header.collapsed .menu-btn{display:inline-flex}
.site-header.collapsed .site-nav{display:none;position:absolute;top:100%;left:16px;right:16px;flex-direction:column;align-items:stretch;gap:4px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px -20px #0F1B2459;z-index:20}
.site-header.collapsed.open .site-nav{display:flex}
.site-header.collapsed .site-nav a{padding:12px 12px;border-radius:8px;font-size:16px;color:var(--ink)}
.site-header.collapsed .site-nav a:hover{background:var(--chip)}
.site-header.collapsed .site-nav .btn-ink{margin-top:6px;color:var(--bg);justify-content:center}
.site-header.collapsed .site-nav .btn-ink:hover{background:var(--ink)}
.grid4{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.receipts-plan{padding:32px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;border-radius:18px}
.ex-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
.ex-facts li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)}
.ex-facts strong{color:var(--ink);font-weight:500}
.referral{padding:28px 32px;display:flex;flex-wrap:wrap;gap:24px;border-radius:18px}