@charset "UTF-8";
/**
 * Prop Nexus — design system + redesigned shell and homepage.
 *
 * Loaded AFTER assets/css/main.css. Nothing here modifies main.css, and every
 * section rule is scoped under `.pn` so legacy pages are untouched. Only the
 * header, footer and design tokens apply site-wide — those are shared shell.
 *
 * Contents
 *   01  Tokens
 *   02  Base + typography
 *   03  Motion primitives
 *   04  Buttons + shared blocks
 *   05  Header (global)
 *   06  Footer (global)
 *   07  Hero
 *   08  Problem
 *   09  Solution
 *   10  Lifecycle
 *   11  Modules
 *   12  Platform
 *   13  Why
 *   14  Tour
 *   15  Trust
 *   16  Demo
 *   17  Utilities
 */

/* ==========================================================================
   01  Tokens
   ========================================================================== */

:root {
    /* Ink — dark surfaces */
    --pn-ink-900: #061716;
    --pn-ink-800: #0b2322;
    --pn-ink-700: #123331;
    --pn-ink-600: #1b4543;

    /* Paper — light surfaces */
    --pn-paper: #ffffff;
    --pn-paper-soft: #f4f8f7;
    --pn-paper-sunk: #eaf2f0;
    --pn-line: #e3ecea;
    --pn-line-strong: #cddedb;

    /* Brand — gold. The scale keeps its old names so every one of the ~165
       existing references picks it up, but the values are now a gold ramp.
       Two of these carry text, and each is chosen for its own surface:
         brand-600  #8A6B12  on paper   -> 5.0:1  (links, eyebrows, small text)
         brand-400  #E3C368  on ink-900 -> 11.6:1 (accents on dark)
       brand-500 is a fill, never text — anything sitting on it is near-black
       (7.3:1), never white, which would only reach 2.9:1. */
    --pn-brand-700: #6f5510;
    --pn-brand-600: #8a6b12;
    --pn-brand-500: #c9a227;
    --pn-brand-400: #e3c368;
    --pn-brand-100: #efd9a0;
    --pn-brand-050: #faf3e2;

    /* Accent — data highlights only */
    --pn-amber-500: #d98a1f;
    --pn-amber-400: #f2a33c;
    --pn-amber-100: #fbe8cd;
    --pn-amber-050: #fdf4e6;

    /* Signals — unit status and validation only */
    --pn-ok: #2e9e6b;
    --pn-warn: #d9822b;
    --pn-risk: #b3402f;

    /* Text — every pairing below meets WCAG AA on its intended surface.
       --pn-text-muted is 5.0:1 on paper and 4.7:1 on paper-soft; the on-ink
       pair are 8.9:1 and 7.5:1 on ink-900. Muted is deliberately NOT used on
       dark surfaces, where it would fall to 3.7:1. */
    /* Text is black on light and white on dark, with hierarchy carried by
       alpha rather than by another hue — so no fourth text colour appears.
       On paper: strong 19.6:1, body 15.9:1, muted 5.2:1.
       On ink-900: white 18.6:1, soft 11.5:1, dim 7.5:1. */
    --pn-text-strong: #0e0e10;
    --pn-text: rgba(14, 14, 16, 0.86);
    --pn-text-muted: rgba(14, 14, 16, 0.62);
    --pn-on-ink: #ffffff;
    --pn-on-ink-soft: rgba(255, 255, 255, 0.78);
    --pn-on-ink-dim: rgba(255, 255, 255, 0.62);
    --pn-on-ink-line: rgba(255, 255, 255, 0.12);

    /* Type */
    --pn-font-head: "Plus Jakarta Sans", "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --pn-fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem);
    --pn-fs-h2: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    --pn-fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    --pn-fs-h4: 1.125rem;
    --pn-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    --pn-fs-body: 1.0625rem;
    --pn-fs-sm: 0.9375rem;
    --pn-fs-xs: 0.8125rem;

    /* Space — 4px base */
    --pn-1: 4px;
    --pn-2: 8px;
    --pn-3: 12px;
    --pn-4: 16px;
    --pn-5: 24px;
    --pn-6: 32px;
    --pn-7: 48px;
    --pn-8: 64px;
    --pn-9: 96px;
    --pn-10: 128px;
    --pn-section: clamp(72px, 8vw, 72px);

    /* Radius */
    --pn-r-1: 4px;
    --pn-r-2: 8px;
    --pn-r-3: 14px;
    --pn-r-4: 22px;
    --pn-r-pill: 999px;

    /* Shadow — teal-tinted, low alpha */
    --pn-sh-1: 0 1px 2px rgba(6, 23, 22, 0.05), 0 1px 1px rgba(6, 23, 22, 0.04);
    --pn-sh-2: 0 4px 12px rgba(6, 23, 22, 0.06), 0 1px 3px rgba(6, 23, 22, 0.05);
    --pn-sh-3: 0 18px 48px rgba(6, 23, 22, 0.12), 0 4px 12px rgba(6, 23, 22, 0.06);

    /* Motion */
    --pn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pn-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --pn-t-1: 180ms;
    --pn-t-2: 320ms;
    --pn-t-3: 560ms;
    --pn-t-4: 800ms;

    /* Layout */
    --pn-header-h: 76px;
    --pn-maxw: 1200px;
}

/* ==========================================================================
   02  Base + typography
   ========================================================================== */

.pn {
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-body);
    line-height: 1.65;
    color: var(--pn-text);
    background: var(--pn-paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.pn h1,
.pn h2,
.pn h3,
.pn h4,
.pn h5 {
    font-family: var(--pn-font-head);
    color: var(--pn-text-strong);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 var(--pn-4);
    text-wrap: balance;
}

.pn h1 {
    font-size: var(--pn-fs-display);
}
.pn h2 {
    font-size: var(--pn-fs-h2);
}
.pn h3 {
    font-size: var(--pn-fs-h3);
    letter-spacing: -0.015em;
}
.pn h4 {
    font-size: var(--pn-fs-h4);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.pn p {
    margin: 0 0 var(--pn-4);
    max-width: 66ch;
}
.pn p:last-child {
    margin-bottom: 0;
}

.pn a {
    /* color: var(--pn-brand-600); */
    text-decoration: none;
    transition: color var(--pn-t-1) var(--pn-ease);
}
.pn a:hover {
    color: var(--pn-brand-500);
}

.pn__wrap {
    width: 100%;
    max-width: var(--pn-maxw);
    margin-inline: auto;
    padding-inline: var(--pn-5);
}
/* `width: 100%` plus horizontal padding only works out to the parent's width
   under border-box. Bootstrap used to supply that reset site-wide and this
   redesign dropped Bootstrap, so every wrapper was running 48px wide and
   losing its right-hand gutter to `overflow-x: clip`. Declared here rather
   than as a bare `*` selector so it stays inside the redesigned surfaces and
   cannot disturb the legacy pages that still load main.css. */
.pn,
.pn *,
.pn *::before,
.pn *::after,
.pn-header,
.pn-header *,
.pn-header *::before,
.pn-header *::after,
.pn-footer,
.pn-footer *,
.pn-footer *::before,
.pn-footer *::after {
    box-sizing: border-box;
}

/* Eyebrow */
.pn__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--pn-2);
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-brand-600);
    margin-bottom: var(--pn-4);
}
.pn__eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
}

/* On ink, brand-600 would drop to 2.6:1 — each dark section re-points the
   eyebrow and lead at brand-400 / on-ink-soft in its own block below. */

/* Section head */
.pn__head {
    max-width: 62ch;
    margin-bottom: var(--pn-8);
}
.pn__head--center {
    margin-inline: auto;
    text-align: center;
}
.pn__head--center .pn__eyebrow::before {
    display: none;
}
.pn__head--center p {
    margin-inline: auto;
}
.pn__lead {
    font-size: var(--pn-fs-lead);
    line-height: 1.6;
    color: var(--pn-text-muted);
}

/* Numerals stay aligned wherever they animate or tabulate */
.pn [data-count-to] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   03  Motion primitives
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}
[data-reveal].is-in.is-settled {
    will-change: auto;
}

/* Group children stagger via --i assigned in JS.
 *
 * These entrances run as an animation, not a transition, because the children
 * are usually cards that carry their own `transition` shorthand for hover — an
 * equal-specificity component rule declared later in the cascade would wipe out
 * the stagger delay and the fade with it. An animation cannot be clobbered that
 * way. The fill is `backwards` rather than `both`, so once the run finishes the
 * animation stops owning `transform` and `:hover` lifts still apply. */
[data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}
[data-reveal-group].is-in > * {
    opacity: 1;
    transform: none;
    animation: pn-k-reveal-in var(--pn-t-3) var(--pn-ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pn-k-reveal-in {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn *,
    .pn *::before,
    .pn *::after,
    .pn-header *,
    .pn-footer * {
        animation-duration: 1ms !important;
        /* Delay must go too, or a `both`-filled animation holds its 0% state
           for up to 1.85s and the schematics look broken rather than static. */
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-reveal-group] > * {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   04  Buttons + shared blocks
   ========================================================================== */

.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pn-2);
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-sm);
    font-weight: 600;
    line-height: 1;
    padding: 15px var(--pn-5);
    border-radius: var(--pn-r-2);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--pn-t-1) var(--pn-ease),
        border-color var(--pn-t-1) var(--pn-ease),
        color var(--pn-t-1) var(--pn-ease),
        transform var(--pn-t-1) var(--pn-ease),
        box-shadow var(--pn-t-1) var(--pn-ease);
}
.pn-btn:hover {
    transform: translateY(-1px);
}
.pn-btn:active {
    transform: translateY(0);
}

/* brand-600, not brand-500 — white on 500 is only 3.2:1, on 600 it's 5.0:1 */
.pn-btn--primary {
    background: var(--pn-brand-600);
    border-color: var(--pn-brand-600);
    color: #fff;
    box-shadow: var(--pn-sh-1);
}
.pn-btn--primary:hover {
    background: var(--pn-brand-700);
    border-color: var(--pn-brand-700);
    color: #fff;
    box-shadow: var(--pn-sh-2);
}

.pn-btn--ghost {
    background: transparent;
    border-color: var(--pn-line-strong);
    color: var(--pn-text-strong);
}
.pn-btn--ghost:hover {
    border-color: var(--pn-brand-500);
    color: var(--pn-brand-600);
    background: var(--pn-brand-050);
}

.pn-btn--on-ink {
    background: transparent;
    border-color: var(--pn-on-ink-line);
    color: var(--pn-on-ink);
}
.pn-btn--on-ink:hover {
    border-color: var(--pn-brand-400);
    color: var(--pn-brand-400);
    background: rgba(227, 195, 104, 0.08);
}

.pn-btn__icon {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform var(--pn-t-1) var(--pn-ease);
}
.pn-btn:hover .pn-btn__icon--arrow {
    transform: translateX(3px);
}

.pn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pn-3);
}

/* Focus — one visible ring everywhere */
.pn a:focus-visible,
.pn button:focus-visible,
.pn input:focus-visible,
.pn select:focus-visible,
.pn textarea:focus-visible,
.pn [tabindex]:focus-visible,
.pn-header a:focus-visible,
.pn-header button:focus-visible,
.pn-footer a:focus-visible {
    outline: 2px solid var(--pn-brand-500);
    outline-offset: 3px;
    border-radius: var(--pn-r-1);
}
/* Dark surfaces need the lighter ring to stay visible */
.pn-hero a:focus-visible,
.pn-hero button:focus-visible,
.pn-why a:focus-visible,
.pn-tour button:focus-visible,
.pn-apps a:focus-visible,
.pn-apps button:focus-visible,
.pn-footer a:focus-visible,
/* Modules: only the controls, which sit on ink. The cards are light and
   carry an inset ring, so they keep the darker brand-500. */
.pn-modules button:focus-visible,
.pn-mods__track:focus-visible {
    outline-color: var(--pn-brand-400);
}

/* Skip link */
.pn-skip {
    position: fixed;
    left: var(--pn-4);
    top: var(--pn-4);
    z-index: 2000;
    padding: 10px var(--pn-4);
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    border-radius: var(--pn-r-2);
    font: 600 var(--pn-fs-sm) / 1 var(--pn-font-body);
    transform: translateY(-200%);
    transition: transform var(--pn-t-2) var(--pn-ease);
}
.pn-skip:focus {
    transform: none;
}

/* ==========================================================================
   05  Header (global — applies to every page)
   ========================================================================== */

/* The header, skip link and scroll-top all sit outside <main class="pn">, so
   `.pn a` never reached them — on the homepage, where main.css is not loaded,
   that left every nav, mega-menu and drawer link with the UA underline. */
.pn-header a,
.pn-header a:hover,
.pn-header a:focus,
.pn-skip,
.pn-scrolltop {
    text-decoration: none;
}

.pn-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    font-family: var(--pn-font-body);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}

/* Solid once scrolled, and always solid on pages without a dark hero */
.pn-header.is-stuck,
.pn-header:not(.pn-header--over) {
    background: var(--pn-paper);
    border-bottom-color: var(--pn-line);
    box-shadow: var(--pn-sh-1);
}
.pn-header--over.is-stuck {
    background: rgba(6, 23, 22, 0.92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom-color: var(--pn-on-ink-line);
    box-shadow: none;
}

.pn-header__bar {
    max-width: var(--pn-maxw);
    margin-inline: auto;
    padding: var(--pn-3) var(--pn-5);
    min-height: var(--pn-header-h);
    display: flex;
    align-items: center;
    gap: var(--pn-5);
}

.pn-header__logo {
    display: flex;
    align-items: center;
    flex: none;
    line-height: 0;
}
.pn-header__mark {
    height: 46px;
    width: auto;
    transition: height var(--pn-t-2) var(--pn-ease);
}
.pn-header.is-stuck .pn-header__mark {
    height: 40px;
}
/* Which mark is showing. No filter is involved: the dark header is served the
   white-and-gold artwork itself, so flattening it to one colour would undo the
   whole point. Paper is the default, since that is what a header without a
   dark hero gets. */
.pn-header__mark--ink {
    display: none;
}
.pn-header--over .pn-header__mark--ink {
    display: block;
}
.pn-header--over .pn-header__mark--paper {
    display: none;
}

.pn-header__spacer {
    flex: 1;
}

/* --- Desktop nav ------------------------------------------------------- */

.pn-nav {
    display: none;
}
.pn-nav__list {
    display: flex;
    align-items: center;
    gap: var(--pn-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.pn-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--pn-3);
    border-radius: var(--pn-r-2);
    font-size: var(--pn-fs-sm);
    font-weight: 500;
    color: var(--pn-text-strong);
    background: none;
    border: 0;
    cursor: pointer;
    transition:
        color var(--pn-t-1) var(--pn-ease),
        background-color var(--pn-t-1) var(--pn-ease);
}
.pn-nav__link:hover,
.pn-nav__link[aria-expanded="true"],
.pn-nav__link.is-active {
    color: var(--pn-brand-600);
    background: var(--pn-brand-050);
}
.pn-header--over:not(.is-stuck) .pn-nav__link,
.pn-header--over.is-stuck .pn-nav__link {
    color: rgba(255, 255, 255, 0.86);
}
.pn-header--over .pn-nav__link:hover,
.pn-header--over .pn-nav__link[aria-expanded="true"],
.pn-header--over .pn-nav__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.pn-nav__caret {
    width: 12px;
    height: 12px;
    flex: none;
    transition: transform var(--pn-t-2) var(--pn-ease);
}
.pn-nav__link[aria-expanded="true"] .pn-nav__caret {
    transform: rotate(180deg);
}

/* --- Mega menu --------------------------------------------------------- */

.pn-nav__item--mega {
    position: static;
}
.pn-mega {
    position: absolute;
    left: 50%;
    top: calc(100% - 8px);
    width: min(1120px, calc(100vw - var(--pn-8)));
    transform: translate(-50%, -8px);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    box-shadow: var(--pn-sh-3);
    padding: var(--pn-6);
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--pn-6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease),
        visibility 0s linear var(--pn-t-2);
}
.pn-mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.pn-mega__title {
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    margin: 0 0 var(--pn-4);
}
.pn-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pn-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.pn-mega__link {
    display: flex;
    gap: var(--pn-3);
    padding: var(--pn-3);
    border-radius: var(--pn-r-2);
    transition: background-color var(--pn-t-1) var(--pn-ease);
}
.pn-mega__link:hover {
    background: var(--pn-paper-soft);
}
.pn-mega__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: none;
    margin-top: 2px;
}
.pn-mega__name {
    display: block;
    font-size: var(--pn-fs-sm);
    font-weight: 600;
    color: var(--pn-text-strong);
    line-height: 1.3;
}
.pn-mega__desc {
    display: block;
    font-size: var(--pn-fs-xs);
    color: var(--pn-text-muted);
    line-height: 1.45;
    margin-top: 2px;
}
.pn-mega__rail {
    background: var(--pn-paper-soft);
    border-radius: var(--pn-r-3);
    padding: var(--pn-5);
}
.pn-mega__rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-1);
}
.pn-mega__rail .pn-mega__link:hover {
    background: var(--pn-paper);
}
.pn-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--pn-4);
    font-size: var(--pn-fs-sm);
    font-weight: 600;
}

/* --- Header CTA -------------------------------------------------------- */

.pn-header__cta {
    display: none;
}

/* --- Mobile drawer ----------------------------------------------------- */

.pn-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
    flex: none;
}
.pn-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--pn-text-strong);
    border-radius: 2px;
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        opacity var(--pn-t-1) var(--pn-ease);
}
.pn-header--over:not(.is-stuck) .pn-burger span,
.pn-header--over.is-stuck .pn-burger span {
    background: #fff;
}
body.pn-drawer-open .pn-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.pn-drawer-open .pn-burger span:nth-child(2) {
    opacity: 0;
}
body.pn-drawer-open .pn-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.pn-drawer {
    position: fixed;
    inset: var(--pn-header-h) 0 0 0;
    z-index: 999;
    background: var(--pn-paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--pn-5) var(--pn-5) var(--pn-8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease),
        visibility 0s linear var(--pn-t-2);
}
.pn-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
body.pn-drawer-open {
    overflow: hidden;
}
/* The header can't stay transparent once the drawer covers what was behind it,
   so it goes solid ink — the same surface it takes when stuck. That keeps the
   white-and-gold mark and the white close button legible above the light panel. */
body.pn-drawer-open .pn-header--over {
    background: var(--pn-ink-900);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--pn-on-ink-line);
    box-shadow: none;
}
body.pn-drawer-open .pn-header--over .pn-burger span {
    background: #fff;
}
.pn-drawer__list {
    list-style: none;
    margin: 0 0 var(--pn-5);
    padding: 0;
}
.pn-drawer__list > li {
    border-bottom: 1px solid var(--pn-line);
}
.pn-drawer__link,
.pn-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--pn-3);
    padding: var(--pn-4) 0;
    font-family: var(--pn-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--pn-text-strong);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.pn-drawer__toggle .pn-nav__caret {
    width: 14px;
    height: 14px;
    color: var(--pn-text-muted);
}
.pn-drawer__toggle[aria-expanded="true"] .pn-nav__caret {
    transform: rotate(180deg);
}
.pn-drawer__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--pn-t-2) var(--pn-ease-io);
}
.pn-drawer__panel > div {
    overflow: hidden;
}
.pn-drawer__toggle[aria-expanded="true"] + .pn-drawer__panel {
    grid-template-rows: 1fr;
}
.pn-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--pn-4);
    display: grid;
    gap: 2px;
}
.pn-drawer__sub a {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 10px var(--pn-3);
    border-radius: var(--pn-r-2);
    font-size: var(--pn-fs-sm);
    font-weight: 500;
    color: var(--pn-text);
}
.pn-drawer__sub a:hover {
    background: var(--pn-paper-soft);
    color: var(--pn-brand-600);
}
.pn-drawer__sub img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: none;
}
.pn-drawer .pn-btn {
    width: 100%;
}
.pn-drawer__meta {
    margin-top: var(--pn-5);
    font-size: var(--pn-fs-sm);
    color: var(--pn-text-muted);
}
.pn-drawer__meta a {
    color: var(--pn-brand-600);
    font-weight: 500;
}

@media (min-width: 1200px) {
    .pn-nav {
        display: block;
    }
    .pn-header__cta {
        display: inline-flex;
    }
    .pn-burger,
    .pn-drawer {
        display: none;
    }
}

/* Anchor targets must clear the fixed header */
.pn[id],
.pn [id] {
    scroll-margin-top: calc(var(--pn-header-h) + var(--pn-4));
}

/* ==========================================================================
   06  Footer (global)
   ========================================================================== */

.pn-footer {
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-sm);
    padding: var(--pn-9) 0 var(--pn-6);
}
.pn-footer__wrap {
    max-width: var(--pn-maxw);
    margin-inline: auto;
    padding-inline: var(--pn-5);
}
.pn-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pn-7);
    padding-bottom: var(--pn-7);
    border-bottom: 1px solid var(--pn-on-ink-line);
}
.pn-footer__brand p {
    max-width: 40ch;
    margin: var(--pn-4) 0 0;
    color: var(--pn-on-ink-soft);
    line-height: 1.6;
}
.pn-footer__logo img {
    height: 42px;
    width: auto;
}
.pn-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pn-6) var(--pn-5);
}
.pn-footer h3 {
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-on-ink);
    margin: 0 0 var(--pn-4);
}
.pn-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.pn-footer a {
    color: var(--pn-on-ink-soft);
    text-decoration: none;
    transition: color var(--pn-t-1) var(--pn-ease);
}
.pn-footer a:hover {
    color: var(--pn-brand-400);
}
.pn-footer__contact li {
    display: flex;
    gap: var(--pn-3);
    line-height: 1.5;
}
.pn-footer__contact svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--pn-brand-400);
}
.pn-footer__social {
    display: flex;
    gap: var(--pn-2);
    margin-top: var(--pn-5);
}
.pn-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-2);
    transition:
        border-color var(--pn-t-1) var(--pn-ease),
        color var(--pn-t-1) var(--pn-ease),
        background-color var(--pn-t-1) var(--pn-ease);
}
.pn-footer__social a:hover {
    border-color: var(--pn-brand-400);
    background: rgba(227, 195, 104, 0.08);
}
.pn-footer__social svg {
    width: 17px;
    height: 17px;
}
.pn-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pn-3);
    padding-top: var(--pn-5);
    font-size: var(--pn-fs-xs);
    color: var(--pn-on-ink-dim);
}
.pn-footer__bottom nav {
    display: flex;
    gap: var(--pn-5);
}

@media (min-width: 768px) {
    .pn-footer__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* One heading, two visual columns — beats an empty second <h3>.
       `display: block` is required: the base rule makes footer lists a grid,
       and grid containers ignore `columns`. */
    .pn-footer__modules {
        grid-column: span 2;
    }
    .pn-footer__modules ul {
        display: block;
        columns: 2;
        column-gap: var(--pn-5);
    }
    .pn-footer__modules li {
        break-inside: avoid;
        margin-bottom: 10px;
    }
}
@media (min-width: 992px) {
    .pn-footer__top {
        grid-template-columns: 340px 1fr;
        gap: var(--pn-8);
    }
}

/* ==========================================================================
   07  Hero
   ========================================================================== */

.pn-hero {
    position: relative;
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: calc(var(--pn-header-h) + var(--pn-8)) 0 var(--pn-9);
    overflow: hidden;
}

/* Schematic grid — a blueprint field, not a decorative blob */
.pn-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(227, 195, 104, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(227, 195, 104, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 72%);
    pointer-events: none;
}

.pn-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pn-8);
    align-items: center;
}

/* min-width:0 stops long words forcing the grid column wider than its track */
.pn-hero__copy {
    min-width: 0;
}
.pn-hero h1 {
    color: #fff;
    margin-bottom: var(--pn-5);
}
/* The original headline carries two accent colours; these are the ink-system
   equivalents (both clear 8:1 on ink-900). */
.pn-hero h1 em {
    font-style: normal;
}
.pn-hero__ac1,
.pn-hero__ac2 {
    color: var(--pn-brand-400);
}
.pn-hero__sub {
    font-size: var(--pn-fs-lead);
    line-height: 1.6;
    color: var(--pn-on-ink-soft);
    max-width: 52ch;
    margin-bottom: var(--pn-6);
}
.pn-hero .pn-actions {
    margin-bottom: var(--pn-7);
}

.pn-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pn-5) var(--pn-7);
    padding-top: var(--pn-5);
    border-top: 1px solid var(--pn-on-ink-line);
}
.pn-hero__stat b {
    display: block;
    font-family: var(--pn-font-head);
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.pn-hero__stat span {
    font-size: var(--pn-fs-xs);
    color: var(--pn-on-ink-dim);
    letter-spacing: 0.02em;
}

/* --- Console ----------------------------------------------------------- */

.pn-hero__visual {
    position: relative;
    perspective: 1600px;
}

.pn-console__dots {
    display: flex;
    gap: 6px;
}
.pn-console__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pn-line-strong);
}
.pn-console__url {
    flex: 1;
    font-size: 11px;
    color: var(--pn-text-muted);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-pill);
    padding: 4px var(--pn-3);
    text-align: center;
    letter-spacing: 0.01em;
}

@media (min-width: 992px) {
    .pn-hero__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: var(--pn-7);
    }
}


/* --- Ecosystem scene ---------------------------------------------------
   Seven Prop Nexus services ringed around one property core, each wired in,
   data flowing to the centre. SVG + CSS plus the module icons already used
   in the nav and the modules carousel — no new artwork.

   The build runs once on load (core rises, windows light, connectors draw,
   services arrive). After that only the orbit ring, the connector pulses and
   the core halo keep moving, all on transform/opacity/stroke.
   --------------------------------------------------------------------- */

.pn-eco {
    --badge: 54px;
    --label: 0.75rem;
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1;
    margin-inline: auto;
}
.pn-eco__net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Orbit rings — dashed, counter-rotating, very slow */
.pn-eco__ring {
    fill: none;
    stroke-width: 1;
    transform-origin: 280px 280px;
    opacity: 0;
}
.pn-eco__ring--out {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-dasharray: 3 11;
}
.pn-eco__ring--in {
    stroke: rgba(227, 195, 104, 0.3);
    stroke-dasharray: 2 8;
}
.pn-eco.is-live .pn-eco__ring--out {
    animation:
        pn-k-ecofade 800ms var(--pn-ease) 200ms both,
        pn-k-spin 72s linear 200ms infinite;
}
.pn-eco.is-live .pn-eco__ring--in {
    animation:
        pn-k-ecofade 800ms var(--pn-ease) 350ms both,
        pn-k-spin 52s linear 350ms infinite reverse;
}
@keyframes pn-k-ecofade {
    to {
        opacity: 1;
    }
}
@keyframes pn-k-spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- The property core --- */
/* Pointer parallax sits on the group so the core lifts off the static ring */
.pn-eco__core {
    transform: translate(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 7px));
    transition: transform 450ms var(--pn-ease);
}
.pn-eco__plate {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(227, 195, 104, 0.32);
    stroke-width: 1;
    transform-origin: 280px 280px;
    opacity: 0;
}
.pn-eco.is-live .pn-eco__plate {
    animation: pn-k-platein 700ms cubic-bezier(0.2, 1.3, 0.4, 1) 150ms both;
}
@keyframes pn-k-platein {
    from {
        opacity: 0;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.pn-eco__block {
    fill: rgba(227, 195, 104, 0.14);
    stroke: rgba(227, 195, 104, 0.55);
    stroke-width: 1;
    transform-origin: center bottom;
    transform-box: fill-box;
    opacity: 0;
}
.pn-eco.is-live .pn-eco__block {
    animation: pn-k-blockup 620ms cubic-bezier(0.2, 1.25, 0.4, 1) both;
    animation-delay: calc(var(--b) * 140ms + 400ms);
}
@keyframes pn-k-blockup {
    from {
        opacity: 0;
        transform: scaleY(0.12);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}
.pn-eco__win {
    fill: rgba(255, 255, 255, 0.16);
}
.pn-eco.is-live .pn-eco__win {
    animation: pn-k-winlit 460ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 65ms + 900ms);
}
@keyframes pn-k-winlit {
    to {
        fill: var(--pn-brand-400);
    }
}
.pn-eco__ground {
    stroke: rgba(227, 195, 104, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 108;
    stroke-dashoffset: 108;
}
.pn-eco.is-live .pn-eco__ground {
    animation: pn-k-linkdraw 600ms var(--pn-ease) 350ms both;
}

/* A soft ring that breathes around the core once the scene has settled */
.pn-eco__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24.3%;
    aspect-ratio: 1;
    margin: -12.15% 0 0 -12.15%;
    border-radius: 30%;
    border: 1px solid rgba(227, 195, 104, 0.4);
    pointer-events: none;
    opacity: 0;
}
.pn-eco.is-live .pn-eco__halo {
    animation: pn-k-halo 3.4s var(--pn-ease-io) 2.2s infinite;
}
@keyframes pn-k-halo {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* --- Connectors --- */
.pn-eco__links path {
    fill: none;
    stroke: rgba(227, 195, 104, 0.32);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
}
.pn-eco.is-live .pn-eco__links path {
    animation: pn-k-linkdraw 640ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 85ms + 1s);
}
@keyframes pn-k-linkdraw {
    to {
        stroke-dashoffset: 0;
    }
}
/* A short dash rides each connector inward — every service feeding one platform */
.pn-eco__pulses path {
    fill: none;
    stroke: var(--pn-brand-400);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 5 108;
    stroke-dashoffset: 113;
    opacity: 0;
}
.pn-eco.is-live .pn-eco__pulses path {
    animation: pn-k-pulseflow 3.2s linear infinite;
    animation-delay: calc(var(--d) * 440ms + 2s);
}
@keyframes pn-k-pulseflow {
    0% {
        opacity: 0;
        stroke-dashoffset: 113;
    }
    14%,
    86% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

/* --- The seven services --- */
.pn-eco__svc {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 3;
    width: var(--badge);
    height: var(--badge);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}
.pn-eco.is-live .pn-eco__svc {
    animation: pn-k-svcin 560ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
    animation-delay: calc(var(--d) * 95ms + 1.35s);
}
@keyframes pn-k-svcin {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.16);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
/* Paper badges: the module icons were drawn for light backgrounds, and the
   contrast against the ink hero makes each service read instantly. */
.pn-eco__svc-badge {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--pn-paper);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
/* --- Service glyphs ----------------------------------------------------
   Two tones: dark structure, one teal element carrying the motion.

   The icons animate as a wave — a 9.1s cycle offset by 1.3s per service, so
   exactly one is moving at any moment and the motion travels round the ring.
   Every keyframe both starts and ends at the resting pose, so an icon waiting
   its turn still reads correctly instead of sitting half-built.
   --------------------------------------------------------------------- */

.pn-si {
    width: 60%;
    height: 60%;
    display: block;
    overflow: visible;
    stroke: var(--pn-ink-800);
}
/* The badge behind these glyphs is white, so the accent uses the deep gold
   (5.0:1) rather than the bright fill gold, which would only reach 2.4:1. */
.pn-si__ac {
    stroke: var(--pn-brand-600);
}
.pn-eco.is-live .pn-si * {
    animation-duration: 9.1s;
    animation-timing-function: var(--pn-ease);
    animation-iteration-count: infinite;
    animation-delay: calc(var(--d) * 1.3s + 2.6s);
}

/* Sales — columns dip and climb, arrow lifts */
.pn-si__bar {
    transform-box: fill-box;
    transform-origin: center bottom;
}
.pn-eco.is-live .pn-si__bar {
    animation-name: pn-k-siBar;
    animation-delay: calc(var(--d) * 1.3s + var(--i) * 90ms + 2.6s);
}
@keyframes pn-k-siBar {
    0%,
    100% {
        transform: scaleY(1);
    }
    4% {
        transform: scaleY(0.25);
    }
    12% {
        transform: scaleY(1.06);
    }
    18% {
        transform: scaleY(1);
    }
}
.pn-si__arw {
    transform-box: fill-box;
    transform-origin: center;
}
.pn-eco.is-live .pn-si__arw {
    animation-name: pn-k-siArrow;
}
@keyframes pn-k-siArrow {
    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    5% {
        transform: translateY(4px);
        opacity: 0;
    }
    15% {
        transform: translateY(-1px);
        opacity: 1;
    }
    20% {
        transform: translateY(0);
    }
}

/* CRM — contact ripples out from the customer */
.pn-si__ripple {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.4;
}
.pn-eco.is-live .pn-si__ripple {
    animation-name: pn-k-siRipple;
}
@keyframes pn-k-siRipple {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
    4% {
        transform: scale(0.6);
        opacity: 1;
    }
    18% {
        transform: scale(1.12);
        opacity: 0;
    }
    24% {
        transform: scale(1);
        opacity: 0.4;
    }
}

/* Procurement — goods drop into the carton */
.pn-si__drop {
    transform-box: fill-box;
    transform-origin: center;
}
.pn-eco.is-live .pn-si__drop {
    animation-name: pn-k-siDrop;
}
@keyframes pn-k-siDrop {
    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    3% {
        transform: translateY(-6px);
        opacity: 0;
    }
    13% {
        transform: translateY(1px);
        opacity: 1;
    }
    18% {
        transform: translateY(0);
    }
}

/* Finance — the stack rebuilds coin by coin */
.pn-si__coin {
    transform-box: fill-box;
    transform-origin: center;
}
.pn-eco.is-live .pn-si__coin {
    animation-name: pn-k-siCoin;
    animation-delay: calc(var(--d) * 1.3s + var(--i) * 100ms + 2.6s);
}
@keyframes pn-k-siCoin {
    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    3% {
        transform: translateY(-5px);
        opacity: 0;
    }
    12% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Payroll — the payslip fills itself in */
.pn-si__line {
    transform-box: fill-box;
    transform-origin: left center;
}
.pn-eco.is-live .pn-si__line {
    animation-name: pn-k-siLine;
    animation-delay: calc(var(--d) * 1.3s + var(--i) * 110ms + 2.6s);
}
@keyframes pn-k-siLine {
    0%,
    100% {
        transform: scaleX(1);
    }
    3% {
        transform: scaleX(0);
    }
    14% {
        transform: scaleX(1);
    }
}

/* Legal — the scales tip, then settle level.
   fill-box + `center top` puts the origin on the pivot without needing
   `transform-box: view-box`, which is still too new to rely on. */
.pn-si__pivot,
.pn-si__hub {
    fill: var(--pn-brand-500);
    stroke: none;
}
.pn-si__beam {
    transform-box: fill-box;
    transform-origin: center top;
}
.pn-eco.is-live .pn-si__beam {
    animation-name: pn-k-siTilt;
}
@keyframes pn-k-siTilt {
    0%,
    100% {
        transform: rotate(0);
    }
    5% {
        transform: rotate(-10deg);
    }
    11% {
        transform: rotate(7deg);
    }
    17% {
        transform: rotate(-3deg);
    }
    23% {
        transform: rotate(0);
    }
}

/* Facility — eight teeth, so a 45deg turn returns to the same pose */
.pn-si__gear {
    transform-box: fill-box;
    transform-origin: center;
}
.pn-eco.is-live .pn-si__gear {
    animation-name: pn-k-siGear;
}
@keyframes pn-k-siGear {
    0% {
        transform: rotate(0);
    }
    14%,
    100% {
        transform: rotate(45deg);
    }
}
.pn-eco__svc b {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(6, 23, 22, 0.85);
}
.pn-eco__svc:hover .pn-eco__svc-badge {
    transform: scale(1.08);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.5),
        0 0 0 2px var(--pn-brand-400);
}

@media (max-width: 1199px) {
    .pn-eco {
        --badge: 48px;
        --label: 0.7rem;
        max-width: 480px;
    }
}
@media (max-width: 991px) {
    .pn-eco {
        --badge: 50px;
        --label: 0.75rem;
        max-width: 460px;
    }
}
@media (max-width: 767px) {
    .pn-eco {
        --badge: 42px;
        --label: 0.6875rem;
        max-width: 380px;
    }
    /* Seven looping stroke animations are the one paint-bound thing here;
       the build sequence still tells the whole story without them. */
    .pn-eco.is-live .pn-eco__pulses path {
        animation: none;
        opacity: 0;
    }
}
@media (max-width: 479px) {
    .pn-eco {
        /* --badge: 34px; */
        --label: 0.625rem;
        /* max-width: 290px; */
    }
    .pn-eco__svc b {
        top: calc(100% + 5px);
    }
}




/* ==========================================================================
   08  Overview
   ========================================================================== */

.pn-ov {
    position: relative;
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-ov__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 50% 62%, var(--pn-brand-050) 0%, transparent 68%),
        linear-gradient(to bottom, transparent 55%, var(--pn-paper-soft) 100%);
}

/* --- Header --- */
.pn-ov__top {
    position: relative;
    display: grid;
    gap: var(--pn-5);
    margin-bottom: var(--pn-8);
}
.pn-ov__title h2 {
    margin: 0;
    max-width: 20ch;
}
.pn-ov__lead {
    position: relative;
    margin: 0;
    padding-left: var(--pn-5);
    font-family: var(--pn-font-head);
    font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.55rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--pn-text-strong);
}
.pn-ov__lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--pn-brand-500);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 700ms var(--pn-ease) 250ms;
}
.pn-ov__lead.is-in::before {
    transform: scaleY(1);
}

/* --- The product window ------------------------------------------------
   A still of the real console. The window arrives with the section's own
   reveal and then holds — nothing inside it moves.
   --------------------------------------------------------------------- */

.pn-ov__stage {
    position: relative;
    margin-bottom: var(--pn-9);
}
.pn-ov__app {
    position: relative;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-3);
    overflow: hidden;
}
.pn-ov__chrome {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 10px var(--pn-4);
    background: var(--pn-paper-soft);
    border-bottom: 1px solid var(--pn-line);
}
.pn-ov__live {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-ok);
}

/* --- The dashboard ------------------------------------------------------
   A static reproduction of the product's Current Status screen. Nothing in
   here moves: no counters, no growing bars, no arriving toast. It is meant to
   read as a screenshot of the real console, so the only job of the CSS is to
   be dense, legible and quiet.

   Everything is sized in em against `.pn-od`'s font-size, so the whole console
   scales as one unit at each breakpoint instead of needing 30 separate rules.
   --------------------------------------------------------------------- */

.pn-od {
    font-size: 10px;
    font-family: var(--pn-font-body);
    color: var(--pn-text);
    background: var(--pn-paper-soft);
    container-type: inline-size;
}

/* Product top bar */
.pn-od__bar {
    display: flex;
    align-items: center;
    gap: 1.2em;
    padding: 0.9em 1.4em;
    background: var(--pn-ink-900);
    color: #fff;
}
.pn-od__burger {
    display: grid;
    gap: 0.3em;
    width: 1.4em;
    flex: none;
}
.pn-od__burger i {
    height: 0.17em;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.75);
    display: block;
}
.pn-od__brand {
    font-family: var(--pn-font-head);
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.pn-od__brand em {
    font-style: normal;
    font-weight: 600;
    color: var(--pn-brand-400);
}
.pn-od__barsp {
    flex: 1;
}
.pn-od__bell {
    flex: none;
    color: rgba(255, 255, 255, 0.8);
}
.pn-od__bell svg {
    width: 1.5em;
    height: 1.5em;
    stroke-width: 1.7;
}
.pn-od__me {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
}
.pn-od__me i {
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--pn-brand-500);
    flex: none;
}

.pn-od__ui {
    display: grid;
    grid-template-columns: 6.4em 1fr;
}

/* Sidebar rail */
.pn-od__nav {
    display: grid;
    align-content: start;
    gap: 0.15em;
    padding: 1em 0.4em;
    background: var(--pn-paper);
    border-right: 1px solid var(--pn-line);
}
.pn-od__navsearch {
    display: grid;
    place-items: center;
    padding: 0.5em 0 1em;
    color: var(--pn-text-muted);
}
.pn-od__navitem {
    display: grid;
    justify-items: center;
    gap: 0.25em;
    padding: 0.6em 0.2em;
    border-radius: var(--pn-r-1);
    color: var(--pn-text-muted);
    text-align: center;
}
.pn-od__navitem em {
    font-style: normal;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.2;
}
.pn-od__navitem svg,
.pn-od__navsearch svg {
    width: 1.6em;
    height: 1.6em;
    stroke-width: 1.7;
}
/* The rail's current page, marked the way the real console marks it */
.pn-od__navitem.is-on {
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    font-weight: 600;
}

.pn-od__main {
    min-width: 0;
    padding: 1.2em 1.4em 1.6em;
}

.pn-od__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    padding: 0.9em 1.1em;
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
}
.pn-od__h {
    font-family: var(--pn-font-head);
    font-size: 1.5em;
    font-weight: 700;
    color: var(--pn-text-strong);
    letter-spacing: -0.015em;
}
.pn-od__date {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--pn-brand-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Filter bar. The labelled ones carry their caption on the border, exactly as
   a floating-label field does in the product. */
.pn-od__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7em;
    margin-top: 1.1em;
}
.pn-od__f {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 8.4em;
    padding: 0.6em 0.8em;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-1);
    background: var(--pn-paper);
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-od__f em {
    font-style: normal;
    flex: 1;
}
.pn-od__f--labelled em {
    color: var(--pn-text-strong);
    font-weight: 500;
}
.pn-od__f u {
    position: absolute;
    top: -0.55em;
    left: 0.6em;
    padding: 0 0.3em;
    background: var(--pn-paper-soft);
    font-size: 0.8em;
    text-decoration: none;
    color: var(--pn-text-muted);
}
/* The caret */
.pn-od__f b {
    width: 0;
    height: 0;
    flex: none;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.4em solid var(--pn-text-muted);
}
.pn-od__fsearch {
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
}
.pn-od__fsearch svg {
    width: 1.5em;
    height: 1.5em;
    stroke-width: 2;
}

.pn-od__toggles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7em;
    margin-top: 1em;
}
.pn-od__filtericon {
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
}
.pn-od__filtericon svg {
    width: 1.6em;
    height: 1.6em;
    stroke-width: 1.8;
}
.pn-od__switch {
    width: 2.4em;
    height: 1.2em;
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper-sunk);
    border: 1px solid var(--pn-line);
    display: flex;
    align-items: center;
    padding: 0 0.12em;
    flex: none;
}
.pn-od__switch i {
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: var(--pn-text-muted);
    display: block;
}
.pn-od__switchlbl {
    font-size: 0.95em;
}

.pn-od__tabs {
    display: flex;
    gap: 2.4em;
    margin-top: 1.2em;
    border-bottom: 1px solid var(--pn-line);
}
.pn-od__tabs span {
    padding: 0.7em 0.2em;
    font-size: 1.02em;
    font-weight: 500;
    color: var(--pn-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.pn-od__tabs .is-on {
    color: var(--pn-brand-600);
    border-bottom-color: var(--pn-brand-500);
    font-weight: 700;
}

.pn-od__panel {
    margin-top: 1.4em;
    padding: 1.2em;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-od__note {
    margin: 0;
    padding: 0.8em 1em;
    border-left: 2px solid var(--pn-brand-500);
    border-radius: 0 var(--pn-r-1) var(--pn-r-1) 0;
    background: var(--pn-paper-soft);
    font-size: 0.98em;
    line-height: 1.5;
    color: var(--pn-text);
}
.pn-od__group {
    margin: 1.4em 0 0.7em;
    font-family: var(--pn-font-head);
    font-size: 1.2em;
    font-weight: 600;
    color: var(--pn-text-strong);
}

/* auto-fit means both rows fill the width even though one holds nine tiles
   and the other eleven — and they re-flow together as the frame narrows. */
.pn-od__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.6em, 1fr));
    gap: 0.6em;
}
/* Two rows, the first a fixed two-line box. Labels wrap at different lengths
   ("Sales Non-Contactable" takes two lines, "Booked" one) and without this the
   figures would sit at different heights across the row. */
.pn-od__tile {
    position: relative;
    display: grid;
    grid-template-rows: 2.4em auto;
    align-content: start;
    gap: 0.5em;
    padding: 0.7em 0.75em;
    border: 1px solid var(--pn-line);
    border-top: 2px solid var(--pn-line);
    border-radius: var(--pn-r-1);
    background: var(--pn-paper);
    overflow: hidden;
}
.pn-od__tile em {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: normal;
    font-size: 0.92em;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pn-text-muted);
}
.pn-od__tile b {
    font-family: var(--pn-font-head);
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-text-strong);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.pn-od__tile i {
    position: absolute;
    right: 0.55em;
    bottom: 0.45em;
    display: grid;
    place-items: center;
    color: var(--pn-line);
}
.pn-od__tile svg {
    width: 1.9em;
    height: 1.9em;
    stroke-width: 1.6;
}

/* Tone carries the meaning the live console spends twenty hues on */
.pn-od__tile[data-tone="brand"] {
    border-top-color: var(--pn-brand-500);
}
.pn-od__tile[data-tone="brand"] i {
    color: var(--pn-brand-100);
}
.pn-od__tile[data-tone="up"] {
    border-top-color: var(--pn-ok);
}
.pn-od__tile[data-tone="up"] i {
    color: rgba(46, 158, 107, 0.32);
}
.pn-od__tile[data-tone="up"] b {
    color: #1e6b48;
}
.pn-od__tile[data-tone="wait"] {
    border-top-color: var(--pn-warn);
}
.pn-od__tile[data-tone="wait"] i {
    color: rgba(217, 130, 43, 0.34);
}
.pn-od__tile[data-tone="down"] {
    border-top-color: rgba(14, 14, 16, 0.22);
}
/* The figure stays full strength even on a loss tile — it is the data */
.pn-od__tile[data-tone="down"] i {
    color: rgba(14, 14, 16, 0.16);
}

/* One font-size step per breakpoint rescales the entire console. Below the
   sidebar's usefulness it goes, and the filter bar follows. */
@container (max-width: 1080px) {
    .pn-od {
        font-size: 9px;
    }
}
@container (max-width: 900px) {
    .pn-od {
        font-size: 8.4px;
    }
    .pn-od__tabs {
        gap: 1.4em;
    }
}
@container (max-width: 720px) {
    .pn-od__ui {
        grid-template-columns: 1fr;
    }
    .pn-od__nav {
        display: none;
    }
    .pn-od__filters .pn-od__f:nth-child(n + 4) {
        display: none;
    }
}
@container (max-width: 520px) {
    .pn-od {
        font-size: 7.6px;
    }
    .pn-od__tabs span:not(.is-on) {
        display: none;
    }
    .pn-od__toggles {
        display: none;
    }
}

/* --- Footer: two notes plus the featured takeaway ---------------------
   Two quiet paper cards carry the paragraphs; the third is inverted and
   raised so the conclusion reads as the payoff rather than a third
   equal item.
   --------------------------------------------------------------------- */

.pn-ov__foot {
    display: grid;
    gap: var(--pn-5);
}

.pn-ov__note {
    position: relative;
    overflow: hidden;
    padding: var(--pn-6);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
.pn-ov__note:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
.pn-ov__note-no {
    position: absolute;
    top: -4px;
    right: var(--pn-4);
    font-family: var(--pn-font-head);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-brand-500);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity var(--pn-t-2) var(--pn-ease);
}
.pn-ov__note:hover .pn-ov__note-no {
    opacity: 0.16;
}
.pn-ov__note-rule {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--pn-brand-500);
    margin-bottom: var(--pn-5);
    transform: scaleX(0.45);
    transform-origin: left center;
    transition: transform var(--pn-t-3) var(--pn-ease);
}
.pn-ov__note:hover .pn-ov__note-rule {
    transform: scaleX(1);
}
.pn-ov__note p {
    position: relative;
    margin: 0;
    color: var(--pn-text-muted);
    line-height: 1.7;
}

/* The takeaway — inverted, so it lands as a conclusion */
.pn-ov__card {
    position: relative;
    overflow: hidden;
    padding: var(--pn-6);
    background: var(--pn-ink-900);
    border: 1px solid rgba(227, 195, 104, 0.26);
    border-radius: var(--pn-r-3);
    box-shadow: 0 22px 50px rgba(6, 23, 22, 0.26);
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
.pn-ov__card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pn-brand-400), transparent 78%);
}
.pn-ov__card-wash {
    position: absolute;
    right: -24%;
    top: -46%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(227, 195, 104, 0.2), transparent 70%);
    pointer-events: none;
}
.pn-ov__card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 195, 104, 0.55);
    box-shadow: 0 28px 62px rgba(6, 23, 22, 0.34);
}
.pn-ov__card h3 {
    position: relative;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 var(--pn-3);
}
.pn-ov__card p {
    position: relative;
    margin: 0;
    font-size: var(--pn-fs-sm);
    color: var(--pn-on-ink-soft);
    line-height: 1.7;
}
.pn-ov__card-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    margin-bottom: var(--pn-5);
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
.pn-ov__card:hover .pn-ov__card-icon {
    transform: scale(1.07);
    box-shadow: 0 0 0 6px rgba(227, 195, 104, 0.16);
}
.pn-ov__card-icon svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 768px) {
    .pn-ov__top {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--pn-8);
        align-items: end;
    }
    .pn-ov__foot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Two notes side by side, the takeaway spanning beneath them */
    .pn-ov__card {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: var(--pn-5);
        align-items: start;
    }
    .pn-ov__card-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}
@media (min-width: 1024px) {
    .pn-ov__foot {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--pn-6);
        align-items: start;
    }
    /* `top`, not `transform` — the reveal group owns transform on these
       children, and hover needs it too. */
    .pn-ov__card {
        position: relative;
        top: -22px;
        grid-column: auto;
        display: block;
        padding: var(--pn-7) var(--pn-6);
    }
    .pn-ov__card-icon {
        margin-bottom: var(--pn-5);
    }
    .pn-ov__note {
        padding: var(--pn-7) var(--pn-6);
    }
}

/* ==========================================================================
   11  Modules
   ========================================================================== */

.pn-modules {
    position: relative;
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
}
/* Same wash as the tour, so the two dark sections read as one family */
.pn-modules::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(62% 44% at 50% 34%, rgba(201, 162, 39, 0.13) 0%, transparent 70%);
}
.pn-modules > * {
    position: relative;
}
.pn-modules h2 {
    color: #fff;
}
.pn-modules .pn__eyebrow {
    color: var(--pn-brand-400);
}
.pn-modules .pn__lead {
    color: var(--pn-on-ink-soft);
}

/* --- Carousel ----------------------------------------------------------
   Native scroll-snap rather than a JS transform slider: touch swipe,
   trackpad, keyboard and momentum all come free, and the arrows/dots only
   have to call scrollTo(). ------------------------------------------- */

.pn-mods__viewport {
    position: relative;
}
.pn-mods__track {
    display: flex;
    gap: var(--pn-4);
    list-style: none;
    margin: 0;
    /* Vertical padding gives the hover lift and focus ring room, since
       overflow-x:auto forces overflow-y to compute to auto as well. */
    padding: var(--pn-2) 0 var(--pn-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.pn-mods__track::-webkit-scrollbar {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .pn-mods__track {
        scroll-behavior: auto;
    }
}
.pn-mods__track > li {
    flex: 0 0 calc((100% - var(--pn-4)) / 2);
    scroll-snap-align: start;
    display: flex;
}

/* Nothing to page through — hide the controls rather than show dead ones */
.pn-mods--static .pn-mods__nav {
    display: none;
}
.pn-mods__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pn-5);
    margin-top: var(--pn-5);
}
/* Ghost controls on ink — a filled white circle would compete with the cards */
.pn-mods__arrow {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pn-on-ink-line);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition:
        border-color var(--pn-t-1) var(--pn-ease),
        background-color var(--pn-t-1) var(--pn-ease),
        color var(--pn-t-1) var(--pn-ease),
        opacity var(--pn-t-1) var(--pn-ease);
}
.pn-mods__arrow svg {
    width: 18px;
    height: 18px;
}
.pn-mods__arrow:hover:not(:disabled) {
    border-color: var(--pn-brand-400);
    background: rgba(227, 195, 104, 0.12);
    color: var(--pn-brand-400);
}
.pn-mods__arrow:disabled {
    opacity: 0.32;
    cursor: default;
}
.pn-mods__arrow--prev svg {
    transform: rotate(180deg);
}

/* 1-up on small screens means up to 12 dots — let them wrap rather than
   push the arrows off the edge at 320px */
.pn-mods__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pn-2);
}
.pn-mods__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--pn-r-pill);
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition:
        width var(--pn-t-2) var(--pn-ease),
        background-color var(--pn-t-2) var(--pn-ease);
}
/* brand-400, not 600 — the darker teal drops to 2.6:1 against ink */
.pn-mods__dots button[aria-current="true"] {
    width: 26px;
    background: var(--pn-brand-400);
}

/* --- Card --------------------------------------------------------------- */

.pn-mcard {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--pn-5);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    color: inherit;
    overflow: hidden;
    transition:
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
.pn-mcard:hover,
.pn-mcard:focus-visible {
    border-color: var(--pn-brand-500);
    box-shadow: var(--pn-sh-2);
    transform: translateY(-3px);
    color: inherit;
}
/* Inset ring — an outset one would be clipped by the scroller on the first card */
.pn-mcard:focus-visible {
    outline-offset: -2px;
}

/* Ghost index — sits behind everything, never read aloud */
.pn-mcard__wm {
    position: absolute;
    top: -6px;
    right: 4px;
    font-family: var(--pn-font-head);
    font-size: 4.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-brand-500);
    opacity: 0.07;
    pointer-events: none;
    transition: opacity var(--pn-t-2) var(--pn-ease);
}
.pn-mcard:hover .pn-mcard__wm {
    opacity: 0.13;
}

.pn-mcard__badge {
    padding: 3px 10px;
    border: 1px solid var(--pn-brand-100);
    background: var(--pn-brand-050);
    border-radius: var(--pn-r-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-brand-600);
}

.pn-mcard h3 {
    font-size: 1.0625rem;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: var(--pn-2);
}
.pn-mcard h3 svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--pn-brand-500);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
.pn-mcard:hover h3 svg,
.pn-mcard:focus-visible h3 svg {
    opacity: 1;
    transform: none;
}
.pn-mcard__outcome {
    margin: 0 0 var(--pn-4);
    font-size: var(--pn-fs-sm);
    color: var(--pn-text-muted);
    line-height: 1.55;
}

/* Fact pills — always visible, no hover-to-reveal (touch can't hover) */
.pn-mcard__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 0;
    padding: var(--pn-4) 0 0;
    border-top: 1px solid var(--pn-line);
}
.pn-mcard__pills li {
    padding: 4px 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper-soft);
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--pn-text-muted);
    transition: border-color var(--pn-t-2) var(--pn-ease);
}
.pn-mcard:hover .pn-mcard__pills li {
    border-color: var(--pn-brand-100);
}

.pn-mcard__foot {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    margin-bottom: var(--pn-4);
}
.pn-mcard__icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
}

@media (max-width: 575px) {
    .pn-mods__track > li {
        flex-basis: 84%;
    }
}
@media (min-width: 900px) {
    .pn-mods__track > li {
        flex-basis: calc((100% - var(--pn-4) * 2) / 3);
    }
}
@media (min-width: 1200px) {
    .pn-mods__track > li {
        flex-basis: calc((100% - var(--pn-4) * 3) / 4);
    }
}

/* --- Mini visuals ------------------------------------------------------
   A shared primitive set: every module schematic is composed from these,
   and all of them animate off the single `.is-lit` class. ------------- */

/* Each schematic is a single root element inside the panel. Fading that root
   is what makes the replay loop seamless: the build animations are restarted
   while the drawing is at zero opacity, so the snap back to the "before" pose
   is never visible — only a soft crossfade. Duration is mirrored by FADE_MS
   in propnexus.js; change both together. */
.pn-mini > * {
    transition: opacity 240ms var(--pn-ease);
}
.pn-mcard.is-cycling .pn-mini > * {
    opacity: 0;
}

.pn-mini {
    position: relative;
    /* 112px clears the tallest composition (3 rows of 22px avatars + gaps) */
    height: 112px;
    margin-bottom: var(--pn-4);
    padding: var(--pn-3);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: linear-gradient(165deg, var(--pn-brand-050), var(--pn-paper) 78%);
    display: grid;
    align-content: center;
    gap: 7px;
    overflow: hidden;
}
.pn-mini__chip {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper);
    border: 1px solid var(--pn-line);
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.pn-mini__chip--ok {
    background: rgba(46, 158, 107, 0.1);
    border-color: rgba(46, 158, 107, 0.25);
    color: #1e6b48;
}
.pn-mini__chip--warn {
    background: var(--pn-amber-100);
    border-color: rgba(217, 130, 43, 0.3);
    color: #8a5209;
}
.pn-mini__chip--brand {
    background: var(--pn-brand-050);
    border-color: var(--pn-brand-100);
    color: var(--pn-brand-600);
}

/* ------------------------------------------------------------------------
   Twelve schematics, twelve distinct motion verbs — no two cards move the
   same way. All gated on `.is-lit`, which the carousel adds on scroll-in and
   re-adds on hover. These use `animation` rather than `transition` precisely
   so that removing and re-adding the class replays them from the start.

     01 sales      travel   a lead moves down the stages
     02 crm        gather   one record; the team's history lands on it
     03 work order flip     the status card flips Raised → Approved → Closed
     04 purchase   relay    the rail fills, each node pings as it is reached
     05 inventory  ripple   tiles turn over in a diagonal wave
     06 quality    stamp    ticks draw stroke-by-stroke, then a stamp lands
     07 finance    grow     columns rise, the figure counts up
     08 hr         deal     payslips are dealt in from the right
     09 attendance scan     a beam sweeps the frame, then the week ticks in
     10 ticketing  drop     tickets fall into the queue, top one is assigned
     11 legal      draft    clauses are written, signed, then sealed
     12 facility   secure   the building comes up, its services report in
   --------------------------------------------------------------------- */

/* Shared by more than one schematic, so it lives with the group rather than
   inside whichever card happens to use it first. */
@keyframes pn-k-fadein {
    to {
        opacity: 1;
    }
}

/* 01 — SALES · travel */
.pn-vsales {
    position: relative;
    display: grid;
    gap: 6px;
    padding-left: 20px;
}
.pn-vsales__stage {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 20px;
    padding: 0 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper);
}
.pn-vsales__stage i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-line-strong);
    display: block;
}
.pn-vsales__stage em {
    font-style: normal;
    font-size: 9px;
    color: var(--pn-text-muted);
}
.pn-vsales__lead {
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pn-brand-600);
    box-shadow: 0 0 0 3px var(--pn-brand-050);
    opacity: 0;
    display: block;
}
.is-lit .pn-vsales__lead {
    animation: pn-k-travel 2.2s var(--pn-ease-io) both;
}
.is-lit .pn-vsales__stage {
    animation: pn-k-stage 420ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 640ms + 300ms);
}
.is-lit .pn-vsales__stage i {
    animation: pn-k-stagedot 420ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 640ms + 300ms);
}
@keyframes pn-k-travel {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    26% {
        transform: translateY(0);
    }
    44% {
        transform: translateY(26px);
    }
    60% {
        transform: translateY(26px);
    }
    78%,
    100% {
        transform: translateY(52px);
        opacity: 1;
    }
}
@keyframes pn-k-stage {
    to {
        border-color: var(--pn-brand-500);
        background: var(--pn-brand-050);
    }
}
@keyframes pn-k-stagedot {
    to {
        background: var(--pn-brand-500);
        transform: scale(1.3);
    }
}

/* 02 — CRM · gather: one record, and the whole team's history landing on it.
   The card claims "one customer record your whole team can see", with full
   interaction history and clear ownership — so the schematic is that record,
   with each team member's entry arriving on it under their own initial. */
.pn-vcrm {
    display: grid;
    align-content: start;
    gap: 6px;
    height: 88px;
    padding: 7px 8px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    transform: scale(0.96);
    opacity: 0;
}
.is-lit .pn-vcrm {
    animation: pn-k-vcrmcard 380ms var(--pn-ease) both;
}
@keyframes pn-k-vcrmcard {
    to {
        opacity: 1;
        transform: none;
    }
}
.pn-vcrm__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pn-line);
}
.pn-vcrm__head i {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
}
.pn-vcrm__head em {
    flex: 1;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: var(--pn-text-strong);
    white-space: nowrap;
}
/* The count stays at one however many people touch the record */
.pn-vcrm__head b {
    flex: none;
    min-width: 15px;
    padding: 1px 4px;
    border-radius: var(--pn-r-pill);
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

.pn-vcrm__log {
    display: grid;
    gap: 5px;
}
.pn-vcrm__ent {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
}
.pn-vcrm__ent i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
}
.pn-vcrm__ent em {
    flex: none;
    width: 26px;
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.pn-vcrm__ent u {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--pn-paper-sunk);
    display: block;
}
/* Whose entry it is — the ownership the card talks about */
.pn-vcrm__ent b {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-paper-soft);
    border: 1px solid var(--pn-line-strong);
    color: var(--pn-text-muted);
    font-size: 7px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
/* Entries arrive one after another, each from the side, as they would */
.is-lit .pn-vcrm__ent {
    animation: pn-k-vcrment 380ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 260ms + 420ms);
}
@keyframes pn-k-vcrment {
    0% {
        opacity: 0;
        transform: translateX(14px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
/* The latest one keeps a live pulse, so the record reads as still in use */
.is-lit .pn-vcrm__ent:last-child i {
    animation: pn-k-vcrmpulse 2s var(--pn-ease-io) 1.4s infinite;
}
@keyframes pn-k-vcrmpulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5);
    }
    70%,
    100% {
        box-shadow: 0 0 0 6px rgba(201, 162, 39, 0);
    }
}

/* 03 — WORK ORDER · handoff across a three-column board */
.pn-vwo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.pn-vwo__col {
    display: grid;
    gap: 5px;
}
.pn-vwo__col em {
    font-style: normal;
    font-size: 8px;
    line-height: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    text-align: center;
}
.pn-vwo__col i {
    height: 30px;
    border: 1px dashed var(--pn-line-strong);
    border-radius: 5px;
    background: var(--pn-paper);
    display: block;
}
.is-lit .pn-vwo__col em {
    animation: pn-k-colhit 340ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 880ms + 320ms);
}
@keyframes pn-k-colhit {
    to {
        color: var(--pn-brand-600);
    }
}
/* The card is lifted, carried and set down — translate X is a % of its own
   width, so the step is exactly one column plus the 6px gap. */
.pn-vwo__job {
    position: absolute;
    left: 0;
    top: 16px;
    width: calc((100% - 12px) / 3);
    height: 30px;
    border-radius: 5px;
    background: var(--pn-brand-500);
    box-shadow: var(--pn-sh-1);
    opacity: 0;
}
.pn-vwo__job::before,
.pn-vwo__job::after {
    content: "";
    position: absolute;
    left: 7px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
}
.pn-vwo__job::before {
    top: 9px;
    right: 7px;
}
.pn-vwo__job::after {
    top: 17px;
    right: 15px;
}
.is-lit .pn-vwo__job {
    animation: pn-k-handoff 2.7s var(--pn-ease-io) 200ms both;
}
@keyframes pn-k-handoff {
    0% {
        opacity: 0;
        transform: translate(0, -10px) scale(0.92);
    }
    8% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    26% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(0, -5px) scale(1.05);
    }
    46%,
    62% {
        transform: translate(calc(100% + 6px), 0) scale(1);
    }
    69% {
        transform: translate(calc(100% + 6px), -5px) scale(1.05);
    }
    84%,
    100% {
        opacity: 1;
        transform: translate(calc(200% + 12px), 0) scale(1);
    }
}

/* 04 — PURCHASE · relay */
.pn-vpo {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 3px 4px 0;
}
.pn-vpo__rail,
.pn-vpo__done {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 12px;
    height: 2px;
    border-radius: 2px;
    display: block;
}
.pn-vpo__rail {
    background: var(--pn-paper-sunk);
}
.pn-vpo__done {
    background: var(--pn-brand-400);
    transform: scaleX(0);
    transform-origin: left center;
}
.is-lit .pn-vpo__done {
    animation: pn-k-railgrow 1.55s var(--pn-ease-io) 250ms both;
}
@keyframes pn-k-railgrow {
    to {
        transform: scaleX(1);
    }
}
.pn-vpo__node {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
}
.pn-vpo__node i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pn-paper);
    border: 2px solid var(--pn-line-strong);
    display: block;
}
.pn-vpo__node em {
    font-style: normal;
    font-size: 9px;
    color: var(--pn-text-muted);
}
.is-lit .pn-vpo__node i {
    animation: pn-k-arrive 560ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
    animation-delay: calc(var(--d) * 620ms + 300ms);
}
.is-lit .pn-vpo__node:last-of-type i {
    animation-name: pn-k-arrive-last;
}
@keyframes pn-k-arrive {
    0% {
        border-color: var(--pn-line-strong);
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
    }
    55% {
        border-color: var(--pn-brand-500);
        box-shadow: 0 0 0 8px rgba(201, 162, 39, 0);
        transform: scale(1.2);
    }
    100% {
        border-color: var(--pn-brand-500);
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
        transform: none;
    }
}
@keyframes pn-k-arrive-last {
    0% {
        background: var(--pn-paper);
        border-color: var(--pn-line-strong);
    }
    55% {
        transform: scale(1.2);
    }
    100% {
        background: var(--pn-brand-500);
        border-color: var(--pn-brand-500);
        transform: none;
    }
}

/* 05 — INVENTORY · ripple (delay is row+col, so the wave runs diagonally) */
.pn-vinv {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
}
.pn-vinv i {
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--pn-paper-sunk);
    border: 1px solid var(--pn-line);
    display: block;
}
.pn-vinv i[data-s="booked"] {
    background: var(--pn-brand-100);
    border-color: var(--pn-brand-500);
}
.pn-vinv i[data-s="blocked"] {
    background: var(--pn-amber-100);
    border-color: var(--pn-amber-400);
}
.is-lit .pn-vinv i {
    animation: pn-k-ripple 460ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 52ms);
}
@keyframes pn-k-ripple {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-30deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.14) rotate(0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* 06 — QUALITY · snags land on the floor plan, then clear */
.pn-vqa {
    display: grid;
    gap: 7px;
}
.pn-vqa__plan {
    position: relative;
    height: 54px;
    border: 1.5px solid var(--pn-line-strong);
    border-radius: 3px;
    background: var(--pn-paper);
}
.pn-vqa__wall {
    position: absolute;
    background: var(--pn-line-strong);
    display: block;
}
.pn-vqa__wall:not(.pn-vqa__wall--v) {
    left: 0;
    right: 42%;
    top: 55%;
    height: 1.5px;
}
.pn-vqa__wall--v {
    top: 0;
    bottom: 0;
    left: 58%;
    width: 1.5px;
}
.pn-vqa__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pn-amber-400);
    border: 2px solid var(--pn-paper);
    box-shadow: var(--pn-sh-1);
    opacity: 0;
    display: block;
}
.pn-vqa__pin::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 1.5px;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(42deg);
    opacity: 0;
}
/* Two animations on one element: the drop, then the clear-to-green. */
.is-lit .pn-vqa__pin {
    animation:
        pn-k-pindrop 480ms cubic-bezier(0.3, 1.5, 0.5, 1) both,
        pn-k-pinclear 300ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 200ms + 220ms), calc(var(--d) * 200ms + 1.15s);
}
.is-lit .pn-vqa__pin::after {
    animation: pn-k-fadein 260ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 200ms + 1.25s);
}
/* The open snag keeps its amber and pulses twice instead of clearing */
.is-lit .pn-vqa__pin--open {
    animation:
        pn-k-pindrop 480ms cubic-bezier(0.3, 1.5, 0.5, 1) both,
        pn-k-pinpulse 900ms var(--pn-ease) 2 both;
    animation-delay: calc(var(--d) * 200ms + 220ms), 1.5s;
}
.is-lit .pn-vqa__pin--open::after {
    animation: none;
}
@keyframes pn-k-pindrop {
    0% {
        opacity: 0;
        transform: translateY(-18px) scale(0.5);
    }
    65% {
        opacity: 1;
        transform: translateY(3px) scale(1.12);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes pn-k-pinclear {
    to {
        background: var(--pn-ok);
    }
}
@keyframes pn-k-pinpulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(217, 130, 43, 0.55);
    }
    55% {
        box-shadow: 0 0 0 7px rgba(217, 130, 43, 0);
    }
}
.pn-vqa__meta {
    display: flex;
    gap: 5px;
}

/* 07 — FINANCE · grow */
.pn-vfin {
    display: grid;
    gap: 9px;
}
.pn-vfin__chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
}
.pn-vfin__chart i {
    flex: 1;
    height: var(--h, 60%);
    border-radius: 2px 2px 0 0;
    background: var(--pn-brand-100);
    transform: scaleY(0);
    transform-origin: bottom center;
    display: block;
}
.pn-vfin__chart i.on {
    background: var(--pn-brand-500);
}
.is-lit .pn-vfin__chart i {
    animation: pn-k-rise 560ms cubic-bezier(0.2, 1.25, 0.4, 1) both;
    animation-delay: calc(var(--d) * 100ms + 140ms);
}
@keyframes pn-k-rise {
    to {
        transform: scaleY(1);
    }
}
.pn-vfin__sum {
    font-size: 11px;
    font-weight: 700;
    color: var(--pn-text-strong);
    font-variant-numeric: tabular-nums;
}
.pn-vfin__sum em {
    font-style: normal;
    font-weight: 500;
    color: var(--pn-text-muted);
}

/* 08 — CHANNEL PARTNER · attribute. The one card that branches: three routes
   are offered, two are withdrawn, and the credit settles on the third. */
.pn-vcp {
    display: grid;
    gap: 6px;
}
.pn-vcp__src {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--pn-r-pill);
    border: 1px solid var(--pn-line);
    background: var(--pn-paper);
    font-size: 9px;
    color: var(--pn-text-muted);
    /* pn-k-fadein only declares a `to`, so the resting state must be the 0 */
    opacity: 0;
}
.pn-vcp__src i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pn-brand-500);
    flex: none;
}
.pn-vcp__src em {
    font-style: normal;
}
.pn-vcp__src b {
    font-weight: 700;
    color: var(--pn-text-strong);
    font-variant-numeric: tabular-nums;
}
.is-lit .pn-vcp__src {
    animation: pn-k-fadein 300ms var(--pn-ease) both;
}

.pn-vcp__fan {
    display: block;
    width: 100%;
    height: 20px;
}
.pn-vcp__fan path {
    fill: none;
    stroke: var(--pn-brand-100);
    stroke-width: 1.5;
    stroke-linecap: round;
    /* pathLength="1" in the markup, so one dasharray fits all three curves */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
}
.is-lit .pn-vcp__fan path {
    animation: pn-k-fan 420ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 90ms + 240ms);
}
/* The two that don't earn it recede; the one that does thickens into brand */
.is-lit .pn-vcp__fan path:not(.pn-vcp__hit) {
    animation:
        pn-k-fan 420ms var(--pn-ease) both,
        pn-k-fandim 320ms var(--pn-ease) forwards;
    animation-delay: calc(var(--d) * 90ms + 240ms), 960ms;
}
.is-lit .pn-vcp__hit {
    animation:
        pn-k-fan 420ms var(--pn-ease) both,
        pn-k-fanlit 320ms var(--pn-ease) forwards;
    animation-delay: calc(var(--d) * 90ms + 240ms), 960ms;
}
@keyframes pn-k-fan {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes pn-k-fandim {
    to {
        opacity: 0.22;
    }
}
@keyframes pn-k-fanlit {
    to {
        stroke: var(--pn-brand-500);
        stroke-width: 2.5;
    }
}

/* Three equal cells put the avatars at 1/6, 3/6 and 5/6 — the same x the
   fan paths land on, so the branches meet them exactly. */
.pn-vcp__row {
    display: flex;
}
.pn-vcp__p {
    flex: 1;
    display: grid;
    place-items: center;
}
.pn-vcp__p i {
    width: 22px;
    height: 22px;
    border: 1px solid var(--pn-line);
    border-radius: 50%;
    background: var(--pn-paper);
    color: var(--pn-text-muted);
    font-size: 8px;
    font-weight: 700;
    font-style: normal;
    display: grid;
    place-items: center;
    opacity: 0;
}
.is-lit .pn-vcp__p i {
    animation: pn-k-fadein 300ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 80ms + 100ms);
}
.is-lit .pn-vcp__p.is-match i {
    animation:
        pn-k-fadein 300ms var(--pn-ease) both,
        pn-k-credit 420ms cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
    animation-delay: calc(var(--d) * 80ms + 100ms), 1.02s;
}
@keyframes pn-k-credit {
    50% {
        transform: scale(1.18);
    }
    100% {
        transform: none;
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
        color: var(--pn-brand-600);
    }
}

.pn-vcp__fee {
    justify-self: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--pn-brand-600);
    font-variant-numeric: tabular-nums;
}
.is-lit .pn-vcp__fee {
    animation: pn-k-settle 420ms var(--pn-ease) both;
    animation-delay: 1.3s;
}
@keyframes pn-k-settle {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 09 — ATTENDANCE · scan */
.pn-vatt {
    display: flex;
    align-items: center;
    gap: 11px;
}
.pn-vatt__frame {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--pn-line);
    border-radius: 7px;
    background: var(--pn-paper);
    overflow: hidden;
}
.pn-vatt__frame::before,
.pn-vatt__frame::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--pn-brand-500);
}
.pn-vatt__frame::before {
    left: 4px;
    top: 4px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 3px 0 0 0;
}
.pn-vatt__frame::after {
    right: 4px;
    bottom: 4px;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 3px 0;
}
.pn-vatt__face {
    position: absolute;
    left: 50%;
    top: 17px;
    margin-left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pn-brand-100);
    box-shadow: 0 12px 0 -1px var(--pn-brand-100);
    display: block;
}
.pn-vatt__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--pn-brand-500);
    box-shadow: 0 0 9px 1px rgba(201, 162, 39, 0.65);
    opacity: 0;
    display: block;
}
.is-lit .pn-vatt__beam {
    animation: pn-k-scan 1.6s var(--pn-ease-io) 180ms both;
}
@keyframes pn-k-scan {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(44px);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}
.pn-vatt__ok {
    position: absolute;
    inset: 0;
    border: 2px solid var(--pn-ok);
    border-radius: 7px;
    opacity: 0;
    display: block;
}
.is-lit .pn-vatt__ok {
    animation: pn-k-okflash 520ms var(--pn-ease) 1.75s both;
}
@keyframes pn-k-okflash {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    100% {
        opacity: 0.85;
    }
}
.pn-vatt__week {
    display: flex;
    gap: 4px;
    flex: 1;
}
.pn-vatt__week i {
    flex: 1;
    height: 28px;
    border-radius: 3px;
    background: var(--pn-brand-400);
    display: grid;
    place-items: center;
    opacity: 0;
}
/* Sits on the bright gold bar — white would be 1.7:1 here */
.pn-vatt__week i em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    color: var(--pn-text-strong);
}
.pn-vatt__week i.off {
    background: var(--pn-paper-sunk);
    border: 1px solid var(--pn-line);
    opacity: 1;
}
.pn-vatt__week i.off em {
    color: var(--pn-text-muted);
}
.is-lit .pn-vatt__week i:not(.off) {
    animation: pn-k-popin 360ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 90ms + 1.85s);
}
@keyframes pn-k-popin {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 10 — TICKETING · the queue re-sorts by priority, then the SLA burns down.
   Two verbs nothing else on the page uses: rows crossing past each other,
   and a bar that shrinks rather than grows. */
.pn-vtkt {
    display: grid;
    gap: 9px;
}
.pn-vtkt__q {
    position: relative;
    /* 3 rows at a 22px pitch: 16px row + 6px gap */
    height: 60px;
}
.pn-vtkt__t {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    border: 1px solid var(--pn-line);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--pn-paper);
    /* Held here until the animation takes over, so the queue reads correctly
       even if scripting never runs. */
    transform: translateY(calc(var(--slot) * 22px));
}
.pn-vtkt__t em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.pn-vtkt__t::after {
    content: "";
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--pn-paper-sunk);
}
.pn-vtkt__t[data-p="high"] {
    /* Rides over the others as it climbs to the top */
    z-index: 2;
    border-left-color: var(--pn-risk);
    box-shadow: var(--pn-sh-1);
}
.pn-vtkt__t[data-p="high"] em {
    color: var(--pn-risk);
}
.pn-vtkt__t[data-p="med"] {
    border-left-color: var(--pn-amber-400);
}
.pn-vtkt__t[data-p="med"] em {
    color: #8a5209;
}
.pn-vtkt__t[data-p="low"] {
    border-left-color: var(--pn-line-strong);
}
.pn-vtkt__t[data-p="low"] em {
    color: var(--pn-text-muted);
}
/* One animation covers arrival and re-sort — two would fight over `transform`,
   since a `both`-filled second animation masks the first from frame zero. */
.is-lit .pn-vtkt__t {
    animation: pn-k-triage 2.1s var(--pn-ease-io) both;
    animation-delay: calc(var(--d) * 150ms + 200ms);
}
@keyframes pn-k-triage {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--slot) * 22px)) translateX(-12px);
    }
    14%,
    50% {
        opacity: 1;
        transform: translateY(calc(var(--slot) * 22px)) translateX(0);
    }
    58% {
        transform: translateY(calc(var(--slot) * 22px)) translateX(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(calc(var(--to) * 22px)) translateX(0);
    }
}
.pn-vtkt__sla {
    display: flex;
    align-items: center;
    gap: 7px;
}
.pn-vtkt__sla i {
    position: relative;
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    overflow: hidden;
    display: block;
}
.pn-vtkt__sla i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pn-brand-400);
    transform-origin: left center;
}
.is-lit .pn-vtkt__sla i::after {
    animation: pn-k-burn 1.5s var(--pn-ease-io) 1.7s both;
}
@keyframes pn-k-burn {
    from {
        transform: scaleX(1);
        background: var(--pn-brand-400);
    }
    to {
        transform: scaleX(0.32);
        background: var(--pn-amber-400);
    }
}
.pn-vtkt__sla em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-muted);
    font-variant-numeric: tabular-nums;
}

/* 11 — LEGAL · draft: the clauses are written, signed, then sealed */
.pn-vleg {
    position: relative;
    display: grid;
    place-items: center;
    height: 88px;
}
.pn-vleg__doc {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    width: 74%;
    padding: 10px 11px 24px;
    border: 1px solid var(--pn-line);
    border-radius: 4px;
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-1);
}
/* Each clause writes itself left to right rather than fading in */
.pn-vleg__doc i {
    height: 4px;
    border-radius: 2px;
    background: var(--pn-paper-sunk);
    display: block;
    transform: scaleX(0);
    transform-origin: left center;
}
.pn-vleg__doc i:nth-child(2) {
    width: 88%;
}
.pn-vleg__doc i:nth-child(3) {
    width: 96%;
}
.pn-vleg__doc i:nth-child(4) {
    width: 62%;
}
.is-lit .pn-vleg__doc i {
    animation: pn-k-vlegline 300ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 170ms + 160ms);
}
@keyframes pn-k-vlegline {
    to {
        transform: scaleX(1);
    }
}
/* The signature goes on last, drawn as a single stroke */
.pn-vleg__sign {
    position: absolute;
    left: 11px;
    bottom: 6px;
    width: 52px;
    height: 15px;
}
.pn-vleg__sign path {
    fill: none;
    stroke: var(--pn-brand-600);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
}
.is-lit .pn-vleg__sign path {
    animation: pn-k-vlegsign 620ms var(--pn-ease) 880ms both;
}
@keyframes pn-k-vlegsign {
    to {
        stroke-dashoffset: 0;
    }
}
/* Then the seal lands on it, off-square the way a stamp does */
.pn-vleg__seal {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid var(--pn-brand-600);
    border-radius: 50%;
    color: var(--pn-brand-600);
    background: var(--pn-paper);
    opacity: 0;
}
.pn-vleg__seal svg {
    width: 15px;
    height: 15px;
}
.is-lit .pn-vleg__seal {
    animation: pn-k-vlegseal 460ms cubic-bezier(0.2, 1.4, 0.4, 1) 1.5s both;
}
@keyframes pn-k-vlegseal {
    0% {
        opacity: 0;
        transform: rotate(-16deg) scale(2.1);
    }
    60% {
        opacity: 1;
        transform: rotate(-16deg) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(-16deg) scale(1);
    }
}

/* 12 — FACILITY · secure: the block comes up and its services report in */
.pn-vfac {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    height: 88px;
}
/* A commercial elevation: three windows to a floor, four floors */
.pn-vfac__bld {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 7px 6px;
    border: 1px solid var(--pn-line-strong);
    border-radius: 3px 3px 0 0;
    background: var(--pn-paper);
    align-self: end;
}
.pn-vfac__bld i {
    height: 8px;
    border-radius: 1px;
    background: var(--pn-paper-sunk);
    display: block;
}
/* Windows light as the building is brought up for the day */
.is-lit .pn-vfac__bld i {
    animation: pn-k-vfaclight 420ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 90ms + 200ms);
}
@keyframes pn-k-vfaclight {
    to {
        background: var(--pn-brand-400);
    }
}

.pn-vfac__ops {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.pn-vfac__row {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
}
.pn-vfac__row em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    width: 30px;
    flex: none;
}
/* Each service reports in: the bar runs across and settles green */
.pn-vfac__row b {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
    position: relative;
    overflow: hidden;
}
.pn-vfac__row b::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pn-ok);
    transform: scaleX(0);
    transform-origin: left center;
}
.is-lit .pn-vfac__row {
    animation: pn-k-fadein 300ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 240ms + 320ms);
}
.is-lit .pn-vfac__row b::after {
    animation: pn-k-vfacrun 520ms var(--pn-ease-io) both;
    animation-delay: calc(var(--d) * 240ms + 420ms);
}
@keyframes pn-k-vfacrun {
    to {
        transform: scaleX(1);
    }
}
/* Security is the last thing to confirm */
.pn-vfac__guard {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    padding: 3px 8px 3px 5px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-pill);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    opacity: 0;
}
.pn-vfac__guard svg {
    width: 11px;
    height: 11px;
}
.pn-vfac__guard em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.is-lit .pn-vfac__guard {
    animation: pn-k-vfacguard 520ms cubic-bezier(0.2, 1.3, 0.4, 1) 1.35s both;
}
@keyframes pn-k-vfacguard {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}


/* --- Card theme on ink -------------------------------------------------
   The twelve schematics are drawn almost entirely from design tokens, so
   rather than restating ~200 rules the card re-points those tokens at dark
   equivalents and every descendant follows automatically. Only the few
   hard-coded colours further down need explicit overrides.

   Layout, markup, timings and interaction are untouched — this block only
   changes colour.
   --------------------------------------------------------------------- */

.pn-mcard {
    /* Surfaces */
    --pn-paper: #12332f;
    --pn-paper-soft: rgba(255, 255, 255, 0.05);
    --pn-paper-sunk: rgba(255, 255, 255, 0.1);
    --pn-line: rgba(255, 255, 255, 0.13);
    --pn-line-strong: rgba(255, 255, 255, 0.26);
    /* Type */
    --pn-text-strong: #ffffff;
    --pn-text: var(--pn-on-ink-soft);
    --pn-text-muted: var(--pn-on-ink-dim);
    /* Accents — brand-500/600 fall under 3:1 on this surface, so both
       re-point at brand-400, which clears 6.8:1 */
    --pn-brand-050: rgba(227, 195, 104, 0.14);
    --pn-brand-100: rgba(227, 195, 104, 0.34);
    --pn-brand-500: #e3c368;
    --pn-brand-600: #e3c368;
    --pn-amber-100: rgba(242, 163, 60, 0.22);
    --pn-ok: #43c489;
    --pn-risk: #e2705c;

    /* A lit edge at the top-left over a deep teal-ink body, so the card
       reads as a distinct surface rather than a flat panel */
    background:
        radial-gradient(126% 92% at 0% 0%, rgba(227, 195, 104, 0.12) 0%, transparent 58%),
        linear-gradient(158deg, #163b37 0%, #0e2b29 52%, #0a2120 100%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}
.pn-mcard:hover,
.pn-mcard:focus-visible {
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(227, 195, 104, 0.45);
}
/* The ghost index needs more presence at these opacities on a dark body */
.pn-mcard__wm {
    opacity: 0.16;
}
.pn-mcard:hover .pn-mcard__wm {
    opacity: 0.3;
}
/* A faint seat so the colour icons sit on the surface instead of floating */
.pn-mcard__icon {
    box-sizing: content-box;
    padding: 4px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
}
/* The schematic panel sits inset, a shade below the card body */
.pn-mcard .pn-mini {
    background: linear-gradient(165deg, rgba(227, 195, 104, 0.13) 0%, rgba(255, 255, 255, 0.03) 76%);
}

/* The four hard-coded colours a token remap cannot reach */
.pn-mcard .pn-mini__chip--ok {
    background: rgba(67, 196, 137, 0.16);
    border-color: rgba(67, 196, 137, 0.42);
    color: #7fdcae;
}
.pn-mcard .pn-mini__chip--warn {
    background: rgba(242, 163, 60, 0.16);
    border-color: rgba(242, 163, 60, 0.44);
    color: #f5bd74;
}
.pn-mcard .pn-vtkt__t[data-p="med"] em {
    color: #f5bd74;
}

/* ==========================================================================
   14  Tour — click-to-play video
   ========================================================================== */

/* A light technical background image (the project's own about-bg artwork,
   resized 5000px -> 1800px, 514 KB -> 60 KB). The paper-soft colour sits
   under it as the fallback, so text contrast holds if the image is slow or
   blocked. */
.pn-tour {
    position: relative;
    background-color: var(--pn-paper-soft);
    background-image: url("../img/bg/tour-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--pn-section) 0;
    overflow: hidden;
}
/* --- Background pattern ------------------------------------------------
   Plain diagonal hairlines. The whole layer is masked into a ring so the
   middle stays clear behind the player.
   --------------------------------------------------------------------- */

/* Warms the neutral-grey artwork into the gold palette, and lifts the area
   right behind the player so it separates from the circuitry. */
.pn-tour::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(56% 42% at 50% 54%, rgba(201, 162, 39, 0.13) 0%, transparent 66%),
        linear-gradient(180deg, rgba(250, 243, 226, 0.5) 0%, rgba(250, 243, 226, 0.24) 100%);
}
.pn-tour > * {
    position: relative;
}


/* ==========================================================================
   15  Why Prop Nexus
   ========================================================================== */

.pn-why {
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
}
.pn-why h2,
.pn-why h3 {
    color: #fff;
}
.pn-why .pn__eyebrow {
    color: var(--pn-brand-400);
}
.pn-why .pn__lead {
    color: var(--pn-on-ink-soft);
}

.pn-why__inner {
    display: grid;
    gap: var(--pn-8);
    align-items: start;
}
.pn-why__copy {
    min-width: 0;
}
.pn-why__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-pill);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--pn-fs-xs);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--pn-4);
}
.pn-why__badge svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--pn-brand-400);
}

/* --- The spine ---------------------------------------------------------
   A rail that fills as each reason is reached. `--indent` drives both the
   list padding and the node offset, so the dots stay centred on the rail
   at every breakpoint.
   --------------------------------------------------------------------- */

/* The spine is a sibling of the reasons, not one of them — a <ul> may only
   contain <li>, so the list proper sits inside this positioning wrapper. */
.pn-why__list {
    --indent: 34px;
    position: relative;
    padding-left: var(--indent);
}
.pn-why__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-6);
}
.pn-why__spine {
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.pn-why__spine i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--pn-brand-400), var(--pn-brand-600));
    transform: scaleY(var(--fill, 0));
    transform-origin: top center;
    transition: transform 800ms var(--pn-ease);
}

.pn-why__item {
    position: relative;
    padding-bottom: var(--pn-6);
    border-bottom: 1px solid var(--pn-on-ink-line);
    transition: transform var(--pn-t-2) var(--pn-ease);
}
.pn-why__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.pn-why__item:hover {
    transform: translateX(5px);
}
/* spine centre (5px) minus the indent, minus half the node */
.pn-why__node {
    position: absolute;
    left: calc(5px - var(--indent) - 6px);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pn-ink-900);
    border: 2px solid rgba(255, 255, 255, 0.22);
    transition:
        background-color 420ms var(--pn-ease),
        border-color 420ms var(--pn-ease),
        box-shadow 420ms var(--pn-ease);
}
.pn-why__item.is-on .pn-why__node {
    background: var(--pn-brand-400);
    border-color: var(--pn-brand-400);
    box-shadow: 0 0 0 5px rgba(227, 195, 104, 0.16);
}

/* The heading wipes open rather than fading — it reads as the reason being
   written in, and it is a gesture no other section uses. */
.pn-why__item h3 {
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 0 0 var(--pn-2);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 720ms var(--pn-ease) 120ms;
}
.pn-why__item.is-on h3 {
    clip-path: inset(0 0 0 0);
}
.pn-why__item p {
    margin: 0;
    font-size: var(--pn-fs-sm);
    color: var(--pn-on-ink-soft);
    line-height: 1.7;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 560ms var(--pn-ease) 300ms,
        transform 560ms var(--pn-ease) 300ms;
}
.pn-why__item.is-on p {
    opacity: 1;
    transform: none;
}

@media (min-width: 992px) {
    .pn-why__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: var(--pn-9);
    }
    /* Pinned while the reasons scroll past. The list is always the taller
       column, so there is travel for it to hold against. */
    .pn-why__copy {
        position: sticky;
        top: calc(var(--pn-header-h) + var(--pn-7));
    }
    .pn-why__list {
        --indent: 48px;
    }
    .pn-why__items {
        gap: var(--pn-7);
    }
    .pn-why__item h3 {
        font-size: 1.1875rem;
    }
}


/* ==========================================================================
   16  Web & mobile access
   ========================================================================== */

.pn-wm {
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-wm__head {
    max-width: 62ch;
    margin-bottom: var(--pn-8);
}
.pn-wm__head h2 {
    margin: 0 0 var(--pn-4);
    max-width: 22ch;
}

/* --- Stage --------------------------------------------------------------
   A dark plinth inside a light section: the two screens read as a product
   showcase rather than another panel on the page. The whole thing runs on
   one 8s beat, so the browser view, the sync pulse and the phone screen all
   change together instead of drifting apart.
   --------------------------------------------------------------------- */

.pn-wm__stage {
    position: relative;
    padding: var(--pn-7) var(--pn-5) var(--pn-8);
    border-radius: var(--pn-r-4);
    background: linear-gradient(158deg, #10312e 0%, #0a2322 58%, #061716 100%);
    box-shadow: 0 30px 70px rgba(6, 23, 22, 0.3);
    margin-bottom: var(--pn-8);
    display: grid;
    justify-items: center;
    gap: var(--pn-5);
}
.pn-wm__glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(58% 46% at 28% 22%, rgba(227, 195, 104, 0.16) 0%, transparent 68%);
}

.pn-wm__badge {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 11px var(--pn-5);
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-3);
}
.pn-wm__badge h3 {
    font-size: var(--pn-fs-sm);
    margin: 0;
    white-space: nowrap;
}
.pn-wm__badge-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    display: grid;
    place-items: center;
}
.pn-wm__badge-icon svg {
    width: 15px;
    height: 15px;
}

/* --- Benefit cards ------------------------------------------------------ */

.pn-wm__cards {
    list-style: none;
    margin: 0 0 var(--pn-7);
    padding: 0;
    display: grid;
    gap: var(--pn-4);
}
.pn-wm__card {
    position: relative;
    overflow: hidden;
    padding: var(--pn-5);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
/* A rule that draws across the top on hover, tying the cards back to the
   teal accents running through the two screens above. */
.pn-wm__card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pn-brand-400), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--pn-t-3) var(--pn-ease);
}
.pn-wm__card:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
.pn-wm__card:hover::before {
    transform: scaleX(1);
}
.pn-wm__card p {
    margin: 0;
    font-size: var(--pn-fs-sm);
    color: var(--pn-text-muted);
    line-height: 1.65;
}
.pn-wm__card strong {
    color: var(--pn-text-strong);
    font-weight: 600;
}
.pn-wm__card-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    margin-bottom: var(--pn-4);
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        color var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
.pn-wm__card:hover .pn-wm__card-icon {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    transform: scale(1.06);
}
.pn-wm__card-icon svg {
    width: 19px;
    height: 19px;
}
.pn-wm__cta {
    justify-content: center;
}

@media (min-width: 640px) {
    .pn-wm__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .pn-wm__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   16b  The dashboard itself — web + mobile
   --------------------------------------------------------------------------
   One 14s master cycle drives every element on both devices, so nothing can
   drift apart. The loop point (100% -> 0%) deliberately sits in the middle
   of the list-view hold, where nothing is moving, which is what makes the
   wrap invisible. Phases are documented in partials/access-dash.php.
   ========================================================================== */

.pn-dash,
.pn-mob {
    --cyc: 14s;
    /* Starts the page part-way in, just before the overview appears, so a
       visitor landing here sees it build rather than sitting settled. */
    --off: -3.9s;
}
.pn-dash *,
.pn-mob * {
    animation-duration: var(--cyc);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* --- Shared view crossfade --------------------------------------------- */

.pn-dash__view {
    grid-area: 1 / 1;
    min-width: 0;
}
.pn-dash__view--a {
    animation-name: pn-k-dViewA;
    animation-timing-function: var(--pn-ease);
    animation-delay: var(--off);
}
.pn-dash__view--b {
    animation-name: pn-k-dViewB;
    animation-timing-function: var(--pn-ease);
    animation-delay: var(--off);
}
@keyframes pn-k-dViewA {
    0%,
    30% {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }
    33%,
    75% {
        opacity: 1;
        transform: none;
    }
    78%,
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}
@keyframes pn-k-dViewB {
    0%,
    30% {
        opacity: 1;
        transform: none;
    }
    33%,
    75% {
        opacity: 0;
        transform: translateY(10px);
    }
    78%,
    100% {
        opacity: 1;
        transform: none;
    }
}

/* --- Odometer ----------------------------------------------------------- */

.pn-rl {
    display: inline-flex;
    height: 1em;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.pn-rl i {
    display: block;
    width: 0.58em;
    font-style: normal;
    line-height: 1;
}
.pn-rl em {
    font-style: normal;
    line-height: 1;
}
.pn-rl i::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
    white-space: pre;
    display: block;
    line-height: 1;
    /* Reset happens between 78-100%, while the view is already faded out */
    animation-name: pn-k-dRoll;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
    animation-duration: var(--cyc);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: calc(var(--off) + var(--d, 0) * 110ms);
}
@keyframes pn-k-dRoll {
    0%,
    33% {
        transform: translateY(0);
    }
    47%,
    100% {
        transform: translateY(calc(var(--n) * -1em));
    }
}

/* --- Browser frame ------------------------------------------------------ */

.pn-dash {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    font-family: var(--pn-font-body);
}
.pn-dash__chrome {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 8px var(--pn-4);
    background: var(--pn-paper-soft);
    border-bottom: 1px solid var(--pn-line);
}
.pn-dash__body {
    display: grid;
    grid-template-columns: 104px 1fr;
    min-height: 300px;
}

/* Sidebar */
.pn-dash__side {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px 10px;
    background: var(--pn-ink-900);
}
.pn-dash__logo i {
    display: block;
    width: 26px;
    height: 8px;
    border-radius: 3px;
    background: var(--pn-brand-400);
}
.pn-dash__nav {
    position: relative;
    display: grid;
    gap: 3px;
    margin-top: 4px;
}
.pn-dash__nav span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
}
.pn-dash__nav u {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
    display: block;
}
.pn-dash__nav em {
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
}
.pn-dash__navhl {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    border-radius: 5px;
    background: var(--pn-brand-600);
    animation-name: pn-k-dNav;
    animation-timing-function: var(--pn-ease-io);
    animation-delay: var(--off);
}
@keyframes pn-k-dNav {
    0%,
    30% {
        transform: translateY(75px);
    }
    33%,
    75% {
        transform: translateY(0);
    }
    78%,
    100% {
        transform: translateY(75px);
    }
}
.pn-dash__me {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pn-on-ink-line);
}
.pn-dash__me i {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-dash__me em {
    font-style: normal;
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.7);
}

/* Main */
.pn-dash__main {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}
.pn-dash__head {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 10px var(--pn-4);
    border-bottom: 1px solid var(--pn-line);
}
.pn-dash__title {
    font-family: var(--pn-font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--pn-text-strong);
}
.pn-dash__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.pn-dash__bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--pn-paper-soft);
    color: var(--pn-text-muted);
}
.pn-dash__bell svg {
    width: 12px;
    height: 12px;
}
.pn-dash__bell b {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pn-risk);
    border: 1.5px solid var(--pn-paper);
    animation-name: pn-k-dPing;
    animation-timing-function: var(--pn-ease-io);
    animation-delay: var(--off);
}
@keyframes pn-k-dPing {
    0%,
    52% {
        box-shadow: 0 0 0 0 rgba(179, 64, 47, 0);
    }
    58% {
        box-shadow: 0 0 0 5px rgba(179, 64, 47, 0.34);
    }
    66% {
        box-shadow: 0 0 0 0 rgba(179, 64, 47, 0);
    }
    72% {
        box-shadow: 0 0 0 5px rgba(179, 64, 47, 0.34);
    }
    78%,
    100% {
        box-shadow: 0 0 0 0 rgba(179, 64, 47, 0);
    }
}
.pn-dash__btn {
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--pn-brand-600);
    color: #fff;
    font-size: 8.5px;
    font-weight: 600;
    white-space: nowrap;
}
.pn-dash__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
    color: var(--pn-brand-600);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.pn-dash__main > .pn-dash__view {
    padding: var(--pn-4);
    display: grid;
    gap: var(--pn-3);
    align-content: start;
}
.pn-dash__main {
    position: relative;
}
.pn-dash__main > .pn-dash__view {
    grid-row: 2;
    grid-column: 1;
}

/* KPI cards */
.pn-dash__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.pn-dash__kpi {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper-soft);
    animation-name: pn-k-dRise;
    animation-timing-function: cubic-bezier(0.2, 1.2, 0.4, 1);
    animation-delay: calc(var(--off) + var(--d, 0) * 90ms);
}
@keyframes pn-k-dRise {
    0%,
    31% {
        opacity: 0;
        transform: translateY(10px);
    }
    40%,
    100% {
        opacity: 1;
        transform: none;
    }
}
.pn-dash__kpi > em {
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-dash__figure {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--pn-font-head);
    font-size: 17px;
    font-weight: 700;
    color: var(--pn-text-strong);
    letter-spacing: -0.02em;
}
.pn-dash__figure s {
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    margin-left: 2px;
    color: var(--pn-text-muted);
}
.pn-dash__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    font-weight: 700;
    color: var(--pn-ok);
}
.pn-dash__delta svg {
    width: 9px;
    height: 9px;
}

/* Chart + activity */
.pn-dash__panels {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 8px;
}
.pn-dash__chart,
.pn-dash__feed {
    padding: 9px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    display: grid;
    gap: 7px;
    align-content: start;
}
.pn-dash__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.pn-dash__panel-head em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-strong);
}
.pn-dash__panel-head s {
    text-decoration: none;
    font-size: 7.5px;
    color: var(--pn-text-muted);
}
.pn-dash__plot {
    position: relative;
}
.pn-dash__bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 74px;
}
.pn-dash__bars i {
    flex: 1;
    height: var(--h, 60%);
    border-radius: 2px 2px 0 0;
    background: var(--pn-brand-100);
    transform-origin: bottom center;
    display: block;
    animation-name: pn-k-dBar;
    animation-timing-function: cubic-bezier(0.2, 1.15, 0.4, 1);
    animation-delay: calc(var(--off) + var(--d, 0) * 60ms);
}
.pn-dash__bars i.on {
    background: var(--pn-brand-500);
}
@keyframes pn-k-dBar {
    0%,
    32% {
        transform: scaleY(0);
    }
    45%,
    100% {
        transform: scaleY(1);
    }
}
.pn-dash__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 74px;
    pointer-events: none;
}
.pn-dash__line path {
    fill: none;
    stroke: var(--pn-brand-600);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 260;
    animation-name: pn-k-dLine;
    animation-timing-function: var(--pn-ease);
    animation-delay: var(--off);
}
@keyframes pn-k-dLine {
    0%,
    36% {
        stroke-dashoffset: 260;
    }
    52%,
    100% {
        stroke-dashoffset: 0;
    }
}
.pn-dash__act {
    display: flex;
    align-items: center;
    gap: 6px;
    animation-name: pn-k-dSlide;
    animation-timing-function: var(--pn-ease);
    animation-delay: calc(var(--off) + var(--d, 0) * 100ms);
}
@keyframes pn-k-dSlide {
    0%,
    34% {
        opacity: 0;
        transform: translateX(12px);
    }
    46%,
    100% {
        opacity: 1;
        transform: none;
    }
}
.pn-dash__act i {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
    color: var(--pn-brand-600);
    font-style: normal;
    font-size: 7.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-dash__act u {
    flex: 1;
    text-decoration: none;
    font-size: 8px;
    color: var(--pn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn-dash__act s {
    text-decoration: none;
    font-size: 7.5px;
    color: var(--pn-text-muted);
}

/* View B — analytics minis + table */
.pn-dash__minis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.pn-dash__mini {
    display: grid;
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper-soft);
    animation-name: pn-k-dRiseB;
    animation-timing-function: cubic-bezier(0.2, 1.2, 0.4, 1);
    animation-delay: calc(var(--off) + var(--d, 0) * 90ms);
}
@keyframes pn-k-dRiseB {
    0%,
    76% {
        opacity: 1;
        transform: none;
    }
    79% {
        opacity: 0;
        transform: translateY(10px);
    }
    88%,
    100% {
        opacity: 1;
        transform: none;
    }
}
.pn-dash__mini em {
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-dash__track {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    overflow: hidden;
}
.pn-dash__track i {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform-origin: left center;
    animation-name: pn-k-dFill;
    animation-timing-function: var(--pn-ease-io);
    animation-delay: calc(var(--off) + var(--d, 0) * 70ms);
}
@keyframes pn-k-dFill {
    0%,
    78% {
        transform: scaleX(1);
    }
    81% {
        transform: scaleX(0);
    }
    93%,
    100% {
        transform: scaleX(1);
    }
}
.pn-dash__table {
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    overflow: hidden;
}
.pn-dash__thead,
.pn-dash__tr {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 0.9fr 0.8fr;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}
.pn-dash__thead {
    background: var(--pn-paper-soft);
    border-bottom: 1px solid var(--pn-line);
}
.pn-dash__thead em {
    font-style: normal;
    font-size: 7.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-dash__tr {
    border-bottom: 1px solid var(--pn-line);
    animation-name: pn-k-dRowB;
    animation-timing-function: var(--pn-ease);
    animation-delay: calc(var(--off) + var(--d, 0) * 90ms);
}
.pn-dash__tr:last-child {
    border-bottom: 0;
}
@keyframes pn-k-dRowB {
    0%,
    76% {
        opacity: 1;
        transform: none;
    }
    79% {
        opacity: 0;
        transform: translateX(14px);
    }
    90%,
    100% {
        opacity: 1;
        transform: none;
    }
}
.pn-dash__tr em {
    font-style: normal;
    font-size: 8px;
    color: var(--pn-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn-dash__buyer {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pn-dash__buyer i {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-paper-sunk);
    color: var(--pn-text-muted);
    font-style: normal;
    font-size: 7px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-dash__pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--pn-r-pill);
    font-size: 7.5px;
    font-weight: 600;
    background: rgba(46, 158, 107, 0.14);
    color: #1e6b48;
}
.pn-dash__pill[data-s="warn"] {
    background: var(--pn-amber-100);
    color: #8a5209;
}

/* --- Phone -------------------------------------------------------------- */

.pn-mob {
    position: relative;
    z-index: 3;
    width: 176px;
    padding: 9px;
    border-radius: 26px;
    background: var(--pn-ink-700);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.55);
    font-family: var(--pn-font-body);
}
.pn-mob__notch {
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 2;
}
.pn-mob__screen {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 244px;
    border-radius: 18px;
    background: var(--pn-paper);
    overflow: hidden;
}
.pn-mob__top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 20px 10px 8px;
    border-bottom: 1px solid var(--pn-line);
}
.pn-mob__hi {
    display: grid;
    gap: 1px;
    flex: 1;
}
.pn-mob__hi em {
    font-style: normal;
    font-family: var(--pn-font-head);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--pn-text-strong);
}
.pn-mob__hi s {
    text-decoration: none;
    font-size: 7.5px;
    color: var(--pn-text-muted);
}
.pn-mob__avatar {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    font-size: 8.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-mob__view {
    padding: 9px 10px;
    display: grid;
    gap: 7px;
    align-content: start;
}
.pn-mob__screen {
    position: relative;
}
.pn-mob__view {
    grid-row: 2;
    grid-column: 1;
}
.pn-mob__kpi {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
}
.pn-mob__kpi > em {
    font-style: normal;
    font-size: 7.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-brand-600);
}
.pn-mob__bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 46px;
}
.pn-mob__bars i {
    flex: 1;
    height: var(--h, 60%);
    border-radius: 2px 2px 0 0;
    background: var(--pn-brand-100);
    transform-origin: bottom center;
    display: block;
    animation-name: pn-k-dBar;
    animation-timing-function: cubic-bezier(0.2, 1.15, 0.4, 1);
    animation-delay: calc(var(--off) + var(--d, 0) * 60ms);
}
.pn-mob__bars i.on {
    background: var(--pn-brand-500);
}
.pn-mob__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 6px;
    padding: 7px 8px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    animation-name: pn-k-dRowB;
    animation-timing-function: var(--pn-ease);
    animation-delay: calc(var(--off) + var(--d, 0) * 90ms);
}
.pn-mob__row em {
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    color: var(--pn-text-strong);
}
.pn-mob__row .pn-dash__track {
    grid-column: 1 / -1;
}
.pn-mob__tabs {
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 9px 8px 3px;
}
.pn-mob__tabs > i {
    width: 18px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    display: block;
}
.pn-mob__tabhl {
    position: absolute;
    top: 9px;
    left: 11%;
    width: 18px;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-brand-400);
    animation-name: pn-k-dTab;
    animation-timing-function: var(--pn-ease-io);
    animation-delay: var(--off);
}
@keyframes pn-k-dTab {
    0%,
    30% {
        transform: translateX(82px);
    }
    33%,
    75% {
        transform: translateX(0);
    }
    78%,
    100% {
        transform: translateX(82px);
    }
}

@media (max-width: 899px) {
    .pn-dash__body {
        grid-template-columns: 1fr;
    }
    .pn-dash__side {
        display: none;
    }
    .pn-dash__panels {
        grid-template-columns: 1fr;
    }
    .pn-dash__thead,
    .pn-dash__tr {
        grid-template-columns: 0.8fr 1fr 0.9fr;
    }
    .pn-dash__thead em:last-child,
    .pn-dash__tr em:last-child {
        display: none;
    }
}
@media (min-width: 900px) {
    .pn-wm__stage {
        display: block;
        padding: var(--pn-8) var(--pn-7) var(--pn-9);
    }
    .pn-dash {
        width: 82%;
    }
    .pn-mob {
        position: absolute;
        right: 6%;
        bottom: var(--pn-7);
        width: 190px;
    }
    .pn-wm__badge {
        position: absolute;
        left: var(--pn-7);
        bottom: var(--pn-6);
    }
}


/* ==========================================================================
   17  Mobile app solutions
   ========================================================================== */

.pn-apps {
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-apps h2,
.pn-apps h3 {
    color: #fff;
}
.pn-apps .pn__eyebrow {
    color: var(--pn-brand-400);
}
.pn-apps .pn__lead {
    color: var(--pn-on-ink-soft);
}

/* --- Segmented tabs ----------------------------------------------------
   One rail with a single indicator that slides between thirds, rather than
   three separate cards lighting up. `--tab` is set by initTabs.
   --------------------------------------------------------------------- */

/* Mobile: a rail you swipe. Stacking three tabs vertically made them read as
   a list rather than a control, and squeezing them into thirds of a phone
   would shrink the labels past legibility. So the tabs keep their full size
   and the row scrolls instead — the pattern a thumb already expects. The rail
   bleeds to the screen edges so the next tab is visibly cut off, which is what
   tells you there is more to swipe to. */
.pn-apps__tabs {
    position: relative;
    display: flex;
    gap: var(--pn-3);
    margin-bottom: var(--pn-8);
    margin-inline: calc(var(--pn-5) * -1);
    padding: 2px var(--pn-5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--pn-5);
    /* No `scroll-behavior: smooth` here: it applies to the user's own drag as
       well as programmatic scrolls, which makes the rail feel like it is
       lagging behind the finger. */
    -webkit-overflow-scrolling: touch;
    /* Keeps a swipe that runs past the end inside the rail, instead of handing
       it to the page or to the browser's back gesture. */
    overscroll-behavior-inline: contain;
    /* The rail is self-evidently swipeable; a scrollbar would only clutter it */
    scrollbar-width: none;
}
.pn-apps__tabs::-webkit-scrollbar {
    display: none;
}
.pn-apps__ind {
    display: none;
}
.pn-atab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    text-align: left;
    /* Capped so a tab never eats the screen: the text wraps inside the pill
       instead of stretching it, which keeps roughly two tabs in view and makes
       the third one's edge visible. */
    max-width: 200px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-3);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--pn-font-body);
    cursor: pointer;
    /* No transform here — a press-scale fires while the rail is being dragged
       and makes the drag feel like it is catching on the tabs. */
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease);
}
/* With variable widths on a scrolling row the sliding indicator cannot track
   the selection, so on mobile each tab carries its own selected state. */
.pn-atab[aria-selected="true"] {
    background: rgba(201, 162, 39, 0.14);
    border-color: rgba(201, 162, 39, 0.55);
}
.pn-atab__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--pn-r-2);
    border: 1px solid var(--pn-on-ink-line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--pn-on-ink-dim);
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        color var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
.pn-atab__ico svg {
    width: 17px;
    height: 17px;
}
.pn-atab__txt {
    min-width: 0;
}
.pn-atab b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pn-on-ink-soft);
    transition: color var(--pn-t-2) var(--pn-ease);
}
.pn-atab__txt > span {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: var(--pn-on-ink-dim);
    margin-top: 2px;
}
.pn-atab:hover {
    background: rgba(255, 255, 255, 0.05);
}
.pn-atab:hover .pn-atab__ico {
    color: var(--pn-brand-400);
    border-color: rgba(227, 195, 104, 0.4);
}
.pn-atab[aria-selected="true"] b {
    color: #fff;
}
.pn-atab[aria-selected="true"] .pn-atab__ico {
    background: var(--pn-brand-500);
    border-color: var(--pn-brand-500);
    color: var(--pn-text-strong);
    transform: scale(1.06);
}

/* --- Panels ------------------------------------------------------------- */

.pn-apps__panels {
    position: relative;
    display: grid;
}
.pn-apanel {
    grid-area: 1 / 1;
    display: grid;
    gap: var(--pn-8);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        visibility 0s linear var(--pn-t-2);
}
.pn-apanel.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.pn-apanel__copy {
    min-width: 0;
}
.pn-apanel__copy > p {
    color: var(--pn-on-ink-soft);
}
.pn-apanel__copy ul {
    list-style: none;
    margin: var(--pn-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--pn-3);
}
/* Points stagger in each time the tab is selected */
.pn-apanel__copy li {
    display: flex;
    gap: var(--pn-3);
    font-size: var(--pn-fs-sm);
    line-height: 1.5;
    opacity: 0;
    transform: translateX(-12px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-apanel.is-active .pn-apanel__copy li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d, 0) * 80ms + 120ms);
}
.pn-apanel__copy li svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--pn-brand-400);
}

/* Store badges sit on their own plinths and lift on hover */
.pn-apanel__stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pn-3);
    margin-top: var(--pn-6);
}
.pn-store {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-2);
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        background-color var(--pn-t-2) var(--pn-ease);
}
.pn-apanel.is-active .pn-store {
    opacity: 1;
    transform: none;
    transition-delay: 460ms;
}
.pn-apanel.is-active .pn-store:nth-child(2) {
    transition-delay: 540ms;
}
.pn-store:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 195, 104, 0.45);
    background: rgba(227, 195, 104, 0.1);
}
.pn-store img {
    height: 34px;
    width: auto;
    display: block;
}
.pn-apanel .pn-actions {
    margin-top: var(--pn-6);
}

/* --- 3D stage ----------------------------------------------------------
   The scene keeps preserve-3d, so the floating chips sit at real depths and
   separate as the scene turns — the parallax is geometric, not simulated
   with scale.
   --------------------------------------------------------------------- */

.pn-apanel__stage {
    position: relative;
    display: grid;
    justify-items: center;
    perspective: 1300px;
}
.pn-ascene {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(calc(-14deg + var(--mx, 0) * 16deg)) rotateX(calc(6deg + var(--my, 0) * -10deg));
    transition: transform 600ms var(--pn-ease);
}
.pn-ph3d {
    position: relative;
    width: 232px;
    padding: 10px;
    border-radius: 32px;
    background: linear-gradient(150deg, #1c4441 0%, #0d2a28 48%, #061716 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(227, 195, 104, 0.14);
    transform-style: preserve-3d;
    animation: pn-k-phFloat 8s var(--pn-ease-io) infinite alternate;
}
@keyframes pn-k-phFloat {
    from {
        transform: translateY(0) rotateZ(0);
    }
    to {
        transform: translateY(-16px) rotateZ(-1.2deg);
    }
}
/* A single sheen across the glass, so it reads as a device not a rectangle */
.pn-ph3d__glare {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(122deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%, transparent 70%, rgba(255, 255, 255, 0.06) 100%);
}
.pn-ph3d__notch {
    position: absolute;
    left: 50%;
    top: 17px;
    transform: translateX(-50%);
    width: 52px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 2;
}
.pn-ph3d__screen {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 396px;
    border-radius: 24px;
    background: var(--pn-paper);
    overflow: hidden;
}
.pn-scr__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 14px 8px;
}
.pn-scr__bar i {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-scr__bar u {
    width: 34px;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-scr {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 10px 14px;
}
.pn-scr__tabs {
    display: flex;
    justify-content: space-around;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--pn-line);
}
.pn-scr__tabs i {
    width: 20px;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-scr__tabs i.on {
    background: var(--pn-brand-500);
}

/* Screen contents — staggered in on tab select */
.pn-scr > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 460ms var(--pn-ease),
        transform 460ms var(--pn-ease);
}
.pn-apanel.is-active .pn-scr > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d, 0) * 70ms + 260ms);
}
.pn-scr__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pn-scr__head em {
    font-style: normal;
    font-family: var(--pn-font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--pn-text-strong);
}
.pn-scr__head i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--pn-brand-050);
    display: block;
}
.pn-scr__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}
.pn-scr__tile {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 9px 4px;
    border: 1px solid var(--pn-line);
    border-radius: 10px;
    background: var(--pn-paper-soft);
}
.pn-scr__tile i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--pn-brand-100);
    display: block;
}
.pn-scr__tile em {
    font-style: normal;
    font-size: 7.5px;
    color: var(--pn-text-muted);
}
.pn-scr__note {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
}
.pn-scr__note b {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
}
.pn-scr__note em {
    font-style: normal;
    font-size: 8px;
    color: var(--pn-brand-600);
    font-weight: 600;
}
.pn-scr__card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--pn-line);
    background: var(--pn-paper-soft);
}
.pn-scr__card em {
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-scr__card s {
    text-decoration: none;
    font-size: 8px;
    color: var(--pn-brand-600);
    font-weight: 600;
}
.pn-scr__track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    overflow: hidden;
}
.pn-scr__track i {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 760ms var(--pn-ease-io);
}
.pn-apanel.is-active .pn-scr__track i {
    transform: scaleX(1);
    transition-delay: 620ms;
}
.pn-scr__row,
.pn-scr__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--pn-line);
    border-radius: 9px;
}
.pn-scr__row em,
.pn-scr__lead em {
    flex: 1;
    font-style: normal;
    font-size: 8.5px;
    color: var(--pn-text);
}
.pn-scr__row b {
    width: 26px;
    height: 7px;
    flex: none;
    border-radius: var(--pn-r-pill);
}
.pn-scr__lead i {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-scr__lead b {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--pn-r-pill);
    font-size: 7.5px;
    font-weight: 600;
}
.pn-scr__row b[data-s="ok"],
.pn-scr__lead b[data-s="ok"] {
    background: rgba(46, 158, 107, 0.16);
    color: #1e6b48;
}
.pn-scr__row b[data-s="warn"],
.pn-scr__lead b[data-s="warn"] {
    background: var(--pn-amber-100);
    color: #8a5209;
}
.pn-scr__cta {
    padding: 9px;
    border-radius: 9px;
    background: var(--pn-brand-600);
    color: #fff;
    font-size: 8.5px;
    font-weight: 600;
    text-align: center;
}

/* Floating chips at real depths */
.pn-afloat {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--pn-r-3);
    background: rgba(6, 23, 22, 0.9);
    border: 1px solid rgba(227, 195, 104, 0.32);
    color: var(--pn-brand-400);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    animation: pn-k-afloat 6.5s var(--pn-ease-io) infinite alternate;
}
.pn-afloat svg {
    width: 20px;
    height: 20px;
}
.pn-afloat--1 {
    left: -34px;
    top: 14%;
    transform: translateZ(76px);
    animation-delay: 0s;
}
.pn-afloat--2 {
    right: -38px;
    top: 42%;
    transform: translateZ(52px);
    animation-delay: -2.2s;
}
.pn-afloat--3 {
    left: -22px;
    bottom: 12%;
    transform: translateZ(96px);
    animation-delay: -4.4s;
}
@keyframes pn-k-afloat {
    to {
        margin-top: -14px;
    }
}

.pn-apanel__tag {
    position: relative;
    z-index: 4;
    margin-top: var(--pn-6);
    max-width: 250px;
    padding: var(--pn-4) var(--pn-5);
    background: var(--pn-paper);
    border-radius: var(--pn-r-3);
    box-shadow: var(--pn-sh-3);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-apanel.is-active .pn-apanel__tag {
    opacity: 1;
    transform: none;
    transition-delay: 600ms;
}
.pn-apanel__tag span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-brand-600);
}
.pn-apanel__tag strong {
    display: block;
    margin-top: 3px;
    font-size: var(--pn-fs-sm);
    font-weight: 600;
    color: var(--pn-text-strong);
    line-height: 1.3;
}

@media (min-width: 768px) {
    /* Wide enough for all three at once, so the rail becomes the fixed
       segmented control it has always been on desktop: equal thirds, one
       container, and the sliding indicator back in charge of the selection. */
    .pn-apps__tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin-inline: 0;
        padding: 5px;
        overflow: visible;
        border: 1px solid var(--pn-on-ink-line);
        border-radius: var(--pn-r-4);
        background: rgba(255, 255, 255, 0.04);
    }
    .pn-atab {
        max-width: none;
        min-height: 0;
        padding: var(--pn-4);
        gap: var(--pn-3);
        /* Kept transparent rather than removed, so the 1px still lines the tab
           up with the indicator sitting behind it. */
        border-color: transparent;
        background: transparent;
    }
    .pn-atab[aria-selected="true"] {
        background: transparent;
        border-color: transparent;
    }
    /* The rail's compact sizes exist to fit a phone; there is room here. */
    .pn-atab__ico {
        width: 38px;
        height: 38px;
    }
    .pn-atab__ico svg {
        width: 18px;
        height: 18px;
    }
    .pn-atab b {
        font-size: var(--pn-fs-sm);
    }
    .pn-atab__txt > span {
        font-size: var(--pn-fs-xs);
        margin-top: 1px;
    }
    /* One indicator sliding between thirds, positioned from --tab */
    .pn-apps__ind {
        display: block;
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        width: calc((100% - 10px - 8px) / 3);
        border-radius: var(--pn-r-3);
        background: rgba(227, 195, 104, 0.12);
        border: 1px solid rgba(227, 195, 104, 0.42);
        transform: translateX(calc(var(--tab, 0) * (100% + 4px)));
        transition: transform var(--pn-t-3) var(--pn-ease-io);
    }
    .pn-atab:hover {
        background: transparent;
    }
}
@media (min-width: 992px) {
    .pn-apanel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: var(--pn-9);
    }
    .pn-apanel__stage {
        order: 2;
    }
    .pn-apanel__tag {
        position: absolute;
        left: 0;
        bottom: var(--pn-4);
        margin-top: 0;
    }
}
@media (max-width: 575px) {
    .pn-ph3d {
        width: 204px;
    }
    .pn-ph3d__screen {
        height: 360px;
    }
    .pn-afloat {
        width: 40px;
        height: 40px;
    }
    .pn-afloat--1 {
        left: -18px;
    }
    .pn-afloat--2 {
        right: -20px;
    }
    .pn-afloat--3 {
        left: -12px;
    }
}


/* ==========================================================================
   18  Contact
   ========================================================================== */

.pn-ct {
    position: relative;
    background: var(--pn-paper-soft);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
/* A dot field drifting exactly one tile, so the loop is seamless. Animated
   with transform rather than background-position — the latter repaints the
   whole layer every frame. */
.pn-ct__bg {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    background-image: radial-gradient(rgba(201, 162, 39, 0.2) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(72% 62% at 88% 8%, #000 0%, transparent 72%);
    mask-image: radial-gradient(72% 62% at 88% 8%, #000 0%, transparent 72%);
    animation: pn-k-ctDrift 26s linear infinite;
}
@keyframes pn-k-ctDrift {
    to {
        transform: translate(24px, 24px);
    }
}

.pn-ct__head {
    position: relative;
    max-width: 64ch;
    margin-bottom: var(--pn-8);
}
/* Block, not inline — the eyebrow above it is inline-flex, so two inline
   labels would sit side by side and read as one run-on line. */
.pn-ct__cat {
    display: block;
    font-size: var(--pn-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    margin-bottom: var(--pn-3);
}
.pn-ct__head h2 {
    margin: 0 0 var(--pn-4);
}

.pn-ct__inner {
    position: relative;
    display: grid;
    gap: var(--pn-6);
    align-items: start;
}

/* --- Reach-us cards ----------------------------------------------------
   Each card is the action itself — the email card mails, the phone card
   dials — rather than an icon sitting next to plain text.
   --------------------------------------------------------------------- */

.pn-ct__cards {
    display: grid;
    gap: var(--pn-4);
}
.pn-ct__card {
    position: relative;
    display: grid;
    gap: var(--pn-3);
    padding: var(--pn-5);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    color: inherit;
    transition:
        transform var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
a.pn-ct__card:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
    color: inherit;
}
.pn-ct__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        color var(--pn-t-2) var(--pn-ease);
}
.pn-ct__ico svg {
    width: 19px;
    height: 19px;
    transition: transform var(--pn-t-2) var(--pn-ease);
}
a.pn-ct__card:hover .pn-ct__ico {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
}
/* Each icon moves the way its action does */
a.pn-ct__card:hover .pn-ct__ico svg {
    transform: translateX(3px) translateY(-2px);
}
.pn-ct__card--addr .pn-ct__ico svg {
    transform-origin: center bottom;
}
.pn-ct__card--addr:hover .pn-ct__ico svg {
    transform: translateY(-2px);
}
.pn-ct__val {
    font-size: var(--pn-fs-sm);
    font-weight: 500;
    color: var(--pn-text-strong);
    line-height: 1.55;
}
.pn-ct__go {
    position: absolute;
    right: var(--pn-5);
    top: var(--pn-5);
    width: 16px;
    height: 16px;
    color: var(--pn-brand-500);
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
a.pn-ct__card:hover .pn-ct__go {
    opacity: 1;
    transform: none;
}
.pn-ct__card--addr .pn-ct__val {
    font-weight: 400;
    color: var(--pn-text-muted);
}
.pn-ct__map {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--pn-fs-sm);
    font-weight: 600;
    color: var(--pn-brand-600);
}

/* --- Guided form -------------------------------------------------------
   Three short moves instead of one wall of fields. `.is-stepped` is added
   by JS, so with scripting off every step stays visible and the form
   submits as a plain one.
   --------------------------------------------------------------------- */

.pn-ct__panel {
    padding: var(--pn-6);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-4);
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-3);
}

.pn-ct__rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--pn-6);
    padding: 0 2px;
}
.pn-ct__railline {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--pn-line);
    overflow: hidden;
}
.pn-ct__railline i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform: scaleX(calc(var(--step, 0) / 2));
    transform-origin: left center;
    transition: transform var(--pn-t-3) var(--pn-ease-io);
}
.pn-ct__dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--pn-line-strong);
    background: var(--pn-paper);
    color: var(--pn-text-muted);
    font-family: var(--pn-font-head);
    font-size: var(--pn-fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--pn-t-2) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        color var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease);
}
.pn-ct__dot.is-on {
    background: var(--pn-brand-500);
    border-color: var(--pn-brand-500);
    color: var(--pn-text-strong);
}
.pn-ct__dot[aria-current="true"] {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px var(--pn-brand-050);
}

.pn-ct__step {
    display: grid;
    gap: var(--pn-4);
}
.is-stepped .pn-ct__step {
    display: none;
}
.is-stepped .pn-ct__step.is-on {
    display: grid;
    animation: pn-k-ctStep 420ms var(--pn-ease) both;
}
@keyframes pn-k-ctStep {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Floating labels — the field's own text lifts out of the way on focus */
.pn-field {
    position: relative;
}
.pn-field input,
.pn-field textarea {
    width: 100%;
    font-family: var(--pn-font-body);
    font-size: var(--pn-fs-sm);
    color: var(--pn-text-strong);
    background: var(--pn-paper-soft);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    padding: 25px 16px 10px;
    transition:
        border-color var(--pn-t-1) var(--pn-ease),
        background-color var(--pn-t-1) var(--pn-ease),
        box-shadow var(--pn-t-1) var(--pn-ease);
}
.pn-field textarea {
    resize: vertical;
    min-height: 124px;
    padding-top: 28px;
}
.pn-field label {
    position: absolute;
    left: 17px;
    top: 17px;
    font-size: var(--pn-fs-sm);
    color: var(--pn-text-muted);
    pointer-events: none;
    transition:
        top var(--pn-t-1) var(--pn-ease),
        font-size var(--pn-t-1) var(--pn-ease),
        color var(--pn-t-1) var(--pn-ease);
}
.pn-field input:focus + label,
.pn-field input:not(:placeholder-shown) + label,
.pn-field textarea:focus + label,
.pn-field textarea:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pn-brand-600);
}
.pn-field input:focus,
.pn-field textarea:focus {
    background: var(--pn-paper);
    border-color: var(--pn-brand-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--pn-brand-050);
}
.pn-field--invalid input,
.pn-field--invalid textarea {
    border-color: var(--pn-risk);
}
.pn-field__err {
    display: none;
    font-size: 11px;
    color: var(--pn-risk);
    margin-top: 5px;
}
.pn-field--invalid .pn-field__err {
    display: block;
}

.pn-ct__nav {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    margin-top: var(--pn-5);
}
.pn-ct__back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--pn-line-strong);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    color: var(--pn-text-strong);
    cursor: pointer;
    transition:
        border-color var(--pn-t-1) var(--pn-ease),
        background-color var(--pn-t-1) var(--pn-ease),
        color var(--pn-t-1) var(--pn-ease);
}
.pn-ct__back svg {
    width: 17px;
    height: 17px;
    transform: rotate(180deg);
}
.pn-ct__back:hover {
    border-color: var(--pn-brand-500);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
}
.pn-ct__nav .pn-btn {
    flex: 1;
}
.pn-ct__nav [hidden] {
    display: none;
}

.pn-form__status {
    font-size: var(--pn-fs-sm);
    border-radius: var(--pn-r-2);
    padding: var(--pn-3) var(--pn-4);
    margin-bottom: var(--pn-4);
    display: none;
}
.pn-form__status.is-shown {
    display: block;
}
.pn-form__status[data-state="ok"] {
    background: rgba(46, 158, 107, 0.1);
    color: #1e6b48;
}
.pn-form__status[data-state="error"] {
    background: rgba(179, 64, 47, 0.1);
    color: var(--pn-risk);
}
.pn-form__status[data-state="loading"] {
    background: var(--pn-paper-soft);
    color: var(--pn-text-muted);
}
/* Honeypot — never shown, never announced */
.pn-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (min-width: 560px) {
    .pn-ct__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pn-ct__card--addr {
        grid-column: 1 / -1;
    }
}
@media (min-width: 992px) {
    /* Asymmetric on purpose: the form leads, the cards support it */
    .pn-ct__inner {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: var(--pn-8);
    }
    .pn-ct__cards {
        grid-template-columns: 1fr;
        position: sticky;
        top: calc(var(--pn-header-h) + var(--pn-7));
    }
    .pn-ct__card--addr {
        grid-column: auto;
    }
    .pn-ct__panel {
        padding: var(--pn-7);
    }
}

/* ==========================================================================
   19  Utilities
   ========================================================================== */

.pn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pn-scrolltop {
    position: fixed;
    right: var(--pn-5);
    bottom: var(--pn-5);
    z-index: 990;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--pn-brand-600);
    color: #fff;
    border-radius: var(--pn-r-2);
    box-shadow: var(--pn-sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--pn-t-2) var(--pn-ease),
        transform var(--pn-t-2) var(--pn-ease),
        visibility 0s linear var(--pn-t-2),
        background-color var(--pn-t-1) var(--pn-ease);
}
.pn-scrolltop.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.pn-scrolltop:hover {
    background: var(--pn-brand-700);
    color: #fff;
}
.pn-scrolltop svg {
    width: 20px;
    height: 20px;
}

/* Legacy pages already reserve 90px above .page-title for the old fixed header,
   which clears the new one too — so nothing extra is needed there. They do
   still ship their own .scroll-top button; hide it in favour of .pn-scrolltop. */
body:not(.pn-home) .scroll-top {
    display: none !important;
}

/* ==========================================================================
   The product walkthrough
   --------------------------------------------------------------------------
   Markup in partials/tour-demo.php. Nine scenes of four seconds on a 36s loop,
   following the beats of the screen recording this replaces.

   Each scene carries its slot number in `--s`, and one shared keyframe plus
   `animation-delay: calc(var(--s) * 4s)` brings it on at its turn — so the
   running order lives in the markup and there is no nine-keyframe timeline to
   keep in step. Everything inside a scene is timed the same way: its own delay
   is its scene's start plus an offset, so it plays while its scene is up.
   ========================================================================== */

.pn-dm,
.pn-dm *,
.pn-dm *::before,
.pn-dm *::after {
    box-sizing: border-box;
}

/* Presentation carried over from the video player this replaces: a held width,
   a gold hairline along the top edge, and a two-stage shadow so it reads as a
   solid object sitting on the page rather than a pasted rectangle. */
.pn-home {
    margin: 0;
}

.pn-dm {
    position: relative;
    display: block;
    max-width: 940px;
    margin-inline: auto;
    border: 1px solid rgba(14, 14, 16, 0.14);
    border-top: 2px solid var(--pn-brand-500);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    box-shadow:
        0 2px 6px rgba(14, 14, 16, 0.08),
        0 38px 76px rgba(14, 14, 16, 0.3);
    overflow: hidden;
}
.pn-dm__chrome {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 10px var(--pn-4);
    background: var(--pn-paper-soft);
    border-bottom: 1px solid var(--pn-line);
}
.pn-dm__live {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-ok);
    animation: pn-k-dmlive 2.4s var(--pn-ease-io) infinite;
}
@keyframes pn-k-dmlive {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 158, 107, 0.55);
    }
    70%,
    100% {
        box-shadow: 0 0 0 7px rgba(46, 158, 107, 0);
    }
}

.pn-dm__body {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    /* Close to the recording's own 2.1:1 window */
    aspect-ratio: 16 / 7.4;
}

/* --- Sidebar: constant across every scene, as it is in the product ------ */

.pn-dm__nav {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: var(--pn-4) 12px;
    background: var(--pn-ink-900);
}
.pn-dm__nav i {
    height: 22px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    display: block;
}
.pn-dm__navhl {
    position: absolute;
    left: 12px;
    right: 12px;
    top: var(--pn-4);
    height: 22px;
    border-radius: 5px;
    background: var(--pn-brand-500);
    /* Steps down as the walkthrough moves from the dashboard into leads and
       back again, so the sidebar agrees with what is on screen. */
    animation: pn-k-dmnav 36s var(--pn-ease-io) infinite;
}
@keyframes pn-k-dmnav {
    0%,
    30% {
        transform: translateY(0);
    }
    34%,
    75% {
        transform: translateY(30px);
    }
    79%,
    100% {
        transform: translateY(0);
    }
}

.pn-dm__main {
    min-width: 0;
    background: var(--pn-paper-soft);
}
.pn-dm__stage {
    position: relative;
    display: grid;
    height: 100%;
}

/* --- The scene timeline -------------------------------------------------- */

.pn-dm__scene {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: var(--pn-4);
    min-width: 0;
    opacity: 0;
    visibility: hidden;
}
.pn-dm.is-in .pn-dm__scene {
    animation: pn-k-dmscene 36s linear infinite;
    animation-delay: calc(var(--s) * 4s);
}
/* A four-second slice of thirty-six, with a short cross-fade at each end. */
@keyframes pn-k-dmscene {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translateY(8px);
    }
    2% {
        opacity: 1;
        transform: none;
    }
    9.2% {
        opacity: 1;
        transform: none;
    }
    11.11% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- Scene furniture ----------------------------------------------------- */

.pn-dm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pn-3);
}
.pn-dm__head strong {
    font-family: var(--pn-font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pn-text-strong);
}
.pn-dm__range,
.pn-dm__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper);
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-dm__range svg,
.pn-dm__chip svg {
    width: 12px;
    height: 12px;
}
.pn-dm__range.is-open {
    border-color: var(--pn-brand-500);
    background: var(--pn-brand-050);
    color: var(--pn-brand-700);
}
.pn-dm__chip {
    border-color: var(--pn-brand-100);
    background: var(--pn-brand-050);
    color: var(--pn-brand-700);
}
.pn-dm__chip--ghost {
    border-color: var(--pn-line);
    background: var(--pn-paper);
    color: var(--pn-text-muted);
}

.pn-dm__tabs {
    display: flex;
    gap: var(--pn-5);
    border-bottom: 1px solid var(--pn-line);
}
.pn-dm__tabs b {
    position: relative;
    padding: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-dm__tabs b.is-on {
    color: var(--pn-text-strong);
}
.pn-dm__tabs b.is-on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--pn-brand-500);
}
.pn-dm__note {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    font-size: 10px;
    line-height: 1.4;
    color: var(--pn-text-muted);
    max-width: none;
}
.pn-dm__group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}

/* --- Counter tiles ------------------------------------------------------- */

.pn-dm__tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}
.pn-dm__tiles--wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
}
.pn-dm__tiles--dim {
    opacity: 0.45;
}
.pn-dm__tile {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    min-width: 0;
    opacity: 0;
}
.pn-dm__tile em {
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    line-height: 1.2;
}
.pn-dm__tile b {
    font-family: var(--pn-font-head);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pn-text-strong);
    font-variant-numeric: tabular-nums;
}
.pn-dm__tile--key {
    border-color: var(--pn-brand-100);
    background: var(--pn-brand-050);
}
.pn-dm__tile--key b {
    color: var(--pn-brand-700);
}
/* Tiles rise as their own scene comes up: scene start + a per-tile stagger */
.pn-dm.is-in .pn-dm__scene .pn-dm__tile {
    animation: pn-k-dmpop 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 60ms + 300ms);
}
@keyframes pn-k-dmpop {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    1.6%,
    10% {
        opacity: 1;
        transform: none;
    }
    11.11%,
    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* --- Lead Conversion ----------------------------------------------------- */

.pn-dm__conv {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--pn-4);
    align-items: start;
}
.pn-dm__funnel {
    display: grid;
    gap: 8px;
}
.pn-dm__fstep {
    display: grid;
    gap: 4px;
    width: var(--w);
}
.pn-dm__fstep em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.pn-dm__fstep i {
    display: block;
    height: 20px;
    border-radius: var(--pn-r-2);
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
}
.pn-dm.is-in .pn-dm__fstep i {
    animation: pn-k-dmfun 36s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 140ms + 400ms);
}
@keyframes pn-k-dmfun {
    0% {
        transform: scaleX(0);
    }
    2.2%,
    10% {
        transform: scaleX(1);
    }
    11.11%,
    100% {
        transform: scaleX(0);
    }
}
.pn-dm__conv .pn-dm__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Leads: filters and table -------------------------------------------- */

.pn-dm__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pn-dm__field,
.pn-dm__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-dm__field svg {
    width: 11px;
    height: 11px;
}
.pn-dm__more {
    border-style: dashed;
}

.pn-dm__table {
    display: grid;
    gap: 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    padding: 8px;
    min-width: 0;
}
.pn-dm__thead,
.pn-dm__row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
}
.pn-dm__thead {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pn-line);
}
.pn-dm__thead em,
.pn-dm__row em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: var(--pn-text-strong);
    font-variant-numeric: tabular-nums;
}
.pn-dm__thead em {
    color: var(--pn-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 8px;
}
.pn-dm__thead u,
.pn-dm__row u {
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-dm__thead u {
    max-width: 54px;
    opacity: 0.7;
}
.pn-dm__row u:nth-of-type(2) {
    max-width: 80%;
}
.pn-dm__row u:nth-of-type(3) {
    max-width: 62%;
}
.pn-dm__thead b,
.pn-dm__row b {
    height: 7px;
    border-radius: var(--pn-r-pill);
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-dm__row b[data-s="ok"] {
    background: rgba(46, 158, 107, 0.32);
}
.pn-dm__row b[data-s="warn"] {
    background: var(--pn-amber-100);
}
.pn-dm__row {
    opacity: 0;
}
.pn-dm.is-in .pn-dm__row {
    animation: pn-k-dmrow 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 70ms + 400ms);
}
@keyframes pn-k-dmrow {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    1.8%,
    10% {
        opacity: 1;
        transform: none;
    }
    11.11%,
    100% {
        opacity: 0;
        transform: translateX(10px);
    }
}

/* --- Lead history -------------------------------------------------------- */

.pn-dm__trail {
    position: relative;
    display: grid;
    gap: 17px;
    padding: 17px 14px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-dm__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
}
.pn-dm__step i {
    width: 11px;
    height: 11px;
    flex: none;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--pn-brand-500);
    background: var(--pn-paper);
}
.pn-dm__step > span {
    display: grid;
    gap: 3px;
}
.pn-dm__step em {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-strong);
}
.pn-dm__step s {
    font-size: 9px;
    color: var(--pn-text-muted);
    text-decoration: none;
}
.pn-dm.is-in .pn-dm__step {
    animation: pn-k-dmrow 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 130ms + 400ms);
}

/* --- Add follow-up ------------------------------------------------------- */

.pn-dm__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 16px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-dm__input {
    display: grid;
    gap: 4px;
}
.pn-dm__input em {
    font-style: normal;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-dm__input i {
    display: block;
    height: 30px;
    border: 1px solid var(--pn-line);
    border-radius: 6px;
    background: var(--pn-paper-soft);
}
/* Each field fills in turn, so the form reads as being completed */
.pn-dm.is-in .pn-dm__input i {
    animation: pn-k-dmfill 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 320ms + 500ms);
}
@keyframes pn-k-dmfill {
    0%,
    100% {
        border-color: var(--pn-line);
        background: var(--pn-paper-soft);
    }
    1.4%,
    9% {
        border-color: var(--pn-brand-500);
        background: var(--pn-brand-050);
    }
}
.pn-dm__save {
    justify-self: start;
    padding: 8px 14px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    font-size: 10px;
    font-weight: 700;
}
.pn-dm.is-in .pn-dm__save {
    animation: pn-k-dmpress 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s);
}
@keyframes pn-k-dmpress {
    0%,
    7.6%,
    8.4%,
    100% {
        transform: scale(1);
    }
    8% {
        transform: scale(0.94);
    }
}
.pn-dm__saved {
    position: absolute;
    right: var(--pn-4);
    bottom: var(--pn-4);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    color: var(--pn-brand-700);
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
}
.pn-dm__saved svg {
    width: 13px;
    height: 13px;
}
.pn-dm.is-in .pn-dm__saved {
    animation: pn-k-dmsaved 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s);
}
@keyframes pn-k-dmsaved {
    0%,
    8.2% {
        opacity: 0;
        transform: translateY(8px);
    }
    9%,
    10.4% {
        opacity: 1;
        transform: none;
    }
    11.11%,
    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* --- The date-range menu ------------------------------------------------- */

.pn-dm__menu {
    justify-self: end;
    display: grid;
    gap: 2px;
    width: 138px;
    padding: 6px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-3);
}
.pn-dm__opt {
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-muted);
    opacity: 0;
}
.pn-dm.is-in .pn-dm__opt {
    animation: pn-k-dmrow 36s var(--pn-ease) infinite;
    animation-delay: calc(var(--s) * 4s + var(--d) * 60ms + 300ms);
}
/* The option the walkthrough settles on */
.pn-dm.is-in .pn-dm__opt.is-pick {
    animation:
        pn-k-dmrow 36s var(--pn-ease) infinite,
        pn-k-dmpick 36s var(--pn-ease) infinite;
    animation-delay:
        calc(var(--s) * 4s + var(--d) * 60ms + 300ms),
        calc(var(--s) * 4s);
}
@keyframes pn-k-dmpick {
    0%,
    7.4% {
        background: transparent;
        color: var(--pn-text-muted);
    }
    8.2%,
    11.11% {
        background: var(--pn-brand-500);
        color: var(--pn-text-strong);
    }
    100% {
        background: transparent;
        color: var(--pn-text-muted);
    }
}

/* --- The pointer --------------------------------------------------------- */

/* The layer is the window; the arrow sits in its corner. Moving the layer by a
   percentage therefore moves the arrow across the window. */
.pn-dm__ptr {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}
.pn-dm__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    /* A plain arrow, drawn rather than imported */
    background: var(--pn-text-strong);
    clip-path: polygon(0 0, 0 76%, 26% 58%, 44% 96%, 62% 88%, 44% 52%, 76% 48%);
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7));
}
.pn-dm.is-in .pn-dm__ptr {
    animation: pn-k-dmcursor 36s var(--pn-ease-io) infinite;
}
/* One waypoint per scene: whatever that scene is about, the pointer is on it —
   the tabs, a row, the save button, the date menu. */
@keyframes pn-k-dmcursor {
    0% {
        opacity: 0;
        transform: translate(22%, 46%);
    }
    3% {
        opacity: 1;
        transform: translate(22%, 46%);
    }
    /* 1 tiles */
    9% {
        transform: translate(30%, 62%);
    }
    /* 2 Current Status tab */
    14% {
        transform: translate(34%, 26%);
    }
    22% {
        transform: translate(26%, 54%);
    }
    /* 3 Lead Conversion tab */
    25% {
        transform: translate(48%, 26%);
    }
    /* 4 a row in the list */
    36% {
        transform: translate(40%, 70%);
    }
    /* 5 the history trail */
    47% {
        transform: translate(30%, 50%);
    }
    /* 6 the save button */
    58% {
        transform: translate(20%, 82%);
    }
    /* 7 back on the list */
    69% {
        transform: translate(36%, 58%);
    }
    /* 8 the date control, then the option */
    77% {
        transform: translate(88%, 12%);
    }
    82% {
        transform: translate(80%, 40%);
    }
    /* 9 the refreshed tiles */
    92% {
        transform: translate(30%, 60%);
    }
    97% {
        opacity: 1;
        transform: translate(24%, 48%);
    }
    100% {
        opacity: 0;
        transform: translate(22%, 46%);
    }
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 640px) {
    .pn-dm__body {
        grid-template-columns: 38px minmax(0, 1fr);
        aspect-ratio: 16 / 12;
    }
    .pn-dm__nav {
        padding: 10px 8px;
    }
    .pn-dm__scene {
        padding: 10px;
        gap: 7px;
    }
    .pn-dm__tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pn-dm__tile b {
        font-size: 14px;
    }
    .pn-dm__conv {
        grid-template-columns: minmax(0, 1fr);
    }
    .pn-dm__form {
        grid-template-columns: minmax(0, 1fr);
    }
    .pn-dm__thead,
    .pn-dm__row {
        grid-template-columns: 54px minmax(0, 1fr) 22px;
    }
    .pn-dm__thead u:nth-of-type(2),
    .pn-dm__thead u:nth-of-type(3),
    .pn-dm__row u:nth-of-type(2),
    .pn-dm__row u:nth-of-type(3) {
        display: none;
    }
    .pn-dm__cursor {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion: the walkthrough stops walking.
   With the animations collapsed there is no sequence to follow, so rather than
   leave nine scenes stacked on top of each other, only the first is shown and
   it is shown complete.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pn-dm__scene {
        display: none !important;
    }
    .pn-dm__scene:first-child {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .pn-dm__tile,
    .pn-dm__row,
    .pn-dm__step,
    .pn-dm__opt {
        opacity: 1 !important;
        transform: none !important;
    }
    .pn-dm__fstep i {
        transform: scaleX(1) !important;
    }
    .pn-dm__navhl,
    .pn-dm__ptr {
        display: none !important;
    }
}