/* ============================================================
   Snnel — public marketing / landing styles
   Warm, friendly, rounded design system on Nunito.
   Home page uses a live "bento dashboard" hero + feature bento.
   Shared classes keep the sub-pages (features/pricing/blog/legal) cohesive.
   ============================================================ */

body.zlp-page {
    /* Warm neutral canvas */
    --bg: #f5f3ee;
    --bg-mint: #e9f4f0;
    --surface: #ffffff;
    --surface-2: #fbfaf6;
    --ink: #000000;
    --ink-2: #33474d;
    --muted: #525f63;
    --line: rgba(27, 44, 49, .1);
    --line-2: rgba(27, 44, 49, .06);

    /* Brand — teal / emerald with a warm honey pop */
    --accent: #0f766e;
    --accent-2: #12a594;
    --accent-3: #2dd4bf;
    --accent-ink: #0a5c55;
    --accent-soft: #e2f5f1;
    --emerald: #10b981;
    --honey: #e8890c;
    --honey-soft: #fdefd6;
    --berry: #b0447e;
    --sky: #2f77c6;
    --grape: #7c5cff;
    --deep: #0f2a2b;

    /* Legacy aliases used by the legal pages (terms/privacy/refund) */
    --color-text: #000000;
    --color-text-muted: #525f63;
    --color-accent: #0f766e;

    /* Radii — rounded to match Nunito's soft letterforms */
    --r-sm: 12px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --pill: 999px;

    /* Soft, warm-tinted shadows */
    --sh-sm: 0 1px 2px rgba(27, 44, 49, .04), 0 4px 12px rgba(27, 44, 49, .05);
    --sh: 0 10px 26px -12px rgba(27, 44, 49, .2);
    --sh-lg: 0 30px 60px -28px rgba(15, 42, 43, .4);
    --sh-accent: 0 14px 30px -14px rgba(15, 118, 110, .5);

    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.zlp-page *,
.zlp-page *::before,
.zlp-page *::after {
    box-sizing: border-box;
}

.zlp-page a {
    color: inherit;
    text-decoration: none;
}

.zlp-page button,
.zlp-page input,
.zlp-page textarea,
.zlp-page select {
    font: inherit;
}

.zlp-page img {
    max-width: 100%;
    display: block;
}

.zlp-page :focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: 8px;
}

.zlp-shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Shared content width */
.zlp-header-inner,
.zlp-hero-inner,
.hero-board,
.zlp-strip,
.zlp-section,
.zlp-subhero,
.zlp-cta,
.zlp-footer-inner,
.marketing-section,
.marketing-subhero,
.marketing-article {
    width: min(1140px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════ Header ══════════════════════ */
.zlp-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(245, 243, 238, .82);
    border-bottom: 1px solid var(--line-2);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.zlp-header-inner {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.zlp-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 1.06rem;
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.zlp-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    background: var(--accent);
    box-shadow: var(--sh-accent);
}

/* Branding uploaded under /admin-settings → Branding. The App Logo carries the
   wordmark, so it stands in for the mark + name; an uploaded icon (PWA icon,
   else favicon) fills the mark tile instead of the app's initial. */
.zlp-brand-logo {
    height: 30px;
    width: auto;
    max-width: 168px;
    object-fit: contain;
}

.zlp-brand-mark.has-icon {
    background: #fff;
    overflow: hidden;
}

.zlp-brand-mark.has-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* The footer is dark and an uploaded logo can be any colour, so it gets a light
   plate rather than risking dark-on-dark. */
.zlp-brand-footer .zlp-brand-logo {
    box-sizing: content-box;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .95);
    border-radius: 14px;
}

.zlp-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(27, 44, 49, .05);
    border: 1px solid var(--line-2);
    border-radius: var(--pill);
}

.zlp-nav-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--pill);
    color: #4c5f64;
    font-size: .84rem;
    font-weight: 700;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.zlp-nav-link:hover {
    color: var(--ink);
}

.zlp-nav-link.is-active {
    color: var(--accent-ink);
    background: var(--surface);
    box-shadow: var(--sh-sm);
}

.zlp-header-actions,
.zlp-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.zlp-header-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.zlp-signin {
    color: var(--ink-2);
    font-size: .86rem;
    font-weight: 700;
    padding: 0 6px;
}

.zlp-signin:hover {
    color: var(--accent);
}

/* ══════════════════════ Buttons ══════════════════════ */
.zlp-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 1.5px solid transparent;
    border-radius: var(--pill);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .22s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.zlp-button:hover {
    transform: translateY(-2px);
}

.zlp-button:active {
    transform: translateY(0);
}

/* Button text colours are scoped under `.zlp-page` (specificity 0,2,0) so they
   reliably win over `.zlp-page a { color: inherit }` (0,1,1) — otherwise button
   links would wrongly inherit the surrounding text colour. */
.zlp-page .zlp-button-primary {
    color: #fff;
    background: var(--accent);
    box-shadow: var(--sh-accent);
}

.zlp-page .zlp-button-primary:hover {
    background: var(--accent-ink);
    box-shadow: 0 20px 40px -16px rgba(15, 118, 110, .6);
}

.zlp-page .zlp-button-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}

.zlp-page .zlp-button-secondary:hover {
    color: var(--accent);
    border-color: rgba(15, 118, 110, .35);
}

.zlp-page .zlp-button-glass {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
}

.zlp-page .zlp-button-glass:hover {
    background: rgba(255, 255, 255, .22);
}

/* Mobile menu button */
.zlp-menu-button {
    width: 42px;
    height: 42px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}

.zlp-menu-button span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}

.zlp-menu-button.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.zlp-menu-button.is-open span:nth-child(2) {
    opacity: 0;
}

.zlp-menu-button.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.zlp-mobile-nav {
    display: none;
    width: 100%;
    padding: 14px 24px 22px;
    background: var(--surface);
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 44px -22px rgba(27, 44, 49, .3);
}

.zlp-mobile-nav.is-open {
    display: grid;
    gap: 8px;
}

.zlp-mobile-nav .zlp-nav-link {
    justify-content: flex-start;
    min-height: 44px;
    border-radius: 12px;
}

.zlp-mobile-nav .zlp-button {
    margin-top: 4px;
}

/* ══════════════════════ Eyebrow / kicker ══════════════════════ */
.zlp-eyebrow,
.marketing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border-radius: var(--pill);
    padding: 6px 13px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    width: fit-content;
}

.zlp-eyebrow i {
    font-size: .85rem;
    color: var(--accent);
}

/* ══════════════════════ Hero ══════════════════════ */
.zlp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 78px) 0 clamp(40px, 6vw, 72px);
    background: var(--bg-mint);
}

.hero-glow {
    display: none;
}

.zlp-hero-inner {
    position: relative;
    z-index: 1;
}

.hero-center {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: zlpRise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.zlp-hero h1 {
    margin: 18px 0 0;
    color: var(--ink);
    font-size: clamp(1.95rem, 4.4vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.zlp-hero h1 em {
    font-style: italic;
    font-weight: 800;
    color: var(--accent);
}

.zlp-hero-copy {
    max-width: 580px;
    margin: 16px 0 0;
    color: var(--ink-2);
    font-size: clamp(.98rem, 1.3vw, 1.08rem);
    font-weight: 500;
    line-height: 1.66;
}

.zlp-hero .zlp-actions {
    margin-top: 26px;
    justify-content: center;
}

.hero-mini {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

/* ══════════════════════ Hero bento dashboard ══════════════════════ */
.hero-board {
    position: relative;
    z-index: 1;
    margin-top: clamp(34px, 5vw, 56px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(78px, auto));
    gap: 14px;
    grid-template-areas:
        "sales sales pie    orders"
        "sales sales pie    orders"
        "chart wallet stock  alert";
    animation: zlpRise .8s cubic-bezier(.2, .7, .2, 1) both .12s;
}

.hb-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hb-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh);
}

.hb-label {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hb-figure {
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
}

.hb-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: var(--pill);
    font-size: .74rem;
    font-weight: 800;
    color: var(--accent-ink);
    background: var(--accent-soft);
}

.hb-sales {
    grid-area: sales;
    justify-content: space-between;
    background: var(--surface);
}

/* Trend curve in the wide sales tile. The <svg> fills the leftover height, so
   the tile stays balanced whatever the board's row height works out to be. */
.hb-spark {
    position: relative;
    flex: 1;
    min-height: 96px;
    margin-top: 14px;
}

.hb-spark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hb-peak {
    position: absolute;
    left: 83.3%;
    top: 10%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 0 4px rgba(109, 74, 255, .2), 0 0 0 8px rgba(109, 74, 255, .1);
}

.hb-orders {
    grid-area: orders;
}

.hb-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.hb-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-2);
}

.hb-list b {
    margin-left: auto;
    color: var(--ink);
    font-weight: 800;
}

.hb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-2);
    flex: 0 0 8px;
}

.hb-list li:nth-child(2) .hb-dot { background: var(--honey); }
.hb-list li:nth-child(3) .hb-dot { background: var(--sky); }

.hb-chart {
    grid-area: chart;
}

.hb-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 40px;
    margin-top: auto;
}

.hb-bars i {
    flex: 1;
    border-radius: 4px;
    background: var(--emerald);
}

/* Multi-coloured weekly bars */
.hb-bars i:nth-child(5n+1) { background: var(--emerald); }
.hb-bars i:nth-child(5n+2) { background: var(--sky); }
.hb-bars i:nth-child(5n+3) { background: var(--honey); }
.hb-bars i:nth-child(5n+4) { background: var(--berry); }
.hb-bars i:nth-child(5n+5) { background: var(--grape); }

/* Colourful donut / pie chart */
.hb-pie {
    grid-area: pie;
}

.hb-pie-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    margin-bottom: auto;
}

.hb-donut {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    transform: rotate(-90deg);
}

.hb-donut circle {
    fill: none;
    stroke-width: 4.2;
}

.hb-donut-track {
    stroke: var(--accent-soft);
}

.hb-donut .seg1 { stroke: var(--emerald); }
.hb-donut .seg2 { stroke: var(--honey); }
.hb-donut .seg3 { stroke: var(--sky); }
.hb-donut .seg4 { stroke: var(--berry); }

.hb-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    min-width: 0;
    flex: 1;
}

.hb-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--ink-2);
}

.hb-legend b {
    margin-left: auto;
    color: var(--ink);
    font-weight: 800;
}

.hb-legend .lg {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: 0 0 9px;
}

.hb-legend .lg1 { background: var(--emerald); }
.hb-legend .lg2 { background: var(--honey); }
.hb-legend .lg3 { background: var(--sky); }
.hb-legend .lg4 { background: var(--berry); }

.hb-wallet {
    grid-area: wallet;
    justify-content: space-between;
    color: #eafaf6;
    background: var(--deep);
    border-color: rgba(255, 255, 255, .1);
}

.hb-wallet .hb-label { color: rgba(234, 250, 246, .72); }

.hb-wallet strong {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.hb-wallet a {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, .16);
    color: #eafaf6;
    font-size: .74rem;
    font-weight: 800;
}

.hb-alert {
    grid-area: alert;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    background: var(--honey-soft);
    border-color: rgba(232, 137, 12, .2);
}

.hb-alert i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(232, 137, 12, .18);
    color: var(--honey);
    font-size: 1.05rem;
    flex: 0 0 34px;
}

.hb-alert strong {
    display: block;
    color: #7a4a06;
    font-size: .84rem;
    font-weight: 800;
}

.hb-alert span {
    color: #96692a;
    font-size: .76rem;
    font-weight: 700;
}

.hb-stock {
    grid-area: stock;
    flex-direction: row;
    align-items: center;
    gap: 11px;
}

.hb-stock i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.05rem;
    flex: 0 0 34px;
}

.hb-stock strong {
    display: block;
    color: var(--ink);
    font-size: .84rem;
    font-weight: 800;
}

.hb-stock span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
}

/* ══════════════════════ Trust strip ══════════════════════ */
.zlp-strip {
    margin-top: clamp(30px, 4vw, 46px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.zlp-strip span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    box-shadow: var(--sh-sm);
    font-size: .8rem;
    font-weight: 700;
}

/* ══════════════════════ Sections ══════════════════════ */
.zlp-section,
.marketing-section {
    padding-top: clamp(56px, 7vw, 92px);
}

.zlp-subhero,
.marketing-subhero {
    padding: clamp(64px, 8vw, 96px) 0 8px;
}

.zlp-subhero h1,
.marketing-subhero h1,
.zlp-section h2,
.zlp-cta h2,
.marketing-article h1 {
    color: var(--ink);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.zlp-subhero h1,
.marketing-subhero h1 {
    max-width: 800px;
    margin: 16px 0 0;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}

.zlp-subhero h1 + p,
.marketing-subhero h1 + p {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--ink-2);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.7;
}

.zlp-subhero .zlp-actions,
.marketing-subhero .zlp-actions {
    margin-top: 24px;
}

.zlp-section-heading {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.zlp-section-heading .zlp-eyebrow {
    margin-inline: auto;
}

.zlp-section h2 {
    margin: 14px 0 0;
    font-size: clamp(1.55rem, 2.8vw, 2.05rem);
}

.zlp-section-heading > p:last-child {
    margin: 13px auto 0;
    color: var(--muted);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.7;
}

/* Split section (copy + signal cards) */
.zlp-split-section {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
    gap: clamp(26px, 4vw, 46px);
    align-items: center;
}

.zlp-split-section > div > p:last-child {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.72;
}

.zlp-signal-list {
    display: grid;
    gap: 12px;
}

.zlp-signal-list article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 3px 15px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.zlp-signal-list article:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh);
}

.zlp-signal-list i,
.zlp-feature-grid i {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 13px;
    font-size: 1.16rem;
}

.zlp-signal-list article:nth-child(2) i,
.zlp-feature-grid article:nth-child(3n+2) i {
    color: var(--honey);
    background: var(--honey-soft);
}

.zlp-signal-list article:nth-child(3) i,
.zlp-feature-grid article:nth-child(3n) i {
    color: var(--sky);
    background: rgba(47, 119, 198, .12);
}

.zlp-signal-list strong {
    color: var(--ink);
    font-size: .98rem;
    font-weight: 800;
}

.zlp-signal-list span {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.55;
}

/* ══════════════════════ Feature bento (home) ══════════════════════ */
.home-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 15px;
    margin-top: 38px;
    grid-template-areas:
        "pos    pos    inv"
        "store  report inv"
        "team   sms    wallet";
}

.hbn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hbn:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
    border-color: rgba(15, 118, 110, .22);
}

.hbn .ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--accent);
    background: var(--accent-soft);
}

.hbn h3 {
    margin: 14px 0 0;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.hbn p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.6;
}

.hbn-pos { grid-area: pos; }
.hbn-inv { grid-area: inv; }
.hbn-store { grid-area: store; }
.hbn-report { grid-area: report; }
.hbn-team { grid-area: team; }
.hbn-sms { grid-area: sms; }
.hbn-wallet { grid-area: wallet; }

/* Spotlight tiles get the deep-teal treatment */
.hbn-pos,
.hbn-inv {
    color: #eafaf6;
    background: var(--deep);
    border-color: rgba(255, 255, 255, .1);
}

.hbn-pos h3,
.hbn-inv h3 { color: #fff; }

.hbn-pos p,
.hbn-inv p { color: #b9d8d2; }

.hbn-pos .ico,
.hbn-inv .ico {
    color: #eafaf6;
    background: rgba(255, 255, 255, .14);
}

.hbn-inv { justify-content: flex-start; }

.hbn-store .ico { color: var(--honey); background: var(--honey-soft); }
.hbn-report .ico { color: var(--sky); background: rgba(47, 119, 198, .12); }
.hbn-team .ico { color: var(--berry); background: rgba(176, 68, 126, .1); }
.hbn-sms .ico { color: var(--accent); background: var(--accent-soft); }
.hbn-wallet .ico { color: var(--honey); background: var(--honey-soft); }

/* ══════════════════════ Feature grid (sub-pages) ══════════════════════ */
.zlp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 38px;
}

.zlp-feature-grid-wide {
    margin-top: 38px;
}

.zlp-feature-grid article {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.zlp-feature-grid article:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
    border-color: rgba(15, 118, 110, .2);
}

.zlp-feature-grid h3,
.zlp-post-card h3,
.zlp-plan-card h3,
.zlp-step-grid h3 {
    margin: 16px 0 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
}

.zlp-feature-grid p,
.zlp-post-card p,
.zlp-step-grid p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: .91rem;
    font-weight: 500;
    line-height: 1.62;
}

/* ══════════════════════ Connected flow ══════════════════════ */
.flow-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    margin-top: 38px;
}

.flow-node {
    flex: 1 1 210px;
    max-width: 270px;
    padding: 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.flow-node i {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--accent);
    background: var(--accent-soft);
}

.flow-node strong {
    display: block;
    margin-top: 13px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.flow-node span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.55;
}

.flow-node:nth-child(3) i { color: var(--honey); background: var(--honey-soft); }
.flow-node:nth-child(5) i { color: var(--sky); background: rgba(47, 119, 198, .12); }

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-2);
    font-size: 1.15rem;
    padding: 0 4px;
}

/* ══════════════════════ Steps ══════════════════════ */
.zlp-process {
    padding-bottom: 6px;
}

.zlp-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 38px;
}

.zlp-step-grid article {
    position: relative;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.zlp-step-grid article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
}

.zlp-step-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 1rem;
    font-weight: 900;
}

/* ══════════════════════ Pricing ══════════════════════ */
.zlp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 38px;
    align-items: stretch;
}

.zlp-plan-card {
    position: relative;
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.zlp-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
}

.zlp-plan-card h3 {
    margin-top: 0;
    padding-right: 74px;
}

.zlp-plan-price {
    display: block;
    margin-top: 14px;
    color: var(--ink);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.zlp-plan-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.6;
}

.zlp-plan-card ul {
    display: grid;
    gap: 11px;
    margin: 20px 0 26px;
    padding: 20px 0 0;
    border-top: 1px solid var(--line-2);
    list-style: none;
}

.zlp-plan-card li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.44;
}

.zlp-plan-card li i {
    margin-top: 1px;
    color: var(--accent-2);
    font-size: 1.02rem;
}

.zlp-plan-card .zlp-button {
    width: 100%;
    margin-top: auto;
}

.zlp-plan-card.is-featured {
    color: #eafaf6;
    background: var(--deep);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 36px 70px -26px rgba(15, 42, 43, .6);
}

.zlp-plan-card.is-featured h3,
.zlp-plan-card.is-featured .zlp-plan-price {
    color: #fff;
}

.zlp-plan-card.is-featured p,
.zlp-plan-card.is-featured li {
    color: #c3e0da;
}

.zlp-plan-card.is-featured ul {
    border-color: rgba(255, 255, 255, .14);
}

.zlp-plan-card.is-featured li i {
    color: var(--accent-3);
}

.zlp-plan-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 11px;
    color: #06231f;
    background: var(--accent-3);
    border-radius: var(--pill);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zlp-note {
    margin-top: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--muted);
    background: var(--accent-soft);
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: var(--r);
    font-weight: 500;
    font-size: .92rem;
    line-height: 1.58;
}

.zlp-note i {
    margin-top: 2px;
    color: var(--accent);
    font-size: 1.08rem;
}

/* ══════════════════════ FAQ ══════════════════════ */
.zlp-faq {
    display: grid;
    gap: 11px;
    max-width: 800px;
    margin: 38px auto 0;
}

.zlp-faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.zlp-faq details[open] {
    box-shadow: var(--sh);
}

.zlp-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: var(--ink);
    font-size: .96rem;
    font-weight: 800;
}

.zlp-faq summary::-webkit-details-marker {
    display: none;
}

.zlp-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    transition: transform .25s ease;
}

.zlp-faq details[open] summary::after {
    transform: rotate(45deg);
}

.zlp-faq p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.7;
}

/* ══════════════════════ CTA ══════════════════════ */
.zlp-cta {
    margin-top: clamp(64px, 8vw, 100px);
    padding: clamp(28px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    color: #eafaf6;
    border-radius: var(--r-xl);
    background: var(--deep);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.zlp-cta .zlp-eyebrow {
    color: #d8f7ea;
    background: rgba(255, 255, 255, .12);
}

.zlp-cta .zlp-eyebrow i {
    color: var(--accent-3);
}

.zlp-cta h2 {
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.zlp-cta p:not(.zlp-eyebrow) {
    max-width: 600px;
    margin: 12px 0 0;
    color: #bcd7d1;
    font-weight: 500;
    line-height: 1.66;
}

.zlp-cta .zlp-actions {
    flex: 0 0 auto;
}

/* ══════════════════════ Blog ══════════════════════ */
.zlp-post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 6px;
}

.zlp-post-card {
    min-height: 220px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.zlp-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh);
}

.zlp-post-card span,
.marketing-article > span {
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.zlp-text-link,
.marketing-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--accent);
    font-weight: 800;
    font-size: .92rem;
}

.zlp-text-link i {
    transition: transform .2s ease;
}

.zlp-text-link:hover i {
    transform: translateX(4px);
}

/* ══════════════════════ Article & Legal ══════════════════════ */
.marketing-article {
    max-width: 820px;
    padding: clamp(64px, 8vw, 96px) 0 clamp(64px, 8vw, 104px);
}

.marketing-article h1 {
    margin: 14px 0 0;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.marketing-article-body {
    margin-top: 24px;
    padding: clamp(22px, 4vw, 34px);
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    font-size: 1rem;
    line-height: 1.82;
}

.marketing-article-body p + p,
.marketing-article-body ol,
.marketing-article-body ul {
    margin-top: 15px;
}

.marketing-article-body ol,
.marketing-article-body ul {
    padding-left: 22px;
}

.marketing-article-body a {
    color: var(--accent);
    font-weight: 700;
}

.legal-doc {
    max-width: 820px;
}

/* ══════════════════════ Footer ══════════════════════ */
.zlp-footer {
    margin-top: clamp(64px, 8vw, 100px);
    color: #c1d4d0;
    background: var(--deep);
}

.zlp-footer-inner {
    padding: clamp(38px, 5vw, 56px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr);
    gap: clamp(26px, 4vw, 46px);
}

.zlp-brand-footer {
    color: #fff;
}

.zlp-brand-footer .zlp-brand-mark {
    background: var(--accent);
}

.zlp-footer p {
    max-width: 380px;
    margin: 16px 0 14px;
    color: #93aca7;
    font-weight: 500;
    line-height: 1.66;
}

.zlp-copyright {
    color: #789089;
    font-size: .84rem;
    font-weight: 600;
}

.zlp-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.zlp-footer-grid h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zlp-footer-grid a {
    display: block;
    margin-top: 10px;
    color: #93aca7;
    font-weight: 600;
    font-size: .92rem;
    transition: color .18s ease;
}

.zlp-footer-grid a:hover {
    color: #d8f7ea;
}

/* ══════════════════════ Photo spotlight ══════════════════════ */
.zlp-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
}

.zlp-spotlight-media {
    position: relative;
}

.zlp-spotlight-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--sh-lg);
}

.zlp-spotlight-copy h2 {
    margin: 14px 0 0;
    color: var(--ink);
    font-size: clamp(1.55rem, 2.8vw, 2.05rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.zlp-spotlight-copy > p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
}

.zlp-check-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.zlp-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: .95rem;
    font-weight: 700;
}

.zlp-check-list i {
    color: var(--emerald);
    font-size: 1.15rem;
}

.zlp-spotlight-copy .zlp-button {
    margin-top: 24px;
}

/* ══════════════════════ Use-case photo cards ══════════════════════ */
.zlp-usecases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 38px;
}

.uc-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
    background: var(--surface);
}

.uc-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.uc-card:hover img {
    transform: scale(1.06);
}

.uc-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: #fff;
    background: rgba(11, 26, 27, .74);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.uc-cap i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 1rem;
    flex: 0 0 34px;
}

.uc-cap strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
}

.uc-cap span {
    font-size: .76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 900px) {
    .zlp-spotlight {
        grid-template-columns: 1fr;
    }

    .zlp-usecases {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .zlp-usecases {
        grid-template-columns: 1fr;
    }

    .uc-card img {
        aspect-ratio: 16 / 10;
    }
}

/* ══════════════════════ Motion ══════════════════════ */
@keyframes zlpRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .zlp-page *,
    .zlp-page *::before,
    .zlp-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ══════════════════════ Responsive ══════════════════════ */
@media (max-width: 1040px) {
    .zlp-nav {
        display: none;
    }

    .zlp-menu-button {
        display: inline-flex;
    }

    .zlp-split-section,
    .zlp-footer-inner {
        grid-template-columns: 1fr;
    }

    .zlp-feature-grid,
    .zlp-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Feature bento → simpler 2-col flow */
    .home-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: none;
    }

    .home-bento > * {
        grid-area: auto !important;
    }

    .hbn-pos {
        grid-column: span 2;
    }
}

@media (max-width: 820px) {
    /* Hero bento → 2-col flow */
    .hero-board {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-template-areas: none;
    }

    .hero-board > * {
        grid-area: auto !important;
    }

    .hb-sales,
    .hb-pie {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .zlp-header-inner,
    .zlp-hero-inner,
    .hero-board,
    .zlp-strip,
    .zlp-section,
    .zlp-subhero,
    .zlp-cta,
    .zlp-footer-inner,
    .marketing-section,
    .marketing-subhero,
    .marketing-article {
        width: calc(100% - 32px);
    }

    .zlp-signin {
        display: none;
    }

    .zlp-header-cta {
        min-height: 38px;
        padding: 0 14px;
        font-size: .82rem;
    }

    .zlp-step-grid,
    .zlp-post-grid {
        grid-template-columns: 1fr;
    }

    .flow-rail {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .flow-node {
        max-width: none;
    }

    .flow-arrow {
        transform: rotate(90deg);
        padding: 6px 0;
    }

    .zlp-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .zlp-cta .zlp-actions {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .hero-board,
    .home-bento,
    .zlp-feature-grid,
    .zlp-pricing-grid,
    .zlp-footer-grid {
        grid-template-columns: 1fr;
    }

    .hb-sales,
    .hb-pie,
    .hbn-pos {
        grid-column: auto;
    }

    .zlp-hero .zlp-actions .zlp-button {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .zlp-brand {
        font-size: 1rem;
    }

    .zlp-brand-logo {
        height: 26px;
        max-width: 132px;
    }

    .zlp-header-inner {
        min-height: 60px;
    }

    .zlp-feature-grid article,
    .zlp-signal-list article,
    .hbn,
    .zlp-plan-card,
    .zlp-step-grid article,
    .zlp-post-card,
    .marketing-article-body {
        padding: 20px;
    }
}

/* ══════════════════════ Partner registration form ══════════════════════
   Used by the public /partners page (src/partner_pages.php). Reuses the
   marketing tokens so the form reads as part of the same page, not a bolted-on
   app screen. */
.zlp-partner-form-wrap {
    max-width: 640px;
    margin-top: 26px;
}

.zlp-partner-form {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.zlp-field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.zlp-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.zlp-field label {
    color: var(--ink);
    font-size: .9rem;
    font-weight: 800;
}

.zlp-field label span {
    color: var(--muted);
    font-weight: 500;
}

.zlp-field small {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.5;
}

.zlp-field input,
.zlp-field select {
    width: 100%;
    padding: 13px 15px;
    color: var(--ink);
    font-family: inherit;
    font-size: .96rem;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.zlp-field select {
    /* Native arrow is removed by the appearance reset above — draw our own. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23525f63'%3E%3Cpath d='M3.7 6.1h8.6L8 10.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px;
    padding-right: 38px;
}

.zlp-field input:focus,
.zlp-field select:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(18, 165, 148, .18);
}

.zlp-field input:disabled,
.zlp-field select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.zlp-field input[readonly] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    cursor: pointer;
}

.zlp-partner-form .zlp-actions {
    margin-top: 20px;
}

.zlp-partner-resend {
    margin: 14px 0 0;
    font-size: .88rem;
    font-weight: 600;
}

.zlp-partner-resend button {
    padding: 0;
    color: var(--accent);
    font: inherit;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.zlp-partner-error {
    margin: 16px 0 0;
    padding: 12px 14px;
    color: #8f1d1d;
    font-size: .89rem;
    font-weight: 700;
    line-height: 1.55;
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .22);
    border-radius: var(--r-sm);
}

.zlp-partner-legal {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.6;
}

.zlp-partner-legal a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 560px) {
    .zlp-partner-form {
        padding: 20px;
    }

    .zlp-field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ══════════════════════ Store download buttons ══════════════════════
   Brand marks sit inline with the label on /download. */
.zlp-store-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.zlp-store-button svg {
    flex: none;
}

.zlp-store-button.is-soon {
    opacity: .62;
    cursor: default;
}

.zlp-store-card {
    display: flex;
    flex-direction: column;
}

.zlp-store-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.zlp-store-meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}

.zlp-store-card .zlp-actions {
    margin-top: auto;
    padding-top: 16px;
}

/* ══════════════════════ Partner programme page ══════════════════════ */

/* The headline deal: two big numbers, split down the middle. */
.zlp-deal-band {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 4vw, 40px);
    padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 40px);
    background: linear-gradient(135deg, var(--deep), #14504c);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    text-align: center;
}

.zlp-deal-half {
    display: grid;
    gap: 4px;
    justify-items: center;
    min-width: 0;
}

.zlp-deal-num {
    color: #fff;
    font-size: clamp(2.4rem, 8vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

.zlp-deal-half strong {
    color: var(--accent-3);
    font-size: 1.02rem;
    font-weight: 800;
}

.zlp-deal-sub {
    max-width: 30ch;
    color: rgba(255, 255, 255, .76);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.55;
}

.zlp-deal-split {
    width: 1px;
    align-self: stretch;
    min-height: 64px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .26), transparent);
}

@media (max-width: 640px) {
    .zlp-deal-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .zlp-deal-split {
        width: 100%;
        height: 1px;
        min-height: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
    }
}

/* Earnings calculator. */
.zlp-calc-intro {
    max-width: 68ch;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.68;
}

.zlp-calc {
    margin-top: 24px;
    padding: clamp(22px, 3vw, 30px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.zlp-calc-control label {
    display: block;
    margin-bottom: 12px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 800;
}

.zlp-calc-control input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.zlp-calc-control input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sh-sm);
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}

.zlp-calc-control input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sh-sm);
    cursor: grab;
}

.zlp-calc-control input[type="range"]:focus-visible {
    outline: 3px solid rgba(18, 165, 148, .45);
    outline-offset: 4px;
}

.zlp-calc-count {
    display: block;
    margin-top: 12px;
    color: var(--accent-ink);
    font-size: 1.02rem;
    font-weight: 800;
}

.zlp-calc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.zlp-calc-result {
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.zlp-calc-result.is-lead {
    background: var(--accent-soft);
    border-color: rgba(15, 118, 110, .26);
}

.zlp-calc-label {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.zlp-calc-result strong {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -.02em;
}

.zlp-calc-result.is-lead strong {
    color: var(--accent-ink);
}

.zlp-calc-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Registration: explainer beside the form. */
.zlp-signup-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.zlp-signup-copy > p {
    max-width: 46ch;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.68;
}

.zlp-signup-steps {
    display: grid;
    gap: 16px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.zlp-signup-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.zlp-signup-steps span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: .92rem;
    font-weight: 900;
}

.zlp-signup-steps strong {
    display: block;
    color: var(--ink);
    font-size: .96rem;
    font-weight: 800;
}

.zlp-signup-steps em {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .87rem;
    font-style: normal;
    font-weight: 500;
}

.zlp-partner-terms {
    display: flex;
    gap: 10px;
    margin: 24px 0 0;
    padding: 13px 15px;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.6;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.zlp-partner-terms i {
    color: var(--accent);
    flex: none;
    margin-top: 2px;
}

/* Success state inside the form. */
.zlp-partner-done {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}

.zlp-partner-done-mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.7rem;
}

.zlp-partner-done p {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
}

@media (max-width: 860px) {
    .zlp-signup-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ============================================================
   Colour layer — 2026
   The marketing pages used to be cream + one teal accent, with the other
   hues showing up only in a few chart bars. This layer promotes those hues
   (honey, sky, berry, emerald, plus a violet) to section-level colour.

   Colour is carried by FLAT fills, not gradients: solid icon chips, solid
   tinted card surfaces, solid brand panels. Gradients are kept only where one
   does real work — the band edge fades, the photo caption scrim, the hero
   wash and the thin rainbow rules. Appended last so it wins over the base.
   ============================================================ */

/* ══════════════════════ Extra hue tokens ══════════════════════ */
body.zlp-page {
    --violet: #6d4aff;
    --violet-ink: #4326b8;
    --violet-solid: #5b3fd6;
    --violet-soft: #ece6fe;
    --honey-ink: #8a4f04;
    --berry-ink: #8d2f60;
    --sky-ink: #1f5591;
    --lime: #65a30d;

    /* Flat surface tints — light enough that body copy stays true black */
    --tint-mint: #e4f6f0;
    --tint-peach: #fdeddc;
    --tint-lavender: #ece6fe;
    --tint-sky: #e7f0fd;
    --tint-rose: #fbe6ef;
    --tint-lime: #eef6dd;
    --tint-amber: #fdeed3;

    /* Cooler, tighter elevation so the tinted surfaces stay clean */
    --sh-sm: 0 1px 2px rgba(20, 40, 60, .04), 0 6px 16px -8px rgba(20, 40, 60, .14);
    --sh: 0 18px 38px -18px rgba(17, 58, 70, .3);
    --sh-accent: 0 10px 22px -12px rgba(15, 118, 110, .45);
}

/* A whisper of hue on the canvas — enough to stop it reading as flat cream. */
body.zlp-page {
    background:
        radial-gradient(620px 460px at 92% 4%, rgba(109, 74, 255, .09), transparent 64%),
        radial-gradient(560px 440px at 2% 32%, rgba(18, 165, 148, .09), transparent 62%),
        radial-gradient(620px 480px at 98% 64%, rgba(232, 137, 12, .08), transparent 64%),
        radial-gradient(560px 440px at 4% 90%, rgba(176, 68, 126, .07), transparent 62%),
        #fbfcfb;
    background-attachment: fixed;
}

.zlp-shell {
    background: transparent;
    /* Full-bleed bands below are 100vw wide; clip (not hidden) so the sticky
       header keeps sticking. */
    overflow-x: clip;
}

/* ══════════════════════ Full-bleed section bands ══════════════════════ */
.zlp-band {
    position: relative;
    padding-bottom: clamp(56px, 7vw, 92px);
}

.zlp-band > * {
    position: relative;
    z-index: 1;
}

/* Flat fill; the only gradient is the short fade at each edge, which keeps the
   band from cutting a hard seam across the page. */
.zlp-band::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.zlp-band-mint::before { background: #dff4ed; }
.zlp-band-peach::before { background: #fdeddd; }
.zlp-band-violet::before { background: #ebe5fd; }
.zlp-band-sky::before { background: #e5eefc; }

/* Cards need a touch more lift once they sit on a tinted band. */
.zlp-band .hbn,
.zlp-band .zlp-step-grid article,
.zlp-band .zlp-signal-list article,
.zlp-band .zlp-faq details,
.zlp-band .flow-node {
    box-shadow: 0 2px 4px rgba(20, 40, 60, .05), 0 18px 34px -22px rgba(20, 40, 60, .55);
}

/* ══════════════════════ Header ══════════════════════ */
.zlp-header {
    background: rgba(255, 255, 255, .78);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(20, 40, 60, .06);
}

/* Thin multi-hue rule — the one place the full palette appears at once. */
.zlp-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-3), var(--emerald) 22%, var(--sky) 46%, var(--violet) 68%, var(--honey) 86%, var(--berry));
}

.zlp-nav {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(20, 40, 60, .08);
}

.zlp-nav-link.is-active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 6px 14px -8px rgba(15, 118, 110, .6);
}

/* ══════════════════════ Buttons ══════════════════════ */
.zlp-page .zlp-button-primary {
    background: var(--accent);
    box-shadow: 0 10px 22px -12px rgba(15, 118, 110, .6);
}

.zlp-page .zlp-button-primary:hover {
    background: var(--accent-ink);
    box-shadow: 0 16px 30px -14px rgba(15, 118, 110, .62);
}

.zlp-page .zlp-button-secondary {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(20, 40, 60, .1);
}

.zlp-page .zlp-button-secondary:hover {
    color: var(--violet-ink);
    border-color: rgba(109, 74, 255, .38);
    box-shadow: 0 12px 22px -14px rgba(109, 74, 255, .42);
}

/* ══════════════════════ Eyebrows — hue rotates by section ══════════════════════ */
.zlp-eyebrow,
.marketing-kicker {
    background: #d5efe9;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .18);
}

main > section:nth-of-type(4n+2) .zlp-eyebrow {
    color: var(--honey-ink);
    background: #fbe3c8;
    box-shadow: inset 0 0 0 1px rgba(232, 137, 12, .26);
}

main > section:nth-of-type(4n+2) .zlp-eyebrow i { color: var(--honey); }

main > section:nth-of-type(4n+3) .zlp-eyebrow {
    color: var(--violet-ink);
    background: #e2daff;
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .24);
}

main > section:nth-of-type(4n+3) .zlp-eyebrow i { color: var(--violet); }

main > section:nth-of-type(4n) .zlp-eyebrow {
    color: var(--berry-ink);
    background: #fbdbe8;
    box-shadow: inset 0 0 0 1px rgba(176, 68, 126, .24);
}

main > section:nth-of-type(4n) .zlp-eyebrow i { color: var(--berry); }

/* Inside a banded section the eyebrow follows the band, not the rotation. */
main > section.zlp-band-mint .zlp-eyebrow {
    color: var(--accent-ink);
    background: #c9ece3;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .22);
}

main > section.zlp-band-mint .zlp-eyebrow i { color: var(--accent); }

main > section.zlp-band-peach .zlp-eyebrow {
    color: var(--honey-ink);
    background: #f9d9b6;
    box-shadow: inset 0 0 0 1px rgba(232, 137, 12, .3);
}

main > section.zlp-band-peach .zlp-eyebrow i { color: var(--honey); }

main > section.zlp-band-violet .zlp-eyebrow {
    color: var(--violet-ink);
    background: #dbd1ff;
    box-shadow: inset 0 0 0 1px rgba(109, 74, 255, .28);
}

main > section.zlp-band-violet .zlp-eyebrow i { color: var(--violet); }

main > section.zlp-band-sky .zlp-eyebrow {
    color: var(--sky-ink);
    background: #cddffa;
    box-shadow: inset 0 0 0 1px rgba(47, 119, 198, .3);
}

main > section.zlp-band-sky .zlp-eyebrow i { color: var(--sky); }

/* ══════════════════════ Hero ══════════════════════ */
.zlp-hero {
    background:
        radial-gradient(1100px 620px at 50% 34%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .35) 60%, transparent 78%),
        linear-gradient(160deg, #d6f0e7 0%, #e7ecfa 48%, #fceade 100%);
}

.zlp-hero::after {
    /* fades the hero into the page canvas */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(251, 252, 251, .95));
    pointer-events: none;
}

.zlp-hero h1 em {
    color: var(--accent);
}

.hero-mini {
    color: var(--ink-2);
}

/* ══════════════════════ Hero bento board ══════════════════════ */
.hb-tile {
    background: #fff;
    border-color: rgba(20, 40, 60, .07);
    box-shadow: 0 1px 2px rgba(20, 40, 60, .05), 0 14px 30px -22px rgba(20, 40, 60, .5);
}

/* The label and figure used to run together on one line — stack them. Scoped
   to the header block so the sparkline (also a plain <div>) keeps its layout. */
.hb-sales > div:first-of-type,
.hb-wallet > div:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.hb-sales {
    background: var(--tint-mint);
    border-color: rgba(16, 185, 129, .28);
}

.hb-figure {
    color: var(--accent-ink);
}

.hb-delta {
    color: #05603a;
    background: #cbf3df;
}

.hb-bars {
    height: 56px;
    gap: 7px;
}

.hb-bars i {
    border-radius: 6px 6px 3px 3px;
}

.hb-pie {
    background: var(--tint-lavender);
    border-color: rgba(109, 74, 255, .22);
}

.hb-orders {
    background: var(--tint-peach);
    border-color: rgba(232, 137, 12, .26);
}

.hb-list li:nth-child(4) .hb-dot { background: var(--violet); }

.hb-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--honey-ink);
    font-size: .78rem;
    font-weight: 800;
}

.hb-more i {
    transition: transform .2s ease;
}

.hb-more:hover i {
    transform: translateX(3px);
}

.hb-chart {
    background: var(--tint-sky);
    border-color: rgba(47, 119, 198, .24);
}

.hb-wallet {
    background: var(--accent);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 18px 34px -20px rgba(15, 118, 110, .7);
}

.hb-wallet a {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.hb-stock {
    background: var(--tint-mint);
    border-color: rgba(16, 185, 129, .28);
}

.hb-stock i {
    color: #fff;
    background: var(--emerald);
}

.hb-alert {
    background: var(--tint-amber);
}

.hb-alert i {
    color: #fff;
    background: var(--honey);
}

/* ══════════════════════ Trust strip ══════════════════════ */
.zlp-strip span {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .05), inset 0 0 0 1px rgba(20, 40, 60, .05);
}

.zlp-strip span::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 50%;
    flex: 0 0 7px;
}

.zlp-strip span:nth-child(6n+1) { color: #05564c; background: #d8f3ea; }
.zlp-strip span:nth-child(6n+1)::before { background: var(--emerald); }
.zlp-strip span:nth-child(6n+2) { color: var(--honey-ink); background: #fce7d0; }
.zlp-strip span:nth-child(6n+2)::before { background: var(--honey); }
.zlp-strip span:nth-child(6n+3) { color: var(--sky-ink); background: #dfeafc; }
.zlp-strip span:nth-child(6n+3)::before { background: var(--sky); }
.zlp-strip span:nth-child(6n+4) { color: var(--violet-ink); background: #e6dfff; }
.zlp-strip span:nth-child(6n+4)::before { background: var(--violet); }
.zlp-strip span:nth-child(6n+5) { color: var(--berry-ink); background: #fbdfec; }
.zlp-strip span:nth-child(6n+5)::before { background: var(--berry); }
.zlp-strip span:nth-child(6n) { color: var(--accent-ink); background: #d7f1ed; }
.zlp-strip span:nth-child(6n)::before { background: var(--accent-2); }

/* ══════════════════════ Photo spotlight ══════════════════════ */
.zlp-spotlight-media img {
    position: relative;
    border-color: rgba(255, 255, 255, .8);
    box-shadow: 0 26px 54px -26px rgba(17, 58, 70, .5);
}

.zlp-check-list li:nth-child(2) i { color: var(--sky); }
.zlp-check-list li:nth-child(3) i { color: var(--violet); }

/* ══════════════════════ Feature bento ══════════════════════ */
.hbn {
    border-color: rgba(20, 40, 60, .07);
}

.hbn:hover {
    border-color: rgba(109, 74, 255, .28);
}

.hbn-pos {
    background: var(--accent);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 24px 42px -26px rgba(15, 118, 110, .7);
}

.hbn-inv {
    background: var(--violet-solid);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 24px 42px -26px rgba(76, 47, 158, .68);
}

.hbn-pos p,
.hbn-inv p {
    color: rgba(255, 255, 255, .88);
}

.hbn-pos .ico,
.hbn-inv .ico {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
}

.hbn-store { background: var(--tint-peach); border-color: rgba(232, 137, 12, .26); }
.hbn-report { background: var(--tint-sky); border-color: rgba(47, 119, 198, .24); }
.hbn-team { background: var(--tint-rose); border-color: rgba(176, 68, 126, .24); }
.hbn-sms { background: var(--tint-mint); border-color: rgba(18, 165, 148, .28); }
.hbn-wallet { background: var(--tint-lime); border-color: rgba(101, 163, 13, .28); }

.hbn-store .ico { color: #fff; background: var(--honey); }
.hbn-report .ico { color: #fff; background: var(--sky); }
.hbn-team .ico { color: #fff; background: var(--berry); }
.hbn-sms .ico { color: #fff; background: var(--accent); }
.hbn-wallet .ico { color: #fff; background: var(--lime); }

/* ══════════════════════ Use-case photo cards ══════════════════════ */
.uc-card {
    border-color: rgba(20, 40, 60, .07);
}

/* Scrim stays a gradient — it is what makes the caption readable over a photo. */
.uc-cap {
    padding-top: 30px;
    background: linear-gradient(180deg, rgba(6, 24, 26, 0), rgba(6, 24, 26, .82) 42%);
}

.uc-card:nth-child(1) .uc-cap i { background: var(--accent-2); }
.uc-card:nth-child(2) .uc-cap i { background: var(--honey); }
.uc-card:nth-child(3) .uc-cap i { background: var(--berry); }
.uc-card:nth-child(4) .uc-cap i { background: var(--violet); }

/* ══════════════════════ Signal list ══════════════════════ */
.zlp-signal-list article {
    position: relative;
    overflow: hidden;
    border-color: rgba(20, 40, 60, .07);
}

.zlp-signal-list article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.zlp-signal-list article:nth-child(2)::before { background: var(--honey); }
.zlp-signal-list article:nth-child(3)::before { background: var(--violet); }

.zlp-signal-list i,
.zlp-feature-grid i {
    color: #fff;
    background: var(--accent);
}

.zlp-signal-list article:nth-child(2) i,
.zlp-feature-grid article:nth-child(3n+2) i {
    color: #fff;
    background: var(--honey);
}

.zlp-signal-list article:nth-child(3) i,
.zlp-feature-grid article:nth-child(3n) i {
    color: #fff;
    background: var(--violet);
}

/* ══════════════════════ Feature grid (sub-pages) ══════════════════════ */
.zlp-feature-grid article {
    border-color: rgba(20, 40, 60, .07);
}

.zlp-feature-grid article:nth-child(3n+1) { background: var(--tint-mint); }
.zlp-feature-grid article:nth-child(3n+2) { background: var(--tint-peach); }
.zlp-feature-grid article:nth-child(3n) { background: var(--tint-lavender); }

/* ══════════════════════ Flow rail ══════════════════════ */
.flow-node {
    border-color: rgba(20, 40, 60, .07);
}

.flow-node:nth-child(1) { background: var(--tint-mint); }
.flow-node:nth-child(3) { background: var(--tint-peach); }
.flow-node:nth-child(5) { background: var(--tint-sky); }

.flow-node i {
    color: #fff;
    background: var(--accent);
}

/* The base sheet colours these two by index, so the white glyph has to be
   re-asserted at the same specificity or it stays tinted and disappears. */
.flow-node:nth-child(3) i { color: #fff; background: var(--honey); }
.flow-node:nth-child(5) i { color: #fff; background: var(--sky); }

.flow-arrow {
    color: var(--violet);
}

/* ══════════════════════ Steps ══════════════════════ */
.zlp-step-grid article {
    border-color: rgba(20, 40, 60, .07);
}

.zlp-step-grid article:nth-child(1) { background: var(--tint-mint); }
.zlp-step-grid article:nth-child(2) { background: var(--tint-peach); }
.zlp-step-grid article:nth-child(3) { background: var(--tint-lavender); }

.zlp-step-grid article::before { width: 5px; background: var(--accent); }
.zlp-step-grid article:nth-child(2)::before { background: var(--honey); }
.zlp-step-grid article:nth-child(3)::before { background: var(--violet); }

.zlp-step-grid span {
    color: #fff;
    background: var(--accent);
}

.zlp-step-grid article:nth-child(2) span { background: var(--honey); }
.zlp-step-grid article:nth-child(3) span { background: var(--violet); }

/* ══════════════════════ Pricing ══════════════════════ */
.zlp-plan-card {
    overflow: hidden;
    border-color: rgba(20, 40, 60, .07);
}

.zlp-plan-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: var(--accent);
}

.zlp-plan-card:nth-child(3)::before { background: var(--violet); }

.zlp-plan-price {
    color: var(--accent-ink);
}

.zlp-plan-card.is-featured {
    background: var(--accent);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 30px 58px -30px rgba(15, 118, 110, .7);
}

.zlp-plan-card.is-featured::before {
    background: #fbbf24;
}

.zlp-plan-card.is-featured p,
.zlp-plan-card.is-featured li {
    color: rgba(255, 255, 255, .9);
}

.zlp-plan-card.is-featured li i { color: #fff; }

.zlp-plan-card.is-featured .zlp-plan-price {
    color: #fff;
}

.zlp-plan-card.is-featured .zlp-button-primary {
    color: var(--accent-ink);
    background: #fff;
    box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .45);
}

.zlp-plan-card.is-featured .zlp-button-primary:hover {
    color: #06463f;
    background: #eafaf6;
}

.zlp-plan-badge {
    color: #4a2703;
    background: #fbbf24;
    box-shadow: 0 6px 14px -8px rgba(251, 191, 36, .8);
}

.zlp-note {
    color: var(--ink-2);
    background: #e2f2ee;
    border-color: rgba(15, 118, 110, .2);
}

/* ══════════════════════ FAQ ══════════════════════ */
.zlp-faq details {
    border-color: rgba(20, 40, 60, .07);
}

.zlp-faq summary::after {
    color: #fff;
    background: var(--accent);
}

.zlp-faq details:nth-child(2) summary::after { background: var(--honey); }
.zlp-faq details:nth-child(3) summary::after { background: var(--sky); }
.zlp-faq details:nth-child(4) summary::after { background: var(--violet); }
.zlp-faq details:nth-child(5) summary::after { background: var(--berry); }

/* ══════════════════════ CTA ══════════════════════ */
.zlp-cta {
    position: relative;
    background: #0f5a53;
    box-shadow: 0 34px 62px -34px rgba(15, 118, 110, .6);
}

main > section.zlp-cta .zlp-eyebrow {
    color: #eafaf6;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

main > section.zlp-cta .zlp-eyebrow i {
    color: var(--accent-3);
}

.zlp-cta .zlp-button-primary {
    color: var(--accent-ink);
    background: #fff;
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5);
}

.zlp-cta .zlp-button-primary:hover {
    color: #06463f;
    background: #eafaf6;
}

.zlp-cta .zlp-button-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none;
}

.zlp-cta .zlp-button-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .45);
}

/* ══════════════════════ Blog cards ══════════════════════ */
.zlp-post-card {
    border-color: rgba(20, 40, 60, .07);
}

.zlp-post-card:nth-child(4n+1) { background: var(--tint-mint); }
.zlp-post-card:nth-child(4n+2) { background: var(--tint-peach); }
.zlp-post-card:nth-child(4n+3) { background: var(--tint-lavender); }
.zlp-post-card:nth-child(4n) { background: var(--tint-sky); }

/* ══════════════════════ Footer ══════════════════════ */
.zlp-footer {
    position: relative;
    background: var(--deep);
}

.zlp-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-3), var(--emerald) 22%, var(--sky) 46%, var(--violet) 68%, var(--honey) 86%, var(--berry));
}