/* Wananchi Mart — small component layer on top of Tailwind (CDN build, so no @apply). */
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Variable.70880e42f07b.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
body{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif}
h1,h2,h3,h4,.font-heading{font-family:Satoshi,ui-sans-serif,sans-serif;letter-spacing:-.015em}
html,body{overflow-x:clip;max-width:100%}   /* clip, not hidden: hidden breaks position:sticky */
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* Sidebar */
.nav{display:flex;align-items:center;gap:.6rem;border-radius:5px;padding:.4rem .75rem;color:#fff;text-align:left}
.nav:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-on{background:#1E6B3C;color:#fff}
.nav-on:hover{background:#1E6B3C}
.nav-h{padding:0 .75rem .25rem;font-size:12px;font-weight:600;color:#94A3B8}

/* Building blocks */
.card{background:#fff;border:1px solid #E2E8F0;border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:5px;padding:.5rem .9rem;font-size:.875rem;font-weight:600;border:1px solid #CBD5E1;background:#fff;color:#0F2C1E;white-space:nowrap}
.btn:hover{background:#F8FAFC}
.btn-primary{background:#1E6B3C;border-color:#1E6B3C;color:#fff}
.btn-primary:hover{background:#145530}
.btn-green{background:#16A34A;border-color:#16A34A;color:#fff}
.btn-green:hover{background:#15803D}
.btn-danger{color:#B91C1C;border-color:#FECACA}
.btn-danger:hover{background:#FEF2F2}
.btn-sm{padding:.3rem .6rem;font-size:.8rem}
.input{width:100%;border:1px solid #CBD5E1;border-radius:5px;padding:.5rem .75rem;background:#fff}
.input:focus{outline:none;border-color:#1E6B3C;box-shadow:0 0 0 3px rgba(30,107,60,.18)}
.label{display:block;font-size:.8rem;font-weight:600;color:#334155;margin-bottom:.25rem}
.tbl{width:100%;font-size:.875rem}
.tbl th{text-align:left;font-size:.8rem;font-weight:600;color:#64748B;padding:.6rem .75rem;border-bottom:1px solid #E2E8F0;background:#F8FAFC}
.tbl td{padding:.6rem .75rem;border-bottom:1px solid #F1F5F9;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;border-radius:9999px;padding:.1rem .5rem;font-size:.72rem;font-weight:600}
.stat{font-family:Satoshi,ui-sans-serif,sans-serif;letter-spacing:-.01em;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.errorlist{color:#B91C1C;font-size:.8rem;margin-top:.25rem}

/* Receipt (80 mm thermal) */
@media print{
  body{background:#fff!important}
  .no-print,aside,header{display:none!important}
  .receipt{width:72mm;margin:0;border:0!important;box-shadow:none!important;padding:0!important;font-size:11px}
  @page{size:80mm auto;margin:4mm}
}

/* Feature icon tile: solid colour, white icon */
.ftile{display:grid;place-items:center;flex:none;border-radius:6px;color:#fff}

/* Sidebar: pinned full height; only the link list scrolls on short screens */
.side-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

/* Motion: buttons everywhere; lift, zoom and reveal on the marketing site (html.mk, set by its footer script) */
.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(15,44,30,.35)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.mk main .card,.mk main .rounded-lg.border,.mk main figure{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.mk main .card:hover,.mk main .rounded-lg.border:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(15,44,30,.35);border-color:#1E6B3C}
.mk main figure:hover,.mk main picture:hover>img{transform:translateY(-4px);box-shadow:0 30px 60px -25px rgba(15,44,30,.45)}
.mk main picture>img{transition:transform .35s ease,box-shadow .35s ease}
.mk main h2{position:relative}
.mk [data-reveal]{opacity:0;transform:translateY(48px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.mk [data-reveal="left"]{transform:translateX(-64px)}
.mk [data-reveal="right"]{transform:translateX(64px)}
.mk [data-reveal="zoom"]{transform:scale(.88) translateY(30px)}
.mk [data-reveal].is-in{opacity:1;transform:none}
.scroll-bar{position:fixed;inset:0 auto auto 0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:#E8892F;z-index:60;pointer-events:none}
[data-parallax]{will-change:transform}
.hero-in>*{opacity:0;transform:translateY(18px);animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-in>*:nth-child(2){animation-delay:.12s}.hero-in>*:nth-child(3){animation-delay:.24s}.hero-in>*:nth-child(4){animation-delay:.36s}
@keyframes heroIn{to{opacity:1;transform:none}}
.text-glow{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.text-glow .btn{text-shadow:none}
@media (prefers-reduced-motion:reduce){
  .btn,.mk main .card,.mk main figure,.mk main picture>img{transition:none}
  .btn:hover,.mk main .card:hover,.mk main .rounded-lg.border:hover,.mk main figure:hover,.mk main picture:hover>img{transform:none}
  .mk [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-in>*{opacity:1;transform:none;animation:none}
}
.arrow-ne{transition:transform .2s ease}
a:hover>.arrow-ne{transform:translate(2px,-2px)}

/* Article body (Resources) */
.prose-wm{color:#334155;font-size:1.0625rem;line-height:1.8}
.prose-wm>*+*{margin-top:1.1em}
.prose-wm h2{margin-top:2em;font-size:1.45rem;font-weight:600;line-height:1.3;color:#0F2C1E}
.prose-wm h3{margin-top:1.6em;font-size:1.15rem;font-weight:500;color:#0F2C1E}
.prose-wm a{color:#1E6B3C;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose-wm ul{list-style:disc;padding-left:1.4em}.prose-wm ol{list-style:decimal;padding-left:1.4em}
.prose-wm li+li{margin-top:.4em}
.prose-wm strong{color:#0F2C1E;font-weight:600}
.prose-wm blockquote{border-left:4px solid #E8892F;background:#FFF7ED;padding:.8em 1.1em;border-radius:0 8px 8px 0;color:#0F2C1E}
.prose-wm table{width:100%;font-size:.95rem;border-collapse:collapse}.prose-wm th,.prose-wm td{border:1px solid #E2E8F0;padding:.5em .7em;text-align:left}.prose-wm th{background:#F8FAFC}
.prose-wm img{border-radius:10px}
.prose-wm code{background:#F1F5F9;border-radius:4px;padding:.1em .35em;font-size:.9em}

/* Inner-page hero: photo under a deep-blue overlay, white text (the page sets the photo in the --hero-img custom property) */
.page-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0B1F3A}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) var(--hero-pos,center)/cover no-repeat;transform:scale(1.06);animation:heroZoom 14s ease-out forwards}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(600px 300px at 85% 10%,rgba(232,137,47,.28),transparent 70%),
             linear-gradient(100deg,rgba(11,31,58,.97) 0%,rgba(11,31,58,.88) 50%,rgba(11,31,58,.62) 100%)}
@keyframes heroZoom{to{transform:scale(1)}}
.page-hero h1,.page-hero .text-dark:not(.card *){color:#fff}
.page-hero .text-slate-500:not(.card *),.page-hero .text-slate-600:not(.card *){color:rgba(255,255,255,.86)}
.page-hero .text-primary:not(.card *):not(.btn){color:#F5A35C}
.page-hero nav a:hover{color:#fff}
.page-hero .card{color:#0F2C1E}
.page-hero .btn:not(.btn-primary){border-color:#fff}
@media (prefers-reduced-motion:reduce){.page-hero::before{animation:none;transform:none}}

/* Share buttons (Resources) */
.share-btn{position:relative;display:inline-grid;place-items:center;height:2.25rem;width:2.25rem;border-radius:9999px;border:1px solid #E2E8F0;background:#fff;color:#334155;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.share-btn:hover{transform:translateY(-2px);background:#1E6B3C;border-color:#1E6B3C;color:#fff}
.share-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.share-dark:hover{background:#E8892F;border-color:#E8892F}
.share-btn .copied-tip{position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:#0F2C1E;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.share-btn.copied .copied-tip{opacity:1}