:root {
    --ink: #102019;
    --muted: #66726c;
    --green: #12ad61;
    --green-dark: #087441;
    --green-soft: #dff8e9;
    --cream: #f5f7f2;
    --line: #dce4dd;
    --white: #fff;
    --dark: #071a10;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #fbfcfa; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,252,250,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(16,32,25,.07); }
.nav-shell { width: min(1180px, calc(100% - 40px)); height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: white; background: var(--green); font-size: 15px; box-shadow: 0 7px 18px rgba(18,173,97,.25); }
.brand-mark svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.desktop-nav { display: flex; gap: 34px; margin-left: 80px; }
.desktop-nav a, .login-link { color: #526058; font-size: 14px; font-weight: 550; text-decoration: none; transition: color .2s; }
.desktop-nav a:hover, .login-link:hover { color: var(--green-dark); }
.nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-cta { padding: 10px 18px; border-radius: 9px; background: var(--ink); color: white; font-size: 13px; font-weight: 700; text-decoration: none; }

.checkout-notice { width: min(1120px, calc(100% - 40px)); margin: 18px auto -18px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; position: relative; z-index: 3; }
.checkout-notice > span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.checkout-notice div { flex: 1; }
.checkout-notice a { font-weight: 750; }
.checkout-notice.success { background: #ecfbf2; border-color: #afe6c6; color: #16643c; }
.checkout-notice.success > span { color: white; background: var(--green); }
.checkout-notice.error { background: #fff3f2; border-color: #f0c1bd; color: #8a3028; }
.checkout-notice.error > span { color: white; background: #d8584e; }
.checkout-notice.neutral { background: #f5f6f3; color: #526058; }
.checkout-notice.neutral > span { background: #dfe4df; }

.hero { min-height: 710px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 32px; width: min(1240px, calc(100% - 48px)); margin: auto; padding: 76px 0 88px; position: relative; overflow: visible; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; }
.glow-one { width: 500px; height: 500px; right: 4%; top: 8%; background: radial-gradient(circle, rgba(117,235,164,.2), transparent 68%); }
.glow-two { width: 300px; height: 300px; left: -17%; bottom: -2%; background: radial-gradient(circle, rgba(18,173,97,.08), transparent 70%); }
.hero-copy { padding-left: 28px; position: relative; z-index: 2; }
.eyebrow, .section-kicker { color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.eyebrow span { width: 27px; height: 1px; background: var(--green); }
.hero h1 { max-width: 620px; font-size: clamp(46px, 5.3vw, 74px); line-height: .99; letter-spacing: -4.5px; font-weight: 760; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-lead { max-width: 510px; margin-top: 25px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 32px; }
.primary-btn { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 32px; padding: 15px 21px; border-radius: 9px; background: var(--green); color: white; text-decoration: none; font-size: 14px; font-weight: 750; box-shadow: 0 12px 28px rgba(18,173,97,.2); transition: transform .2s, box-shadow .2s, background .2s; }
.primary-btn:hover { transform: translateY(-2px); background: #0f9c57; box-shadow: 0 16px 32px rgba(18,173,97,.28); }
.primary-btn span { font-size: 20px; line-height: 1; }
.text-btn { display: inline-flex; align-items: center; gap: 10px; color: #34443b; font-size: 13px; font-weight: 700; text-decoration: none; }
.play { width: 31px; height: 31px; display: grid; place-items: center; padding-left: 2px; border: 1px solid #ccd6cf; border-radius: 50%; color: var(--green); font-size: 9px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 42px; }
.mini-faces { display: flex; }
.mini-faces span { width: 31px; height: 31px; margin-left: -7px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: #dff5e8; color: var(--green-dark); font-size: 9px; font-weight: 800; }
.mini-faces span:first-child { margin-left: 0; background: #154e31; color: white; }
.mini-faces span:last-child { background: var(--green); color: white; }
.hero-proof p { color: #839087; font-size: 11px; line-height: 1.5; }
.hero-proof strong { color: #405047; }

.product-stage { position: relative; perspective: 1400px; min-width: 0; }
.app-window { overflow: hidden; border: 1px solid rgba(15,58,36,.12); border-radius: 13px; background: white; box-shadow: 0 35px 80px rgba(17,52,34,.17), 0 4px 18px rgba(17,52,34,.08); transform: rotateY(-2deg) rotateX(1deg); }
.window-top { height: 45px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8ede8; }
.window-brand { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.tiny-logo { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 5px; background: var(--green); color: white; font-size: 8px; }
.window-dots { display: flex; align-items: center; gap: 8px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #edf1ee; }
.window-dots b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #184d32; color: white; font-size: 7px; }
.window-body { height: 414px; display: flex; background: #f7f9f6; }
.mock-nav { width: 49px; padding: 19px 0; display: flex; flex-direction: column; align-items: center; gap: 15px; background: #0b2919; color: #7b9b88; font-size: 11px; }
.mock-nav span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; }
.mock-nav span.active { color: #60e798; background: rgba(71,224,134,.12); }
.mock-nav span:last-child { margin-top: auto; }
.mock-main { flex: 1; min-width: 0; padding: 27px 25px; }
.mock-heading { display: flex; justify-content: space-between; align-items: center; }
.mock-heading small { color: #8b978f; font-size: 6px; letter-spacing: 1px; }
.mock-heading h3 { margin-top: 3px; font-size: 17px; letter-spacing: -.5px; }
.mock-heading > span { padding: 7px 9px; border: 1px solid #e2e8e3; border-radius: 6px; background: white; color: #758078; font-size: 7px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 19px; }
.metric-grid article { min-width: 0; padding: 14px 13px; border: 1px solid #e7ece7; border-radius: 8px; background: white; }
.metric-grid small { display: block; color: #89948c; font-size: 5px; letter-spacing: .7px; white-space: nowrap; }
.metric-grid strong { display: block; margin: 5px 0 3px; font-size: 14px; letter-spacing: -.5px; }
.metric-grid span { font-size: 6px; color: #8a958d; }
.metric-grid .down, .metric-grid .up { color: var(--green-dark); }
.chart-row { display: grid; grid-template-columns: 1.7fr .85fr; gap: 9px; margin-top: 9px; }
.chart-card, .categories-card { height: 203px; padding: 15px; border: 1px solid #e7ece7; border-radius: 8px; background: white; }
.card-title { display: flex; justify-content: space-between; font-size: 8px; }
.card-title small { color: #929c95; font-size: 6px; }
.chart { height: 145px; margin-top: 10px; position: relative; border-bottom: 1px solid #edf0ed; background: repeating-linear-gradient(to bottom, #edf1ed 0, #edf1ed 1px, transparent 1px, transparent 43px); }
.chart svg { width: calc(100% - 23px); height: 112px; margin-left: 23px; overflow: visible; }
.chart .line { fill: none; stroke: #16b665; stroke-width: 2.5; }
.chart .area { fill: url(#fill); }
.axis { position: absolute; left: 0; color: #adb5af; font-size: 5px; }
.axis.a1 { top: -3px; }.axis.a2 { top: 42px; }.axis.a3 { bottom: 8px; }
.chart-labels { position: absolute; left: 23px; right: 0; bottom: -3px; display: flex; justify-content: space-between; color: #a0aaa3; font-size: 5px; }
.categories-card > strong { display: block; font-size: 8px; }
.donut { width: 88px; height: 88px; margin: 17px auto 10px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#17b967 0 58%, #8ee0af 58% 82%, #d7eee0 82%); position: relative; }
.donut::after { content: ''; position: absolute; inset: 13px; background: white; border-radius: 50%; }
.donut span { z-index: 1; color: #9aa39d; text-align: center; font-size: 6px; }
.donut b { display: block; color: var(--ink); font-size: 12px; }
.legend { display: flex; justify-content: center; gap: 8px; color: #8c978f; font-size: 5px; }
.legend i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #17b967; margin-right: 2px; }
.legend span:nth-child(2) i { background: #8ee0af; }.legend span:nth-child(3) i { background: #d7eee0; }
.float-pill { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #e4eae5; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(17,52,34,.13); }
.float-pill small { display: block; color: #8b978f; font-size: 7px; }
.float-pill strong { display: block; font-size: 10px; white-space: nowrap; }
.pill-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #e5faed; color: var(--green); font-weight: 800; }
.pill-saved { top: -34px; right: 19px; }
.pill-scan { left: -24px; bottom: -28px; }
.pill-scan .check { margin-left: 15px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--green); font-size: 8px; }

.trust-strip { padding: 24px max(24px, calc((100% - 1120px)/2)); display: flex; justify-content: space-between; align-items: center; background: #eef3ee; border-top: 1px solid #e4e9e4; border-bottom: 1px solid #e4e9e4; }
.trust-strip p { color: #8a958e; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; }
.trust-strip div { display: flex; gap: 42px; color: #5d6962; font-size: 11px; font-weight: 650; }
.trust-strip div span::first-letter { color: var(--green); }

.section { width: min(1120px, calc(100% - 44px)); margin: auto; padding: 110px 0; }
.section-intro { max-width: 670px; }
.section-intro.centered { margin: auto; text-align: center; }
.section h2, .final-cta h2 { margin-top: 13px; font-size: clamp(34px, 4vw, 48px); line-height: 1.12; letter-spacing: -2.3px; }
.section-intro > p { margin-top: 15px; color: var(--muted); font-size: 15px; }
.steps { display: grid; grid-template-columns: 1fr 54px 1fr 54px 1fr; align-items: center; margin-top: 62px; }
.steps article { align-self: stretch; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: white; position: relative; }
.step-number { position: absolute; top: 19px; right: 22px; color: #d3dbd5; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.step-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 10px; background: var(--green-soft); color: var(--green-dark); font-size: 21px; }
.steps h3 { font-size: 16px; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.step-line { color: #b7c2ba; text-align: center; font-size: 18px; }

.features { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.features h2 em { color: var(--green); font-style: normal; }
.feature-copy > p { margin-top: 20px; color: var(--muted); font-size: 14px; }
.feature-copy ul { margin-top: 30px; list-style: none; display: grid; gap: 20px; }
.feature-copy li { display: flex; gap: 13px; align-items: flex-start; }
.feature-copy li > span { width: 20px; height: 20px; flex: none; display: grid; place-items: center; margin-top: 2px; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 800; }
.feature-copy li strong { display: block; font-size: 13px; }
.feature-copy li small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.feature-visual { min-height: 430px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #dcf6e6, #edf4ee 64%); position: relative; }
.receipt-card { width: 78%; padding: 22px; border: 1px solid #e3e9e4; border-radius: 13px; background: white; box-shadow: 0 24px 50px rgba(27,72,46,.12); transform: rotate(1.5deg); }
.receipt-head, .store, .receipt-items span, .receipt-foot { display: flex; align-items: center; justify-content: space-between; }
.receipt-head { padding-bottom: 16px; border-bottom: 1px solid #edf0ed; }
.receipt-head div { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.receipt-head div span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 8px; }
.receipt-head small { color: #96a098; font-size: 7px; }
.store { padding: 20px 0; justify-content: flex-start; gap: 10px; }
.store-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #18623d; background: #dff5e7; font-weight: 800; }
.store div:nth-child(2) strong { display: block; font-size: 10px; }.store div:nth-child(2) small { display: block; color: #8d9890; font-size: 7px; }
.store > b { margin-left: auto; font-size: 13px; }
.receipt-items { display: grid; gap: 8px; padding: 15px; border-radius: 8px; background: #f7f9f6; color: #748078; font-size: 8px; }
.receipt-items b { color: #405047; }
.receipt-foot { margin-top: 17px; color: #708078; font-size: 8px; }.receipt-foot strong { color: var(--green-dark); font-size: 12px; }
.stock-bubble { position: absolute; right: 3%; bottom: 42px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 9px; background: white; box-shadow: 0 12px 30px rgba(27,72,46,.13); }
.stock-bubble > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #fff1d9; color: #cb8614; font-weight: 800; }
.stock-bubble strong { display: block; font-size: 9px; }.stock-bubble small { display: block; color: #8c9890; font-size: 6px; }

.price-section { width: 100%; max-width: none; padding-left: max(22px, calc((100% - 900px)/2)); padding-right: max(22px, calc((100% - 900px)/2)); background: #f1f5f0; }
.pricing-grid { max-width: 900px; margin: 46px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.price-card { border: 1px solid #cbd9ce; border-radius: 15px; background: white; box-shadow: 0 20px 60px rgba(30,67,45,.09); position: relative; }
.pro-card { border-color: #82cba0; box-shadow: 0 22px 60px rgba(18,173,97,.13); }
.popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 20px; background: var(--green); color: white; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; }
.price-top { padding: 35px 30px 27px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid #e6ebe7; }
.price-top > div:first-child span { font-size: 18px; font-weight: 800; }.price-top p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.price { display: flex; align-items: baseline; gap: 5px; }.price sup { font-size: 28px; font-weight: 800; letter-spacing: -1.5px; }.price span { color: var(--muted); font-size: 10px; }
.price-content { padding: 28px 30px 30px; display: flex; min-height: 295px; flex-direction: column; gap: 28px; }
.price-content ul { list-style: none; display: grid; gap: 12px; color: #48574e; font-size: 10px; }
.price-content li::first-letter { color: var(--green); }
.purchase { margin-top: auto; }
.buy-btn { width: 100%; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; color: white; background: var(--green); cursor: pointer; font-size: 12px; font-weight: 750; text-decoration: none; transition: background .2s, transform .2s; }
.free-button { color: var(--green-dark); background: var(--green-soft); }
.free-button:hover { color: white; }
.buy-btn:hover { background: #0e9b56; transform: translateY(-1px); }.buy-btn span { font-size: 18px; }.buy-btn.disabled { justify-content: center; background: #9ca8a0; cursor: not-allowed; transform: none; }
.purchase p { margin-top: 10px; color: #89948d; font-size: 7px; text-align: center; }.purchase p span { color: var(--green-dark); }
.price-note { margin-top: 22px; color: #7d8981; font-size: 9px; text-align: center; }

.final-cta { width: min(1120px, calc(100% - 44px)); margin: 95px auto; padding: 54px 62px; display: flex; align-items: center; justify-content: space-between; border-radius: 18px; overflow: hidden; color: white; background: radial-gradient(circle at 78% -70%, #2c8958, transparent 48%), var(--dark); position: relative; }
.final-cta::after { content: ''; position: absolute; width: 330px; height: 330px; right: -80px; top: -150px; border: 1px solid rgba(95,233,150,.17); border-radius: 50%; box-shadow: 0 0 0 50px rgba(95,233,150,.04), 0 0 0 100px rgba(95,233,150,.025); }
.final-cta > div, .final-cta > a { position: relative; z-index: 2; }
.final-cta .section-kicker { color: #63e49a; }.final-cta h2 { margin-top: 7px; font-size: 34px; }.final-cta p { margin-top: 7px; color: #9bb0a3; font-size: 12px; }
.primary-btn.light { color: #0f3824; background: white; box-shadow: none; }.primary-btn.light:hover { background: #ecfff3; }

footer { width: min(1120px, calc(100% - 44px)); margin: auto; padding: 30px 0; }
.footer-main { min-height: 80px; display: flex; align-items: center; gap: 28px; }.footer-main p { color: #87928b; font-size: 10px; }.footer-main > a:last-child { margin-left: auto; color: var(--green-dark); font-size: 11px; font-weight: 750; text-decoration: none; }
.footer-bottom { padding: 18px 0 30px; display: flex; justify-content: space-between; border-top: 1px solid #e7ebe7; color: #a0a9a3; font-size: 8px; }

@media (max-width: 980px) {
    .desktop-nav { display: none; }
    .hero { grid-template-columns: 1fr; gap: 78px; padding-top: 75px; }
    .hero-copy { max-width: 690px; padding-left: 0; text-align: center; margin: auto; }
    .hero-copy .eyebrow, .hero-actions, .hero-proof { justify-content: center; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .product-stage { width: min(720px, 92%); margin: auto; }
    .trust-strip { align-items: flex-start; gap: 25px; }.trust-strip div { flex-wrap: wrap; gap: 16px 28px; justify-content: flex-end; }
    .features { grid-template-columns: 1fr; gap: 55px; }.feature-copy { max-width: 680px; }.feature-visual { max-width: 680px; width: 100%; margin: auto; }
}

@media (max-width: 700px) {
    .nav-shell { width: min(100% - 28px, 1180px); height: 65px; }.login-link { display: none; }.nav-actions { gap: 0; }.nav-cta { padding: 9px 13px; }
    .checkout-notice { align-items: flex-start; flex-wrap: wrap; }.checkout-notice a { margin-left: 36px; }
    .hero { width: min(100% - 30px, 1240px); padding: 60px 0 70px; gap: 65px; }.hero h1 { letter-spacing: -3px; }.hero-lead { font-size: 15px; }.hero-actions { flex-direction: column; gap: 18px; }.primary-btn { width: 100%; max-width: 310px; }
    .product-stage { width: 100%; }.app-window { transform: none; }.window-body { height: 335px; }.mock-main { padding: 18px 13px; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric-grid article:last-child { display: none; }.chart-row { grid-template-columns: 1fr; }.categories-card { display: none; }.chart-card { height: 180px; }.pill-saved { right: 5px; }.pill-scan { left: 5px; }
    .trust-strip { display: block; text-align: center; }.trust-strip div { margin-top: 14px; justify-content: center; }
    .section { padding: 80px 0; }.steps { grid-template-columns: 1fr; gap: 14px; }.step-line { transform: rotate(90deg); height: 20px; }
    .features { gap: 42px; }.feature-visual { min-height: 370px; }.receipt-card { width: 88%; }.stock-bubble { right: -2%; bottom: 22px; }
    .pricing-grid { grid-template-columns: 1fr; }.price-top { align-items: flex-start; gap: 20px; }.price-top, .price-content { padding-left: 24px; padding-right: 24px; }.price-content { min-height: 0; gap: 28px; }.price { flex-wrap: wrap; justify-content: flex-end; }
    .final-cta { padding: 43px 25px; flex-direction: column; align-items: flex-start; gap: 28px; }.final-cta .primary-btn { width: auto; }
    .footer-main { flex-wrap: wrap; }.footer-main p { width: 100%; order: 3; }.footer-bottom { flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }