/* Public landing page + public header — design tokens from the approved mockup */
:root{
  --zl-bg:#FCFCFE;--zl-fg:#111;--zl-primary:#2D83AA;--zl-primary-text:#267DA4;--zl-primary-fg:#fff;
  --zl-secondary:#E9F0F5;--zl-secondary-fg:#17324A;--zl-muted:#F3F6FA;--zl-muted-fg:#52718E;
  --zl-card:#fff;--zl-border:#DCE6EF;--zl-ring:#2D83AA;--zl-radius:.875rem;
  --zl-font:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --zl-shadow:0 10px 30px -8px rgba(15,23,42,.12);
}
.zl,.zl-header,.zl-mobile-nav{font-family:var(--zl-font)}
.zl{background:var(--zl-bg);color:var(--zl-fg);min-height:100vh;display:flex;flex-direction:column}
.zl *{box-sizing:border-box}
.zl-main{flex:1}
.zl a{color:inherit}

/* Header */
.zl-header{background:var(--zl-card);border-bottom:1px solid var(--zl-border);position:sticky;top:0;z-index:100}
.zl-header-in{padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.zl-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.zl-brand-mark{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--zl-border);background:var(--zl-secondary);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.zl-brand-mark img{width:100%;height:100%;object-fit:contain}
.zl-brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--zl-muted-fg)}
.zl-brand b{display:block;font-size:1.5rem;font-weight:700;color:var(--zl-primary-text);line-height:1.2}
.zl-nav{display:none;align-items:center;gap:1.5rem;font-size:.875rem;font-weight:500}
.zl-nav a{text-decoration:none;color:var(--zl-fg)}
.zl-nav a:hover{color:var(--zl-primary-text)}
.zl-signin{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 1.25rem;border:1px solid var(--zl-primary);border-radius:.5rem;font-weight:600;color:var(--zl-primary-text)!important}
.zl-signin:hover{background:var(--zl-secondary)}
.zl-menu-btn{min-width:2.75rem;min-height:2.75rem;border:1px solid var(--zl-border);background:var(--zl-card);border-radius:.5rem;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zl-mobile-nav{display:flex;flex-direction:column;gap:.25rem;padding:.75rem 1.25rem 1rem;background:var(--zl-card);border-bottom:1px solid var(--zl-border);font-size:.95rem;font-weight:500}
.zl-mobile-nav a{padding:.6rem 0;text-decoration:none;color:var(--zl-fg)}
.zl-mobile-nav .zl-signin{justify-content:center;margin-top:.5rem}
@media(min-width:720px){.zl-nav{display:flex}.zl-menu-btn,.zl-mobile-nav{display:none}.zl-header-in{padding:.75rem 2rem}}

/* Hero */
.zl-hero{padding:4rem 1.25rem;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
.zl-hero .copy{max-width:32rem}
.zl-hero h1{font-size:2.25rem;line-height:1.2;font-weight:700;margin:0;text-wrap:balance}
.zl-hero .lead{margin:1.25rem 0 0;font-size:1rem;line-height:1.75;color:var(--zl-muted-fg)}
.zl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;margin-top:2rem;padding:.75rem 1.5rem;border-radius:.5rem;background:var(--zl-primary);color:#0F0F0F!important;font-size:.875rem;font-weight:700;text-decoration:none;box-shadow:0 4px 8px rgba(0,0,0,.12);border:none;cursor:pointer}
.zl-btn:hover{opacity:.9}
.zl-hero-art{position:relative;overflow:hidden;border-radius:.75rem;background:var(--zl-secondary);padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.zl-hero-art img,.zl-hero-art .ph{display:block;width:100%;height:16rem;border-radius:.75rem;object-fit:cover}
.zl-hero-art .ph{background:linear-gradient(135deg,#AED4ED,#E9F0F5);display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--zl-primary)}
.zl-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--zl-card);border-radius:999px;padding:.75rem 1.5rem;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.zl-pill p{margin:0;white-space:nowrap;font-size:.875rem;font-weight:600;color:var(--zl-primary-text);display:flex;align-items:center;gap:.5rem}
@media(min-width:720px){.zl-hero{grid-template-columns:1fr 1fr;padding:5rem 2rem}.zl-hero h1{font-size:3rem}.zl-hero-art{padding:2.25rem}.zl-hero-art img,.zl-hero-art .ph{height:18rem}}

/* Stats */
.zl-stats{border-top:1px solid var(--zl-border);border-bottom:1px solid var(--zl-border);background:var(--zl-card)}
.zl-stats-in{padding:1.5rem 1.25rem;display:grid;grid-template-columns:repeat(2,1fr)}
.zl-stat{text-align:center;padding:.5rem 1rem;border-right:1px solid var(--zl-border)}
.zl-stat:nth-child(2n){border-right:none}
.zl-stat b{display:block;font-size:1.5rem;font-weight:700}
.zl-stat span{display:block;margin-top:.25rem;font-size:.875rem;color:var(--zl-muted-fg)}
@media(min-width:768px){.zl-stats-in{grid-template-columns:repeat(4,1fr)}.zl-stat:nth-child(2n){border-right:1px solid var(--zl-border)}.zl-stat:last-child{border-right:none}}
@media(min-width:720px){.zl-stats-in{padding:1.5rem 2rem}}

/* Campaigns */
.zl-campaigns{background:var(--zl-muted)}
.zl-campaigns-in{padding:3rem 1.25rem}
.zl-eyebrow{margin:0;font-size:.875rem;font-weight:600;color:var(--zl-muted-fg)}
.zl-h2{margin:.25rem 0 0;font-size:1.875rem;font-weight:700;text-wrap:balance}
.zl-tools{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.zl-search{position:relative;display:block;width:100%}
.zl-search iconify-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.125rem;color:var(--zl-primary-text)}
.zl-search input{width:100%;min-height:2.75rem;padding:.75rem 1rem .75rem 2.75rem;border:1px solid var(--zl-border);border-radius:.5rem;background:var(--zl-card);font:inherit;font-size:.875rem;outline:none}
.zl-search input:focus{box-shadow:0 0 0 2px var(--zl-ring)}
.zl-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.zl-chip{min-height:2.75rem;padding:0 1rem;border:1px solid var(--zl-border);border-radius:.5rem;background:var(--zl-card);font:inherit;font-size:.875rem;font-weight:500;color:var(--zl-fg);cursor:pointer}
.zl-chip:hover{background:var(--zl-secondary)}
.zl-chip.on{background:var(--zl-primary);border-color:var(--zl-primary);color:#0F0F0F;font-weight:600}
.zl-count{margin:1rem 0 0;font-size:.875rem;color:var(--zl-muted-fg)}
.zl-count button{margin-left:.5rem;padding:.1rem .6rem;border:1px solid var(--zl-border);border-radius:999px;background:var(--zl-card);color:var(--zl-primary-text);font-size:.75rem;font-weight:600;cursor:pointer}
.zl-grid{margin-top:1.25rem;display:grid;grid-template-columns:1fr;gap:1.5rem}
.zl-card{display:flex;flex-direction:column;overflow:hidden;border-radius:.75rem;background:var(--zl-card);box-shadow:0 4px 8px rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.zl-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.zl-card-img{position:relative;aspect-ratio:16/9;background:var(--zl-secondary)}
.zl-card-img img,.zl-card-img .ph{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.zl-card-img .ph{font-size:2.5rem;color:var(--zl-primary)}
.zl-featured{position:absolute;top:.6rem;left:.6rem;background:#D97706;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:999px}
.zl-card-b{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.zl-cat{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--zl-primary-text)}
.zl-card h3{margin:.5rem 0 0;font-size:1.125rem;font-weight:700;line-height:1.3;text-wrap:balance}
.zl-card .desc{margin:.5rem 0 0;font-size:.875rem;line-height:1.5;color:var(--zl-muted-fg);flex:1;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zl-bar{margin-top:1.25rem;height:.375rem;border-radius:999px;background:var(--zl-secondary);overflow:hidden}
.zl-bar i{display:block;height:100%;border-radius:999px;background:var(--zl-primary)}
.zl-money{margin-top:.75rem;display:flex;justify-content:space-between;gap:.5rem;font-size:.875rem}
.zl-money b{font-weight:600}
.zl-money span{color:var(--zl-muted-fg)}
.zl-meta{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--zl-border);display:flex;justify-content:space-between;font-size:.75rem;color:var(--zl-muted-fg)}
.zl-more{text-align:center;margin:2rem 0 0}
.zl-more button,.zl-empty button{padding:.65rem 1.75rem;border:1px solid var(--zl-primary);border-radius:.5rem;background:var(--zl-card);color:var(--zl-primary-text);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.zl-empty{text-align:center;padding:3rem 1rem;color:var(--zl-muted-fg)}
.zl-empty b{display:block;color:var(--zl-fg);font-size:1.05rem;margin-bottom:.25rem}
.zl-empty button{margin-top:1rem}
.zl-load{display:flex;justify-content:center;padding:3rem}
.zl-load i{width:2rem;height:2rem;border:3px solid var(--zl-secondary);border-top-color:var(--zl-primary);border-radius:50%;animation:zlspin .8s linear infinite}
@keyframes zlspin{to{transform:rotate(360deg)}}
@media(min-width:768px){.zl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.zl-grid{grid-template-columns:repeat(4,1fr)}.zl-tools{flex-direction:row;align-items:center}.zl-search{max-width:36rem}}
@media(min-width:720px){.zl-campaigns-in{padding:4rem 2rem}}

/* Stories + CTA */
.zl-stories{padding:3.5rem 1.25rem;width:100%}
.zl-story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.zl-story{overflow:hidden;border-radius:.75rem;background:var(--zl-card);box-shadow:0 4px 8px rgba(0,0,0,.08)}
.zl-story img,.zl-story .ph{width:100%;height:11rem;object-fit:cover;display:flex;align-items:center;justify-content:center}
.zl-story .ph{background:var(--zl-secondary);font-size:2.5rem;color:var(--zl-primary)}
.zl-story .b{padding:1.25rem}
.zl-story h3{margin:0 0 .5rem;font-size:1rem;font-weight:700}
.zl-story p{margin:0;font-size:.875rem;line-height:1.6;color:var(--zl-muted-fg);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zl-story .by{margin-top:.75rem;font-size:.75rem;font-weight:600;color:var(--zl-primary-text)}
.zl-cta{border-radius:.75rem;background:var(--zl-secondary);padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.zl-cta .k{margin:0;font-size:.875rem;font-weight:600;color:var(--zl-secondary-fg)}
.zl-cta h2{margin:.5rem 0 0;font-size:1.875rem;font-weight:700;text-wrap:balance}
.zl-cta .s{margin:.75rem 0 0;line-height:1.75;color:var(--zl-secondary-fg)}
.zl-cta .t{max-width:42rem}
.zl-cta .zl-btn{margin-top:0;align-self:flex-start}
@media(min-width:720px){.zl-stories{padding:3.5rem 2rem}.zl-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem}}

/* Footer */
.zl-footer{border-top:1px solid var(--zl-border);background:var(--zl-card)}
.zl-footer-in{padding:2rem 1.25rem;display:flex;flex-direction:column;gap:1rem;font-size:.875rem;color:var(--zl-muted-fg)}
.zl-footer-in p{margin:0}
.zl-footer-in div{display:flex;gap:1.25rem}
.zl-footer-in a{text-decoration:none}
.zl-footer-in a:hover{color:var(--zl-primary-text)}
@media(min-width:768px){.zl-footer-in{flex-direction:row;align-items:center;justify-content:space-between}}
@media(min-width:720px){.zl-footer-in{padding:2rem}}


/* Centered content column, as in the approved mockup (max-w-7xl) */
.zl-header-in,.zl-hero,.zl-stats-in,.zl-campaigns-in,.zl-stories,.zl-footer-in{max-width:none;margin-left:auto;margin-right:auto}
.zl-brand-mark iconify-icon{font-size:1.5rem;color:var(--zl-primary-text)}
.zl-header-in,.zl-hero,.zl-stats-in,.zl-campaigns-in,.zl-stories,.zl-footer-in{padding-left:1.5rem;padding-right:1.5rem}
@media(min-width:720px){.zl-header-in,.zl-hero,.zl-stats-in,.zl-campaigns-in,.zl-stories,.zl-footer-in{padding-left:2rem;padding-right:2rem}}
@media(min-width:1536px){.zl-grid{grid-template-columns:repeat(5,1fr)}}

/* Same look at any width: consistent proportional side margins */
.zl-header-in,.zl-hero,.zl-stats-in,.zl-campaigns-in,.zl-stories,.zl-footer-in{padding-left:clamp(2rem,6vw,6rem)!important;padding-right:clamp(2rem,6vw,6rem)!important}
@media(min-width:720px){.zl-hero{grid-template-columns:1fr 1fr}.zl-hero h1{font-size:3rem}.zl-nav{display:flex}.zl-menu-btn,.zl-mobile-nav{display:none}}

/* Nudge the hero text a little towards the centre */
.zl-hero .copy{padding-left:0}
.zl-hero{padding-left:clamp(3rem,9vw,9rem)!important;padding-right:clamp(3rem,9vw,9rem)!important}

/* Hero image keeps a natural 3:2 shape (cropped, never stretched) at every width */
.zl-hero-art{width:100%;max-width:44rem;justify-self:center}
.zl-hero-art img,.zl-hero-art .ph{height:auto!important;aspect-ratio:3/2;object-fit:cover}

/* Hero text sits well in from the left edge, towards the centre */
.zl-hero .copy{margin-left:clamp(1.5rem,8vw,8rem)!important}

/* Bigger hero headline */
.zl-hero h1{font-size:clamp(2.75rem,5.5vw,4.5rem)!important}
.zl-hero .copy{max-width:none!important}

/* Payment result pages */
.zl-pay-wrap{background:var(--zl-muted);min-height:calc(100vh - 5rem);display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.zl-pay{background:var(--zl-card);border-radius:.75rem;box-shadow:0 10px 30px -8px rgba(15,23,42,.12);padding:2.5rem 2rem;max-width:34rem;width:100%;text-align:center}
.zl-pay-icon{width:4.5rem;height:4.5rem;margin:0 auto 1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.25rem}
.zl-pay-icon.ok{background:#E6F4EA;color:#15803d}.zl-pay-icon.bad{background:#FDECEA;color:#B42318}.zl-pay-icon.wait{background:var(--zl-secondary);color:var(--zl-primary-text)}
.zl-pay h1{margin:0;font-size:1.5rem;font-weight:700}
.zl-pay p{margin:.75rem 0 0;line-height:1.7;color:var(--zl-muted-fg)}
.zl-pay-ref{display:inline-block;margin-top:1rem;padding:.4rem .9rem;border-radius:999px;background:var(--zl-muted);font-size:.75rem;color:var(--zl-muted-fg);word-break:break-all}
.zl-pay-actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.zl-pay-actions .zl-btn{margin-top:0}
.zl-btn-outline{background:var(--zl-card);border:1px solid var(--zl-primary);color:var(--zl-primary-text)!important;box-shadow:none}

/* About */
.zl-about{background:var(--zl-card);border-top:1px solid var(--zl-border);border-bottom:1px solid var(--zl-border)}
.zl-about-in{padding:3.5rem clamp(2rem,6vw,6rem);max-width:60rem;margin:0 auto;text-align:center}
.zl-about-text{margin:1.25rem auto 0;line-height:1.9;color:var(--zl-muted-fg);max-width:46rem}
.zl-about-actions{margin-top:1.75rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.zl-about-actions .zl-btn{margin-top:0}

/* FAQ */
.zl-faq{background:var(--zl-muted)}
.zl-faq-in{padding:3.5rem clamp(2rem,6vw,6rem);max-width:56rem;margin:0 auto}
.zl-faq-list{margin-top:1.75rem;display:flex;flex-direction:column;gap:.75rem}
.zl-faq details{background:var(--zl-card);border:1px solid var(--zl-border);border-radius:.75rem;padding:0 1.25rem}
.zl-faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.zl-faq summary::-webkit-details-marker{display:none}
.zl-faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--zl-primary-text)}
.zl-faq details[open] summary::after{content:"–"}
.zl-faq details p{margin:0 0 1.1rem;line-height:1.7;color:var(--zl-muted-fg)}