/* Partner programme design layer.
 *
 * The presentation layer for Components/Pages/PartnerProgramPage.razor. Global
 * CSS, linked from App.razor — it was Blazor-scoped until the stylesheets were
 * consolidated under wwwroot/css. The same three rules pages/saas-pricing.css
 * calls out apply:
 *
 * 1. Nothing confines these rules to this page any more, so every selector is
 *    pp- prefixed or a descendant of one. Card chrome lives on .pp-formcard,
 *    the wrapper written in this file, rather than on <LeadForm />'s internals
 *    — isolation used to make that mandatory and it is still the rule here,
 *    because LeadForm renders on other pages too.
 * 2. @keyframes names are global too. Hence the pp- prefix on
 *    every one, so they cannot collide with the compiled Tailwind bundle, with
 *    Home's qh- animations or with the pricing page's qp- ones.
 * 3. These rules are unlayered and Tailwind v4's utilities live inside @layer,
 *    so they win regardless of specificity. Keep every selector class-based and
 *    prefixed — a bare element selector here would leak the same way the
 *    deleted css/site.css did.
 *
 * WHY HAND-WRITTEN CSS AND NOT UTILITIES. The Tailwind bundle in wwwroot is a
 * Next.js build artefact: it contains only the utilities that build emitted, so
 * a class this page invents does not exist at runtime, and an arbitrary value
 * like min-w-[720px] renders as nothing. It also ships a second sheet that
 * redefines unprefixed .grid-cols-2/3/4 with !important, which is why the old
 * markup had to write grid-cols-1 as its base everywhere. Owning the CSS makes
 * both problems go away, and it is the only way to get the dark channel card,
 * the stats strip overlapping the hero, and the step connectors.
 *
 * Colour. One ramp, taken from the logo: #a22dea (magenta-violet) → #7b5ee5 →
 * #5b5de2 (indigo-blue), with the site's primary #4f46e5 → #7c3aed inside it.
 * Exactly one hue comes from outside it — teal #0d9488 → #14b8a6, and it earns
 * its place by being the page's single semantic signal: teal is ALWAYS the
 * Referral tier and violet is ALWAYS the Channel tier, in the cards, the
 * comparison table and the tier badges alike. A visitor who works out which
 * tier they are once can then follow one colour down the page.
 */

/* ── shared: buttons ────────────────────────────────────────────────── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .2s, border-color .25s;
}

.pp-btn:hover { transform: translateY(-2px); }

.pp-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.pp-btn--solid {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 18px 38px -18px rgba(79, 70, 229, .9);
}

.pp-btn--solid:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    box-shadow: 0 26px 52px -18px rgba(79, 70, 229, 1);
}

/* The referral tier's action. Teal, because that tier is teal everywhere. */
.pp-btn--teal {
    color: #fff;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    box-shadow: 0 18px 38px -18px rgba(13, 148, 136, .9);
}

.pp-btn--teal:hover {
    background: linear-gradient(135deg, #0f766e, #0d9488);
    box-shadow: 0 26px 52px -18px rgba(13, 148, 136, 1);
}

.pp-btn--outline {
    color: #1e293b;
    background: #fff;
    border-color: #e4e2f3;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .55);
}

.pp-btn--outline:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    box-shadow: 0 18px 34px -20px rgba(79, 70, 229, .6);
}

/* On a dark panel a gradient button goes muddy against the background it sits
   on, so the hero, the channel card and the closing band all invert instead. */
.pp-btn--light {
    color: #2e1065;
    background: #fff;
    box-shadow: 0 18px 38px -18px rgba(2, 6, 23, .9);
}

.pp-btn--light:hover {
    color: #4338ca;
    background: #f5f3ff;
    box-shadow: 0 26px 52px -18px rgba(2, 6, 23, 1);
}

.pp-btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

.pp-btn--ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .55);
}

.pp-btn--block { width: 100%; }

/* ── shared: section furniture ──────────────────────────────────────── */
.pp-sec { padding: 84px 0; }

.pp-sec--tint {
    background: linear-gradient(180deg, #fbfaff 0%, #fff 44%, #f7f6ff 100%);
    border-top: 1px solid #eeecf9;
    border-bottom: 1px solid #eeecf9;
}

/* Both jump targets clear the sticky header (h-16 / md:h-20) when a CTA lands
   here; without it the section's first line sits underneath the bar. */
.pp-anchor { scroll-margin-top: 96px; }

.pp-head {
    max-width: 760px;
    margin: 0 0 48px;
}

.pp-head--center {
    max-width: 740px;
    margin-inline: auto;
    text-align: center;
}

.pp-head__rule {
    display: block;
    width: 54px;
    height: 4px;
    margin: 0 0 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, #4f46e5, #a855f7);
}

.pp-head--center .pp-head__rule { margin-inline: auto; }

.pp-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: linear-gradient(96deg, #4f46e5, #a22dea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-head__title {
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.16;
    letter-spacing: -.028em;
    font-weight: 800;
    color: #0b1020;
    margin: 0;
}

.pp-head__sub {
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
    margin: 16px 0 0;
    max-width: 680px;
}

.pp-head--center .pp-head__sub { margin-inline: auto; }

/* ── hero ───────────────────────────────────────────────────────────── */
.pp-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 132px;
    background:
        radial-gradient(ellipse 90% 60% at 12% 0%, #3b1d7a 0%, transparent 58%),
        linear-gradient(150deg, #221049 0%, #1a1240 42%, #140f33 100%);
}

.pp-hero__aurora,
.pp-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pp-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(96px);
    opacity: .85;
    animation: pp-drift 28s ease-in-out infinite;
}

.pp-hero__aurora i:nth-child(1) {
    width: 720px;
    height: 720px;
    top: -360px;
    left: -180px;
    background: radial-gradient(circle, rgba(162, 45, 234, .5), transparent 62%);
}

.pp-hero__aurora i:nth-child(2) {
    width: 620px;
    height: 620px;
    bottom: -340px;
    right: -140px;
    animation-delay: -10s;
    background: radial-gradient(circle, rgba(91, 93, 226, .48), transparent 62%);
}

.pp-hero__aurora i:nth-child(3) {
    width: 460px;
    height: 460px;
    top: 34%;
    left: 46%;
    animation-delay: -18s;
    background: radial-gradient(circle, rgba(20, 184, 166, .22), transparent 64%);
}

@keyframes pp-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-48px, 40px) scale(1.09); }
    66%      { transform: translate(40px, -30px) scale(.93); }
}

.pp-hero__grid {
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1.1px, transparent 0);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 12%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 60% at 30% 12%, #000, transparent 72%);
}

.pp-hero__in {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 470px);
    gap: 52px;
    align-items: start;
}

.pp-hero__copy { min-width: 0; }

/* Inside the left column, not above the grid: full-width it pushed the form
   card down by its own height, and the card has to clear the fold. */
.pp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

.pp-crumbs a {
    color: rgba(255, 255, 255, .72);
    transition: color .2s;
}

.pp-crumbs a:hover { color: #fff; }

.pp-crumbs__here { color: #fff; font-weight: 600; }

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px 8px 9px;
    margin-bottom: 22px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, rgba(162, 45, 234, .55), rgba(91, 93, 226, .5));
    border: 1px solid rgba(255, 255, 255, .22);
}

.pp-eyebrow__pip {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    animation: pp-pulse 2.8s ease-in-out infinite;
}

.pp-eyebrow__pip svg { width: 12px; height: 12px; }

@keyframes pp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .4); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.pp-hero__title {
    font-size: clamp(31px, 3.9vw, 50px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 22px;
}

.pp-accent {
    background: linear-gradient(96deg, #c4b5fd 0%, #e9a5ff 48%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.72;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 16px;
    max-width: 620px;
}

.pp-hero__lede:last-of-type { margin-bottom: 30px; }

.pp-hero__lede strong {
    font-weight: 700;
    color: #fff;
}

.pp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.pp-hero__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 600px;
}

.pp-point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}

.pp-point__ic {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: linear-gradient(135deg, #5eead4, #a5b4fc);
}

.pp-point__ic svg { width: 12px; height: 12px; }

/* The application form's card. A gradient hairline rather than a border: the
   card sits on a dark violet field, and a flat 1px line in the same family
   would disappear into it. */
.pp-formcard {
    position: relative;
    padding: 1.5px;
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(162, 45, 234, .5) 48%, rgba(91, 93, 226, .45));
    box-shadow: 0 50px 100px -46px rgba(0, 0, 0, .85), 0 12px 32px -20px rgba(0, 0, 0, .6);
}

.pp-formcard__in {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 22px;
    border-radius: 24.5px;
    background: linear-gradient(170deg, #fff 0%, #fdfbff 58%, #f8f4ff 100%);
}

.pp-formcard__in::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -220px;
    right: -120px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .14), transparent 66%);
}

.pp-formcard__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.pp-formcard__ic {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 12px 26px -14px rgba(140, 40, 220, .95);
}

.pp-formcard__ic svg { width: 19px; height: 19px; }

/* Lifts the form above .pp-formcard__in::before. A positioned pseudo-element
   paints above non-positioned content in the same stacking context, so without
   this the corner glow tints the first two fields. */
.pp-formcard__body {
    position: relative;
    z-index: 1;
}

.pp-formcard__title {
    font-size: 19px;
    font-weight: 780;
    letter-spacing: -.02em;
    color: #0b1020;
    margin: 0;
}

/* ── stats strip ────────────────────────────────────────────────────── */
/* Rides up over the hero's lower edge so the installed base reads as evidence
   for the claim above it rather than as the first of eight equal sections. */
.pp-stats {
    position: relative;
    z-index: 6;
    margin-top: -78px;
    padding-bottom: 74px;
    background: linear-gradient(180deg, rgba(20, 15, 51, 0) 0%, #fff 46%);
}

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

.pp-stat {
    position: relative;
    overflow: hidden;
    padding: 26px 24px;
    border-radius: 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 26px 56px -36px rgba(15, 23, 42, .55);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.pp-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, #a22dea, #5b5de2);
}

.pp-stat:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 34px 66px -34px rgba(79, 70, 229, .5);
}

.pp-stat__v {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 4px;
    background: linear-gradient(96deg, #4f46e5, #a22dea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-stat__l {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* ── tier cards ─────────────────────────────────────────────────────── */
.pp-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
    padding-top: 14px;
}

.pp-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 34px 34px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid #eae9f6;
    box-shadow: 0 24px 52px -34px rgba(15, 23, 42, .45);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.pp-tier:hover {
    transform: translateY(-6px);
    border-color: #cfeae5;
    box-shadow: 0 40px 78px -36px rgba(13, 148, 136, .45);
}

/* The channel tier is the one we most want taken up, so it is the only dark
   surface in the middle of the page and reads as the headline of the pair. */
.pp-tier--featured {
    color: #e6e8f6;
    background: linear-gradient(165deg, #241350 0%, #181140 52%, #241355 100%);
    border-color: rgba(167, 139, 250, .36);
    box-shadow: 0 52px 108px -44px rgba(79, 70, 229, .8), 0 12px 32px -22px rgba(15, 23, 42, .6);
}

.pp-tier--featured:hover {
    border-color: rgba(167, 139, 250, .6);
    box-shadow: 0 62px 124px -44px rgba(79, 70, 229, .92), 0 12px 32px -22px rgba(15, 23, 42, .65);
}

.pp-tier__badge {
    position: absolute;
    top: -13px;
    left: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #0d9488, #14b8a6);
    box-shadow: 0 14px 30px -14px rgba(13, 148, 136, .95);
}

.pp-tier--featured .pp-tier__badge {
    background: linear-gradient(100deg, #a22dea, #7b5ee5 52%, #5b5de2);
    box-shadow: 0 14px 30px -12px rgba(140, 40, 220, .95);
}

.pp-tier__badge svg { width: 12px; height: 12px; }

.pp-tier__name {
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 780;
    letter-spacing: -.025em;
    color: #0b1020;
    margin: 0 0 8px;
}

.pp-tier--featured .pp-tier__name { color: #fff; }

.pp-tier__for {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    color: #0d9488;
    margin: 0 0 16px;
}

.pp-tier--featured .pp-tier__for { color: #c4b5fd; }

.pp-tier__sum {
    font-size: 14.5px;
    line-height: 1.72;
    color: #475569;
    margin: 0 0 26px;
}

.pp-tier--featured .pp-tier__sum { color: #b9bfdd; }

/* The earnings block is boxed rather than run into the bullets because it is
   the one thing a partner scans for. */
.pp-earn {
    padding: 24px 24px 20px;
    border-radius: 20px;
    margin-bottom: 28px;
    background: linear-gradient(160deg, #f0fdfa, #ecfdf5);
    border: 1px solid #b8e6df;
}

.pp-tier--featured .pp-earn {
    background: linear-gradient(160deg, rgba(124, 58, 237, .22), rgba(79, 70, 229, .16));
    border-color: rgba(167, 139, 250, .38);
}

.pp-earn__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 14px;
}

.pp-tier--featured .pp-earn__label { color: #a5abcf; }

.pp-earn__line + .pp-earn__line { margin-top: 16px; }

.pp-earn__fig {
    display: block;
    font-size: clamp(28px, 2.9vw, 36px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.05;
    background: linear-gradient(96deg, #0f766e, #14b8a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-tier--featured .pp-earn__fig {
    background: linear-gradient(96deg, #a5b4fc, #d8b4fe 54%, #f9a8d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pp-earn__of {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin-top: 5px;
}

.pp-tier--featured .pp-earn__of { color: #b9bfdd; }

.pp-tier__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 14px;
}

.pp-tier--featured .pp-tier__label { color: #8b93bd; }

.pp-list {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pp-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

.pp-tier--featured .pp-list li { color: #ccd1e8; }

.pp-list li svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #14b8a6;
}

.pp-tier--featured .pp-list li svg { color: #a5b4fc; }

/* "What we do" is our half of the bargain, not the partner's — muted so the
   two lists cannot be misread as one. */
.pp-list--muted li { color: #64748b; }
.pp-list--muted li svg { color: #cbd5e1; }
.pp-tier--featured .pp-list--muted li { color: #9aa2c4; }
.pp-tier--featured .pp-list--muted li svg { color: #7c84ad; }

.pp-tier__foot { margin-top: auto; }

/* ── comparison table ───────────────────────────────────────────────── */
/* Narrow screens scroll this horizontally rather than squeezing three columns
   of prose into 375px. The wrapper scrolls, not the page. */
.pp-tablewrap {
    overflow-x: auto;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #eae9f6;
    box-shadow: 0 26px 60px -40px rgba(15, 23, 42, .5);
}

.pp-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    text-align: left;
}

.pp-table thead th {
    padding: 20px 26px;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, #fbfaff, #f5f4fd);
    border-bottom: 1px solid #e9e7f7;
    vertical-align: bottom;
}

.pp-table__col {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pp-table__dot {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    flex: 0 0 auto;
}

.pp-table__dot--teal   { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.pp-table__dot--violet { background: linear-gradient(135deg, #a22dea, #5b5de2); }

.pp-th--teal   { color: #0f766e; }
.pp-th--violet { color: #5b21b6; }

.pp-table tbody tr { transition: background .2s; }

.pp-table tbody tr:nth-child(2n) { background: #fbfaff; }

.pp-table tbody tr:hover { background: #f5f3ff; }

.pp-table tbody th {
    padding: 17px 26px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0b1020;
    vertical-align: top;
    border-top: 1px solid #eeecf9;
    white-space: nowrap;
}

.pp-table tbody td {
    padding: 17px 26px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    vertical-align: top;
    border-top: 1px solid #eeecf9;
}

/* ── benefit cards ──────────────────────────────────────────────────── */
.pp-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pp-ben {
    padding: 30px 28px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 18px 40px -32px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.pp-ben:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 32px 62px -34px rgba(79, 70, 229, .45);
}

.pp-ben__ic {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(99, 102, 241, .95);
}

/* Three gradients cycling across the grid, so six identical tiles do not read
   as one block of indigo. All three are points on the logo ramp. */
.pp-ben:nth-child(3n+2) .pp-ben__ic {
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    box-shadow: 0 14px 28px -14px rgba(168, 85, 247, .95);
}

.pp-ben:nth-child(3n+3) .pp-ben__ic {
    background: linear-gradient(135deg, #a22dea, #5b5de2);
    box-shadow: 0 14px 28px -14px rgba(140, 40, 220, .9);
}

.pp-ben__ic svg { width: 23px; height: 23px; }

.pp-ben h3 {
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.35;
    color: #0b1020;
    margin: 0 0 9px;
}

.pp-ben p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* ── audience cards ─────────────────────────────────────────────────── */
.pp-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.pp-aud {
    position: relative;
    overflow: hidden;
    padding: 34px 32px;
    border-radius: 24px;
    background: linear-gradient(168deg, #fff 0%, #fdfcff 58%, #f9f6ff 100%);
    border: 1px solid #ebeaf5;
    box-shadow: 0 22px 48px -34px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.pp-aud::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -210px;
    right: -110px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .12), transparent 66%);
}

.pp-aud:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 34px 66px -36px rgba(79, 70, 229, .45);
}

.pp-aud__ic {
    position: relative;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a22dea);
    box-shadow: 0 14px 28px -14px rgba(140, 40, 220, .9);
}

.pp-aud__ic svg { width: 21px; height: 21px; }

.pp-aud h3 {
    position: relative;
    font-size: 19px;
    font-weight: 780;
    letter-spacing: -.02em;
    color: #0b1020;
    margin: 0 0 9px;
}

.pp-aud__intro {
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 24px;
}

.pp-aud .pp-list { position: relative; margin-bottom: 0; }

.pp-aud .pp-list li svg { color: #a855f7; }

/* ── steps ──────────────────────────────────────────────────────────── */
.pp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pp-step {
    position: relative;
    padding: 28px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 18px 40px -32px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.pp-step:hover {
    transform: translateY(-5px);
    border-color: #d9d6f6;
    box-shadow: 0 32px 62px -34px rgba(79, 70, 229, .45);
}

/* Connector between the numbered nodes; sits in the gutter, aligned with the
   centre of the badge above it. */
.pp-step::after {
    content: "";
    position: absolute;
    top: 50px;
    right: -20px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #c7d2fe, #e9d5ff);
}

.pp-step:last-child::after { display: none; }

.pp-step__n {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 28px -14px rgba(99, 102, 241, .95);
}

.pp-step h3 {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #0b1020;
    margin: 0 0 8px;
}

.pp-step p {
    font-size: 13.5px;
    line-height: 1.68;
    color: #64748b;
    margin: 0;
}

/* ── faq ────────────────────────────────────────────────────────────── */
.pp-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pp-qa {
    display: flex;
    gap: 16px;
    padding: 26px 26px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ebeaf5;
    box-shadow: 0 16px 38px -32px rgba(15, 23, 42, .45);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, border-color .28s;
}

.pp-qa:hover {
    transform: translateY(-4px);
    border-color: #d9d6f6;
    box-shadow: 0 30px 58px -34px rgba(79, 70, 229, .4);
}

.pp-qa__q {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #6d28d9;
    background: #f3f0ff;
    border: 1px solid #e4dcff;
}

.pp-qa__body { min-width: 0; }

.pp-qa h3 {
    font-size: 15.5px;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.4;
    color: #0b1020;
    margin: 4px 0 9px;
}

.pp-qa p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* ── closing band ───────────────────────────────────────────────────── */
.pp-cta {
    position: relative;
    overflow: hidden;
    padding: 92px 0 96px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, #3b1d7a 0%, transparent 60%),
        linear-gradient(150deg, #221049 0%, #1a1240 46%, #140f33 100%);
}

/* The closing band reuses the hero's aurora and dot grid, but it is a third of
   the height — the hero's blob geometry would put two of the three off-canvas,
   so they are re-placed rather than re-declared. */
.pp-cta .pp-hero__aurora i:nth-child(1) {
    width: 520px;
    height: 520px;
    top: -240px;
    left: 4%;
}

.pp-cta .pp-hero__aurora i:nth-child(2) {
    width: 480px;
    height: 480px;
    bottom: -260px;
    right: 6%;
}

.pp-cta .pp-hero__aurora i:nth-child(3) {
    width: 360px;
    height: 360px;
    top: 26%;
    left: 44%;
}

.pp-cta .pp-hero__grid {
    -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 20%, #000, transparent 74%);
    mask-image: radial-gradient(ellipse 62% 70% at 50% 20%, #000, transparent 74%);
}

.pp-cta__in {
    position: relative;
    z-index: 5;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.pp-cta__title {
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.12;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
}

.pp-cta__sub {
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.72;
    color: rgba(255, 255, 255, .8);
    max-width: 640px;
    margin: 0 auto 34px;
}

.pp-cta__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.pp-cta__fine {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

.pp-cta__fine a {
    color: #fff;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pp-cta__fine a:hover { color: #d8b4fe; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .pp-hero__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .pp-hero__copy { max-width: 720px; }
    .pp-formcard { max-width: 620px; }

    .pp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-step::after { display: none; }
}

@media (max-width: 900px) {
    .pp-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-tiers { grid-template-columns: minmax(0, 1fr); }
    .pp-grid2,
    .pp-faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .pp-hero { padding: 40px 0 116px; }
    .pp-hero__points { grid-template-columns: minmax(0, 1fr); }
    .pp-hero__actions { gap: 12px; }
    .pp-btn { width: 100%; }

    .pp-stats { margin-top: -66px; padding-bottom: 54px; }
    .pp-stats__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    .pp-sec { padding: 60px 0; }
    .pp-head { margin-bottom: 34px; }

    .pp-grid3 { grid-template-columns: minmax(0, 1fr); }
    .pp-steps { grid-template-columns: minmax(0, 1fr); }

    .pp-tier { padding: 36px 24px 30px; }
    .pp-tier__badge { left: 24px; }
    .pp-aud { padding: 28px 24px; }
    .pp-formcard__in { padding: 22px 20px 20px; }

    .pp-cta { padding: 66px 0 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-hero__aurora i,
    .pp-eyebrow__pip { animation: none !important; }

    .pp-btn,
    .pp-stat,
    .pp-tier,
    .pp-ben,
    .pp-aud,
    .pp-step,
    .pp-qa {
        transition: none;
    }

    .pp-btn:hover,
    .pp-stat:hover,
    .pp-tier:hover,
    .pp-ben:hover,
    .pp-aud:hover,
    .pp-step:hover,
    .pp-qa:hover {
        transform: none;
    }
}