/* ==========================================================================
   PesewaPay — interior pages.

   The home page is clean and the interior pages were not, and the reason was
   mostly that they were off-brand: this file used to invent its own flat blue
   while the theme's actual identity is a gradient, #090797 to #1376FE. Deep
   indigo into electric blue. Everything here is built on that.

   What makes a page read as expensive is not decoration, it is confidence:
   fewer elements, larger type, more air, and a real answer where a cheap page
   puts a stock photograph. So the money-path is a drawn schematic rather than
   boxes with arrows, the grids are asymmetric rather than three-across, and the
   page alternates light and dark bands so it has a rhythm instead of a scroll.

   Loaded after main_v1.css. Nothing here restyles the theme; the home page is
   untouched.
   ========================================================================== */

:root {
    /* --- brand ------------------------------------------------------------ */
    --pp-indigo: #090797;
    --pp-blue: #1376FE;
    /* THE gradient. 90deg, indigo to blue — the exact declaration the home
       page uses for its hero and its testimonial band. One gradient across
       the whole site; a second one anywhere is a second brand. */
    --pp-grad: linear-gradient(90deg, #090797 0%, #1376FE 100%);
    --pp-grad-soft: linear-gradient(90deg, rgba(9, 7, 151, .07) 0%, rgba(19, 118, 254, .07) 100%);

    /* --- ink -------------------------------------------------------------- */
    --pp-ink: #0A0A1F;
    --pp-ink-2: #4A4F63;
    --pp-ink-3: #767C91;
    --pp-on-dark: #FFFFFF;
    --pp-on-dark-2: rgba(255, 255, 255, .80);
    --pp-on-dark-3: rgba(255, 255, 255, .68);

    /* --- surface ---------------------------------------------------------- */
    --pp-bg: #FFFFFF;
    --pp-bg-2: #F6F8FC;
    --pp-line: #E8EBF2;
    --pp-line-dark: rgba(255, 255, 255, .10);

    /* --- depth -----------------------------------------------------------
       Three stacked shadows rather than one blur. A single soft shadow reads
       as a template; the tight contact shadow under the ambient one is what
       makes a card look like it is sitting on the page. */
    --pp-shadow-sm: 0 1px 2px rgba(10, 10, 31, .04), 0 2px 6px rgba(10, 10, 31, .04);
    --pp-shadow: 0 1px 2px rgba(10, 10, 31, .05), 0 8px 20px rgba(10, 10, 31, .06),
                 0 24px 48px rgba(10, 10, 31, .05);
    --pp-shadow-lg: 0 2px 4px rgba(10, 10, 31, .06), 0 16px 40px rgba(10, 10, 31, .10),
                    0 48px 88px rgba(10, 10, 31, .10);
    --pp-shadow-blue: 0 8px 24px rgba(19, 118, 254, .18), 0 24px 56px rgba(9, 7, 151, .14);

    --pp-r: 18px;
    --pp-r-lg: 26px;
    --pp-r-sm: 12px;
}

/* ==========================================================================
   1. TYPE
   ========================================================================== */

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-blue);
    margin: 0 0 20px;
}

.pp-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--pp-grad);
}

.pp-on-dark .pp-eyebrow,
.pp-hero .pp-eyebrow,
.pp-cta .pp-eyebrow,
.pp-dark .pp-eyebrow {
    color: #FFFFFF;
}

.pp-hero .pp-eyebrow::before,
.pp-cta .pp-eyebrow::before,
.pp-dark .pp-eyebrow::before {
    background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0));
}

/* Display type. The jump from 15px body to 56px display is most of what
   separates a considered page from a padded one. */
.pp-display {
    font-family: var(--ztc-family-font2, inherit);
    font-size: clamp(34px, 5.2vw, 60px);
    line-height: 1.06;
    letter-spacing: -.028em;
    color: var(--pp-ink);
    margin: 0;
}

.pp-display--sm {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.14;
    letter-spacing: -.022em;
}

.pp-hero .pp-display,
.pp-hero .pp-display--sm,
.pp-cta .pp-display,
.pp-cta .pp-display--sm,
.pp-dark .pp-display,
.pp-dark .pp-display--sm {
    color: var(--pp-on-dark);
}

.pp-lead {
    font-size: clamp(16px, 1.3vw, 18.5px);
    line-height: 1.7;
    color: var(--pp-ink-2);
    max-width: 60ch;
    margin: 22px 0 0;
}

.pp-hero .pp-lead,
.pp-cta .pp-lead,
.pp-dark .pp-lead {
    color: var(--pp-on-dark-2);
}

.pp-grad-text {
    background: var(--pp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pp-hero .pp-grad-text,
.pp-dark .pp-grad-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #C7DBFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   2. SECTIONS
   ========================================================================== */

.pp-section {
    padding: clamp(64px, 8vw, 128px) 0;
    position: relative;
}

.pp-section--tight {
    padding: clamp(48px, 5vw, 80px) 0;
}

.pp-bg-2 {
    background: var(--pp-bg-2);
}

/* The gradient band. Same declaration as the home page's testimonial section,
   so a visitor scrolling from the home page into a product page never crosses
   a seam. It was a near-black mesh before, which looked considered on its own
   and looked like a different site next to the home page. */
.pp-dark {
    background: var(--pp-grad);
    color: var(--pp-on-dark);
    position: relative;
    overflow: hidden;
}

.pp-dark > .container {
    position: relative;
    z-index: 1;
}

.pp-section__head {
    max-width: 720px;
    margin-bottom: clamp(36px, 4vw, 64px);
}

.pp-section__head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pp-section__head--center .pp-eyebrow {
    justify-content: center;
}

.pp-section__head--center .pp-lead {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   3. PAGE HEROES
   ========================================================================== */

.pp-hero {
    position: relative;
    padding: clamp(150px, 15vw, 220px) 0 clamp(70px, 8vw, 120px);
    background: var(--pp-grad);
    color: var(--pp-on-dark);
    overflow: hidden;
}

.pp-hero > .container {
    position: relative;
    z-index: 2;
}

.pp-hero__inner {
    max-width: 860px;
}

/* The product glyph, set enormous and nearly transparent behind the type. Cheap
   pages put a stock photograph here; this costs nothing and dates better. */
.pp-hero__mark {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 340px;
    line-height: 1;
    color: #ffffff6e;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 991px) {
    .pp-hero__mark { font-size: 200px; right: -50px; opacity: .7; }
}

.pp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--pp-line-dark);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-on-dark-2);
}

.pp-chip i { color: #FFFFFF; font-size: 12px; }

/* ==========================================================================
   4. BENTO GRID
   The asymmetry is the point. A uniform three-across grid reads as a template;
   one large tile against several small ones reads as an editor's decision.
   ========================================================================== */

.pp-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.pp-bento > * { grid-column: span 2; }
.pp-bento__wide { grid-column: span 3; }
.pp-bento__hero { grid-column: span 4; }
.pp-bento__half { grid-column: span 3; }
.pp-bento__full { grid-column: span 6; }

@media (max-width: 991px) {
    .pp-bento { grid-template-columns: repeat(2, 1fr); }
    .pp-bento > *,
    .pp-bento__wide,
    .pp-bento__hero,
    .pp-bento__half { grid-column: span 2; }
}

@media (max-width: 575px) {
    .pp-bento { grid-template-columns: 1fr; gap: 14px; }
    .pp-bento > * { grid-column: span 1 !important; }
}

/* --- the tile ------------------------------------------------------------- */

.pp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
    box-shadow: var(--pp-shadow-sm);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1),
                box-shadow .35s cubic-bezier(.2, .7, .3, 1),
                border-color .35s ease;
    overflow: hidden;
    text-decoration: none;
    height: 100%;
}

a.pp-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--pp-shadow);
    border-color: rgba(19, 118, 254, .32);
    text-decoration: none;
}

/* A gradient hairline that only appears on hover, along the top edge. */
.pp-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pp-grad);
    opacity: 0;
    transition: opacity .35s ease;
}

a.pp-tile:hover::before { opacity: 1; }

.pp-tile__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--pp-grad-soft);
    border: 1px solid rgba(19, 118, 254, .16);
    color: var(--pp-blue);
    font-size: 20px;
    margin-bottom: 22px;
    flex: none;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}

a.pp-tile:hover .pp-tile__icon {
    background: var(--pp-grad);
    color: #fff;
    transform: scale(1.04);
}

.pp-tile__title {
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -.012em;
    font-weight: 650;
    color: var(--pp-ink);
    margin: 0 0 10px;
}

.pp-tile__body {
    font-size: 15px;
    line-height: 1.68;
    color: var(--pp-ink-2);
    margin: 0;
}

.pp-tile__foot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    font-size: 14px;
    font-weight: 650;
    color: var(--pp-blue);
}

.pp-tile__foot i {
    font-size: 11px;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

a.pp-tile:hover .pp-tile__foot i { transform: translateX(5px); }

/* The feature tile — larger type, gradient ground, white ink. Used once per
   grid so it carries the eye in. */
.pp-tile--feature {
    background: var(--pp-grad);
    border-color: transparent;
    color: var(--pp-on-dark);
    box-shadow: var(--pp-shadow-blue);
    padding: 38px 34px;
}

.pp-tile--feature .pp-tile__title {
    color: #fff;
    font-size: 26px;
}

.pp-tile--feature .pp-tile__body { color: rgba(255, 255, 255, .82); font-size: 16px; }
.pp-tile--feature .pp-tile__foot { color: #fff; }

.pp-tile--feature .pp-tile__icon {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

a.pp-tile--feature:hover .pp-tile__icon { background: #fff; color: var(--pp-indigo); }
a.pp-tile--feature:hover { border-color: transparent; }

/* Dark tiles, for use inside a .pp-dark band. */
.pp-hero .pp-tile,
.pp-dark .pp-tile {
    background: rgba(255, 255, 255, .035);
    border-color: var(--pp-line-dark);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.pp-hero .pp-tile__title,
.pp-dark .pp-tile__title { color: var(--pp-on-dark); }
.pp-hero .pp-tile__body,
.pp-dark .pp-tile__body { color: var(--pp-on-dark-2); }

.pp-dark .pp-tile__icon {
    background: rgba(255, 255, 255, .07);
    border-color: var(--pp-line-dark);
    color: #FFFFFF;
}

.pp-dark a.pp-tile:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .34);
}

/* ==========================================================================
   5. THE MONEY CANVAS
   The block this file exists for. A drawn schematic, not boxes with arrows —
   because "where is my money at each stage" is the question a payments company
   is actually asked, and answering it properly is worth more than any
   photograph that could sit here.
   ========================================================================== */

.pp-canvas {
    position: relative;
    padding: clamp(30px, 4vw, 56px) clamp(20px, 3vw, 44px);
    border-radius: var(--pp-r-lg);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--pp-line-dark);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* A faint blueprint grid behind the diagram. */
.pp-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
}

.pp-canvas__inner { position: relative; z-index: 1; }

.pp-flow {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.pp-flow__stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The connecting line, drawn behind the nodes. Dashed and animated, so the
   diagram reads as movement rather than as furniture. */
.pp-flow__stage:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 50%;
    right: -50%;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .62) 50%, transparent 50%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    animation: pp-dash 1.1s linear infinite;
    z-index: 0;
}

@keyframes pp-dash {
    to { background-position: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-flow__stage:not(:last-child)::before { animation: none; }
}

.pp-flow__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
    flex: none;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .06);
}

/* The ends are where the money starts and stops, so they are solid. */
.pp-flow__stage:first-child .pp-flow__dot,
.pp-flow__stage:last-child .pp-flow__dot {
    background: #FFFFFF;
    color: var(--pp-indigo);
    border-color: #FFFFFF;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .10),
                0 10px 26px rgba(9, 7, 151, .28);
}

.pp-flow__label {
    font-weight: 650;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--pp-on-dark);
    margin-bottom: 6px;
}

.pp-flow__note {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pp-on-dark-3);
}

@media (max-width: 767px) {
    .pp-flow { flex-direction: column; gap: 4px; }

    .pp-flow__stage {
        flex-direction: row;
        text-align: left;
        gap: 18px;
        padding: 10px 0;
        align-items: flex-start;
    }

    .pp-flow__stage:not(:last-child)::before {
        top: 54px;
        bottom: -10px;
        left: 26px;
        right: auto;
        width: 2px;
        height: auto;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .62) 50%, transparent 50%);
        background-size: 2px 10px;
        background-repeat: repeat-y;
        animation: pp-dash-y 1.1s linear infinite;
    }

    @keyframes pp-dash-y { to { background-position: 0 10px; } }

    .pp-flow__dot { margin-bottom: 0; width: 54px; }
    .pp-flow__text { padding-top: 12px; }
}

/* ==========================================================================
   6. STEPS
   ========================================================================== */

.pp-steps { counter-reset: pp-step; }

.pp-step {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.pp-step:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow); }

.pp-step__n {
    display: block;
    font-family: var(--ztc-family-font2, inherit);
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.03em;
    background: var(--pp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 18px;
}

.pp-step__title {
    font-size: 19px;
    line-height: 1.32;
    letter-spacing: -.012em;
    font-weight: 650;
    color: var(--pp-ink);
    margin: 0 0 10px;
}

.pp-step__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pp-ink-2);
}

/* ==========================================================================
   7. GUARANTEES
   ========================================================================== */

.pp-guarantee {
    position: relative;
    height: 100%;
    padding: 34px 30px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.pp-guarantee:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow); }

.pp-guarantee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pp-grad);
}

.pp-guarantee__mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--pp-grad-soft);
    border: 1px solid rgba(19, 118, 254, .16);
    color: var(--pp-blue);
    font-size: 19px;
    margin-bottom: 22px;
}

.pp-guarantee__title {
    font-size: 19px;
    line-height: 1.34;
    letter-spacing: -.012em;
    font-weight: 650;
    color: var(--pp-ink);
    margin: 0 0 12px;
}

.pp-guarantee__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--pp-ink-2);
}

.pp-guarantee__body a { color: var(--pp-blue); font-weight: 600; }

.pp-hero .pp-guarantee,
.pp-dark .pp-guarantee {
    background: rgba(255, 255, 255, .035);
    border-color: var(--pp-line-dark);
    backdrop-filter: blur(10px);
}

.pp-hero .pp-guarantee__title,
.pp-dark .pp-guarantee__title { color: var(--pp-on-dark); }
.pp-hero .pp-guarantee__body,
.pp-dark .pp-guarantee__body { color: var(--pp-on-dark-2); }

.pp-dark .pp-guarantee__mark {
    background: rgba(255, 255, 255, .07);
    border-color: var(--pp-line-dark);
    color: #FFFFFF;
}

/* ==========================================================================
   8. STATS
   ========================================================================== */

.pp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--pp-line);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
    overflow: hidden;
}

.pp-hero .pp-stats,
.pp-dark .pp-stats {
    background: var(--pp-line-dark);
    border-color: var(--pp-line-dark);
}

.pp-stat {
    background: var(--pp-bg);
    padding: 32px 26px;
    text-align: center;
}

.pp-hero .pp-stat,
.pp-dark .pp-stat { background: rgba(255, 255, 255, .025); }

.pp-stat__n {
    display: block;
    font-family: var(--ztc-family-font2, inherit);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.03em;
    background: var(--pp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.pp-hero .pp-stat__n,
.pp-dark .pp-stat__n {
    background: linear-gradient(90deg, #FFFFFF 0%, #C7DBFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pp-stat__label {
    font-size: 14px;
    line-height: 1.55;
    color: var(--pp-ink-2);
    margin: 0;
}

.pp-hero .pp-stat__label,
.pp-dark .pp-stat__label { color: var(--pp-on-dark-2); }

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.pp-faq { max-width: 860px; margin: 0 auto; }

.pp-faq__item {
    border: 1px solid var(--pp-line) !important;
    border-radius: var(--pp-r) !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--pp-bg);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.pp-faq__item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(19, 118, 254, .30) !important;
    box-shadow: var(--pp-shadow-sm);
}

.pp-faq .accordion-button {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.011em;
    color: var(--pp-ink);
    padding: 24px 26px;
    background: transparent;
    box-shadow: none !important;
}

.pp-faq .accordion-button:not(.collapsed) { color: var(--pp-indigo); background: transparent; }
.pp-faq .accordion-button::after { background-size: 1rem; }

.pp-faq .accordion-body {
    padding: 0 26px 26px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--pp-ink-2);
    max-width: 68ch;
}

/* ==========================================================================
   10. ROADMAP - the plan, drawn on a plane

   Three lanes on blueprint paper with a spine running through them, because a
   roadmap is a sequence and three cards side by side do not say so. Features
   are grouped by what they are FOR - moving money, selling, saving - rather
   than by which part of the software owns them, which is the only grouping a
   reader has any use for.
   ========================================================================== */

/* --- the jump nav ---------------------------------------------------------
   Sticks below the header so the three stages stay reachable while reading. A
   roadmap you have to scroll back up to navigate is a document, not a page. */

.pp-jump {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 14px 0;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pp-line);
}

.pp-jump__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pp-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--pp-line);
    background: var(--pp-bg);
    color: var(--pp-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .3s ease, color .3s ease, box-shadow .3s ease,
                transform .3s cubic-bezier(.2, .7, .3, 1);
}

.pp-jump__link:hover {
    transform: translateY(-2px);
    color: var(--pp-indigo);
    border-color: rgba(19, 118, 254, .35);
    box-shadow: var(--pp-shadow-sm);
    text-decoration: none;
}

.pp-jump__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.pp-jump__dot--live { background: #12B76A; }
.pp-jump__dot--building { background: #F79009; }
.pp-jump__dot--planned { background: var(--pp-ink-3); }

.pp-jump__n {
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-ink-3);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pp-bg-2);
}

/* --- the plane ------------------------------------------------------------ */

.pp-plan {
    position: relative;
    padding: clamp(36px, 5vw, 72px) clamp(18px, 3vw, 48px);
    border-radius: var(--pp-r-lg);
    background: var(--pp-bg-2);
    border: 1px solid var(--pp-line);
    overflow: hidden;
}

/* Blueprint paper. Two grids - a fine one, and a heavier one every fourth line
   - masked off toward the edges so it reads as a drawing surface rather than
   graph paper stretched to fill a box. */
.pp-plan::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(9, 7, 151, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9, 7, 151, .045) 1px, transparent 1px),
        linear-gradient(rgba(9, 7, 151, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9, 7, 151, .07) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px;
    mask-image: radial-gradient(120% 110% at 50% 40%, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 110% at 50% 40%, #000 45%, transparent 100%);
    pointer-events: none;
}

.pp-plan__inner { position: relative; z-index: 1; }

.pp-plan__lanes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 34px);
    position: relative;
}

/* The spine. Runs behind the three lane badges and says the page is a sequence
   rather than three unrelated columns. */
.pp-plan__lanes::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 14%;
    right: 14%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(18, 183, 106, .55) 0%,
        rgba(247, 144, 9, .55) 50%,
        rgba(118, 124, 145, .30) 100%);
    z-index: 0;
}

@media (max-width: 991px) {
    .pp-plan__lanes { grid-template-columns: 1fr; gap: 30px; }
    .pp-plan__lanes::before { display: none; }
}

/* --- a lane --------------------------------------------------------------- */

.pp-lane { position: relative; z-index: 1; scroll-margin-top: 110px; }

.pp-lane__head { margin-bottom: 26px; }

.pp-lane__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--pp-bg);
    box-shadow: var(--pp-shadow-sm);
}

.pp-lane--live .pp-lane__badge { color: #067647; border: 1px solid #A6E9C8; }
.pp-lane--building .pp-lane__badge { color: #B54708; border: 1px solid #F5C68B; }
.pp-lane--planned .pp-lane__badge { color: var(--pp-ink-3); border: 1px solid var(--pp-line); }

.pp-lane__n {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    background: var(--pp-bg-2);
}

.pp-lane__note {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-ink-3);
}

/* --- a group of features -------------------------------------------------- */

.pp-group {
    background: var(--pp-bg);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
    padding: 22px 22px 8px;
    margin-bottom: 16px;
    box-shadow: var(--pp-shadow-sm);
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}

.pp-group:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow); }

.pp-group__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pp-line);
}

.pp-group__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pp-grad-soft);
    color: var(--pp-blue);
    font-size: 13px;
    flex: none;
}

.pp-lane--planned .pp-group__icon { background: var(--pp-bg-2); color: var(--pp-ink-3); }

.pp-group__name {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pp-ink);
}

.pp-group__items { list-style: none; margin: 0; padding: 0; }

.pp-item {
    position: relative;
    padding: 13px 0 13px 26px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pp-ink-2);
}

.pp-item + .pp-item { border-top: 1px solid var(--pp-line); }

.pp-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pp-lane--live .pp-item::before { background: #12B76A; }
.pp-lane--building .pp-item::before { background: #F79009; }

/* Planned items get a ring rather than a fill - nothing has been done yet. */
.pp-lane--planned .pp-item::before {
    background: transparent;
    border: 2px solid var(--pp-ink-3);
    width: 9px;
    height: 9px;
    top: 19px;
    left: 3px;
}

.pp-item a {
    color: var(--pp-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--pp-line);
    transition: color .25s ease, border-color .25s ease;
}

.pp-item a:hover {
    color: var(--pp-indigo);
    border-bottom-color: var(--pp-blue);
    text-decoration: none;
}

/* --- a flagged item -------------------------------------------------------
   An admission, not an announcement. These two are the reason this page is
   worth publishing, so they are lifted out of the list rather than sitting in
   it where they could be skimmed past. */

.pp-item--flagged {
    padding: 18px 18px 18px 20px;
    margin: 12px 0;
    border-left: 3px solid #F79009;
    border-radius: 0 var(--pp-r-sm) var(--pp-r-sm) 0;
    background: #FEF9F0;
}

.pp-item--flagged::before { display: none; }
.pp-item--flagged + .pp-item { border-top: 0; }

.pp-item__label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 650;
    color: #7A4A0B;
    margin-bottom: 8px;
}

.pp-item__label i { margin-top: 3px; flex: none; }

.pp-item__detail {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #8A5A18;
}

/* ==========================================================================
   11. NAV DROPDOWN
   ========================================================================== */

.pp-nav-drop { position: relative; }

.pp-nav-caret { font-size: 9px; margin-left: 5px; transition: transform .25s ease; }
.pp-nav-drop:hover .pp-nav-caret { transform: rotate(180deg); }

.pp-nav-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 320px;
    padding: 12px !important;
    margin: 0;
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 20px;
    box-shadow: var(--pp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
    z-index: 999;
    text-align: left;
}

.pp-nav-drop:hover .pp-nav-menu,
.pp-nav-drop:focus-within .pp-nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pp-nav-menu li { display: block !important; margin: 0 !important; }

.pp-nav-menu li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 11px 14px !important;
    border-radius: 12px;
    color: var(--pp-ink) !important;
    font-size: 14.5px;
    font-weight: 550;
    line-height: 1.3;
    transition: background .2s ease, color .2s ease;
}

.pp-nav-menu li a:hover { background: var(--pp-bg-2); color: var(--pp-indigo) !important; }

.pp-nav-menu li a i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--pp-grad-soft);
    color: var(--pp-blue);
    font-size: 13px;
    flex: none;
}

.pp-nav-menu li a:hover i { background: var(--pp-grad); color: #fff; }

.pp-nav-menu__all {
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid var(--pp-line);
}

.pp-nav-menu__all a { font-weight: 700; color: var(--pp-blue) !important; }
.pp-nav-menu__all a i { background: transparent !important; width: auto !important; }

/* ==========================================================================
   12. BUTTONS
   ========================================================================== */

.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.005em;
    border: 1px solid transparent;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease,
                background .3s ease, color .3s ease;
    text-decoration: none;
    cursor: pointer;
}

.pp-btn i { font-size: 12px; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.pp-btn:hover i { transform: translateX(4px); }

.pp-btn--primary {
    background: var(--pp-grad);
    color: #fff !important;
    box-shadow: var(--pp-shadow-blue);
}

.pp-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(19, 118, 254, .30), 0 30px 70px rgba(9, 7, 151, .22);
    color: #fff !important;
    text-decoration: none;
}

.pp-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: var(--pp-line-dark);
    color: #fff !important;
    backdrop-filter: blur(8px);
}

.pp-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    text-decoration: none;
}

.pp-btn--light {
    background: #fff;
    border-color: var(--pp-line);
    color: var(--pp-ink) !important;
    box-shadow: var(--pp-shadow-sm);
}

.pp-btn--light:hover {
    transform: translateY(-2px);
    box-shadow: var(--pp-shadow);
    color: var(--pp-indigo) !important;
    text-decoration: none;
}

.pp-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ==========================================================================
   13. LEGAL
   ========================================================================== */

.pp-legal__notice {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    margin-bottom: 44px;
    background: #FEF9F0;
    border: 1px solid #FCE4C0;
    border-left: 3px solid #F79009;
    border-radius: var(--pp-r-sm);
}

.pp-legal__notice i { color: #B54708; font-size: 19px; margin-top: 2px; flex: none; }

.pp-legal__notice p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: #7A4A0B;
}

.pp-legal__body {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--pp-ink-2);
    max-width: 72ch;
}

.pp-legal__body h3 {
    margin: 52px 0 18px;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -.018em;
    color: var(--pp-ink);
    scroll-margin-top: 120px;
}

.pp-legal__body h3:first-child { margin-top: 0; }
.pp-legal__body p { margin: 0 0 18px; }
.pp-legal__body ul, .pp-legal__body ol { margin: 0 0 22px; padding-left: 24px; }
.pp-legal__body li { margin-bottom: 12px; }
.pp-legal__body li::marker { color: var(--pp-blue); }
.pp-legal__body strong { color: var(--pp-ink); font-weight: 650; }
.pp-legal__body a { color: var(--pp-blue); font-weight: 600; }

.pp-legal__toc {
    position: sticky;
    top: 120px;
    padding: 26px 24px;
    background: var(--pp-bg-2);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r);
}

.pp-legal__toc h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-ink-3);
    margin: 0 0 16px;
}

.pp-legal__toc ul { list-style: none; margin: 0; padding: 0; }

.pp-legal__toc li a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-ink-2);
    border-left: 2px solid transparent;
    padding-left: 14px;
    margin-left: -2px;
    transition: color .2s ease, border-color .2s ease;
}

.pp-legal__toc li a:hover {
    color: var(--pp-indigo);
    border-left-color: var(--pp-blue);
    text-decoration: none;
}

.pp-legal__foot {
    margin-top: 52px;
    padding-top: 26px;
    border-top: 1px solid var(--pp-line);
    font-size: 15px;
    color: var(--pp-ink-2);
}

.pp-legal__foot a { color: var(--pp-blue); font-weight: 600; }

@media (max-width: 991px) {
    .pp-legal__toc { position: static; margin-bottom: 32px; }
}

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */

.pp-cta {
    position: relative;
    padding: clamp(56px, 6vw, 88px) clamp(28px, 5vw, 72px);
    border-radius: var(--pp-r-lg);
    background: var(--pp-grad);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--pp-shadow-blue);
}

.pp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 100% at 85% 0%, rgba(255, 255, 255, .18) 0%, transparent 60%);
    pointer-events: none;
}

.pp-cta > * { position: relative; z-index: 1; }

/* ==========================================================================
   15. MOBILE MENU
   ========================================================================== */

.pp-m-label {
    display: block;
    padding: 12px 0 6px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .5;
}

.pp-m-group > ul { list-style: none; margin: 0 0 12px; padding-left: 14px; }