:root {
    --pz-ink: #173d34;
    --pz-ink-deep: #071916;
    --pz-teal: #2f7d69;
    --pz-gold: #d7ef63;
    --pz-coral: #f28f5b;
    --pz-blue: #2f6f9f;
    --pz-sky: #d9f2ff;
    --pz-soft: #edf7f2;
    --pz-mist: #f7fbf8;
    --pz-card: rgba(255, 255, 255, .92);
    --pz-line: rgba(23, 61, 52, .12);
    --pz-shadow: 0 24px 70px rgba(23, 61, 52, .11);
    --pz-shadow-strong: 0 34px 90px rgba(7, 25, 22, .22);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(215, 239, 99, .16), transparent 32rem),
        linear-gradient(180deg, #fbfdfb 0%, #f4faf6 42%, #ffffff 100%);
    color: var(--pz-ink);
    font-family: Inter, ui-sans-serif, system-ui, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.topbar {
    background: linear-gradient(90deg, var(--pz-ink-deep), #153b33 58%, #214f45);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 800;
}

.topbar .shell,
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 38px;
}

.topbar-links {
    display: flex;
    gap: 18px;
    align-items: center;
}

.pz-simple-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--pz-line);
    box-shadow: 0 14px 34px rgba(23, 61, 52, .05);
    backdrop-filter: blur(18px);
}

.nav-inner {
    min-height: 80px;
}

.logo {
    width: auto;
    height: 42px;
    max-width: min(230px, 56vw);
    object-fit: contain;
}

.footer-logo {
    padding: 6px;
    border-radius: 8px;
    background: white;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pz-page-link {
    border-radius: 8px;
    color: rgba(23, 61, 52, .82);
    font-size: 14px;
    font-weight: 900;
    padding: 10px 12px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.pz-page-link:hover,
.pz-page-link.is-active {
    color: var(--pz-ink);
    background: linear-gradient(135deg, rgba(215, 239, 99, .2), rgba(47, 125, 105, .08));
}

.pz-page-link.is-active {
    box-shadow: inset 0 -2px 0 var(--pz-teal);
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: min(860px, calc(100svh - 118px));
    border-bottom: 1px solid rgba(23, 61, 52, .08);
    background: var(--pz-ink-deep);
    padding: clamp(72px, 9vh, 104px) 0 clamp(64px, 8vh, 92px);
    display: flex;
    align-items: center;
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 12% 18%, rgba(215, 239, 99, .23), transparent 22rem),
        linear-gradient(90deg, rgba(7, 25, 22, .97) 0%, rgba(7, 25, 22, .88) 35%, rgba(7, 25, 22, .5) 64%, rgba(7, 25, 22, .12) 100%),
        linear-gradient(180deg, rgba(7, 25, 22, .16) 0%, rgba(7, 25, 22, .88) 100%);
    content: "";
    pointer-events: none;
}

.hero::after {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 34%;
    background: linear-gradient(180deg, rgba(7, 25, 22, 0), #f4faf6 96%);
    content: "";
    pointer-events: none;
}

.hero.slim {
    padding: 56px 0;
}

.hero-grid,
.quick-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    gap: clamp(34px, 5vw, 68px);
    align-items: center;
}

.hero-grid {
    position: static;
    z-index: 3;
    display: block;
}

.hero-copy {
    position: relative;
    z-index: 3;
    max-width: 650px;
    padding: 32px 0;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 680px;
    margin-bottom: 20px;
    font-size: clamp(42px, 5.6vw, 68px);
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

h2 {
    margin-bottom: 16px;
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.05;
}

p {
    color: rgba(23, 61, 52, .72);
    line-height: 1.7;
}

.hero p {
    max-width: 580px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.12rem;
    font-weight: 650;
    text-shadow: 0 12px 36px rgba(0, 0, 0, .32);
}

.hero h1 {
    color: white;
    text-shadow: 0 20px 60px rgba(0, 0, 0, .48);
}

.hero-copy::before {
    position: absolute;
    inset: -20px -30px;
    z-index: -1;
    width: min(790px, calc(100vw - 24px));
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(7, 25, 22, .42), rgba(7, 25, 22, .16) 62%, rgba(7, 25, 22, 0));
    content: "";
    backdrop-filter: blur(1px);
}

.badge {
    display: inline-flex;
    margin-bottom: 18px;
    border: 1px solid rgba(47, 125, 105, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    padding: 7px 12px;
    color: #246253;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.hero .badge {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-proof {
    display: grid;
    max-width: 620px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

.hero-metrics {
    display: grid;
    max-width: 620px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.hero-metrics span {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .11);
    padding: 12px 14px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(14px);
}

.hero-metrics strong {
    color: var(--pz-gold);
    font-size: 22px;
    line-height: 1;
}

.hero-proof span {
    display: grid;
    gap: 5px;
    color: rgba(255, 255, 255, .84);
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}

.hero-proof strong {
    color: white;
    font-size: 14px;
    font-weight: 950;
}

.pz-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.pz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(23, 61, 52, .16);
}

.pz-button-primary {
    background: linear-gradient(135deg, var(--pz-ink), #246253);
    color: white;
    box-shadow: 0 14px 32px rgba(47, 125, 105, .18);
}

.hero .pz-button-primary {
    background: linear-gradient(135deg, #ecff83, var(--pz-gold));
    color: var(--pz-ink);
    box-shadow: 0 18px 42px rgba(215, 239, 99, .22);
}

.hero .pz-button-light {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .16);
    color: white;
    backdrop-filter: blur(12px);
}

.pz-button-dark {
    background: var(--pz-gold);
    color: var(--pz-ink);
}

.pz-button-light {
    border: 1px solid var(--pz-line);
    background: white;
    color: var(--pz-ink);
}

.pwa-install {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: grid;
    gap: 2px;
    max-width: min(280px, calc(100% - 36px));
    border: 1px solid rgba(215, 239, 99, .55);
    border-radius: 8px;
    background: var(--pz-ink);
    padding: 13px 16px;
    color: white;
    text-align: left;
    box-shadow: 0 22px 60px rgba(23, 61, 52, .28);
    cursor: pointer;
}

.pwa-install[hidden] {
    display: none;
}

.pwa-install span {
    font-size: 15px;
    font-weight: 950;
}

.pwa-install small {
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
    font-weight: 800;
}

.phone-card,
.hero-visual,
.simulator,
.form-card,
.plan-card,
.cards-three article,
.flow-lanes article {
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: 24px;
    box-shadow: var(--pz-shadow);
}

.simulator,
.form-card,
.plan-card {
    position: relative;
    overflow: hidden;
}

.hero-visual {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-height: 500px;
    padding: 0;
    background: linear-gradient(145deg, #173d34, #245e50);
    isolation: isolate;
}

.hero .hero-visual {
    position: absolute;
    inset: 0;
    z-index: auto;
    width: 100vw;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--pz-ink-deep);
    box-shadow: none;
    left: 50%;
    margin-left: -50vw;
}

.hero-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 61, 52, .04) 0%, rgba(23, 61, 52, .16) 44%, rgba(23, 61, 52, .66) 100%);
    content: "";
    pointer-events: none;
}

.hero .hero-visual::after {
    display: none;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center 42%;
}

.hero .hero-visual img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 92% center;
    filter: saturate(1.05) contrast(1.03);
}

.transaction-card {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: grid;
    gap: 3px;
    width: min(250px, calc(100% - 40px));
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    padding: 16px;
    color: var(--pz-ink);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}

.hero .transaction-card {
    z-index: 4;
    right: max(24px, calc((100vw - 1180px) / 2));
    bottom: 42px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--pz-shadow-strong);
}

.hero-status-card {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(285px, calc(100% - 40px));
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(16, 47, 41, .84);
    padding: 14px;
    color: white;
    backdrop-filter: blur(12px);
}

.hero .hero-status-card {
    z-index: 4;
    top: auto;
    right: max(24px, calc((100vw - 1180px) / 2));
    bottom: 178px;
    left: auto;
    box-shadow: 0 24px 70px rgba(7, 25, 22, .22);
}

.hero-status-card span {
    width: 100%;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-status-card b {
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    padding: 7px 10px;
    font-size: 12px;
}

.hero-visual figcaption small {
    color: var(--pz-teal);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-visual figcaption strong {
    font-size: 26px;
    line-height: 1.1;
}

.hero-visual figcaption span {
    color: rgba(23, 61, 52, .68);
    font-size: 13px;
    font-weight: 800;
}

.flow-lanes {
    display: grid;
    gap: 16px;
    counter-reset: step;
}

.flow-lanes article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 18px;
    align-items: start;
}

.flow-lanes article span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--pz-gold);
    color: var(--pz-ink);
    font-weight: 950;
}

.flow-lanes article h3,
.flow-lanes article p {
    grid-column: 2;
}

.marketplace-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(215, 239, 99, .28), transparent 22rem),
        radial-gradient(circle at 14% 0%, rgba(47, 111, 159, .2), transparent 24rem),
        linear-gradient(135deg, var(--pz-ink-deep), #17483d 58%, #246253);
    padding: clamp(64px, 8vw, 104px) 0;
    color: white;
}

.marketplace-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: rgba(255, 255, 255, .24);
    content: "";
}

.marketplace-hero-grid,
.marketplace-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: center;
}

.marketplace-hero h1 {
    color: white;
}

.marketplace-hero p {
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    font-weight: 650;
}

.marketplace-board {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    padding: 18px;
    box-shadow: var(--pz-shadow-strong);
    backdrop-filter: blur(18px);
}

.marketplace-board::before {
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -80px;
    border-radius: 999px;
    background: rgba(215, 239, 99, .18);
    content: "";
}

.market-row,
.market-pulse {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(7, 25, 22, .28);
    padding: 15px;
}

.market-row {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.market-row span,
.market-pulse small {
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.market-row strong {
    grid-column: 1;
    color: white;
    font-size: 17px;
}

.market-row b {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-radius: 999px;
    background: rgba(215, 239, 99, .18);
    padding: 8px 10px;
    color: var(--pz-gold);
    font-size: 12px;
}

.market-row.is-featured {
    background: rgba(255, 255, 255, .94);
}

.market-row.is-featured span {
    color: rgba(23, 61, 52, .62);
}

.market-row.is-featured strong {
    color: var(--pz-ink);
}

.market-row.is-featured b {
    background: var(--pz-gold);
    color: var(--pz-ink);
}

.market-pulse strong {
    color: white;
    font-size: 20px;
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.marketplace-grid article,
.participant-list article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: 24px;
    box-shadow: var(--pz-shadow);
}

.marketplace-grid article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--pz-gold), var(--pz-coral), var(--pz-blue));
    content: "";
}

.marketplace-grid b {
    display: inline-flex;
    width: max-content;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(215, 239, 99, .24);
    padding: 7px 10px;
    color: var(--pz-ink);
    font-size: 12px;
}

.marketplace-grid h3 {
    margin-bottom: 8px;
}

.marketplace-grid span {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(47, 125, 105, .09);
    padding: 8px 10px;
    color: #246253;
    font-size: 12px;
    font-weight: 950;
}

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

.participant-list article {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;
}

.participant-list strong {
    color: var(--pz-ink);
    font-size: 18px;
}

.participant-list span {
    color: rgba(23, 61, 52, .68);
    line-height: 1.6;
}

.bills-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(215, 239, 99, .28), transparent 20rem),
        radial-gradient(circle at 82% 18%, rgba(242, 143, 91, .18), transparent 18rem),
        linear-gradient(135deg, #faffef 0%, #eef8f4 48%, #ffffff 100%);
    padding: clamp(62px, 8vw, 100px) 0;
}

.bills-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr);
    gap: clamp(34px, 5vw, 70px);
    align-items: center;
}

.bills-hero h1 {
    max-width: 760px;
    color: var(--pz-ink);
}

.bills-hero p {
    max-width: 620px;
    font-size: 1.08rem;
    font-weight: 650;
}

.bills-stack {
    display: grid;
    gap: 12px;
}

.bills-stack article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(23, 61, 52, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    padding: 18px;
    box-shadow: 0 22px 60px rgba(23, 61, 52, .1);
}

.bills-stack span {
    color: rgba(23, 61, 52, .6);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.bills-stack strong {
    grid-column: 1;
    color: var(--pz-ink);
    font-size: 19px;
}

.bills-stack b {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-radius: 999px;
    background: rgba(215, 239, 99, .3);
    padding: 8px 10px;
    color: var(--pz-ink);
    font-size: 12px;
}

.bill-category-grid,
.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.bill-category-grid article,
.onboarding-grid article {
    position: relative;
    display: grid;
    align-content: start;
    overflow: hidden;
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: 24px;
    box-shadow: var(--pz-shadow);
}

.bill-category-grid article::before,
.onboarding-grid article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--pz-gold), var(--pz-teal), var(--pz-coral));
    content: "";
}

.bill-category-grid b,
.onboarding-grid b {
    width: max-content;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(47, 125, 105, .09);
    padding: 7px 10px;
    color: #246253;
    font-size: 12px;
    font-weight: 950;
}

.bill-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.bill-highlights span {
    border: 1px solid rgba(47, 125, 105, .16);
    border-radius: 999px;
    background: white;
    padding: 9px 12px;
    color: #246253;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 12px 32px rgba(23, 61, 52, .06);
}

.onboarding-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 239, 99, .2), transparent 20rem),
        linear-gradient(180deg, #ffffff, #f4faf6);
}

.onboarding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.onboarding-grid article {
    gap: 10px;
}

.onboarding-grid .pz-button {
    width: max-content;
    margin-top: 10px;
}

.contact-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(215, 239, 99, .28), transparent 22rem),
        radial-gradient(circle at 90% 0%, rgba(47, 111, 159, .22), transparent 24rem),
        linear-gradient(135deg, var(--pz-ink-deep), #17483d 58%, #f4faf6 58.1%, #ffffff 100%);
    padding: clamp(62px, 8vw, 104px) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(390px, .8fr);
    gap: clamp(34px, 5vw, 70px);
    align-items: center;
}

.contact-copy h1 {
    color: white;
}

.contact-copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    font-weight: 650;
}

.contact-routes {
    display: grid;
    gap: 12px;
    max-width: 640px;
    margin-top: 30px;
}

.contact-routes article {
    display: grid;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .11);
    padding: 15px 16px;
    color: white;
    box-shadow: 0 20px 50px rgba(7, 25, 22, .16);
    backdrop-filter: blur(16px);
}

.contact-routes span,
.form-kicker span,
.contact-info-grid b {
    color: var(--pz-gold);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.contact-routes strong {
    font-size: 16px;
}

.contact-form-card {
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--pz-shadow-strong);
}

.form-kicker {
    display: grid;
    gap: 4px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(215, 239, 99, .24), rgba(217, 242, 255, .42));
    padding: 14px;
}

.form-kicker span {
    color: #246253;
}

.form-kicker strong {
    color: var(--pz-ink);
    font-size: 18px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.contact-info-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: 24px;
    box-shadow: var(--pz-shadow);
}

.contact-info-grid article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--pz-gold), var(--pz-teal), var(--pz-blue));
    content: "";
}

.contact-info-grid b {
    color: #246253;
}

.audience-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 104px) 0;
    color: white;
}

.merchant-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(215, 239, 99, .28), transparent 22rem),
        radial-gradient(circle at 88% 8%, rgba(242, 143, 91, .2), transparent 20rem),
        linear-gradient(135deg, var(--pz-ink-deep), #17483d 58%, #246253);
}

.lender-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(217, 242, 255, .24), transparent 22rem),
        radial-gradient(circle at 88% 8%, rgba(215, 239, 99, .22), transparent 20rem),
        linear-gradient(135deg, #071916, #173d34 48%, #2f6f9f);
}

.gateway-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(215, 239, 99, .25), transparent 22rem),
        radial-gradient(circle at 88% 10%, rgba(217, 242, 255, .24), transparent 22rem),
        linear-gradient(135deg, #071916, #17483d 52%, #2f6f9f);
}

.audience-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    gap: clamp(34px, 5vw, 70px);
    align-items: center;
}

.audience-hero h1 {
    color: white;
}

.audience-hero p {
    max-width: 640px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    font-weight: 650;
}

.audience-panel {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    padding: 18px;
    box-shadow: var(--pz-shadow-strong);
    backdrop-filter: blur(18px);
}

.audience-stat {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(7, 25, 22, .25);
    padding: 16px;
}

.audience-stat span {
    color: var(--pz-gold);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.audience-stat strong {
    color: white;
    font-size: 18px;
}

.audience-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.audience-feature-grid article,
.audience-steps article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: 24px;
    box-shadow: var(--pz-shadow);
}

.audience-feature-grid article::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--pz-gold), var(--pz-teal), var(--pz-blue));
    content: "";
}

.audience-feature-grid b {
    display: inline-flex;
    width: max-content;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(215, 239, 99, .24);
    padding: 7px 10px;
    color: var(--pz-ink);
    font-size: 12px;
}

.audience-split {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
    margin-bottom: 34px;
}

.audience-steps {
    display: grid;
    gap: 12px;
}

.audience-steps article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
}

.audience-steps strong {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--pz-gold);
    color: var(--pz-ink);
}

.audience-steps span {
    color: rgba(23, 61, 52, .72);
    line-height: 1.55;
    font-weight: 750;
}

.gateway-terminal {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    padding: 18px;
    box-shadow: var(--pz-shadow-strong);
    backdrop-filter: blur(18px);
}

.gateway-screen {
    display: grid;
    gap: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    padding: 24px;
    color: var(--pz-ink);
}

.gateway-screen small {
    color: #246253;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.gateway-screen strong {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
}

.gateway-screen span {
    color: rgba(23, 61, 52, .68);
    font-weight: 850;
}

.gateway-rails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gateway-rails b {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(7, 25, 22, .28);
    padding: 12px;
    color: white;
    text-align: center;
}

.legal-hero {
    background:
        radial-gradient(circle at 14% 0%, rgba(215, 239, 99, .18), transparent 24rem),
        linear-gradient(180deg, #ffffff, #f4faf6);
    padding: 82px 0;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr);
    gap: 18px;
    align-items: start;
}

.balance-card {
    border-radius: 8px;
    background: linear-gradient(145deg, #1f5749 0%, #173d34 100%);
    padding: 24px;
    color: white;
}

.balance-card p,
.balance-card small {
    color: rgba(255, 255, 255, .72);
}

.mini-grid,
.biller-tabs,
.persona-tabs,
.form-grid,
.plans-grid,
.cards-three {
    display: grid;
    gap: 12px;
}

.mini-grid {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.mini-grid span,
.biller-tabs button {
    border: 1px solid rgba(23, 61, 52, .08);
    border-radius: 8px;
    background: var(--pz-soft);
    padding: 12px;
}

.section {
    padding: 82px 0;
}

.hero + .section {
    position: relative;
    z-index: 5;
}

.white {
    background: white;
}

.section-head {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center;
}

.compact-head {
    margin-bottom: 28px;
}

.cards-three,
.plans-grid {
    grid-template-columns: repeat(3, 1fr);
}

.cards-three article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: hidden;
}

.cards-three article::before,
.plan-card::before,
.simulator::before,
.form-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--pz-gold), var(--pz-teal), var(--pz-blue));
    content: "";
}

.cards-three article b {
    display: inline-flex;
    width: max-content;
    border-radius: 999px;
    background: rgba(49, 93, 130, .1);
    padding: 7px 10px;
    color: var(--pz-blue);
    font-size: 12px;
}

.cards-three article h3 {
    margin-bottom: 4px;
}

.cards-three article a {
    width: max-content;
    margin-top: 6px;
    color: #246253;
    font-weight: 950;
    text-decoration: none;
}

.cards-three article a:hover {
    text-decoration: underline;
}

.compact {
    grid-template-columns: repeat(3, 1fr);
}

.biller-tabs {
    grid-template-columns: repeat(3, 1fr);
}

.biller-tabs button {
    color: rgba(23, 61, 52, .72);
    text-align: left;
    font-weight: 900;
    cursor: pointer;
}

.biller-tabs button.is-active {
    border-color: var(--pz-teal);
    background: linear-gradient(135deg, rgba(215, 239, 99, .28), var(--pz-soft));
    color: var(--pz-ink);
}

label {
    display: grid;
    gap: 7px;
    color: rgba(23, 61, 52, .8);
    font-size: 14px;
    font-weight: 900;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid rgba(23, 61, 52, .18);
    border-radius: 8px;
    background: white;
    padding: 12px 14px;
    color: var(--pz-ink);
    font: inherit;
    font-size: 16px;
    box-shadow: 0 1px 0 rgba(23, 61, 52, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(47, 125, 105, .62);
    box-shadow: 0 0 0 4px rgba(47, 125, 105, .12);
}

form {
    display: grid;
    gap: 16px;
}

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

.persona-tabs {
    grid-template-columns: repeat(3, 1fr);
}

.persona-tabs input {
    width: auto;
}

.persona-tabs span,
.summary {
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pz-mist), rgba(217, 242, 255, .45));
    padding: 12px;
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: -122px 0 64px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    box-shadow: var(--pz-shadow-strong);
    backdrop-filter: blur(20px);
}

.trust-strip span {
    min-height: 78px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .86);
    padding: 18px;
    color: var(--pz-ink);
    font-size: 13px;
    font-weight: 950;
    text-align: center;
}

.trust-strip span::before {
    width: 8px;
    height: 8px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: var(--pz-gold);
    box-shadow: 0 0 0 6px rgba(215, 239, 99, .18);
    content: "";
}

.check-row {
    display: flex;
    align-items: start;
}

.check-row input {
    width: auto;
}

.summary {
    display: grid;
    gap: 10px;
}

.summary span {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.flash {
    margin-top: 16px;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 800;
}

.flash.success {
    border: 1px solid rgba(47, 125, 105, .35);
    background: rgba(47, 125, 105, .1);
}

.flash.error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.plan-card ul {
    display: grid;
    gap: 10px;
    padding-left: 0;
    list-style: none;
}

.eyebrow {
    color: var(--pz-teal);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

footer {
    background:
        radial-gradient(circle at 82% 0%, rgba(215, 239, 99, .16), transparent 24rem),
        linear-gradient(135deg, var(--pz-ink-deep), var(--pz-ink));
    padding: 48px 0;
    color: white;
}

.partners-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 0%, rgba(215, 239, 99, .24), transparent 22rem),
        linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.partner-logo {
    position: relative;
    display: grid;
    min-height: 132px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(23, 61, 52, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 24px 70px rgba(23, 61, 52, .09);
}

.partner-logo::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--partner-accent, var(--pz-teal));
    content: "";
}

.partner-logo::after {
    position: absolute;
    width: 110px;
    height: 110px;
    right: -38px;
    bottom: -48px;
    border-radius: 999px;
    background: var(--partner-glow, rgba(47, 125, 105, .14));
    content: "";
}

.partner-logo span {
    position: relative;
    z-index: 1;
    color: var(--partner-color, var(--pz-ink));
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 950;
    letter-spacing: 0;
}

.partner-logo.finclude {
    --partner-accent: #d7ef63;
    --partner-color: #173d34;
    --partner-glow: rgba(215, 239, 99, .24);
}

.partner-logo.nedbank {
    --partner-accent: #007a3d;
    --partner-color: #007a3d;
    --partner-glow: rgba(0, 122, 61, .13);
}

.partner-logo.mpesa {
    --partner-accent: #e60000;
    --partner-color: #d71920;
    --partner-glow: rgba(230, 0, 0, .11);
}

.partner-logo.ecocash {
    --partner-accent: #f5b400;
    --partner-color: #173d34;
    --partner-glow: rgba(245, 180, 0, .16);
}

footer p,
footer a {
    display: block;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
    text-decoration: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.45fr .9fr .9fr .9fr;
    gap: 34px;
}

.legal-card {
    border: 1px solid var(--pz-line);
    border-radius: 8px;
    background: var(--pz-card);
    padding: clamp(22px, 4vw, 34px);
    box-shadow: var(--pz-shadow);
}

.legal-card p {
    margin-bottom: 16px;
}

.legal-card p:last-child {
    margin-bottom: 0;
}

.legal-aside {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(23, 61, 52, .1);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pz-ink), #246253);
    padding: 24px;
    color: white;
    box-shadow: var(--pz-shadow);
}

.legal-aside strong {
    font-size: 20px;
}

.legal-aside p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .78);
}

.legal-aside .pz-button {
    width: max-content;
    background: var(--pz-gold);
    color: var(--pz-ink);
}

@media (max-width: 850px) {
    .hero-grid,
    .quick-grid,
    .marketplace-hero-grid,
    .marketplace-split,
    .bills-hero-grid,
    .contact-grid,
    .audience-hero-grid,
    .audience-split,
    .legal-layout,
    .cards-three,
    .plans-grid,
    .footer-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid,
    .quick-grid {
        gap: 32px;
    }

    .hero::before {
        background:
            radial-gradient(circle at 18% 12%, rgba(215, 239, 99, .18), transparent 18rem),
            linear-gradient(90deg, rgba(7, 25, 22, .95) 0%, rgba(7, 25, 22, .82) 58%, rgba(7, 25, 22, .48) 100%),
            linear-gradient(180deg, rgba(7, 25, 22, .18) 0%, rgba(7, 25, 22, .86) 100%);
    }

    .nav-inner {
        align-items: start;
        flex-direction: column;
        padding: 16px 0;
    }

    nav {
        width: 100%;
        gap: 10px 16px;
    }

    .hero-metrics,
    .trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .bill-category-grid,
    .onboarding-grid,
    .contact-info-grid,
    .audience-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-strip {
        margin-top: -96px;
    }
}

@media (max-width: 640px) {
    .shell {
        width: min(100% - 24px, 1180px);
    }

    .topbar .shell {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
    }

    .topbar-links {
        width: 100%;
        justify-content: space-between;
    }

    .nav-inner {
        gap: 14px;
        min-height: 0;
        padding: 14px 0;
    }

    .logo {
        height: 34px;
    }

    .pz-page-link {
        font-size: 13px;
    }

    .hero {
        min-height: calc(100svh - 96px);
        padding: 62px 0 58px;
        align-items: flex-start;
    }

    .hero::before {
        background:
            radial-gradient(circle at 16% 10%, rgba(215, 239, 99, .14), transparent 14rem),
            linear-gradient(90deg, rgba(7, 25, 22, .94) 0%, rgba(7, 25, 22, .8) 100%),
            linear-gradient(180deg, rgba(7, 25, 22, .3) 0%, rgba(7, 25, 22, .92) 100%);
    }

    .hero-copy {
        padding: 18px 0;
    }

    .hero-copy::before {
        inset: -16px -12px;
        width: calc(100vw - 24px);
        background: rgba(7, 25, 22, .22);
    }

    .hero.slim {
        padding: 42px 0;
    }

    h1 {
        font-size: clamp(35px, 11vw, 48px);
        line-height: 1.04;
    }

    h2 {
        font-size: clamp(27px, 9vw, 38px);
    }

    .hero p {
        font-size: 1rem;
    }

    .section {
        padding: 54px 0;
    }

    .hero-proof,
    .hero-metrics,
    .mini-grid,
    .biller-tabs {
        grid-template-columns: 1fr;
    }

    .trust-strip {
        grid-template-columns: 1fr;
        margin: -80px 0 42px;
    }

    .trust-strip span {
        min-height: 64px;
    }

    .persona-tabs {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-grid,
    .bill-category-grid,
    .onboarding-grid,
    .contact-info-grid,
    .audience-feature-grid,
    .legal-layout,
    .audience-steps article,
    .participant-list article {
        grid-template-columns: 1fr;
    }

    .contact-hero {
        background:
            radial-gradient(circle at 12% 8%, rgba(215, 239, 99, .22), transparent 18rem),
            linear-gradient(180deg, var(--pz-ink-deep), #17483d 54%, #f4faf6 54.1%, #ffffff 100%);
    }

    .bills-stack article {
        grid-template-columns: 1fr;
    }

    .bills-stack b {
        grid-column: auto;
        grid-row: auto;
        width: max-content;
    }

    .onboarding-grid .pz-button {
        width: 100%;
    }

    .partner-logo {
        min-height: 104px;
    }

    .phone-card,
    .hero-visual,
    .simulator,
    .form-card,
    .plan-card,
    .cards-three article,
    .flow-lanes article {
        padding: 18px;
    }

    .hero-visual {
        min-height: auto;
        padding: 0;
    }

    .hero-visual img {
        min-height: 340px;
    }

    .hero .hero-visual img {
        min-height: 100%;
        object-position: 72% center;
    }

    .hero .transaction-card,
    .hero .hero-status-card {
        display: none;
    }

    .hero-visual::after {
        opacity: .35;
    }

    .balance-card {
        padding: 20px;
    }

    .summary span {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .pwa-install {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
    }
}

@media (max-width: 420px) {
    .hero-proof,
    .mini-grid,
    .biller-tabs {
        grid-template-columns: 1fr;
    }

    .actions .pz-button {
        width: 100%;
    }
}