:root{--ink:#17342d;--muted:#657971;--paper:#f7faf6;--white:#fff;--green:#1f6b4d;--green-dark:#124432;--line:#dce9df;--mint:#e8f4eb;--mint-2:#d9eee0;--peach:#fff0e5;--shadow:0 20px 55px rgba(23,52,45,.10);--content:1120px;--body:'DM Sans',Arial,sans-serif;--display:'Manrope','DM Sans',Arial,sans-serif;--fs-h1:clamp(34px,4.7vw,58px);--fs-h2:clamp(25px,3.3vw,40px);--fs-h3:19px;--fs-lead:18px;--fs-nav:13.5px;--track-display:-.032em;--track-tight:-.014em}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.section-wrap{width:100%;padding-inline:16px;margin-inline:0}.section{padding-block:92px}.tinted{background:linear-gradient(135deg,#eef7ef 0%,#f7faf6 78%)}
.site-header{height:82px;position:sticky;top:0;z-index:20;background:rgba(247,250,246,.93);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,52,45,.10);display:flex;align-items:center;justify-content:space-between;padding-inline:16px}.brand{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--display);letter-spacing:-.024em;color:var(--green-dark)}.brand>span:last-child>span{color:#70a26f}.brand-mark{width:29px;height:29px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-8deg)}.brand-mark i{display:block;border-radius:6px 6px 2px 6px;background:var(--green)}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#e09a66}.site-header nav{display:flex;align-items:center;gap:22px;color:#4d685c;font-size:var(--fs-nav);font-weight:600;letter-spacing:.01em;flex-wrap:nowrap;min-width:0}.site-header nav a[aria-current="page"]{color:var(--green-dark);border-bottom:2px solid var(--green);padding-bottom:2px}
.site-header nav a{white-space:nowrap}
@media(max-width:1120px){.site-header nav{gap:14px;font-size:12.5px;overflow-x:auto;scrollbar-width:none}.site-header nav::-webkit-scrollbar{display:none}}.site-header nav a:not(.nav-cta):hover{color:var(--green)}.nav-cta{padding:10px 15px;border:1px solid #cce0d2;border-radius:9px;background:var(--white);color:var(--green-dark);transition:.2s}.nav-cta:hover{background:var(--green);color:#fff;border-color:var(--green)}
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center;padding-top:76px;padding-bottom:82px}.eyebrow{margin:0 0 14px;color:#4f7160;font-size:11.5px;font-weight:700;letter-spacing:.117em;text-transform:uppercase}.hero h1,.section-heading h2,.callout h2{font:800 var(--fs-h1)/1.12 var(--display);letter-spacing:var(--track-display);margin:0 0 20px;color:var(--green-dark)}.lead{max-width:610px;color:var(--muted);font-size:18px;line-height:1.65}.hero-actions,.button-row,.auth-actions,.account-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hero-actions{margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 17px;border:1px solid transparent;border-radius:9px;font-size:13px;font-weight:700;transition:.2s}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(31,107,77,.16)}.button.primary:hover{background:var(--green-dark)}.button.secondary{background:#fff;border-color:#cfe1d4;color:var(--green-dark)}.button.secondary:hover{border-color:#8dbb9a;background:var(--mint)}.text-button{border:0;background:none;color:var(--green);font-weight:700;padding:5px 0}.fine-print{max-width:560px;margin-top:21px;color:#789086;font-size:12px}.hero-card{padding:23px 24px 20px;border:1px solid #d8e8dc;border-radius:22px;background:#fff;box-shadow:var(--shadow);transform:rotate(1.5deg)}.hero-card-top{display:flex;align-items:center;gap:7px;color:#859a8f}.dot{width:8px;height:8px;border-radius:50%;background:#68a878}.dot.amber{background:#e4b16f}.dot.green{background:#2d8b63}.mini-label{margin-left:auto;font-size:10px;letter-spacing:.115em;font-weight:700}.hero-number{margin-top:28px;font:800 50px/1 var(--display);letter-spacing:var(--track-tight);color:var(--green-dark)}.hero-caption{margin-top:7px;color:#73877d;font-size:12px}.hero-bars{height:155px;display:flex;align-items:end;gap:13px;margin:22px 2px 16px;padding:0 5px;border-bottom:1px solid #e6efe8}.hero-bars span{flex:1;min-height:16px;border-radius:6px 6px 2px 2px;background:linear-gradient(#8ac498,#3d8863)}.hero-card-footer{display:flex;justify-content:space-between;gap:10px;color:#658075;font-size:11px}
.section-heading{max-width:740px;margin-bottom:36px}.section-heading h2{font-size:var(--fs-h2);letter-spacing:var(--track-tight);margin-bottom:14px}.section-heading>p:last-child{margin:0;color:var(--muted);font-size:16px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-grid article,.download-card,.video-card,.account-link-card,.plan-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,52,45,.04)}.feature-grid article{padding:24px;min-height:200px}.feature-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:23px;border-radius:11px;background:var(--mint);color:var(--green);font-size:21px}.feature-grid h3,.download-card h3,.video-card h3,.plan-card h3{margin:0 0 9px;font:700 var(--fs-h3)/1.3 var(--display);letter-spacing:var(--track-tight)}.feature-grid p,.download-card p,.video-card p,.plan-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}.showcase-card{overflow:hidden;border:1px solid #d8e8dc;border-radius:20px;background:#fff;box-shadow:0 16px 38px rgba(36,89,67,.08)}.showcase-card img{display:block;width:100%;height:auto;background:#edf6ef}.showcase-card.showcase-wide{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center}.showcase-card.showcase-wide img{border-left:1px solid #d8e8dc}.showcase-copy{padding:27px}.showcase-copy h3{margin:10px 0 9px;color:#224b3b;font:700 23px/1.22 var(--display);letter-spacing:var(--track-tight)}.showcase-copy p{margin:0;color:#71857c;font-size:14px}.showcase-copy .button{margin-top:21px}.platform{display:inline-block;color:#4f7160;font-size:10.5px;font-weight:800;letter-spacing:.12em}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.download-card{padding:24px;display:flex;flex-direction:column;align-items:flex-start}.download-card small{margin-top:auto;padding-top:18px;color:#7b9186;font-size:11px}.download-card .button,.download-card .button-row{margin-top:18px}.download-card .button-row{width:100%}.download-card .button-row .button{flex:1}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.video-card{display:flex;align-items:center;gap:18px;padding:16px}.video-placeholder{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:14px;background:var(--green);color:#fff;font-size:24px}.video-card{display:block;overflow:hidden;padding:0}.video-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e6f0e9}.video-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.video-player{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#e6f0e9}.video-thumb:hover img{transform:scale(1.035)}.video-thumb span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(25,105,75,.94);color:#fff;font-size:20px;box-shadow:0 5px 18px rgba(0,0,0,.22)}.video-copy{padding:18px}.video-copy h3{min-height:48px}.video-copy .watch-link{display:inline-block;margin-top:14px;color:var(--green);font-size:13px;font-weight:800;text-decoration:none}.video-copy .watch-link:hover{text-decoration:underline}.callout{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:48px;padding-bottom:48px;border-top:1px solid var(--line)}.callout h2{font-size:39px;margin-bottom:10px}.callout p:last-child{margin:0;color:var(--muted)}.site-footer{display:flex;justify-content:space-between;gap:18px;padding-top:25px;padding-bottom:30px;border-top:1px solid var(--line);color:#758a80;font-size:12px}.site-footer a{color:var(--green);font-weight:700}
.account-main,.demo-main{padding-top:62px;padding-bottom:80px}.account-intro,.demo-heading,.sample-head{max-width:760px;margin-bottom:32px}.account-intro h1,.demo-heading h1,.sample-head h1{font:800 var(--fs-h1)/1.12 var(--display);letter-spacing:var(--track-display);color:var(--green-dark);margin:0 0 14px}.account-intro p,.demo-heading p,.sample-head p{color:var(--muted);margin:0}.account-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.account-panel-copy h2,.demo-panel-heading h2{font:700 clamp(22px,2.4vw,25px)/1.25 var(--display);letter-spacing:var(--track-tight);margin:8px 0 10px}.account-panel-copy p{color:var(--muted);font-size:14px}.account-form{display:grid;gap:14px}.account-form label,.item-form label{display:grid;gap:6px;color:#4f685b;font-size:12px;font-weight:700}.account-form input,.item-form input,.item-form textarea{width:100%;padding:11px 12px;border:1px solid #cfe0d4;border-radius:8px;background:#fbfdfb;color:var(--ink);outline:none}.account-form input:focus,.item-form input:focus,.item-form textarea:focus{border-color:#5aa075;box-shadow:0 0 0 3px #dcefe1}.consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start;gap:8px!important;font-weight:400!important}.form-message{min-height:22px;color:#5e806c;font-size:12px}.subscription-card,.purchase-panel,.account-link-card{margin-top:18px;padding:24px}.subscription-heading{display:flex;justify-content:space-between;gap:14px}.status-badge{padding:6px 10px;border-radius:999px;background:var(--mint);color:var(--green);font-size:11px;font-weight:700}.days-remaining{font:800 45px/1 var(--display);color:var(--green-dark);margin-top:18px}.expiry-text,.subscription-message,.plan-terms,.account-note{color:var(--muted);font-size:12px}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px}.plan-card{padding:20px}.plan-card.featured{border-color:#6bb184;box-shadow:0 0 0 2px #d4edd9}.checkout-message{margin-top:14px;color:var(--green);font-size:12px}.account-links{margin-top:18px}.account-link-card{flex:1;min-width:190px}.account-link-card strong{display:block;font:700 16px var(--display);margin-bottom:6px}.account-link-card span{color:var(--muted);font-size:12px}.sample-shell{padding-top:55px;padding-bottom:75px}.sample-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.sample-board{display:grid;grid-template-columns:235px 1fr;min-height:560px;margin-top:34px;overflow:hidden;border:1px solid #cadad0;border-radius:18px;background:#fff;box-shadow:var(--shadow)}.sample-sidebar{padding:22px 15px;background:#123c3a;color:#e7f4ec}.sample-brand{display:flex;align-items:center;gap:9px;font-weight:800}.sample-brand-mark{width:23px;height:23px;border-radius:6px;background:linear-gradient(135deg,#f4b57b 0 48%,#75c590 48%)}.sample-mode{margin:23px 0 12px;color:#8cd0a4;font-size:10px;font-weight:800;letter-spacing:.1em}.sample-menu{display:grid;gap:6px}.sample-menu div{padding:9px 10px;border-radius:7px;color:#cce4d5;font-size:12px}.sample-menu div:first-child{background:#2a6255;color:#fff}.sample-main{padding:27px;background:#f4f8f4}.sample-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.sample-products,.sample-cart{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.sample-products h2,.sample-cart h2{margin:0 0 15px;font:700 20px var(--display)}.sample-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ecf2ed;font-size:13px}.sample-total{display:flex;justify-content:space-between;margin-top:18px;font:800 22px var(--display)}.sample-checkout{margin-top:17px;width:100%}.sample-note{margin-top:14px;color:#6f867b;font-size:12px}.is-hidden{display:none!important}.demo-boundary{padding:12px 15px;border-left:3px solid #d9945e;border-radius:0 8px 8px 0;background:#fff4e9;color:#6d6a5d;font-size:12px}.demo-layout{display:grid;grid-template-columns:225px 1fr;gap:22px;margin-top:28px}.demo-sidebar{padding:19px;border:1px solid var(--line);border-radius:14px;background:#fff;height:max-content}.demo-sidebar-title{font:700 15px var(--display);margin-bottom:14px}.demo-nav{display:block;padding:10px;border-radius:7px;color:#5b7566;font-size:12px}.demo-nav.active{background:var(--mint);color:var(--green-dark);font-weight:700}.demo-sidebar-note{margin-top:20px;color:#7c9085;font-size:11px}.demo-content{min-width:0}.demo-view{display:none}.demo-view.active{display:block}.demo-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.demo-panel-heading h2{margin:0}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.empty-demo{grid-column:1/-1;padding:28px;border:1px dashed #bcd6c4;border-radius:12px;color:#789083;text-align:center}.restore-card{display:flex;align-items:center;gap:16px;padding:21px;border:1px solid var(--line);border-radius:14px;background:#fff}.restore-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--green);font-size:22px}.restore-steps{margin:22px 0;padding-left:20px;color:var(--muted);font-size:13px}.demo-warning{padding:14px 16px;border-radius:9px;background:#fff5df;color:#766b51;font-size:12px}.demo-dialog{display:none;position:fixed;inset:0;z-index:50;place-items:center;padding:20px;background:rgba(14,39,28,.45)}.demo-dialog.open{display:grid}.demo-dialog-card{width:min(510px,100%);padding:25px;border-radius:16px;background:#fff;box-shadow:var(--shadow)}.demo-dialog-heading{display:flex;justify-content:space-between;align-items:center}.demo-dialog-heading h2{margin:0;font:700 23px var(--display)}.icon-button{border:0;background:var(--mint);border-radius:50%;width:31px;height:31px;color:var(--green);font-size:19px}.item-form{display:grid;gap:14px;margin-top:20px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:5px}
@media(max-width:960px){.site-header nav{gap:12px}.hero{gap:30px}.feature-grid{grid-template-columns:repeat(2,1fr)}.download-grid{grid-template-columns:repeat(2,1fr)}.account-panel{grid-template-columns:1fr}.sample-board{grid-template-columns:200px 1fr}}
@media(max-width:720px){.site-header{height:70px;padding-inline:12px}.site-header nav{gap:9px;font-size:12px;overflow-x:auto;white-space:nowrap}.site-header nav a{display:none}.site-header nav a[href$="downloads.html"],.site-header nav a[href$="account.html"],.site-header nav a.nav-cta{display:inline-flex}.nav-cta{padding:8px 10px}.section{padding-block:65px}.hero{display:block;padding-top:52px;padding-bottom:58px}.hero h1,.section-heading h2,.callout h2{letter-spacing:var(--track-display)}.hero-card{margin-top:40px;transform:none}.feature-grid,.download-grid,.video-grid,.plan-grid,.showcase-grid{grid-template-columns:1fr}.showcase-card.showcase-wide{grid-column:auto;display:block}.showcase-card.showcase-wide img{border-left:0;border-top:1px solid #d8e8dc}.callout{display:block}.callout .button{margin-top:19px}.site-footer{display:block}.site-footer span{display:block;margin-top:7px}.sample-board,.demo-layout{grid-template-columns:1fr}.sample-sidebar{padding:15px}.sample-menu{grid-template-columns:repeat(2,1fr)}.sample-main{padding:17px}.sample-grid{grid-template-columns:1fr}.catalog-grid{grid-template-columns:1fr 1fr}.form-two{grid-template-columns:1fr}.account-panel{padding:19px}.account-links{display:grid}.account-link-card{min-width:0}}
@media(max-width:440px){.catalog-grid{grid-template-columns:1fr}.sample-menu{grid-template-columns:1fr}.hero-actions .button{width:100%}}
.release-version-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-14px 0 26px;padding:16px 18px;border:1px solid #b9dcca;border-radius:14px;background:linear-gradient(120deg,#eaf6ed,#fff);box-shadow:0 8px 24px rgba(23,52,45,.05)}.release-version-card>div{display:grid;gap:3px}.release-version-card strong{font:800 21px/1.2 var(--display);color:var(--green-dark)}.release-version-card span:not(.platform){color:#61796d;font-size:12px}.release-version-card small{max-width:330px;color:#5d786b;font-size:11px;line-height:1.45}@media(max-width:720px){.release-version-card{display:grid;gap:8px;margin-top:-8px}.release-version-card small{max-width:none}}

@media(max-width:720px){.home-page .site-header nav{min-width:0}.home-page .site-header .brand{flex-shrink:0}}

/* ============ Design upgrade (2026-10): landing polish ============ */
:root{--green-bright:#2c8a63}
::selection{background:#cfe8d6;color:var(--green-dark)}
.home-page{position:relative}
.home-page::before{content:"";position:absolute;inset:0 0 auto;height:660px;background:radial-gradient(740px 350px at 16% 2%,rgba(44,138,99,.13),transparent 68%),radial-gradient(560px 300px at 88% 0%,rgba(228,155,102,.13),transparent 66%);pointer-events:none;z-index:0}
.home-page main,.home-page .site-footer{position:relative;z-index:1}
.site-header{box-shadow:0 1px 0 rgba(23,52,45,.05)}
.nav-cta{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 14px rgba(31,107,77,.18)}
.nav-cta:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.button{border-radius:11px;min-height:48px;padding:12px 19px;letter-spacing:.008em}
.button.primary{background:linear-gradient(135deg,#2c8a63,#1c6046);box-shadow:0 10px 22px rgba(31,107,77,.22)}
.button.primary:hover{background:linear-gradient(135deg,#257754,#144a36);box-shadow:0 13px 26px rgba(31,107,77,.26)}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:26px 0 0;padding:0}
.hero-trust li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid #d3e6d8;border-radius:999px;background:rgba(255,255,255,.82);color:#3c5c4b;font-size:12px;font-weight:600}
.hero-trust li::before{content:"✓";color:var(--green);font-weight:800;font-size:11px}
.feature-grid article,.download-card,.video-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.feature-grid article:hover,.download-card:hover{transform:translateY(-4px);border-color:#bcd9c4;box-shadow:0 16px 34px rgba(23,52,45,.09)}
.feature-icon{background:linear-gradient(135deg,var(--mint),#f6e6d7);box-shadow:inset 0 0 0 1px rgba(31,107,77,.08)}
.showcase-card{transition:transform .22s ease,box-shadow .22s ease}
.showcase-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(36,89,67,.13)}
.showcase-card img{transition:transform .35s ease}
.showcase-card:hover img{transform:scale(1.015)}
.video-card:hover{transform:translateY(-3px);border-color:#bcd9c4;box-shadow:0 14px 30px rgba(23,52,45,.08)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.price-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 27px 27px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(23,52,45,.05);transition:transform .22s ease,box-shadow .22s ease}
.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(23,52,45,.10)}
.price-card.popular{border-color:#79bd90;box-shadow:0 20px 46px rgba(31,107,77,.16);transform:translateY(-8px)}
.price-card.popular:hover{transform:translateY(-11px)}
.popular-badge{position:absolute;top:-13px;left:26px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#2c8a63,#14503a);color:#fff;font-size:10px;font-weight:800;letter-spacing:.11em}
.price{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.price-amount{font:800 47px/1 var(--display);letter-spacing:var(--track-tight);color:var(--green-dark)}
.price-per{color:#7b9186;font-size:12px;font-weight:600}
.price-card>p{color:var(--muted);font-size:13px;line-height:1.6}
.ticks{list-style:none;margin:16px 0 24px;padding:0;display:grid;gap:9px;color:#40604f;font-size:13px}
.ticks li{position:relative;padding-left:25px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--mint);color:var(--green);font-size:10px;font-weight:800;display:grid;place-items:center}
.price-card .button{width:100%;margin-top:auto}
.pricing-foot{text-align:center;color:#758a80;font-size:12px;margin-top:30px}
.pricing-foot a{color:var(--green);font-weight:700}
.plan-card{position:relative}
.plan-card .popular-badge{left:16px;top:-11px}
.callout{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-block:92px;padding:46px 48px;border:1px solid #cfe4d5;border-radius:24px;background:linear-gradient(120deg,#eaf6ed,#f7faf6 58%,#fdf3e9);box-shadow:0 18px 44px rgba(23,52,45,.07)}
.callout h2{margin-bottom:8px}
.callout p:not(.eyebrow){margin:0;color:var(--muted)}
.callout .button{flex-shrink:0}
.footer-upgraded{display:block;padding-top:46px;padding-bottom:30px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px}
.footer-grid h3,.footer-grid h4{margin:2px 0 13px;color:var(--green-dark);font:800 11px var(--display);letter-spacing:.118em;text-transform:uppercase}
.footer-grid a{display:block;padding:4px 0;color:#5c746a;font-size:13px;font-weight:500}
.footer-grid a:hover{color:var(--green)}
.footer-grid .brand{font-size:19px}
.footer-brand p{max-width:310px;margin:15px 0 0;color:#758a80;font-size:12.5px;line-height:1.6}
.footer-base{display:flex;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid var(--line);color:#82968b;font-size:11.5px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise-card{from{opacity:0;transform:rotate(1.5deg) translateY(14px)}to{opacity:1;transform:rotate(1.5deg)}}
.hero-copy{animation:rise .5s ease both}
.hero-card{animation:rise-card .55s .08s ease both}
@media(max-width:960px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.price-card.popular{transform:none}.price-card.popular:hover{transform:translateY(-4px)}.callout{margin-block:70px}}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.callout{display:block;margin-block:58px;padding:32px 26px}.callout .button{margin-top:18px}.footer-grid{grid-template-columns:1fr;gap:22px}.footer-base{display:block}.footer-base span{display:block;margin-top:5px}.hero-trust li{font-size:11.5px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

@media(max-width:430px){.site-header{padding-inline:10px}.site-header .brand{font-size:18px}.site-header nav{gap:7px;font-size:11.5px}.nav-cta{padding:7px 9px;font-size:11.5px}/* keep My account only where there is no primary CTA beside it */.site-header nav:has(.nav-cta) a[href$="account.html"]{display:none}}

/* ============ Standalone pages (2026-10) ============ */
body.subpage{position:relative}
body.subpage::before{content:"";position:absolute;inset:0 0 auto;height:440px;background:radial-gradient(740px 300px at 20% 0%,rgba(44,138,99,.11),transparent 70%),radial-gradient(520px 260px at 86% 2%,rgba(228,155,102,.10),transparent 66%);pointer-events:none;z-index:0}
body.subpage main,body.subpage .site-footer{position:relative;z-index:1}
.page-hero{padding-top:66px;padding-bottom:16px}
.page-hero h1{font:800 var(--fs-h1)/1.12 var(--display);letter-spacing:var(--track-display);margin-bottom:16px}
.page-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:26px 0 0;padding:0}
.page-chips li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid #d3e6d8;border-radius:999px;background:rgba(255,255,255,.85);color:#3c5c4b;font-size:12px;font-weight:600}
.page-chips li::before{content:"✓";color:var(--green);font-weight:800;font-size:11px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.stat{padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(23,52,45,.04)}
.stat strong{display:block;font:800 27px/1.1 var(--display);letter-spacing:-.048em;color:var(--green-dark)}
.stat span{display:block;margin-top:6px;color:#758a80;font-size:12px;line-height:1.5}
.deep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.deep-card{padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(23,52,45,.04);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.deep-card:hover{transform:translateY(-4px);border-color:#bcd9c4;box-shadow:0 16px 34px rgba(23,52,45,.09)}
.deep-card h3{margin:14px 0 8px;font:700 21px/1.28 var(--display);letter-spacing:var(--track-tight)}
.deep-card>p{color:var(--muted);font-size:13.5px;line-height:1.6}
.deep-card ul{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px;color:#40604f;font-size:13px}
.deep-card ul li{position:relative;padding-left:22px}
.deep-card ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800;font-size:11px}
.deep-card .platform{color:#7b9186}
.split-row{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:30px 0}
.split-row+.split-row{border-top:1px solid #e8f0e9}
.split-row h3{font:700 24px/1.25 var(--display);letter-spacing:var(--track-tight);margin:10px 0 10px}
.split-row p{color:var(--muted);font-size:14.5px;line-height:1.7}
.split-row ul.ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:16px 0 0}
.split-row .showcase-card{margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{position:relative;padding:26px 22px 22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(23,52,45,.04)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-13px;left:20px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2c8a63,#14503a);color:#fff;font:800 13px/28px var(--display);text-align:center;box-shadow:0 6px 14px rgba(31,107,77,.25)}
.step h3{margin:12px 0 7px;font:700 15px/1.35 var(--display);letter-spacing:0}
.step p{color:var(--muted);font-size:13px;line-height:1.6}
.faq{display:grid;gap:12px;max-width:800px}
.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(23,52,45,.04)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:17px 48px 17px 20px;font-weight:700;font-size:14.5px;color:var(--green-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:21px;font-weight:500;color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid #edf3ee}
.faq .faq-body{padding:2px 20px 18px;color:var(--muted);font-size:14px;line-height:1.7}
.faq .faq-body a{color:var(--green);font-weight:700}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{display:block;padding:24px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(23,52,45,.04);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.related a:hover{transform:translateY(-4px);border-color:#bcd9c4;box-shadow:0 16px 34px rgba(23,52,45,.09)}
.related a::after{content:"→";display:inline-block;margin-top:12px;color:var(--green);font-weight:800;transition:transform .2s ease}
.related a:hover::after{transform:translateX(4px)}
.related h3{margin:10px 0 6px;font-size:17.5px;letter-spacing:-.023em}
.related p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.resource-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:6px 0 4px}
.resource-strip a{display:inline-flex;align-items:center;gap:7px;padding:11px 17px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green-dark);font-size:13px;font-weight:700;box-shadow:0 6px 16px rgba(23,52,45,.04);transition:transform .2s ease,border-color .2s ease}
.resource-strip a:hover{transform:translateY(-2px);border-color:#bcd9c4}
.resource-strip a::after{content:"→";color:var(--green)}
.section-heading .heading-link{display:inline-block;margin-top:12px;color:var(--green);font-weight:700;font-size:13.5px}
.section-heading .heading-link::after{content:" →"}
.include-band{padding:30px 32px;border:1px solid #cfe4d5;border-radius:20px;background:linear-gradient(120deg,#f3faf5,#fff 70%);box-shadow:0 10px 28px rgba(23,52,45,.05)}
.include-band ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:11px 26px;margin:18px 0 0;padding:0;color:#40604f;font-size:13.5px}
.include-band li{position:relative;padding-left:24px}
.include-band li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800;font-size:12px}
@media(max-width:960px){.deep-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.stat-strip{grid-template-columns:1fr 1fr}.split-row{grid-template-columns:1fr;gap:18px}.related{grid-template-columns:1fr}.include-band ul{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.deep-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.split-row ul.ticks{grid-template-columns:1fr}.include-band ul{grid-template-columns:1fr}.include-band{padding:24px 22px}}
.download-grid.four{grid-template-columns:repeat(4,1fr)}
.download-grid.four .download-card{padding:24px 20px}
.qr-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.qr-card p{margin-bottom:4px}
.install-qr{display:grid;place-items:center;margin:10px 0 6px;padding:12px;border:1px solid #d3e6d8;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 6px #f3faf5}
.install-qr img{display:block;width:148px;height:148px}
.qr-reveal{margin-top:8px;width:100%}
.qr-reveal summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--green);border-radius:11px;color:var(--green);font-weight:700;font-size:13px;cursor:pointer;list-style:none;transition:background .2s ease,box-shadow .2s ease}
.qr-reveal summary::-webkit-details-marker{display:none}
.qr-reveal summary:hover{background:var(--mint);box-shadow:0 6px 14px rgba(31,107,77,.12)}
.qr-reveal[open] summary{box-shadow:none;background:var(--mint)}
@media(max-width:1100px){.download-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.download-grid.four{grid-template-columns:1fr}}

/* ============ Professional redesign (2026-10-13): interactive demo + polish ============ */

/* --- Animated stats counter --- */
.stat strong{display:block;font:800 34px/1.1 var(--display);letter-spacing:-.048em;color:var(--green-dark);transition:color .3s}
.stat:hover strong{color:var(--green-bright)}

/* --- Interactive POS demo shell --- */
.pos-cat{padding:7px 14px;border:1px solid #cfe1d4;border-radius:999px;background:#fff;color:#4f685b;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.pos-cat:hover{border-color:#8dbb9a;background:var(--mint);color:var(--green-dark)}
.pos-cat.active{background:linear-gradient(135deg,#2c8a63,#124432);border-color:transparent;color:#fff;box-shadow:0 5px 12px rgba(31,107,77,.22)}
.pos-demo{position:relative;border:1px solid #cfe1d4;border-radius:24px;background:#fff;box-shadow:0 30px 70px rgba(23,52,45,.12);overflow:hidden}
.pos-demo::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),#e09a66,var(--green));z-index:3}
.pos-demo-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#f2f9f4,#eaf4ee);border-bottom:1px solid #e2efe6}
.pos-demo-bar .dot{width:10px;height:10px;border-radius:50%;background:#e09a66;flex-shrink:0}
.pos-demo-bar .dot:nth-child(2){background:#e09a66}
.pos-demo-bar .dot:nth-child(3){background:#124432}
.pos-demo-bar .demo-title{margin-left:8px;font:700 12px var(--display);color:#4f685b;letter-spacing:.033em}
.pos-demo-bar .demo-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#e8f4eb;color:#124432;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pos-demo-bar .demo-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#124432;animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pos-demo-body{display:grid;grid-template-columns:200px 1fr 240px;min-height:420px}
.pos-demo-nav{background:#f4faf6;border-right:1px solid #e6f0e9;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.pos-demo-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:0;border-radius:10px;background:transparent;color:#4f685b;font-size:13px;font-weight:600;text-align:left;transition:.18s}
.pos-demo-nav button:hover{background:#e8f4eb;color:var(--green-dark)}
.pos-demo-nav button.active{background:linear-gradient(135deg,#2c8a63,#124432);color:#fff;box-shadow:0 6px 14px rgba(31,107,77,.22)}
.pos-demo-nav button .nav-icon{width:20px;height:20px;display:grid;place-items:center;font-size:15px}
.pos-demo-menu{padding:20px;overflow-y:auto}
.pos-demo-menu h4{margin:0 0 14px;font:700 15px var(--display);color:var(--green-dark);letter-spacing:-.02em}
.pos-demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pos-item{display:flex;flex-direction:column;gap:6px;padding:16px 14px;border:1px solid #e2efe6;border-radius:14px;background:#fff;cursor:pointer;transition:.18s;position:relative;overflow:hidden}
.pos-item:hover{border-color:#8dbb9a;transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,52,45,.10)}
.pos-item:active{transform:scale(.97)}
.pos-item .item-emoji{font-size:28px;line-height:1}
.pos-item .item-name{font:700 13px var(--display);color:var(--green-dark)}
.pos-item .item-price{font:700 13px var(--display);color:var(--green);margin-top:auto}
.pos-item .item-add{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--green);font-size:14px;font-weight:800;display:grid;place-items:center;opacity:0;transition:.18s}
.pos-item:hover .item-add{opacity:1}
.pos-demo-cart{border-left:1px solid #e6f0e9;background:#fbfdfb;padding:18px 16px;display:flex;flex-direction:column}
.pos-demo-cart h3,.pos-demo-cart h4{margin:0 0 12px;font:700 14px var(--display);color:var(--green-dark)}
.cart-lines{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:120px}
.cart-empty{display:grid;place-items:center;padding:30px 10px;color:#9bb0a4;font-size:12.5px;text-align:center;line-height:1.5}
.cart-line{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e6f0e9;border-radius:10px;background:#fff;font-size:12.5px}
.cart-line .cl-name{flex:1;color:#3c5c4b;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-line .cl-qty{color:#758a80;font-weight:700;font-size:11.5px}
.cart-line .cl-price{font:700 12.5px var(--display);color:var(--green-dark)}
.cart-line .cl-remove{border:0;background:none;color:#c08674;font-size:15px;cursor:pointer;padding:0 2px;line-height:1}
.cart-line .cl-remove:hover{color:#a0523f}
.cart-summary{border-top:1px solid #e2efe6;margin-top:12px;padding-top:12px;display:grid;gap:6px}
.cart-summary .row{display:flex;justify-content:space-between;font-size:12.5px;color:#758a80}
.cart-summary .row.total{font:800 20px var(--display);color:var(--green-dark);letter-spacing:-.03em;margin-top:4px}
.pos-pay-btn{width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;background:linear-gradient(135deg,#2c8a63,#124432);color:#fff;font:800 14px var(--display);letter-spacing:.021em;cursor:pointer;transition:.2s;box-shadow:0 10px 22px rgba(31,107,77,.24)}
.pos-pay-btn:hover{background:linear-gradient(135deg,#257754,#144a36);transform:translateY(-2px);box-shadow:0 14px 28px rgba(31,107,77,.30)}
.pos-pay-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.pos-pay-btn.paid{background:linear-gradient(135deg,#1a7a56,#0f5c3d)}
.demo-toast{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;padding:12px 22px;border-radius:12px;background:var(--green-dark);color:#fff;font-size:13px;font-weight:600;box-shadow:0 14px 34px rgba(23,52,45,.28);transition:.3s;z-index:10;pointer-events:none;white-space:nowrap}
.demo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pos-demo-hint{text-align:center;padding:14px;color:#82968b;font-size:12px;border-top:1px solid #e2efe6;background:#f7faf8}

/* --- Live demo section wrapper --- */
.live-demo{padding-block:92px;background:linear-gradient(180deg,#f0f8f2 0%,#f7faf6 100%);border-block:1px solid #e2efe6}
.live-demo .section-heading{max-width:680px;margin-inline:auto;text-align:center;margin-bottom:40px}
.live-demo .eyebrow{text-align:center}
.live-demo-shell{max-width:none;margin-inline:0}
@media(max-width:960px){.pos-demo-body{grid-template-columns:1fr 220px}.pos-demo-nav{display:none}.pos-demo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.pos-demo-body{grid-template-columns:1fr}.pos-demo-cart{border-left:0;border-top:1px solid #e6f0e9}.pos-demo-grid{grid-template-columns:repeat(3,1fr)}.live-demo{padding-block:58px}}
@media(max-width:520px){.pos-demo-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Testimonials --- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.t-card{display:flex;flex-direction:column;gap:14px;padding:28px 26px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(23,52,45,.05);transition:transform .22s,box-shadow .22s}
.t-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(23,52,45,.10)}
.t-stars{color:#e09a66;font-size:15px;letter-spacing:.133em}
.t-quote{margin:0;color:#3c5c4b;font-size:14.5px;line-height:1.7;flex:1}
.t-author{display:flex;align-items:center;gap:11px}
.t-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--mint),#fdeada);display:grid;place-items:center;font:800 15px var(--display);color:var(--green-dark);flex-shrink:0}
.t-meta strong{display:block;font:700 13.5px var(--display);color:var(--green-dark)}
.t-meta span{color:#82968b;font-size:11.5px}
@media(max-width:860px){.testimonials{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* --- Trust badges --- */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.trust-badge{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid #cfe1d4;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(23,52,45,.04);color:#3c5c4b;font-size:13px;font-weight:600}
.trust-badge .tb-icon{font-size:18px}
@media(max-width:720px){.trust-strip{gap:10px}.trust-badge{padding:10px 14px;font-size:12px}}

/* --- Refine existing cards --- */
.feature-grid article,.deep-card,.price-card{position:relative}
.feature-grid article::after,.deep-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(44,138,99,.04),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.feature-grid article:hover::after,.deep-card:hover::after{opacity:1}
.price-card.popular .popular-badge{box-shadow:0 6px 16px rgba(31,107,77,.30)}

/* --- Footer polish --- */
.site-footer.footer-upgraded{background:linear-gradient(180deg,#f7faf6,#eef7f0);border-top:1px solid var(--line)}
.footer-grid .brand{color:var(--green-dark)}

/* --- CTA polish --- */
.callout{position:relative;overflow:hidden}
.callout::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(44,138,99,.12),transparent 70%);pointer-events:none}
.callout>*{position:relative}

/* --- Scroll reveal (subtle) --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ Brand banner header (2026-10-13) ============ */
.brand-banner{position:relative;overflow:hidden;background:
  radial-gradient(1100px 420px at 12% -10%,rgba(44,138,99,.14),transparent 60%),
  radial-gradient(900px 380px at 88% 0%,rgba(228,155,102,.13),transparent 58%),
  linear-gradient(180deg,#f7faf6 0%,#eef7ef 55%,#e9f4ec 100%);
  border-bottom:1px solid rgba(23,52,45,.08)}
.brand-banner::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.55));
  pointer-events:none}
.brand-banner-inner{position:relative;z-index:1;width:100%;padding-inline:16px;margin-inline:0;
  padding-block:34px 30px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.bb-lockup{display:flex;align-items:center;gap:20px}
.bb-logo{width:74px;height:74px;flex-shrink:0;display:grid;place-items:center;filter:drop-shadow(0 10px 22px rgba(31,107,77,.24))}
.bb-mark{width:68px;height:68px;gap:6px;transform:rotate(-8deg)}
.bb-word{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.bb-name{font:800 clamp(38px,6vw,60px)/1 var(--display);letter-spacing:-.043em;color:var(--green-dark)}
.bb-name .bb-pos{background:linear-gradient(135deg,#3f9b6e,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-tag{margin-top:9px;font:800 clamp(14px,2vw,19px)/1.2 var(--display);letter-spacing:-.021em;color:#2f5a45}
.bb-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;margin:0;padding:0}
.bb-badge{display:inline-flex;align-items:center;gap:11px;padding:11px 20px 11px 12px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid rgba(23,52,45,.08);
  box-shadow:0 8px 20px rgba(23,52,45,.08);color:#173047;font:700 14.5px var(--display);letter-spacing:var(--track-tight);
  transition:transform .2s ease,box-shadow .2s ease}
.bb-badge:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,52,45,.13)}
.bb-badge .bb-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;flex-shrink:0}
.bb-badge .bb-ic svg{width:19px;height:19px;display:block}
.bb-badge.offline .bb-ic{background:linear-gradient(135deg,#2c8a63,#124432);box-shadow:0 6px 14px rgba(31,107,77,.32)}
.bb-badge.backup .bb-ic{background:linear-gradient(135deg,#3f9b6e,var(--green));box-shadow:0 6px 14px rgba(31,107,77,.32)}
.bb-badge.secure .bb-ic{background:linear-gradient(135deg,#e0a86f,#d18a4e);box-shadow:0 6px 14px rgba(209,138,78,.32)}
@media(max-width:620px){.brand-banner-inner{padding-block:26px 24px;gap:18px}.bb-lockup{flex-direction:column;gap:14px}.bb-word{align-items:center}.bb-logo{width:62px;height:62px}.bb-badge{font-size:13px;padding:9px 16px 9px 10px}.bb-badge .bb-ic{width:30px;height:30px}}

/* Centered public-page spacing; account workspace remains full width. */
body:not(.account-page) .section-wrap{width:min(var(--content),calc(100% - 48px));margin-inline:auto}
body:not(.account-page) .section-wrap:not(.callout){padding-inline:0}
body:not(.account-page) .site-header{padding-inline:max(24px,calc((100vw - var(--content))/2))}
body:not(.account-page) .brand-banner-inner{width:min(var(--content),calc(100% - 48px));padding-inline:0;margin-inline:auto}
body:not(.account-page) .live-demo-shell{max-width:1060px;margin-inline:auto}
@media(max-width:720px){
  body:not(.account-page) .section-wrap{width:min(var(--content),calc(100% - 32px))}
  body:not(.account-page) .site-header{padding-inline:16px}
}
/* Compact brand banner: native logo motion, keeping the original layout. */
.brand-banner-animated .bb-mark i{--tile-x:-11px;--tile-y:-11px;--tile-turn:-16deg;animation:bb-tile-assemble 4.8s cubic-bezier(.45,0,.25,1) infinite}
.brand-banner-animated .bb-mark i:nth-child(2){--tile-x:11px;--tile-turn:16deg}
.brand-banner-animated .bb-mark i:nth-child(3){--tile-y:11px;--tile-turn:16deg}
.brand-banner-animated .bb-mark i:nth-child(4){--tile-x:11px;--tile-y:11px}
@keyframes bb-tile-assemble{
  0%,70%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  24%,38%{transform:translate(var(--tile-x),var(--tile-y)) rotate(var(--tile-turn)) scale(.9)}
}
@media(prefers-reduced-motion:reduce){
  .brand-banner-animated .bb-mark i{animation:none}
}

/* ===================================================================
   VendoPulse public site - design pass (2026-10-20)
   Typography scale, focus visibility, section rhythm and the animated
   product setup landing section. Kept in one block so it is easy to
   review and to revert.
   =================================================================== */

:root{
  --focus:#0f4c38;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-soft:0 10px 30px rgba(23,52,45,.07);
  --shadow-lift:0 22px 54px rgba(23,52,45,.12);
}

/* ---- headings read better when the browser balances the lines ---- */
h1,h2,h3,.section-heading h2,.hero h1,.callout h2,.page-hero h1{
  text-wrap:balance;
}
p,li{text-wrap:pretty}

/* ---- a visible keyboard focus ring on every interactive element ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}
.site-header a:focus-visible,
.button:focus-visible{
  outline-offset:3px;
}

/* ---- text selection ---- */
::selection{background:#cfe9d8;color:var(--ink)}

/* ---- hero: a calmer headline that does not eat the whole screen ---- */
.hero{
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  padding-top:64px;
  padding-bottom:72px;
}
.hero h1{
  font-size:var(--fs-h1);
  line-height:1.12;
  letter-spacing:var(--track-display);
  max-width:22ch;
  margin-bottom:18px;
}
.hero .lead{font-size:17px;max-width:56ch}
.hero-actions{margin-top:24px}
.hero-trust{margin-top:22px}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hero h1{max-width:24ch}
}

/* ---- the brand banner was eating the first screenful ---- */
.brand-banner-inner{padding-block:30px 28px}
.bb-name{font-size:clamp(34px,4.4vw,52px)}
.bb-tag{font-size:clamp(13px,1.1vw,15px)}

/* ---- section rhythm ---- */
.section{padding-block:clamp(58px,6.4vw,92px)}
.section-heading{margin-bottom:clamp(26px,3vw,40px);max-width:760px}
.section-heading h2{font-size:clamp(30px,3.1vw,40px);letter-spacing:var(--track-display);line-height:1.14}
.section-heading>p:last-child{font-size:16.5px;line-height:1.68;max-width:62ch}

/* ---- cards: one radius and one shadow language ---- */
.feature-grid>article,
.download-card,
.price-card,
.deep-card,
.video-card,
.showcase-card,
.resource-strip a{
  border-radius:var(--radius);
}
.feature-grid>article:hover,
.deep-card:hover{
  box-shadow:var(--shadow-lift);
}

/* ---- buttons: consistent height and a calmer hover ---- */
.button{
  min-height:48px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}

/* ---- the setup anchor must not hide under the sticky header ---- */
#setup{scroll-margin-top:84px}
.setup-stage-wrap{
  position:sticky;
  top:96px;
}
@media(max-width:960px){
  .setup-stage-wrap{position:static}
}

/* ---- footer: a little more air and a clearer base line ---- */
.footer-grid{gap:clamp(24px,3vw,44px)}
.footer-base{padding-top:18px;border-top:1px solid var(--line)}

/* ---- the hero register keeps working: a pure-CSS wave on the sales bars ---- */
@keyframes hero-wave{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.82)}
}
.hero-bars span{
  transform-origin:bottom;
  animation:hero-wave 3.6s ease-in-out infinite;
}
.hero-bars span:nth-child(1){animation-delay:0s}
.hero-bars span:nth-child(2){animation-delay:.28s}
.hero-bars span:nth-child(3){animation-delay:.56s}
.hero-bars span:nth-child(4){animation-delay:.84s}
.hero-bars span:nth-child(5){animation-delay:1.12s}
.hero-bars span:nth-child(6){animation-delay:1.4s}
.hero-bars span:nth-child(7){animation-delay:1.68s}
@media(prefers-reduced-motion:reduce){
  .hero-bars span{animation:none}
}

/* ---- print: the page should print as a readable document ---- */
@media print{
  .site-header,.setup-play,.hero-card,.live-demo,.pos-demo,.callout .button{display:none!important}
  body{background:#fff;color:#000}
  .section,.setup-section{padding-block:12px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* ===================================================================
   VendoPulse brand lockup
   One pulse glyph replaces the old four-tile mark. The wordmark is
   Vendo + pulse + a POS pill, and the glyph draws itself like a
   heartbeat. The banner keeps the existing light green band.
   =================================================================== */
.brand-mark{
  width:30px;height:30px;display:block;flex:0 0 auto;
  transform:none;filter:drop-shadow(0 6px 14px rgba(43,229,157,.42))
}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-mark svg path{
  stroke-dasharray:130;stroke-dashoffset:130;
  animation:vp-pulse-draw 2.9s linear infinite
}
@keyframes vp-pulse-draw{
  0%{stroke-dashoffset:130}
  42%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-130}
}
.brand>span:last-child{
  display:inline-flex;align-items:baseline;
  gap:0;                       /* Vendo and pulse are one word: no spacing between them */
  font:800 21px/1 var(--display);letter-spacing:-.043em;color:var(--green-dark)
}
.brand>span:last-child>span.brand-pulse{
  background:linear-gradient(135deg,#2BE59D,#0f9d6a);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.brand>span:last-child>span.brand-pos{
  margin-left:9px;padding:3px 9px 4px;border:1.5px solid #0f9d6a;border-radius:999px;
  background:none;-webkit-text-fill-color:#0f9d6a;
  font:800 10px/1 var(--display);letter-spacing:.16em;color:#0f9d6a;
  align-self:center;white-space:nowrap
}
.brand:hover>span:last-child>span.brand-pos{background:#0f9d6a;color:#fff;-webkit-text-fill-color:#fff}

/* the banner keeps the light green band, with the new lockup */
.bb-logo{width:78px;height:78px;flex-shrink:0;display:grid;place-items:center;filter:drop-shadow(0 12px 26px rgba(31,107,77,.26))}
.bb-logo .brand-mark{width:100%;height:100%;filter:none}
.bb-name{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:0;                       /* Vendo and pulse are one word: no spacing between them */
  font:800 clamp(34px,5.2vw,56px)/1 var(--display);letter-spacing:-.043em;color:var(--green-dark)
}
.bb-name .bb-pulse{
  background:linear-gradient(135deg,#2BE59D,#0f9d6a);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.bb-name .bb-pos{
  margin-left:16px;padding:6px 14px 7px;border:2px solid #0f9d6a;border-radius:999px;
  background:none;-webkit-text-fill-color:#0f9d6a;
  font:800 clamp(11px,1.1vw,14px)/1 var(--display);letter-spacing:.18em;color:#0f9d6a;
  align-self:center;white-space:nowrap
}
.bb-tag{color:#2f5a45}

@media(max-width:620px){
  .bb-logo{width:64px;height:64px}
  .brand>span:last-child{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .brand-mark svg path{animation:none;stroke-dashoffset:0}
}

/* an optional extra download line inside a download card */
.download-extra{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12.5px;line-height:1.55;color:var(--muted)}
.download-extra a{font-weight:700;color:var(--green)}
.download-extra[hidden]{display:none}

/* ============ Typography system (2026-10-22) ============
 * One heading system for every public page. Fonts are self-hosted (SIL OFL):
 * Manrope for display headings and DM Sans for body/UI. Both families were
 * already named in the design tokens; the files under assets/fonts/ make them
 * real. Letter spacing is em-based so it scales with the fluid type scale.
 * Tokens: --fs-h1/--fs-h2/--fs-h3 plus --track-display/--track-tight (see :root). */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/manrope-latin-800-normal.woff2') format('woff2')}

/* every page's main heading shares the display system, even without a helper class */
main h1{font:800 var(--fs-h1)/1.12 var(--display);letter-spacing:var(--track-display);color:var(--green-dark)}

.hero-tagline{margin:-12px 0 14px;padding:0;color:var(--green);font:700 clamp(16px,2vw,21px)/1.35 var(--display);letter-spacing:-.01em}
.hero h1 + .hero-tagline + .lead{margin-top:2px}

/* visible keyboard focus for links, nav labels, buttons */
a:focus-visible,nav a:focus-visible,button:focus-visible,.button:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* related links and guide titles share the card-title family */
.related h3{font:700 17.5px/1.3 var(--display);letter-spacing:var(--track-tight)}
/* stat figures use the display family with the shared tracking token */
.stat strong{letter-spacing:var(--track-tight)}

/* VendoPulse Local: distinct from the connected download and billing cards. */
.offline-mode-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);gap:18px;align-items:stretch;max-width:1120px;margin-inline:auto}
.offline-mode-copy,.offline-mode-price{border:1px solid #cfe5d6;border-radius:20px;padding:clamp(24px,3.2vw,38px);box-shadow:0 12px 30px rgba(23,52,45,.06)}
.offline-mode-copy{background:#fff}.offline-mode-copy h2{margin:14px 0 12px;color:var(--green-dark);font:800 clamp(29px,3.4vw,42px)/1.12 var(--display);letter-spacing:var(--track-display)}
.offline-mode-copy>p{max-width:650px;color:var(--muted);line-height:1.65}.offline-mode-copy .ticks{margin:22px 0 0;padding-left:20px;columns:2;column-gap:24px}.offline-mode-copy .ticks li{break-inside:avoid;margin-bottom:9px}
.offline-mode-tag{padding:7px 11px;border-radius:999px;background:#e2f5e9;color:#155c41;font-size:10px}
.offline-mode-price{display:flex;flex-direction:column;align-items:flex-start;background:#ecf7ef}.offline-mode-price .price{margin:19px 0 12px}.offline-mode-price .price-amount{color:#124432}.offline-mode-price .price-per{color:#486f59}.offline-mode-price>p{margin:0 0 17px;color:#4b6856;font-size:14px;line-height:1.6}
.offline-mode-status{display:inline-flex;padding:7px 11px;border:1px solid #b7d5c2;border-radius:999px;background:#fff;color:#35664b;font-size:11px;font-weight:800;letter-spacing:.03em}
.offline-mode-price .button{margin-top:auto;min-width:100%;text-align:center}.offline-mode-price small{display:block;margin-top:12px;color:#5f7867;line-height:1.5}
@media(max-width:850px){.offline-mode-layout{grid-template-columns:1fr}.offline-mode-copy .ticks{columns:1}.offline-mode-price .button{margin-top:22px}}

/* Local downloads and guide stay inside the existing .section-wrap margins. */
.offline-mode-section .offline-mode-layout{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);align-items:stretch}
.offline-mode-section .offline-mode-copy{display:flex;flex-direction:column}
.offline-mode-section .offline-mode-copy .ticks{margin-bottom:22px}
.offline-mode-learn{display:inline-flex;align-self:flex-start;margin-top:auto;color:var(--green);font-weight:800;font-size:14px}
.offline-mode-learn:hover{text-decoration:underline}
.offline-mode-section .offline-mode-price{padding:24px;gap:0}
.offline-mode-section .offline-mode-price .price{margin:12px 0 6px}
.offline-mode-section .offline-mode-price .offline-mode-price-intro{margin-bottom:15px;font-size:13px}
.offline-download-box{width:100%;margin-bottom:11px;padding:15px;border:1px solid #cfe5d6;border-radius:14px;background:#fff}
.offline-download-box h3{margin:3px 0 2px;color:var(--green-dark);font:800 17px/1.3 var(--display)}
.offline-download-box p{margin:0 0 11px;color:var(--muted);font-size:12px;line-height:1.45}
.offline-download-box .button{width:100%;min-width:0;margin:0!important;min-height:43px}
.offline-mode-section .offline-mode-price small{margin-top:9px;font-size:11px}
.offline-mode-section .offline-mode-price small a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:850px){.offline-mode-section .offline-mode-layout{grid-template-columns:1fr}}

/* Offline Mode explanation page and illustrative register view. */
.offline-guide-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;padding-block:68px}
.offline-guide-hero h1{margin:12px 0 16px;color:var(--green-dark);font:800 clamp(34px,4vw,50px)/1.12 var(--display);letter-spacing:var(--track-display)}
.offline-guide-hero p{color:var(--muted)}
.offline-guide-hero .button{margin-top:14px}
.offline-sample-label{margin:0 0 8px!important;color:var(--green)!important;font-size:10px!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.offline-sample{overflow:hidden;border:1px solid #c8ded0;border-radius:16px;background:#f5f8f5;box-shadow:0 14px 34px #17442d1c}
.offline-sample-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;background:#173e35;color:#fff;font-size:11px;font-weight:700}
.offline-sample-grid{display:grid;grid-template-columns:110px minmax(0,1fr) 140px;min-height:270px}
.offline-sample-menu{padding:15px 9px;background:#15352f;color:#d8eee3;font-size:10px}
.offline-sample-menu span{display:block;padding:8px 6px}
.offline-sample-menu span:first-child{border-radius:6px;background:#2b6a54;color:#fff}
.offline-sample-main{min-width:0;padding:16px}
.offline-sample-main h2{margin:0 0 10px;font-size:19px}
.offline-sample-search{padding:7px;border:1px solid #d7e2dc;border-radius:6px;background:#fff;color:#829489;font-size:10px}
.offline-sample-products{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.offline-sample-products div{padding:9px;border:1px solid #dbe9e0;border-radius:7px;background:#fff;font-size:10px}
.offline-sample-products strong,.offline-sample-products span{display:block}
.offline-sample-products span{color:#46876b}
.offline-sample-sale{padding:14px 9px;border-left:1px solid #dbe9e0;background:#fff;font-size:10px}
.offline-sample-sale p{margin:8px 0;color:#315347;font-size:10px}
.offline-sample-sale b{display:block;margin-top:18px;font-size:13px}
.offline-sample-sale em{display:block;margin-top:9px;padding:8px;border-radius:6px;background:var(--green);color:#fff;text-align:center;font-style:normal;font-size:10px}
.offline-guide-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:80px}
.offline-guide-cards article{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.offline-guide-cards h2{margin:0 0 8px;font-size:18px;color:var(--green-dark)}
.offline-guide-cards p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:850px){.offline-guide-hero{grid-template-columns:1fr}.offline-guide-cards{grid-template-columns:1fr}}
@media(max-width:480px){.offline-sample-grid{grid-template-columns:75px minmax(0,1fr) 95px}.offline-sample-menu{font-size:8px}.offline-sample-main{padding:9px}.offline-sample-products div{padding:5px;font-size:8px}.offline-sample-sale{font-size:8px}}
.offline-guide-page .brand-mark svg{display:block;width:29px;height:29px;transform:rotate(8deg)}
@media(max-width:720px){.offline-guide-page .site-header{height:auto;min-height:102px;flex-wrap:wrap;align-content:center;gap:7px}.offline-guide-page .site-header nav{width:100%;justify-content:space-between;overflow:visible}.offline-guide-page .site-header nav a[href$="downloads.html"],.offline-guide-page .site-header nav a.nav-cta{display:inline-flex}.offline-guide-page .site-header nav a[href$="account.html"]{display:none}}