@charset "UTF-8";
/**
 * Prop Nexus — inner pages.
 *
 * Covers the twelve module pages plus About and Contact. Loaded after
 * propnexus.css and uses its tokens, motion engine and reveal hooks; nothing
 * here redefines the design system.
 *
 * The Sales Management page came first and its sections set the vocabulary the
 * rest reuse. Every section gets its own visual treatment so no page repeats
 * itself:
 *
 *   pn-sh     hero          a deal card walking a kanban board
 *   pn-sov    overview      a live sales dashboard beside the copy
 *   pn-sflow  process       eight named stages on a drawn rail
 *   pn-stg    stages        alternating cards on a scroll-tracked spine
 *   pn-swin   outcomes      interactive icon cards
 *   pn-swhy   why           an enquiry funnel narrowing to closures
 *   pn-sdemo  walkthrough   the click-to-play player
 *
 * Figures inside the dashboard and funnel are illustrative product UI, not
 * business claims — the page states no statistics and none were invented.
 */

/* ==========================================================================
   Page shell
   ========================================================================== */

/* This page no longer loads main.css, so the overscroll gutter would fall back
   to the UA white. Paint it ink to match the section the page opens on. */
.pn-page {
    background: var(--pn-ink-900);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.pn-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pn-3);
    list-style: none;
    margin: 0 0 var(--pn-5);
    padding: 0;
    font-size: var(--pn-fs-xs);
    letter-spacing: 0.02em;
}
.pn-crumbs li {
    color: var(--pn-on-ink-dim);
}
.pn-crumbs li + li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 1px;
    margin-right: var(--pn-3);
    vertical-align: middle;
    background: var(--pn-on-ink-line);
}
.pn-crumbs a {
    color: var(--pn-on-ink-soft);
}
.pn-crumbs a:hover {
    color: var(--pn-brand-400);
}

/* ==========================================================================
   Hero — a deal walking the board
   ========================================================================== */

.pn-sh {
    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;
}
.pn-sh__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 162, 39, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 39, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(118% 82% at 72% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(118% 82% at 72% 30%, #000 0%, transparent 72%);
}
.pn-sh__inner {
    position: relative;
    display: grid;
    gap: var(--pn-8);
    align-items: center;
}
.pn-sh__copy {
    min-width: 0;
}
.pn-sh h1 {
    color: #fff;
    margin: 0 0 var(--pn-4);
}
.pn-sh__sub {
    font-family: var(--pn-font-head);
    font-size: var(--pn-fs-lead);
    font-weight: 600;
    color: var(--pn-brand-400);
    margin: 0 0 var(--pn-6);
}

/* --- Kanban board --- */
.pn-sh__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pn-3);
    padding: var(--pn-4);
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-3);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
}
.pn-kcol {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 9px 8px;
    border-radius: var(--pn-r-2);
    background: rgba(255, 255, 255, 0.03);
    min-height: 168px;
}
.pn-kcol__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--pn-on-ink-line);
}
.pn-kcol__head em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-on-ink-dim);
}
.pn-kcol__head b {
    width: 14px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}
.pn-kcard {
    display: grid;
    gap: 5px;
    padding: 8px 7px;
    border: 1px solid var(--pn-on-ink-line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateY(10px);
}
.pn-sh__board.is-in .pn-kcard {
    animation: pn-k-kcard 480ms var(--pn-ease) both;
    animation-delay: calc(var(--d) * 90ms + 400ms);
}
@keyframes pn-k-kcard {
    to {
        opacity: 1;
        transform: none;
    }
}
.pn-kcard i {
    height: 5px;
    width: 78%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    display: block;
}
.pn-kcard u {
    height: 4px;
    width: 52%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    display: block;
}
.pn-kcard--won {
    border-color: rgba(201, 162, 39, 0.5);
    background: rgba(201, 162, 39, 0.14);
}
.pn-kcard--won i {
    background: var(--pn-brand-400);
}

/* The travelling deal: one card crossing all four columns, then repeating.
   translateX is a share of its own width, so the step matches the column
   pitch at every breakpoint without hard-coded pixels. */
.pn-sh__deal {
    position: absolute;
    /* Sits exactly over the first card slot of a column — board padding, then
       the column's own padding, its header and the first grid gap. */
    left: calc(var(--pn-4) + 8px);
    top: calc(var(--pn-4) + 9px + 24px + 7px);
    width: calc((100% - var(--pn-4) * 2 - var(--pn-3) * 3) / 4 - 16px);
    height: 31px;
    border-radius: 6px;
    background: var(--pn-brand-500);
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.35);
    opacity: 0;
}
.pn-sh__board.is-in .pn-sh__deal {
    animation: pn-k-deal 9s var(--pn-ease-io) 1.2s infinite;
}
@keyframes pn-k-deal {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.9);
    }
    6%,
    20% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    /* One column pitch = the deal's own width (colW - 16px) + 16px + the gap */
    28%,
    44% {
        transform: translateX(calc(100% + 16px + var(--pn-3))) scale(1);
    }
    52%,
    68% {
        transform: translateX(calc(200% + 32px + var(--pn-3) * 2)) scale(1);
    }
    76%,
    92% {
        transform: translateX(calc(300% + 48px + var(--pn-3) * 3)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(300% + 48px + var(--pn-3) * 3)) scale(0.9);
    }
}

@media (min-width: 992px) {
    .pn-sh__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--pn-9);
    }
}

/* --- Hero variant: no side visual, the module's own process across the foot.
   The other eleven module pages use this; Sales Management keeps the board. */
.pn-sh--rail .pn-sh__head {
    max-width: 62ch;
    margin-bottom: var(--pn-8);
}
.pn-sh--rail h1 {
    margin-bottom: var(--pn-6);
}
/* Both selectors, because .pn-sflow__rail resets padding later in this file
   and would otherwise win the tie on equal specificity. */
.pn-sflow__rail.pn-sh__flow {
    position: relative;
    padding-top: var(--pn-6);
    border-top: 1px solid var(--pn-on-ink-line);
}
/* The rail's own connector is drawn by .pn-sflow__rail; only the offset for
   this section's top rule needs adjusting. */
@media (min-width: 900px) {
    .pn-sh__flow.pn-sflow__rail::before {
        top: calc(var(--pn-6) + 21px);
    }
}
@media (max-width: 899px) {
    .pn-sh__flow.pn-sflow__rail::before {
        top: calc(var(--pn-6) + 22px);
    }
}

/* ==========================================================================
   Overview — copy beside a live dashboard
   ========================================================================== */

.pn-sov {
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-sov__inner {
    display: grid;
    gap: var(--pn-8);
    align-items: center;
}
.pn-sov__copy {
    min-width: 0;
}
.pn-sov__copy h2 {
    margin: 0 0 var(--pn-5);
    max-width: 20ch;
}
.pn-sov__copy p {
    color: var(--pn-text-muted);
}

.pn-sov__dash {
    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-sdash__chrome {
    display: flex;
    align-items: center;
    gap: var(--pn-3);
    padding: 9px var(--pn-4);
    background: var(--pn-paper-soft);
    border-bottom: 1px solid var(--pn-line);
}
.pn-sdash__body {
    display: grid;
    gap: var(--pn-3);
    padding: var(--pn-4);
}
.pn-sdash__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.pn-sdash__kpi {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper-soft);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-sov__dash.is-in .pn-sdash__kpi {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) * 90ms + 150ms);
}
.pn-sdash__kpi em {
    font-style: normal;
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-sdash__kpi b {
    font-family: var(--pn-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-text-strong);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pn-sdash__panel {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
}
.pn-sdash__ptitle em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-strong);
}
/* A pipeline profile: tall at enquiry, short at booking */
.pn-sdash__bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 74px;
}
.pn-sdash__bars i {
    flex: 1;
    height: var(--h, 60%);
    border-radius: 3px 3px 0 0;
    background: var(--pn-brand-100);
    transform: scaleY(0);
    transform-origin: bottom center;
    display: block;
    transition: transform 620ms cubic-bezier(0.2, 1.15, 0.4, 1);
}
.pn-sdash__bars i.on {
    background: var(--pn-brand-500);
}
.pn-sov__dash.is-in .pn-sdash__bars i {
    transform: scaleY(1);
    transition-delay: calc(var(--d) * 90ms + 380ms);
}
/* Its own sparkline row beneath the bars — overlaying a rising line on a
   narrowing funnel would read as a contradiction. */
.pn-sdash__trend {
    display: block;
    width: 100%;
    height: 38px;
    margin-top: 10px;
    border-top: 1px solid var(--pn-line);
    overflow: visible;
}
.pn-sdash__trend 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;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 1.2s var(--pn-ease) 800ms;
}
.pn-sov__dash.is-in .pn-sdash__trend path {
    stroke-dashoffset: 0;
}

.pn-sdash__rows {
    display: grid;
    gap: 6px;
}
.pn-sdash__row {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(12px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-sov__dash.is-in .pn-sdash__row {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) * 110ms + 900ms);
}
.pn-sdash__row i {
    width: 20px;
    height: 20px;
    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: 8px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-sdash__row u {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-sdash__row b {
    width: 32px;
    height: 8px;
    flex: none;
    border-radius: var(--pn-r-pill);
    background: rgba(46, 158, 107, 0.28);
    display: block;
}
.pn-sdash__row b[data-s="warn"] {
    background: var(--pn-amber-100);
}

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

/* --- Overview variant: heading against its own paragraphs, no dashboard.
   The stage sequence below carries all the visual weight this page needs. */
.pn-sov--text .pn-sov__inner {
    align-items: start;
}
.pn-sov--text h2 {
    max-width: 22ch;
}
.pn-sov__body {
    min-width: 0;
    display: grid;
    gap: var(--pn-4);
    padding-left: var(--pn-5);
    border-left: 2px solid var(--pn-brand-500);
}
.pn-sov__body p {
    margin: 0;
    color: var(--pn-text-muted);
    line-height: 1.75;
}

@media (max-width: 991px) {
    .pn-sov__body {
        padding-left: var(--pn-4);
    }
}

/* ==========================================================================
   Process rail — the eight stages, named
   ========================================================================== */

.pn-sflow {
    position: relative;
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-sflow h3 {
    color: #fff;
    margin: 0 0 var(--pn-4);
}
.pn-sflow .pn__lead {
    color: var(--pn-on-ink-soft);
}
.pn-sflow__head {
    max-width: 58ch;
    margin-bottom: var(--pn-8);
}
.pn-sflow__rail {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-4);
    counter-reset: none;
}
/* The connecting line lives on the list so it can span all eight nodes.
   It starts and ends at the centre of the first and last markers (22px in,
   half of the 44px circle) rather than at the list edge, so no stub shows. */
.pn-sflow__rail::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--pn-brand-500), rgba(201, 162, 39, 0.12));
}
.pn-sflow__node {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pn-4);
    padding-left: 0;
}
.pn-sflow__node b {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-ink-900);
    border: 1px solid rgba(201, 162, 39, 0.42);
    color: var(--pn-brand-400);
    font-family: var(--pn-font-head);
    font-size: var(--pn-fs-xs);
    font-weight: 700;
    display: grid;
    place-items: center;
    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-sflow__node em {
    font-style: normal;
    font-size: var(--pn-fs-sm);
    font-weight: 600;
    color: #fff;
}
.pn-sflow__node:hover b {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    transform: scale(1.08);
}

@media (min-width: 900px) {
    /* Horizontal on wide screens: the nodes across one drawn line. --n is the
       node count, set on the list — modules run five or six steps, not eight. */
    .pn-sflow__rail {
        grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr));
        gap: var(--pn-3);
    }
    /* Horizontally the markers centre inside their column, so the line spans
       from the first column's centre to the last: half a column each side. */
    .pn-sflow__rail::before {
        left: calc(100% / var(--n, 8) / 2);
        right: calc(100% / var(--n, 8) / 2);
        top: 21px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--pn-brand-500), rgba(201, 162, 39, 0.12));
    }
    .pn-sflow__node {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--pn-3);
    }
    .pn-sflow__node em {
        font-size: var(--pn-fs-xs);
    }
}

/* ==========================================================================
   The eight stages — alternating cards on a scroll-tracked spine
   ========================================================================== */

.pn-stg {
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
}
/* The other module pages run overview-then-stages with no band between, so the
   stages sit on the soft surface to keep the two sections apart. */
.pn-stg--soft {
    background: var(--pn-paper-soft);
}
.pn-stg--soft .pn-stg__item {
    background: var(--pn-paper);
}
.pn-stg--soft .pn-stg__item::before {
    background: var(--pn-paper-soft);
}
.pn-stg--soft .pn-stg__item.is-on::before {
    background: var(--pn-brand-500);
}
.pn-stg__list {
    --indent: 34px;
    position: relative;
    padding-left: var(--indent);
}
.pn-stg__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-7);
}
.pn-stg__spine {
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--pn-line);
    overflow: hidden;
}
/* --fill is set by initSpine in propnexus.js as each stage is reached */
.pn-stg__spine i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleY(var(--fill, 0));
    transform-origin: top center;
    transition: transform 800ms var(--pn-ease);
}

.pn-stg__item {
    position: relative;
    display: grid;
    gap: var(--pn-5);
    padding: var(--pn-6);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-4);
    background: var(--pn-paper);
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--pn-t-4) var(--pn-ease),
        transform var(--pn-t-4) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
.pn-stg__item.is-on {
    opacity: 1;
    transform: none;
}
.pn-stg__item:hover {
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
/* Node centred on the spine. `left` is measured from the item's padding edge,
   so it has to walk back over the item border (1px) and the list indent, then
   half the dot (6px), to land on the spine centre at 5px. */
.pn-stg__item::before {
    content: "";
    position: absolute;
    left: calc(5px - 6px - 1px - var(--indent));
    top: var(--pn-7);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pn-paper);
    border: 2px solid var(--pn-line-strong);
    transition:
        background-color 420ms var(--pn-ease),
        border-color 420ms var(--pn-ease),
        box-shadow 420ms var(--pn-ease);
}
.pn-stg__item.is-on::before {
    background: var(--pn-brand-500);
    border-color: var(--pn-brand-500);
    box-shadow: 0 0 0 5px var(--pn-brand-050);
}
.pn-stg__no {
    font-family: var(--pn-font-head);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pn-brand-500);
    opacity: 0.22;
    transition: opacity var(--pn-t-2) var(--pn-ease);
}
.pn-stg__item:hover .pn-stg__no {
    opacity: 0.4;
}
.pn-stg__body {
    min-width: 0;
}
.pn-stg__body h3,
.pn-stg__body h4 {
    font-size: 1.1875rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--pn-3);
}
.pn-stg__body > p {
    margin: 0 0 var(--pn-5);
    color: var(--pn-text-muted);
    line-height: 1.7;
}
.pn-stg__pts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-3);
}
.pn-stg__pts li {
    display: flex;
    align-items: flex-start;
    gap: var(--pn-3);
    font-size: var(--pn-fs-sm);
    line-height: 1.5;
    color: var(--pn-text);
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-stg__item.is-on .pn-stg__pts li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) * 90ms + 260ms);
}
.pn-stg__tick {
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
}
.pn-stg__tick svg {
    width: 12px;
    height: 12px;
}
/* Each tick draws itself rather than simply appearing */
.pn-stg__tick svg polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 420ms var(--pn-ease);
}
.pn-stg__item.is-on .pn-stg__tick svg polyline {
    stroke-dashoffset: 0;
    transition-delay: calc(var(--d) * 90ms + 400ms);
}

/* The schematic frame wipes open rather than fading, so the visual arrives
   with some weight instead of just materialising. */
.pn-stg__viz {
    min-width: 0;
    clip-path: inset(0 100% 0 0 round var(--pn-r-3));
    transition: clip-path 900ms var(--pn-ease-io) 200ms;
}
.pn-stg__item.is-on .pn-stg__viz {
    clip-path: inset(0 0 0 0 round var(--pn-r-3));
}

@media (min-width: 768px) {
    .pn-stg__list {
        --indent: 48px;
    }
    .pn-stg__item {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--pn-5);
    }
    .pn-stg__no {
        grid-row: 1 / span 2;
    }
}
@media (min-width: 1100px) {
    .pn-stg__item {
        grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.92fr);
        align-items: center;
        gap: var(--pn-7);
        padding: var(--pn-7);
    }
    .pn-stg__no {
        grid-row: auto;
        font-size: 3rem;
    }
    /* Alternate which side the schematic sits on. This has to be done by
       naming columns, not with `order` — reordering makes the schematic the
       first grid item, which auto-places it into the 72px number column and
       crushes it. Placing it explicitly leaves the number where it belongs. */
    .pn-stg__item:nth-child(even) {
        grid-template-columns: 72px minmax(0, 0.92fr) minmax(0, 1fr);
    }
    .pn-stg__item:nth-child(even) .pn-stg__no {
        grid-column: 1;
        grid-row: 1;
    }
    .pn-stg__item:nth-child(even) .pn-stg__viz {
        grid-column: 2;
        grid-row: 1;
    }
    .pn-stg__item:nth-child(even) .pn-stg__body {
        grid-column: 3;
        grid-row: 1;
    }
}

/* ==========================================================================
   Outcomes
   ========================================================================== */

.pn-swin {
    background: var(--pn-paper-soft);
    padding: var(--pn-section) 0;
}
.pn-swin__head {
    max-width: 68ch;
    margin-bottom: var(--pn-8);
}
.pn-swin__head h2 {
    margin: 0 0 var(--pn-4);
}
.pn-swin__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-4);
}
.pn-swin__card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--pn-4);
    padding: var(--pn-5);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper);
    font-size: var(--pn-fs-sm);
    font-weight: 500;
    color: var(--pn-text-strong);
    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-swin__card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pn-brand-500);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform var(--pn-t-3) var(--pn-ease);
}
.pn-swin__card:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
.pn-swin__card:hover::before {
    transform: scaleY(1);
}
.pn-swin__ico {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
    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-swin__ico svg {
    width: 19px;
    height: 19px;
}
.pn-swin__card:hover .pn-swin__ico {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    transform: scale(1.06);
}

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

/* ==========================================================================
   Why it works — enquiry volume narrowing to closures
   ========================================================================== */

.pn-swhy {
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-swhy h2 {
    color: #fff;
    margin: 0 0 var(--pn-4);
}
.pn-swhy .pn__lead {
    color: var(--pn-on-ink-soft);
}
.pn-swhy__inner {
    display: grid;
    gap: var(--pn-8);
    align-items: center;
}
.pn-swhy__copy {
    min-width: 0;
}
.pn-swhy__funnel {
    display: grid;
    gap: 10px;
    justify-items: center;
}
.pn-funnel__step {
    display: block;
    width: var(--w, 100%);
    height: 34px;
    border-radius: var(--pn-r-2);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pn-on-ink-line);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-swhy__funnel.is-in .pn-funnel__step {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) * 110ms + 150ms);
}
.pn-funnel__step i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-400));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 760ms var(--pn-ease-io);
}
.pn-swhy__funnel.is-in .pn-funnel__step i {
    transform: scaleX(1);
    transition-delay: calc(var(--d) * 110ms + 380ms);
}

@media (min-width: 992px) {
    .pn-swhy__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
        gap: var(--pn-9);
    }
}

/* ==========================================================================
   Walkthrough
   ========================================================================== */

.pn-sdemo {
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
}
.pn-sdemo__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--pn-7);
}

/* The closing sections on the other module pages: a heading and its paragraphs
   above the walkthrough, centred so the player reads as the conclusion. */
.pn-sdemo__head {
    max-width: 74ch;
    margin: 0 auto var(--pn-8);
    text-align: center;
}
.pn-sdemo__head h2 {
    margin: 0 0 var(--pn-4);
}
.pn-sdemo__head p {
    margin: 0 auto var(--pn-4);
    color: var(--pn-text-muted);
    line-height: 1.75;
}
.pn-sdemo__head p:last-child {
    margin-bottom: 0;
}

/* A closing section that is text only — no funnel beside it */
.pn-swhy--text .pn-swhy__inner {
    display: block;
}
.pn-swhy--text .pn-swhy__copy {
    max-width: 74ch;
}
.pn-swhy--text .pn__lead + .pn__lead {
    margin-top: var(--pn-4);
}

/* ==========================================================================
   Stage schematics — the eight animated visuals
   --------------------------------------------------------------------------
   Markup lives in partials/sales-visuals.php. Each stage has its own motion
   verb so scrolling never feels like the same loop eight times over:
   converge · route · log · pin · advance · lock · handover · compose.

   Two rules hold throughout:

   1. The stage box is a FIXED 230px tall at every breakpoint. That is what
      lets vertical travel be written in plain pixels while widths stay fluid.
   2. Every loop wraps inside a phase where the element is at rest or hidden,
      so 100% -> 0% is invisible and nothing jumps at the seam.

   Motion starts when the stage is revealed (`.is-on`) and repeats from there
   with no hover or pointer movement required.
   ========================================================================== */

/* The schematics are laid out to the pixel — lane pitch, rail endpoints, slot
   centres — so they need padding and borders counted inside the box. There is
   no global border-box reset on this site (Bootstrap used to supply one), so
   it is declared here rather than assumed. */
.pn-vz,
.pn-vz *,
.pn-vz *::before,
.pn-vz *::after {
    box-sizing: border-box;
}

.pn-vz {
    position: relative;
    display: block;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-3);
    background: var(--pn-paper-soft);
    box-shadow: var(--pn-sh-2);
    overflow: hidden;
}
.pn-vz__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px var(--pn-4);
    background: var(--pn-paper);
    border-bottom: 1px solid var(--pn-line);
}
.pn-vz__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pn-line-strong);
    flex: none;
}
.pn-vz__bar i:first-child {
    background: var(--pn-brand-500);
}
.pn-vz__bar em {
    margin-left: 6px;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-vz__stage {
    position: relative;
    display: block;
    height: 230px;
    padding: var(--pn-4);
}
/* Every schematic is a grid or a positioning context inside that box, and all
   of them hold content that must be allowed to shrink rather than push out. */
.pn-cap,
.pn-asg,
.pn-fu,
.pn-sv,
.pn-pl,
.pn-bk,
.pn-ho,
.pn-rp {
    min-width: 0;
}
.pn-vz__edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pn-brand-500), transparent 72%);
}

/* --- 1 · CONVERGE — enquiries land in one inbox, tagged by source -------- */

.pn-cap {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--pn-4);
}
.pn-cap__srcs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pn-cap__srcs b {
    padding: 4px 8px;
    border-radius: var(--pn-r-pill);
    border: 1px solid var(--pn-line);
    background: var(--pn-paper);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--pn-text-muted);
}
.is-on .pn-cap__srcs b {
    animation: pn-k-capsrc 8s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.3s);
}
@keyframes pn-k-capsrc {
    0%,
    100% {
        border-color: var(--pn-line);
        background: var(--pn-paper);
        color: var(--pn-text-muted);
        transform: none;
    }
    5% {
        border-color: var(--pn-brand-500);
        background: var(--pn-brand-050);
        color: var(--pn-brand-700);
        transform: translateY(-3px);
    }
    16% {
        border-color: var(--pn-line);
        background: var(--pn-paper);
        color: var(--pn-text-muted);
        transform: none;
    }
}

.pn-cap__list {
    display: grid;
    gap: 7px;
    align-content: start;
}
.pn-cap__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    opacity: 0;
}
.pn-cap__row i {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
}
.pn-cap__row u {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-cap__row em {
    padding: 3px 7px;
    border-radius: var(--pn-r-pill);
    background: var(--pn-brand-050);
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pn-brand-700);
}
.is-on .pn-cap__row {
    animation: pn-k-caprow 8s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.3s + 0.2s);
}
@keyframes pn-k-caprow {
    0% {
        opacity: 0;
        transform: translateX(-16px);
    }
    7%,
    88% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(-16px);
    }
}
/* The fourth arrival is a repeat, so it is caught and pushed aside */
.pn-cap__row--dup {
    border-style: dashed;
}
.pn-cap__row--dup i {
    background: var(--pn-paper-sunk);
    border-color: var(--pn-line-strong);
}
.pn-cap__row--dup u {
    opacity: 0.5;
}
.pn-cap__row--dup em {
    background: var(--pn-paper-sunk);
    color: var(--pn-text-muted);
    text-decoration: line-through;
}
.is-on .pn-cap__row--dup {
    animation-name: pn-k-capdup;
}
@keyframes pn-k-capdup {
    0% {
        opacity: 0;
        transform: translateX(-16px);
    }
    7%,
    24% {
        opacity: 1;
        transform: none;
    }
    34%,
    88% {
        opacity: 0.4;
        transform: translateX(12px) scale(0.97);
    }
    100% {
        opacity: 0;
        transform: translateX(-16px);
    }
}

/* --- 2 · ROUTE — a wire lights up to the owner who takes the lead -------- */

.pn-asg__in {
    position: absolute;
    left: var(--pn-4);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    z-index: 1;
}
.pn-asg__in i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-500);
}
.pn-asg__in em {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-strong);
    white-space: nowrap;
}
.is-on .pn-asg__in i {
    animation: pn-k-asgpulse 3s var(--pn-ease) infinite;
}
@keyframes pn-k-asgpulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5);
    }
    70%,
    100% {
        box-shadow: 0 0 0 9px rgba(201, 162, 39, 0);
    }
}

.pn-asg__wires {
    position: absolute;
    left: var(--pn-4);
    top: var(--pn-4);
    width: calc(100% - var(--pn-4) * 2);
    height: calc(100% - var(--pn-4) * 2);
}
.pn-asg__rail,
.pn-asg__flow {
    fill: none;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.pn-asg__rail {
    stroke: var(--pn-line-strong);
}
/* A short dash chased along the wire — 26 units of ink in a 400-unit gap,
   walked from just before the start to just past the end. */
.pn-asg__flow {
    stroke: var(--pn-brand-500);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 26 400;
    stroke-dashoffset: 26;
    opacity: 0;
}
.is-on .pn-asg__flow {
    animation: pn-k-asgflow 9s linear infinite;
    animation-delay: calc(var(--d) * 3s);
}
@keyframes pn-k-asgflow {
    0% {
        stroke-dashoffset: 26;
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    20% {
        stroke-dashoffset: -240;
        opacity: 1;
    }
    23%,
    100% {
        stroke-dashoffset: -240;
        opacity: 0;
    }
}

/* space-around puts the three avatars at 1/6, 1/2 and 5/6 of the height —
   which is exactly where the wire endpoints were authored. */
.pn-asg__reps {
    position: absolute;
    right: var(--pn-4);
    top: var(--pn-4);
    bottom: var(--pn-4);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
}
.pn-asg__rep {
    display: flex;
}
.pn-asg__rep i {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--pn-line);
    background: var(--pn-paper);
    color: var(--pn-text-muted);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.is-on .pn-asg__rep i {
    animation: pn-k-asgrep 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 3s + 0.7s);
}
@keyframes pn-k-asgrep {
    0%,
    100% {
        background: var(--pn-paper);
        border-color: var(--pn-line);
        color: var(--pn-text-muted);
        transform: none;
    }
    8% {
        background: var(--pn-brand-500);
        border-color: var(--pn-brand-500);
        color: var(--pn-text-strong);
        transform: scale(1.12);
    }
    28% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-100);
        color: var(--pn-brand-700);
        transform: none;
    }
}
/* --- 3 · LOG — interactions stack on a timeline, one falls due ----------- */

/* Runs between the first and last bullet centres: three 26px rows on a 40px
   pitch starting at the 16px padding, so 29px down to 121px up. */
.pn-fu__rail {
    position: absolute;
    left: calc(var(--pn-4) + 12px);
    top: 29px;
    bottom: 121px;
    width: 2px;
    background: var(--pn-line);
    overflow: hidden;
}
.pn-fu__rail i {
    display: block;
    height: 100%;
    background: var(--pn-brand-500);
    transform: scaleY(0);
    transform-origin: top center;
}
.is-on .pn-fu__rail i {
    animation: pn-k-furail 8s var(--pn-ease) infinite;
}
@keyframes pn-k-furail {
    0% {
        transform: scaleY(0);
    }
    36%,
    88% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}
.pn-fu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    opacity: 0;
}
.pn-fu__item i {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--pn-brand-500);
    background: var(--pn-paper);
}
.pn-fu__item em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--pn-text-strong);
    white-space: nowrap;
}
.pn-fu__item u {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.is-on .pn-fu__item {
    animation: pn-k-fuitem 8s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.55s + 0.3s);
}
@keyframes pn-k-fuitem {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    9%,
    88% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}
.pn-fu__due {
    position: absolute;
    left: var(--pn-4);
    right: var(--pn-4);
    bottom: var(--pn-4);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    opacity: 0;
}
.pn-fu__due i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-600);
}
.pn-fu__due em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-brand-700);
}
.is-on .pn-fu__due {
    animation: pn-k-fudue 8s var(--pn-ease) infinite;
}
@keyframes pn-k-fudue {
    0%,
    26% {
        opacity: 0;
        transform: translateY(10px);
    }
    34% {
        opacity: 1;
        transform: none;
    }
    42% {
        transform: translateY(-4px);
    }
    50%,
    88% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* --- 4 · PIN — a date is picked, a pin drops, the outcome flips ---------- */

.pn-sv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pn-4);
}
.pn-sv__cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    /* Three rows of squares are shorter than the plan beside them, so centre
       them rather than leaving the column bottom-heavy with empty space. */
    align-content: center;
}
.pn-sv__cal i {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    opacity: 0;
}
.is-on .pn-sv__cal i {
    animation: pn-k-svcell 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 55ms);
}
@keyframes pn-k-svcell {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    11%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
    }
}
.is-on .pn-sv__pick {
    animation-name: pn-k-svpick;
}
@keyframes pn-k-svpick {
    0% {
        opacity: 0;
        transform: scale(0.7);
        background: var(--pn-paper-sunk);
    }
    11% {
        opacity: 1;
        transform: none;
        background: var(--pn-paper-sunk);
    }
    21% {
        background: var(--pn-brand-500);
        transform: scale(1.2);
    }
    30%,
    90% {
        background: var(--pn-brand-500);
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
        background: var(--pn-paper-sunk);
    }
}

.pn-sv__side {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    min-width: 0;
}
.pn-sv__plan {
    position: relative;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-sv__plan u {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border: 1px solid var(--pn-line);
    border-radius: 2px;
    background: var(--pn-paper-soft);
    display: block;
}
.pn-sv__pin {
    position: absolute;
    left: 46%;
    top: 46%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50% 50% 50% 0;
    background: var(--pn-brand-600);
    transform: translateY(-20px) rotate(-45deg) scale(0);
    opacity: 0;
}
.is-on .pn-sv__pin {
    animation: pn-k-svpin 9s var(--pn-ease) infinite;
}
@keyframes pn-k-svpin {
    0%,
    28% {
        opacity: 0;
        transform: translateY(-20px) rotate(-45deg) scale(0);
    }
    36% {
        opacity: 1;
        transform: translateY(0) rotate(-45deg) scale(1.3);
    }
    43%,
    90% {
        opacity: 1;
        transform: translateY(0) rotate(-45deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) rotate(-45deg) scale(0);
    }
}
/* Three outcome chips share one slot and hand over to each other */
.pn-sv__reel {
    position: relative;
    display: block;
    height: 26px;
}
.pn-sv__reel em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: var(--pn-r-pill);
    background: var(--pn-brand-050);
    color: var(--pn-brand-700);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
}
.is-on .pn-sv__reel em {
    animation: pn-k-svreel 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 2.1s + 1.5s);
}
@keyframes pn-k-svreel {
    0% {
        opacity: 0;
        transform: translateY(9px);
    }
    5%,
    20% {
        opacity: 1;
        transform: none;
    }
    26%,
    100% {
        opacity: 0;
        transform: translateY(-9px);
    }
}

/* --- 5 · ADVANCE — a deal steps down through the stage lanes ------------- */

.pn-pl {
    display: grid;
    grid-template-rows: repeat(4, 34px);
    gap: 12px;
    align-content: center;
}
.pn-pl__lane {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-pl__lane em {
    width: 68px;
    flex: none;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.pn-pl__lane i {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
    overflow: hidden;
}
.pn-pl__lane i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform: scaleX(0);
    transform-origin: left center;
}
.is-on .pn-pl__lane i::after {
    animation: pn-k-pllane 10s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 1.9s + 0.4s);
}
@keyframes pn-k-pllane {
    0% {
        transform: scaleX(0);
    }
    13%,
    92% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
/* Lane pitch is 34px of lane plus a 12px gap; the deal drops one pitch per
   stage. Fixed pixels are safe because .pn-vz__stage is a fixed height. */
.pn-pl__deal {
    position: absolute;
    left: calc(var(--pn-4) + 89px);
    top: 39px;
    width: 26px;
    height: 14px;
    border-radius: 4px;
    background: var(--pn-brand-600);
    /* A paper ring keeps the chip legible where it overlaps the lane's own
       gold fill, which runs out from underneath it. */
    box-shadow:
        0 0 0 3px var(--pn-paper),
        0 4px 12px rgba(201, 162, 39, 0.38);
    opacity: 0;
}
.is-on .pn-pl__deal {
    animation: pn-k-pldeal 10s var(--pn-ease-io) infinite;
}
@keyframes pn-k-pldeal {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }
    6%,
    16% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    25%,
    35% {
        transform: translateY(46px) scale(1);
    }
    44%,
    54% {
        transform: translateY(92px) scale(1);
    }
    63%,
    92% {
        transform: translateY(138px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(138px) scale(0.8);
    }
}

/* --- 6 · LOCK — a unit turns over and the confirmation slip rises -------- */

.pn-bk {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}
.pn-bk__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
}
.pn-bk__grid i {
    border: 1px solid var(--pn-line);
    border-radius: 4px;
    background: var(--pn-paper);
    opacity: 0;
}
.pn-bk__grid i[data-s="booked"] {
    background: var(--pn-brand-050);
    border-color: var(--pn-brand-100);
}
.pn-bk__grid i[data-s="held"] {
    background: var(--pn-paper-sunk);
    border-color: var(--pn-line-strong);
}
.is-on .pn-bk__grid i {
    animation: pn-k-bktile 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 50ms);
}
@keyframes pn-k-bktile {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }
    9%,
    92% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.72);
    }
}
/* One unit walks the whole status path: available, held, then booked */
.is-on .pn-bk__unit {
    animation-name: pn-k-bkunit;
}
@keyframes pn-k-bkunit {
    0% {
        opacity: 0;
        transform: scale(0.72);
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
    9% {
        opacity: 1;
        transform: none;
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
    27% {
        background: var(--pn-paper-sunk);
        border-color: var(--pn-line-strong);
        transform: scale(1.08);
    }
    43% {
        background: var(--pn-brand-500);
        border-color: var(--pn-brand-600);
        transform: scale(1.14);
    }
    53%,
    92% {
        background: var(--pn-brand-500);
        border-color: var(--pn-brand-600);
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.72);
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
}
.pn-bk__slip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    opacity: 0;
}
.pn-bk__slip i {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-brand-600);
}
.pn-bk__slip em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-brand-700);
}
.is-on .pn-bk__slip {
    animation: pn-k-bkslip 9s var(--pn-ease) infinite;
}
@keyframes pn-k-bkslip {
    0%,
    43% {
        opacity: 0;
        transform: translateY(14px);
    }
    53%,
    92% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* --- 7 · HANDOVER — the file crosses from sales to post-sales ------------ */

.pn-ho {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: stretch;
}
.pn-ho__col {
    display: grid;
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    min-width: 0;
}
.pn-ho__col > em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-ho__col > i {
    border: 1px solid var(--pn-line-strong);
    border-radius: 4px;
    background: var(--pn-paper-soft);
}
.pn-ho__gap {
    position: relative;
}
.pn-ho__gap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--pn-line);
}
.is-on .pn-ho__col > i {
    animation: pn-k-hofrom 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.75s);
}
@keyframes pn-k-hofrom {
    0%,
    10% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-100);
    }
    24%,
    92% {
        background: var(--pn-paper-soft);
        border-color: var(--pn-line-strong);
    }
    100% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-100);
    }
}
.is-on .pn-ho__col--to > i {
    animation-name: pn-k-hoto;
}
@keyframes pn-k-hoto {
    0%,
    32% {
        background: var(--pn-paper-soft);
        border-color: var(--pn-line-strong);
    }
    44%,
    92% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
    }
    100% {
        background: var(--pn-paper-soft);
        border-color: var(--pn-line-strong);
    }
}
/* The doc is a chip riding a full-width track. Translating the TRACK means
   the distance is a percentage of the frame, so it scales with the layout;
   translating the chip would only ever move it by its own 26px. */
.pn-ho__doc {
    position: absolute;
    left: var(--pn-4);
    right: var(--pn-4);
    /* Three slot centres, measured at 53.5px apart below the column's label */
    top: calc(65px + var(--d) * 53.5px);
    height: 16px;
    opacity: 0;
    pointer-events: none;
}
.pn-ho__doc i {
    position: absolute;
    left: 26%;
    width: 26px;
    height: 16px;
    border-radius: 3px;
    background: var(--pn-brand-600);
    box-shadow: 0 4px 10px rgba(201, 162, 39, 0.35);
}
.is-on .pn-ho__doc {
    animation: pn-k-hodoc 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.75s + 0.9s);
}
@keyframes pn-k-hodoc {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    7% {
        opacity: 1;
        transform: translateX(0);
    }
    27% {
        opacity: 1;
        transform: translateX(46%);
    }
    34%,
    100% {
        opacity: 0;
        transform: translateX(46%);
    }
}

/* --- 8 · COMPOSE — the report builds itself, bars then ring -------------- */

.pn-rp {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--pn-4);
    align-items: center;
}
.pn-rp__bars {
    display: grid;
    gap: 13px;
}
.pn-rp__bars > span {
    display: flex;
    align-items: center;
    gap: 9px;
}
.pn-rp__bars em {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-paper-sunk);
    color: var(--pn-text-muted);
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-rp__bars i {
    position: relative;
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--pn-paper-sunk);
    display: block;
    overflow: hidden;
}
.pn-rp__bars i::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
}
.is-on .pn-rp__bars i::after {
    animation: pn-k-rpbar 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.18s + 0.2s);
}
@keyframes pn-k-rpbar {
    0% {
        transform: scaleX(0);
    }
    15%,
    90% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
.pn-rp__ring {
    display: grid;
    justify-items: center;
    gap: 9px;
}
.pn-rp__ring svg {
    width: 82px;
    height: 82px;
    transform: rotate(-90deg);
}
.pn-rp__trk {
    fill: none;
    stroke: var(--pn-paper-sunk);
    stroke-width: 6;
}
/* r=19, so the circumference is 119.38 — the values below are shares of it */
.pn-rp__val {
    fill: none;
    stroke: var(--pn-brand-500);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 119.38;
    stroke-dashoffset: 119.38;
}
.is-on .pn-rp__val {
    animation: pn-k-rpring 9s var(--pn-ease-io) 0.5s infinite;
}
@keyframes pn-k-rpring {
    0% {
        stroke-dashoffset: 119.38;
    }
    22%,
    90% {
        stroke-dashoffset: 81;
    }
    100% {
        stroke-dashoffset: 119.38;
    }
}
.pn-rp__ring em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}

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

@media (max-width: 480px) {
    .pn-vz__stage {
        padding: 12px;
    }
    .pn-pl__lane em {
        width: 54px;
        font-size: 9px;
    }
    .pn-pl__deal {
        left: calc(12px + 71px);
    }
    .pn-fu__item em,
    .pn-asg__in em {
        font-size: 10px;
    }
    .pn-fu__rail {
        left: 24px;
    }
    .pn-rp__ring svg {
        width: 66px;
        height: 66px;
    }
}

/* ==========================================================================
   Stage schematics, part two — the archetypes the other module pages use
   --------------------------------------------------------------------------
   Same two rules as above: a fixed 230px stage box, and every loop wrapping
   inside a phase where the element is at rest or hidden.
   ========================================================================== */

/* --- APPROVE — the chain ticks along, then the stamp lands -------------- */

.pn-ap {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--pn-5);
    align-items: center;
}
.pn-ap__doc {
    display: grid;
    align-content: start;
    gap: 7px;
    height: 108px;
    padding: 12px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
}
.pn-ap__doc u {
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-ap__doc u:nth-child(2) {
    width: 74%;
}
.pn-ap__doc u:nth-child(3) {
    width: 52%;
}
.pn-ap__chain {
    position: relative;
    display: grid;
    gap: 14px;
}
/* The spine behind the three steps, drawn once as the chain runs */
.pn-ap__chain::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--pn-line);
}
.pn-ap__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pn-ap__step i {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--pn-line);
    background: var(--pn-paper);
    color: var(--pn-text-muted);
    display: grid;
    place-items: center;
}
.pn-ap__step i svg {
    width: 13px;
    height: 13px;
}
.pn-ap__step i svg polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}
.pn-ap__step em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.is-on .pn-ap__step i {
    animation: pn-k-apstep 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.8s + 0.3s);
}
@keyframes pn-k-apstep {
    0%,
    100% {
        background: var(--pn-paper);
        border-color: var(--pn-line);
        color: var(--pn-text-muted);
        transform: none;
    }
    9% {
        background: var(--pn-brand-500);
        border-color: var(--pn-brand-500);
        color: var(--pn-text-strong);
        transform: scale(1.12);
    }
    16%,
    88% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
        color: var(--pn-brand-700);
        transform: none;
    }
}
.is-on .pn-ap__step i svg polyline {
    animation: pn-k-apdraw 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.8s + 0.3s);
}
@keyframes pn-k-apdraw {
    0% {
        stroke-dashoffset: 24;
    }
    9%,
    88% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 24;
    }
}
.is-on .pn-ap__step em {
    animation: pn-k-aplabel 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.8s + 0.3s);
}
@keyframes pn-k-aplabel {
    0%,
    100% {
        color: var(--pn-text-muted);
    }
    12%,
    88% {
        color: var(--pn-text-strong);
    }
}
.pn-ap__stamp {
    position: absolute;
    right: var(--pn-4);
    bottom: var(--pn-4);
    padding: 6px 12px;
    border: 2px solid var(--pn-brand-600);
    border-radius: var(--pn-r-2);
    color: var(--pn-brand-700);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
}
.is-on .pn-ap__stamp {
    animation: pn-k-apstamp 9s var(--pn-ease) infinite;
}
@keyframes pn-k-apstamp {
    0%,
    30% {
        opacity: 0;
        transform: rotate(-8deg) scale(2.2);
    }
    38% {
        opacity: 1;
        transform: rotate(-8deg) scale(0.94);
    }
    44%,
    88% {
        opacity: 1;
        transform: rotate(-8deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(-8deg) scale(2.2);
    }
}

/* --- STOCK — levels settle, one drops under the reorder line ------------ */

.pn-st {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}
.pn-st__rows {
    position: relative;
    display: grid;
    align-content: center;
    gap: 13px;
}
.pn-st__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pn-st__row em {
    width: 16px;
    flex: none;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: var(--pn-text-muted);
}
.pn-st__row i {
    position: relative;
    flex: 1;
    height: 12px;
    border-radius: 6px;
    background: var(--pn-paper-sunk);
    display: block;
    overflow: hidden;
}
.pn-st__row i::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--w);
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform: scaleX(0);
    transform-origin: left center;
}
.pn-st__row--low i::after {
    background: var(--pn-amber-400);
}
.is-on .pn-st__row i::after {
    animation: pn-k-stbar 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.2s + 0.2s);
}
@keyframes pn-k-stbar {
    0% {
        transform: scaleX(0);
    }
    16%,
    90% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
/* The reorder threshold, sitting across the bars at 30% */
.pn-st__mark {
    position: absolute;
    left: calc(30% + 26px);
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: repeating-linear-gradient(
        180deg,
        var(--pn-line-strong) 0 4px,
        transparent 4px 8px
    );
}
.pn-st__mark em {
    position: absolute;
    left: 6px;
    top: 0;
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-st__alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--pn-amber-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-amber-050);
    opacity: 0;
}
.pn-st__alert i {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-amber-400);
}
.pn-st__alert em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-strong);
}
.is-on .pn-st__alert {
    animation: pn-k-stalert 9s var(--pn-ease) infinite;
}
@keyframes pn-k-stalert {
    0%,
    34% {
        opacity: 0;
        transform: translateY(12px);
    }
    44%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* --- INSPECT — the checklist draws itself, then a seal lands ------------ */

.pn-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: var(--pn-5);
    align-items: center;
}
.pn-in__list {
    display: grid;
    gap: 12px;
}
.pn-in__row {
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: 0;
}
.pn-in__row b {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
}
.pn-in__row b svg {
    width: 13px;
    height: 13px;
}
.pn-in__row u {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-in__row:nth-child(2) u {
    width: 82%;
    flex: none;
}
.pn-in__row:nth-child(4) u {
    width: 64%;
    flex: none;
}
.pn-in__row--flag b {
    background: var(--pn-amber-050);
    color: var(--pn-amber-400);
}
.is-on .pn-in__row {
    animation: pn-k-inrow 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.5s + 0.2s);
}
@keyframes pn-k-inrow {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }
    8%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(-12px);
    }
}
.is-on .pn-in__row b svg polyline,
.is-on .pn-in__row b svg line {
    animation: pn-k-indraw 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.5s + 0.35s);
}
.pn-in__row b svg polyline,
.pn-in__row b svg line {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
}
@keyframes pn-k-indraw {
    0% {
        stroke-dashoffset: 26;
    }
    8%,
    90% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 26;
    }
}
.pn-in__seal {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    justify-self: center;
    border: 2px solid var(--pn-brand-500);
    border-radius: 50%;
    color: var(--pn-brand-700);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
}
.is-on .pn-in__seal {
    animation: pn-k-inseal 9s var(--pn-ease) infinite;
}
@keyframes pn-k-inseal {
    0%,
    40% {
        opacity: 0;
        transform: scale(1.9) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: scale(0.94) rotate(-10deg);
    }
    56%,
    90% {
        opacity: 1;
        transform: scale(1) rotate(-10deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.9) rotate(-10deg);
    }
}

/* --- LEDGER — entries pair off until the balance settles ---------------- */

.pn-lg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 54px;
    align-content: center;
}
.pn-lg__side {
    display: grid;
    gap: 12px;
    align-content: center;
}
.pn-lg__side em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-lg__side i {
    height: 22px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    display: block;
}
.pn-lg__side--out {
    text-align: right;
}
.is-on .pn-lg__side i {
    animation: pn-k-lgrow 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.7s + 0.3s);
}
@keyframes pn-k-lgrow {
    0% {
        opacity: 0;
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
    8% {
        opacity: 1;
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
    22%,
    88% {
        opacity: 1;
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
    }
    100% {
        opacity: 0;
        background: var(--pn-paper);
        border-color: var(--pn-line);
    }
}
/* The tie line joining a matched pair, drawn across the gutter */
.pn-lg__tie {
    position: absolute;
    left: 50%;
    width: 54px;
    height: 2px;
    margin-left: -27px;
    top: calc(76px + var(--d) * 34px);
    border-radius: 2px;
    background: var(--pn-brand-500);
    transform: scaleX(0);
}
.is-on .pn-lg__tie {
    animation: pn-k-lgtie 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.7s + 0.5s);
}
@keyframes pn-k-lgtie {
    0% {
        transform: scaleX(0);
    }
    10%,
    88% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
.pn-lg__bal {
    position: absolute;
    left: 50%;
    bottom: var(--pn-4);
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: var(--pn-r-pill);
    background: var(--pn-brand-050);
    border: 1px solid var(--pn-brand-100);
    opacity: 0;
}
.pn-lg__bal em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-brand-700);
}
.is-on .pn-lg__bal {
    animation: pn-k-lgbal 9s var(--pn-ease) infinite;
}
@keyframes pn-k-lgbal {
    0%,
    46% {
        opacity: 0;
    }
    56%,
    88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* --- ROSTER — the week fills in, day by day ----------------------------- */

.pn-ro {
    display: grid;
    grid-template-rows: auto repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-content: center;
}
.pn-ro__head,
.pn-ro__row {
    display: grid;
    grid-template-columns: 26px repeat(5, minmax(0, 1fr));
    gap: 7px;
    align-items: center;
}
.pn-ro__head em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    color: var(--pn-text-muted);
}
.pn-ro__row b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pn-paper-sunk);
    color: var(--pn-text-muted);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.pn-ro__row i {
    height: 20px;
    border-radius: 5px;
    background: var(--pn-paper-sunk);
    display: block;
    opacity: 0;
}
.pn-ro__row i[data-s="in"] {
    background: var(--pn-brand-500);
}
.pn-ro__row i[data-s="leave"] {
    background: var(--pn-paper);
    border: 1px dashed var(--pn-brand-500);
}
.is-on .pn-ro__row i {
    animation: pn-k-rocell 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.13s + 0.2s);
}
@keyframes pn-k-rocell {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    9%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

/* --- PAYSLIP — slips deal out of the stack ------------------------------ */

.pn-ps {
    display: block;
}
.pn-ps__stack {
    position: absolute;
    left: var(--pn-4);
    top: 50%;
    width: 74px;
    height: 92px;
    margin-top: -46px;
}
.pn-ps__stack i {
    position: absolute;
    inset: 0;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    display: block;
}
.pn-ps__stack i:nth-child(1) {
    transform: translate(6px, 6px) rotate(4deg);
}
.pn-ps__stack i:nth-child(2) {
    transform: translate(3px, 3px) rotate(2deg);
}
/* Each slip travels a percentage of the frame, so the throw scales with it */
.pn-ps__slip {
    position: absolute;
    left: calc(var(--pn-4) + 4px);
    top: calc(38px + var(--d) * 52px);
    width: 40%;
    height: 42px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--pn-brand-100);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    box-shadow: var(--pn-sh-1);
    opacity: 0;
}
.pn-ps__slip u {
    height: 5px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-ps__slip u:nth-child(2) {
    width: 58%;
}
.pn-ps__slip b {
    position: absolute;
    right: 11px;
    top: 50%;
    width: 26px;
    height: 10px;
    margin-top: -5px;
    border-radius: 3px;
    background: var(--pn-brand-500);
}
.is-on .pn-ps__slip {
    animation: pn-k-psdeal 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.55s + 0.3s);
}
@keyframes pn-k-psdeal {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-6deg) scale(0.9);
    }
    6% {
        opacity: 1;
    }
    24%,
    88% {
        opacity: 1;
        transform: translate(118%, 0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(118%, 0) rotate(0deg) scale(0.9);
    }
}
.pn-ps__total {
    position: absolute;
    left: var(--pn-4);
    right: var(--pn-4);
    bottom: var(--pn-4);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pn-ps__total em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
    white-space: nowrap;
}
.pn-ps__total i {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--pn-paper-sunk);
    display: block;
    overflow: hidden;
}
.pn-ps__total i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
}
.is-on .pn-ps__total i::after {
    animation: pn-k-pstotal 9s var(--pn-ease-io) 0.4s infinite;
}
@keyframes pn-k-pstotal {
    0% {
        transform: scaleX(0);
    }
    30%,
    90% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

/* --- VAULT — documents file themselves away ----------------------------- */

/* The folders sit low so the documents have somewhere to fall from, but tall
   enough that the frame does not read as empty when nothing is in flight. */
.pn-va {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}
.pn-va__folders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-self: end;
}
.pn-va__folder {
    display: grid;
    gap: 7px;
    justify-items: center;
}
.pn-va__folder b {
    width: 100%;
    height: 104px;
    border: 1px solid var(--pn-line);
    border-radius: 4px 4px var(--pn-r-2) var(--pn-r-2);
    background: var(--pn-paper);
    display: block;
    /* The folder tab, so it reads as a folder rather than a box */
    position: relative;
}
.pn-va__folder b::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -5px;
    width: 34%;
    height: 6px;
    border: 1px solid var(--pn-line);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: var(--pn-paper);
}
.pn-va__folder em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.is-on .pn-va__folder b {
    animation: pn-k-vafold 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.7s + 0.75s);
}
@keyframes pn-k-vafold {
    0%,
    100% {
        background: var(--pn-paper);
        border-color: var(--pn-line);
        transform: none;
    }
    7% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
        transform: translateY(-3px);
    }
    16%,
    88% {
        background: var(--pn-brand-050);
        border-color: var(--pn-brand-500);
        transform: none;
    }
}
/* Each document drops from the top into its folder. The track spans the full
   width so the horizontal offset is a share of the frame, not of the chip. */
.pn-va__doc {
    position: absolute;
    left: var(--pn-4);
    right: var(--pn-4);
    top: 10px;
    height: 26px;
    opacity: 0;
}
.pn-va__doc i {
    position: absolute;
    left: calc(16.6% + var(--d) * 33.3% - 13px);
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: var(--pn-brand-600);
    box-shadow: 0 5px 12px rgba(201, 162, 39, 0.32);
}
.is-on .pn-va__doc {
    animation: pn-k-vadoc 9s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 0.7s + 0.3s);
}
@keyframes pn-k-vadoc {
    0% {
        opacity: 0;
        transform: translateY(-22px);
    }
    5% {
        opacity: 1;
        transform: translateY(-22px);
    }
    16% {
        opacity: 1;
        transform: translateY(46px);
    }
    22%,
    100% {
        opacity: 0;
        transform: translateY(46px);
    }
}
.pn-va__exp {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border: 1px solid var(--pn-amber-100);
    border-radius: var(--pn-r-pill);
    background: var(--pn-amber-050);
    opacity: 0;
}
.pn-va__exp i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-amber-400);
}
.pn-va__exp em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-text-strong);
}
.is-on .pn-va__exp {
    animation: pn-k-vaexp 9s var(--pn-ease) infinite;
}
@keyframes pn-k-vaexp {
    0%,
    52% {
        opacity: 0;
        transform: translateY(8px);
    }
    60%,
    88% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* --- CYCLE — the maintenance ring comes round again --------------------- */

.pn-cy {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--pn-5);
    align-items: center;
}
.pn-cy__dial {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
}
.pn-cy__dial svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pn-cy__trk {
    fill: none;
    stroke: var(--pn-paper-sunk);
    stroke-width: 5;
}
/* r=25, so the circumference is 157.08 */
.pn-cy__val {
    fill: none;
    stroke: var(--pn-brand-500);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 157.08;
    stroke-dashoffset: 157.08;
}
.is-on .pn-cy__val {
    animation: pn-k-cyring 9s linear infinite;
}
@keyframes pn-k-cyring {
    0% {
        stroke-dashoffset: 157.08;
    }
    72%,
    92% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 157.08;
    }
}
.pn-cy__hand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 38px;
    margin: -38px 0 0 -1px;
    border-radius: 2px;
    background: var(--pn-brand-600);
    transform-origin: bottom center;
}
.is-on .pn-cy__hand {
    animation: pn-k-cyhand 9s linear infinite;
}
@keyframes pn-k-cyhand {
    0% {
        transform: rotate(0deg);
    }
    72%,
    92% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.pn-cy__list {
    display: grid;
    gap: 12px;
}
.pn-cy__task {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pn-cy__task i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--pn-line-strong);
    background: var(--pn-paper);
}
.pn-cy__task em {
    width: 52px;
    flex: none;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    color: var(--pn-text-muted);
}
.pn-cy__task u {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
/* Each task turns over as the hand sweeps past its third of the dial */
.is-on .pn-cy__task i {
    animation: pn-k-cytask 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 2.1s + 0.6s);
}
@keyframes pn-k-cytask {
    0%,
    100% {
        border-color: var(--pn-line-strong);
        background: var(--pn-paper);
        transform: none;
    }
    8% {
        border-color: var(--pn-brand-500);
        background: var(--pn-brand-500);
        transform: scale(1.35);
    }
    16%,
    88% {
        border-color: var(--pn-brand-500);
        background: var(--pn-brand-500);
        transform: none;
    }
}

/* --- QUEUE — the top ticket gets picked up ------------------------------ */

.pn-qu {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}
.pn-qu__list {
    display: grid;
    align-content: center;
    gap: 9px;
}
.pn-qu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    background: var(--pn-paper);
    opacity: 0;
}
.pn-qu__item b {
    padding: 2px 6px;
    flex: none;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    color: var(--pn-text-muted);
    font-size: 9px;
    font-weight: 700;
}
.pn-qu__item:first-child b {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
}
.pn-qu__item u {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--pn-paper-sunk);
    display: block;
}
.pn-qu__item i {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-paper-sunk);
}
.is-on .pn-qu__item {
    animation: pn-k-quitem 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.4s + 0.2s);
}
@keyframes pn-k-quitem {
    0% {
        opacity: 0;
        transform: translateY(-14px);
    }
    8%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-14px);
    }
}
/* The one at the front is taken up, then the queue reforms in the hold */
.is-on .pn-qu__item:first-child {
    animation-name: pn-k-qutop;
}
@keyframes pn-k-qutop {
    0% {
        opacity: 0;
        transform: translate(0, -14px);
        border-color: var(--pn-line);
    }
    8%,
    46% {
        opacity: 1;
        transform: none;
        border-color: var(--pn-brand-500);
    }
    58% {
        opacity: 0;
        transform: translateX(26%);
        border-color: var(--pn-brand-500);
    }
    59%,
    68% {
        opacity: 0;
        transform: translate(0, -14px);
        border-color: var(--pn-line);
    }
    76%,
    90% {
        opacity: 1;
        transform: none;
        border-color: var(--pn-brand-500);
    }
    100% {
        opacity: 0;
        transform: translate(0, -14px);
        border-color: var(--pn-line);
    }
}
.pn-qu__sla {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pn-qu__sla em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pn-text-muted);
}
.pn-qu__sla i {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--pn-paper-sunk);
    display: block;
    overflow: hidden;
}
/* The SLA clock draining from full toward the limit */
.pn-qu__sla i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pn-brand-500);
    transform-origin: left center;
}
.is-on .pn-qu__sla i::after {
    animation: pn-k-qusla 9s linear infinite;
}
@keyframes pn-k-qusla {
    0%,
    8% {
        transform: scaleX(1);
        background: var(--pn-brand-500);
    }
    62% {
        transform: scaleX(0.34);
        background: var(--pn-brand-500);
    }
    88% {
        transform: scaleX(0.18);
        background: var(--pn-amber-400);
    }
    100% {
        transform: scaleX(1);
        background: var(--pn-brand-500);
    }
}

/* --- THREAD — the conversation fills in --------------------------------- */

.pn-th {
    display: grid;
    align-content: center;
    gap: 10px;
}
.pn-th__msg {
    display: grid;
    gap: 6px;
    width: 62%;
    padding: 10px 12px;
    border-radius: var(--pn-r-2);
    opacity: 0;
}
.pn-th__msg u {
    height: 5px;
    border-radius: 3px;
    display: block;
}
.pn-th__msg--in {
    justify-self: start;
    border: 1px solid var(--pn-line);
    background: var(--pn-paper);
    border-bottom-left-radius: 3px;
}
.pn-th__msg--in u {
    background: var(--pn-paper-sunk);
}
.pn-th__msg--in u:last-child {
    width: 62%;
}
.pn-th__msg--out {
    justify-self: end;
    background: var(--pn-brand-500);
    border-bottom-right-radius: 3px;
}
.pn-th__msg--out u {
    background: rgba(14, 14, 16, 0.32);
}
.pn-th__msg--out u:last-child {
    width: 54%;
    justify-self: end;
}
.is-on .pn-th__msg {
    animation: pn-k-thmsg 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 0.6s + 0.2s);
}
@keyframes pn-k-thmsg {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    7%,
    88% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
}
.pn-th__typing {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    padding: 9px 12px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-2);
    border-bottom-left-radius: 3px;
    background: var(--pn-paper);
    opacity: 0;
}
.pn-th__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pn-text-muted);
}
.is-on .pn-th__typing {
    animation: pn-k-thtype 9s var(--pn-ease) infinite;
}
@keyframes pn-k-thtype {
    0%,
    36% {
        opacity: 0;
    }
    44%,
    88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.is-on .pn-th__typing i {
    animation: pn-k-thdot 1.2s var(--pn-ease-io) infinite;
}
.pn-th__typing i:nth-child(2) {
    animation-delay: 0.15s;
}
.pn-th__typing i:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes pn-k-thdot {
    0%,
    60%,
    100% {
        transform: none;
        opacity: 0.45;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* --- Narrow screens, part two ------------------------------------------- */

@media (max-width: 480px) {
    .pn-ap {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: var(--pn-4);
    }
    .pn-in {
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: var(--pn-4);
    }
    .pn-in__seal {
        width: 66px;
        height: 66px;
        font-size: 9px;
    }
    .pn-lg {
        gap: 40px;
    }
    .pn-lg__tie {
        width: 40px;
        margin-left: -20px;
    }
    .pn-cy {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: var(--pn-4);
    }
    .pn-cy__dial {
        width: 84px;
        height: 84px;
    }
    .pn-cy__hand {
        height: 30px;
        margin-top: -30px;
    }
    .pn-cy__task em {
        width: 44px;
        font-size: 9px;
    }
    .pn-st__mark em {
        display: none;
    }
    .pn-th__msg {
        width: 74%;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion.
   The global block in propnexus.css collapses these animations to 1ms and
   runs them once — but with no fill mode the elements then fall back to their
   authored resting state, which for most of them is "invisible, waiting to
   animate in". So the end state has to be written out explicitly here, or the
   schematics would render blank for anyone with the setting on.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pn-cap__row,
    .pn-fu__item,
    .pn-fu__due,
    .pn-sv__cal i,
    .pn-bk__grid i,
    .pn-bk__slip,
    .pn-pl__deal,
    .pn-ho__doc {
        opacity: 1 !important;
        transform: none !important;
    }
    .pn-cap__row--dup {
        opacity: 0.45 !important;
    }
    .pn-sv__pick {
        background: var(--pn-brand-500) !important;
    }
    .pn-sv__pin {
        opacity: 1 !important;
        transform: rotate(-45deg) !important;
    }
    /* One chip only, or all three outcomes would stack in the same slot */
    .pn-sv__reel em {
        opacity: 0 !important;
    }
    .pn-sv__reel em:last-child {
        opacity: 1 !important;
    }
    .pn-bk__unit {
        background: var(--pn-brand-500) !important;
        border-color: var(--pn-brand-600) !important;
    }
    .pn-ho__col > i {
        background: var(--pn-paper-soft) !important;
        border-color: var(--pn-line-strong) !important;
    }
    .pn-ho__col--to > i {
        background: var(--pn-brand-050) !important;
        border-color: var(--pn-brand-500) !important;
    }
    .pn-ho__doc {
        opacity: 0 !important;
    }
    .pn-asg__flow {
        opacity: 0 !important;
    }
    .pn-pl__lane i::after,
    .pn-rp__bars i::after {
        transform: scaleX(1) !important;
    }
    .pn-fu__rail i {
        transform: scaleY(1) !important;
    }
    .pn-rp__val {
        stroke-dashoffset: 81 !important;
    }

    /* --- and the same for the archetypes above --- */
    .pn-ap__stamp,
    .pn-st__alert,
    .pn-in__row,
    .pn-in__seal,
    .pn-lg__side i,
    .pn-lg__bal,
    .pn-ro__row i,
    .pn-ps__total,
    .pn-qu__item,
    .pn-th__msg,
    .pn-th__typing {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Rotated seals keep their tilt — `transform: none` would square them up */
    .pn-ap__stamp {
        transform: rotate(-8deg) !important;
    }
    .pn-in__seal {
        transform: rotate(-10deg) !important;
    }
    .pn-ap__step i {
        background: var(--pn-brand-050) !important;
        border-color: var(--pn-brand-500) !important;
        color: var(--pn-brand-700) !important;
    }
    .pn-ap__step i svg polyline,
    .pn-in__row b svg polyline,
    .pn-in__row b svg line {
        stroke-dashoffset: 0 !important;
    }
    .pn-ap__step em {
        color: var(--pn-text-strong) !important;
    }
    .pn-st__row i::after,
    .pn-ps__total i::after,
    .pn-lg__tie {
        transform: scaleX(1) !important;
    }
    .pn-lg__side i {
        background: var(--pn-brand-050) !important;
        border-color: var(--pn-brand-500) !important;
    }
    /* The slips have already been dealt; the stack is what is left behind */
    .pn-ps__slip {
        opacity: 1 !important;
        transform: translateX(118%) !important;
    }
    .pn-va__folder b {
        background: var(--pn-brand-050) !important;
        border-color: var(--pn-brand-500) !important;
        transform: none !important;
    }
    /* Show the documents landed in their folders rather than hidden, or the
       upper half of the frame reads as blank when nothing is in flight. */
    .pn-va__doc {
        opacity: 1 !important;
        transform: translateY(46px) !important;
    }
    .pn-va__exp {
        opacity: 1 !important;
        transform: none !important;
    }
    .pn-cy__val {
        stroke-dashoffset: 0 !important;
    }
    .pn-cy__hand {
        transform: rotate(320deg) !important;
    }
    .pn-cy__task i {
        background: var(--pn-brand-500) !important;
        border-color: var(--pn-brand-500) !important;
        transform: none !important;
    }
    .pn-qu__sla i::after {
        transform: scaleX(0.34) !important;
    }
    .pn-th__typing i {
        opacity: 0.45 !important;
    }
}

/* ==========================================================================
   About and Contact
   --------------------------------------------------------------------------
   Neither page has a photograph to work with, so the interest has to come from
   the layout and from visuals drawn in CSS and SVG (partials/page-visuals.php).
   Both reuse the ink hero and the shared contact block; everything below is
   what sits between them.
   ========================================================================== */

.pn-sh__viz {
    min-width: 0;
    display: grid;
    place-items: center;
}

/* About and Contact carry their real H2 in the hero. `.pn h2` outranks
   `.pn-sh__sub` on both size and colour, and its near-black would be invisible
   against the ink, so this has to restate the gold lead treatment. */
.pn-sh h2.pn-sh__sub {
    font-size: var(--pn-fs-lead);
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--pn-brand-400);
}

/* --- WEAVE: separate nodes finding each other --------------------------- */

.pn-wv {
    display: block;
    width: 100%;
    max-width: 420px;
}
.pn-wv svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.pn-wv__edge {
    stroke: rgba(201, 162, 39, 0.55);
    stroke-width: 1;
    stroke-linecap: round;
    /* Every line draws from nothing; 400 comfortably exceeds the longest */
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    vector-effect: non-scaling-stroke;
}
.is-in .pn-wv__edge {
    animation: pn-k-wvedge 11s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 110ms + 600ms);
}
@keyframes pn-k-wvedge {
    0% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    16%,
    88% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    96%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}
.pn-wv__node {
    fill: var(--pn-brand-400);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.is-in .pn-wv__node {
    animation: pn-k-wvnode 11s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 90ms);
}
@keyframes pn-k-wvnode {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    6% {
        opacity: 1;
        transform: scale(1.6);
    }
    12%,
    90% {
        opacity: 1;
        transform: scale(1);
    }
    98%,
    100% {
        opacity: 0;
        transform: scale(0.2);
    }
}

/* --- BEACON: a message out, an answer back ------------------------------ */

.pn-bc {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
    height: 200px;
}
.pn-bc__you,
.pn-bc__us {
    position: absolute;
    top: 50%;
    display: grid;
    justify-items: center;
    gap: 9px;
    transform: translateY(-50%);
}
.pn-bc__you {
    left: 0;
}
.pn-bc__us {
    right: 0;
}
.pn-bc__you i,
.pn-bc__us i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--pn-on-ink-line);
    background: rgba(255, 255, 255, 0.05);
}
.pn-bc__us i {
    border-color: var(--pn-brand-500);
    background: rgba(201, 162, 39, 0.16);
}
.pn-bc__you em,
.pn-bc__us em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pn-on-ink-dim);
    white-space: nowrap;
}
.pn-bc__line {
    position: absolute;
    left: 62px;
    right: 62px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--pn-on-ink-line);
    border-radius: 2px;
    overflow: hidden;
}
.pn-bc__line i {
    display: block;
    height: 100%;
    background: var(--pn-brand-500);
    transform: scaleX(0);
    transform-origin: left center;
}
.is-in .pn-bc__line i {
    animation: pn-k-bcline 8s var(--pn-ease-io) infinite;
}
@keyframes pn-k-bcline {
    0% {
        transform: scaleX(0);
    }
    22%,
    88% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
/* Both chips ride a full-width track, so the distance is a share of the frame
   rather than of the chip — the trick the handover schematic uses. */
.pn-bc__out,
.pn-bc__back {
    position: absolute;
    left: 62px;
    right: 62px;
    top: 50%;
    height: 22px;
    margin-top: -11px;
    opacity: 0;
    pointer-events: none;
}
.pn-bc__out::before {
    content: "";
    position: absolute;
    left: 0;
    width: 34px;
    height: 22px;
    border-radius: 5px;
    background: var(--pn-brand-500);
    box-shadow: 0 6px 16px rgba(201, 162, 39, 0.4);
}
.pn-bc__back {
    display: grid;
    place-items: center end;
}
.pn-bc__back svg {
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
}
.is-in .pn-bc__out {
    animation: pn-k-bcout 8s var(--pn-ease-io) infinite;
}
@keyframes pn-k-bcout {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    6% {
        opacity: 1;
        transform: translateX(0);
    }
    26% {
        opacity: 1;
        transform: translateX(calc(100% - 34px));
    }
    32%,
    100% {
        opacity: 0;
        transform: translateX(calc(100% - 34px));
    }
}
.is-in .pn-bc__back {
    animation: pn-k-bcback 8s var(--pn-ease-io) infinite;
}
@keyframes pn-k-bcback {
    0%,
    38% {
        opacity: 0;
        transform: translateX(0);
    }
    44% {
        opacity: 1;
        transform: translateX(0);
    }
    62%,
    88% {
        opacity: 1;
        transform: translateX(calc(-100% + 22px));
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-100% + 22px));
    }
}
.pn-bc__ping {
    position: absolute;
    right: 26px;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border-radius: 50%;
    border: 1px solid var(--pn-brand-500);
    opacity: 0;
}
.is-in .pn-bc__ping {
    animation: pn-k-bcping 8s var(--pn-ease) infinite;
}
@keyframes pn-k-bcping {
    0%,
    28% {
        opacity: 0;
        transform: scale(1);
    }
    34% {
        opacity: 0.8;
        transform: scale(1);
    }
    52%,
    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

/* --- The opening statement, both pages ---------------------------------- */

.pn-ab {
    background: var(--pn-paper);
    padding: var(--pn-section) 0 calc(var(--pn-section) / 1.6);
}
.pn-ab__intro {
    max-width: 76ch;
}
.pn-ab__lead {
    font-family: var(--pn-font-head);
    font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--pn-text-strong);
    max-width: none;
    text-wrap: pretty;
}

/* --- Chapters ----------------------------------------------------------- */

.pn-ch {
    background: var(--pn-paper);
    padding: 0 0 var(--pn-section);
}
.pn-ch__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-5);
}
.pn-ch__item {
    position: relative;
    overflow: hidden;
    padding: var(--pn-7) var(--pn-6) var(--pn-6);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-4);
    background: var(--pn-paper);
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--pn-t-4) var(--pn-ease),
        transform var(--pn-t-4) var(--pn-ease),
        border-color var(--pn-t-2) var(--pn-ease),
        box-shadow var(--pn-t-2) var(--pn-ease);
}
.pn-ch__item.is-on {
    opacity: 1;
    transform: none;
}
.pn-ch__item:hover {
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
/* An oversized ghost numeral, cropped by the card, so it reads as a chapter
   mark rather than as decoration sitting on top of the text. */
.pn-ch__no {
    position: absolute;
    right: -6px;
    top: -22px;
    font-family: var(--pn-font-head);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--pn-brand-500);
    opacity: 0.12;
    pointer-events: none;
}
.pn-ch__rule {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 800ms var(--pn-ease-io) 120ms;
}
.pn-ch__item.is-on .pn-ch__rule {
    transform: scaleX(1);
}
.pn-ch__item h3 {
    position: relative;
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
    margin: 0 0 var(--pn-4);
}
.pn-ch__item p {
    color: var(--pn-text-muted);
    line-height: 1.75;
    max-width: 62ch;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--pn-t-3) var(--pn-ease),
        transform var(--pn-t-3) var(--pn-ease);
}
.pn-ch__item.is-on p {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d) * 140ms + 260ms);
}
.pn-ch__item p:last-child {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .pn-ch__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pn-6);
    }
    .pn-ch__item {
        padding: var(--pn-8) var(--pn-7) var(--pn-7);
    }
    .pn-ch__no {
        font-size: 7.5rem;
        top: -30px;
    }
}

/* --- Vision and Mission ------------------------------------------------- */

.pn-aim {
    background: var(--pn-ink-900);
    color: var(--pn-on-ink-soft);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-aim__grid {
    display: grid;
    gap: var(--pn-6);
}
.pn-aim__card {
    display: grid;
    justify-items: start;
    gap: var(--pn-5);
    padding: var(--pn-7);
    border: 1px solid var(--pn-on-ink-line);
    border-radius: var(--pn-r-4);
    background: rgba(255, 255, 255, 0.03);
    transition:
        border-color var(--pn-t-2) var(--pn-ease),
        background-color var(--pn-t-2) var(--pn-ease);
}
.pn-aim__card:hover {
    border-color: rgba(201, 162, 39, 0.42);
    background: rgba(255, 255, 255, 0.05);
}
.pn-aim__card h3 {
    color: #fff;
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
}
.pn-aim__card p {
    margin: 0;
    color: var(--pn-on-ink-soft);
    line-height: 1.75;
}

@media (min-width: 860px) {
    .pn-aim__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pn-7);
    }
    .pn-aim__card {
        padding: var(--pn-8);
    }
}

/* HORIZON: a line clears and something rises past it */
.pn-hz {
    position: relative;
    display: block;
    width: 108px;
    height: 66px;
    overflow: hidden;
}
.pn-hz__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--pn-on-ink-line);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 1;
}
.is-in .pn-hz__line {
    animation: pn-k-hzline 9s var(--pn-ease-io) infinite;
}
@keyframes pn-k-hzline {
    0% {
        transform: scaleX(0);
    }
    14%,
    92% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
.pn-hz__sun {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 38px;
    height: 38px;
    margin-left: -19px;
    border-radius: 50%;
    background: var(--pn-brand-500);
    transform: translateY(38px);
}
.is-in .pn-hz__sun {
    animation: pn-k-hzsun 9s var(--pn-ease-io) infinite;
}
@keyframes pn-k-hzsun {
    0%,
    16% {
        transform: translateY(38px);
    }
    46%,
    92% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(38px);
    }
}
.pn-hz__ray {
    position: absolute;
    bottom: 20px;
    width: 2px;
    height: 16px;
    border-radius: 2px;
    background: rgba(201, 162, 39, 0.5);
    opacity: 0;
}
.pn-hz__ray:nth-of-type(3) {
    left: 18px;
    transform: rotate(-28deg);
}
.pn-hz__ray:nth-of-type(4) {
    left: 50%;
    margin-left: -1px;
    bottom: 46px;
}
.pn-hz__ray:nth-of-type(5) {
    right: 18px;
    transform: rotate(28deg);
}
.is-in .pn-hz__ray {
    animation: pn-k-hzray 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 180ms + 2.2s);
}
@keyframes pn-k-hzray {
    0%,
    100% {
        opacity: 0;
    }
    18%,
    76% {
        opacity: 1;
    }
}

/* TARGET: rings settle and a mark lands in the middle */
.pn-tg {
    position: relative;
    display: block;
    width: 92px;
    height: 92px;
}
.pn-tg__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 50%;
    opacity: 0;
}
.pn-tg__ring:nth-of-type(1) {
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
}
.pn-tg__ring:nth-of-type(2) {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
}
.pn-tg__ring:nth-of-type(3) {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
}
.is-in .pn-tg__ring {
    animation: pn-k-tgring 9s var(--pn-ease) infinite;
    animation-delay: calc(var(--d) * 200ms);
}
@keyframes pn-k-tgring {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    14%,
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}
.pn-tg__hit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pn-brand-500);
    opacity: 0;
}
.is-in .pn-tg__hit {
    animation: pn-k-tghit 9s var(--pn-ease) infinite;
}
@keyframes pn-k-tghit {
    0%,
    40% {
        opacity: 0;
        transform: scale(3.4);
    }
    50% {
        opacity: 1;
        transform: scale(0.8);
    }
    56%,
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3.4);
    }
}

/* --- Values ------------------------------------------------------------- */

.pn-val {
    background: var(--pn-paper-soft);
    padding: var(--pn-section) 0;
}
.pn-val__head {
    max-width: 62ch;
    margin-bottom: var(--pn-8);
}
.pn-val__head h3 {
    font-size: var(--pn-fs-h2);
    letter-spacing: -0.02em;
    margin: 0 0 var(--pn-4);
}
.pn-val__head p {
    color: var(--pn-text-muted);
    margin: 0;
}
.pn-val__grid {
    list-style: none;
    margin: 0 0 var(--pn-7);
    padding: 0;
    display: grid;
    gap: var(--pn-4);
}
.pn-val__card {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--pn-4);
    padding: var(--pn-6);
    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);
}
.pn-val__card:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
.pn-val__card strong {
    font-family: var(--pn-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pn-text-strong);
}
.pn-val__card span {
    font-size: var(--pn-fs-sm);
    line-height: 1.6;
    color: var(--pn-text-muted);
}
.pn-val__foot {
    max-width: 62ch;
    color: var(--pn-text-muted);
    margin: 0;
}

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

/* The four glyphs share a frame; each one moves differently. */
.pn-vg {
    position: relative;
    display: block;
    width: 54px;
    height: 40px;
}

/* clarity: a blurred stack resolves into clean lines */
.pn-vg--clarity i {
    position: absolute;
    left: 0;
    height: 5px;
    border-radius: 3px;
    background: var(--pn-brand-500);
    filter: blur(3px);
    opacity: 0.5;
}
.pn-vg--clarity i:nth-child(1) {
    top: 6px;
    width: 100%;
}
.pn-vg--clarity i:nth-child(2) {
    top: 18px;
    width: 72%;
}
.pn-vg--clarity i:nth-child(3) {
    top: 30px;
    width: 44%;
}
.is-in .pn-vg--clarity i {
    animation: pn-k-vgclear 7s var(--pn-ease) infinite;
}
.is-in .pn-vg--clarity i:nth-child(2) {
    animation-delay: 0.12s;
}
.is-in .pn-vg--clarity i:nth-child(3) {
    animation-delay: 0.24s;
}
@keyframes pn-k-vgclear {
    0%,
    100% {
        filter: blur(3px);
        opacity: 0.5;
    }
    24%,
    82% {
        filter: blur(0);
        opacity: 1;
    }
}

/* reliability: a beat that never misses */
.pn-vg--reliability svg {
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    height: calc(100% - 8px);
}
.pn-vg--reliability path {
    fill: none;
    stroke: var(--pn-brand-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
}
.is-in .pn-vg--reliability path {
    animation: pn-k-vgbeat 7s linear infinite;
}
@keyframes pn-k-vgbeat {
    0% {
        stroke-dashoffset: 120;
    }
    40%,
    88% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -120;
    }
}

/* adaptability: a square eases into a circle and back */
.pn-vg--adapt i {
    position: absolute;
    left: 7px;
    top: 2px;
    width: 36px;
    height: 36px;
    border: 3px solid var(--pn-brand-500);
    border-radius: 4px;
}
.is-in .pn-vg--adapt i {
    animation: pn-k-vgmorph 7s var(--pn-ease-io) infinite;
}
@keyframes pn-k-vgmorph {
    0%,
    100% {
        border-radius: 4px;
        transform: rotate(0deg);
    }
    35% {
        border-radius: 50%;
        transform: rotate(90deg);
    }
    70% {
        border-radius: 18px 4px 18px 4px;
        transform: rotate(180deg);
    }
}

/* customer focus: rings closing in on the centre */
.pn-vg--focus i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid var(--pn-brand-500);
    border-radius: 50%;
    opacity: 0;
}
.is-in .pn-vg--focus i {
    animation: pn-k-vgfocus 7s var(--pn-ease-io) infinite;
    animation-delay: calc(var(--d) * 400ms);
}
@keyframes pn-k-vgfocus {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    18% {
        opacity: 1;
    }
    64% {
        opacity: 1;
        transform: scale(0.28);
    }
    72%,
    100% {
        opacity: 0;
        transform: scale(0.28);
    }
}

/* --- Partnership -------------------------------------------------------- */

.pn-pt {
    background: var(--pn-paper);
    padding: var(--pn-section) 0;
    overflow: hidden;
}
.pn-pt__inner {
    display: grid;
    gap: var(--pn-8);
    align-items: center;
}
.pn-pt__copy {
    min-width: 0;
}
.pn-pt__copy h3 {
    font-size: var(--pn-fs-h2);
    letter-spacing: -0.02em;
    margin: 0 0 var(--pn-5);
}
.pn-pt__copy p {
    color: var(--pn-text-muted);
    line-height: 1.75;
}
.pn-pt__viz {
    min-width: 0;
}

@media (min-width: 992px) {
    .pn-pt__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: var(--pn-9);
    }
}

/* TRACKS: two lines converge and carry on as one */
.pn-tk {
    position: relative;
    display: block;
    width: 100%;
}
.pn-tk svg {
    display: block;
    width: 100%;
    height: 190px;
}
.pn-tk__a,
.pn-tk__b,
.pn-tk__join {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
}
.pn-tk__a,
.pn-tk__b {
    stroke: var(--pn-line-strong);
    stroke-width: 2;
}
/* The joined run is heavier: the point of the picture is that together is
   stronger than either line on its own. */
.pn-tk__join {
    stroke: var(--pn-brand-500);
    stroke-width: 5;
}
.is-in .pn-tk__a,
.is-in .pn-tk__b {
    animation: pn-k-tkline 10s var(--pn-ease-io) infinite;
}
.is-in .pn-tk__b {
    animation-delay: 0.25s;
}
@keyframes pn-k-tkline {
    0% {
        stroke-dashoffset: 460;
    }
    34%,
    90% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 460;
    }
}
.is-in .pn-tk__join {
    animation: pn-k-tkjoin 10s var(--pn-ease-io) infinite;
}
@keyframes pn-k-tkjoin {
    0%,
    34% {
        stroke-dashoffset: 460;
    }
    52%,
    90% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 460;
    }
}
.pn-tk__dot {
    position: absolute;
    left: 0;
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--pn-brand-600);
    opacity: 0;
}
.pn-tk__dot--a {
    top: 21%;
}
.pn-tk__dot--b {
    top: 79%;
}
.is-in .pn-tk__dot {
    animation: pn-k-tkdot 10s var(--pn-ease-io) infinite;
}
.is-in .pn-tk__dot--b {
    animation-delay: 0.25s;
}
@keyframes pn-k-tkdot {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    8% {
        opacity: 1;
    }
    34% {
        opacity: 1;
        transform: translate(59%, 0);
    }
    42%,
    100% {
        opacity: 0;
        transform: translate(59%, 0);
    }
}

/* --- Contact: what you can reach us about ------------------------------- */

.pn-way {
    background: var(--pn-paper-soft);
    padding: 0 0 var(--pn-section);
}
.pn-way__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-4);
}
.pn-way__card {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--pn-4);
    padding: var(--pn-6);
    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);
}
.pn-way__card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-brand-600));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--pn-t-3) var(--pn-ease);
}
.pn-way__card:hover {
    transform: translateY(-4px);
    border-color: var(--pn-brand-100);
    box-shadow: var(--pn-sh-2);
}
.pn-way__card:hover::before {
    transform: scaleX(1);
}
.pn-way__ico {
    width: 46px;
    height: 46px;
    border-radius: var(--pn-r-2);
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
    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-way__ico svg {
    width: 21px;
    height: 21px;
}
.pn-way__card:hover .pn-way__ico {
    background: var(--pn-brand-500);
    color: var(--pn-text-strong);
    transform: scale(1.06) rotate(-4deg);
}
.pn-way__card h3 {
    font-size: 1.1875rem;
    line-height: 1.3;
    margin: 0;
}
.pn-way__card > p {
    margin: 0;
    color: var(--pn-text-muted);
    line-height: 1.7;
    font-size: var(--pn-fs-sm);
}
.pn-way__pts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pn-3);
    width: 100%;
}
.pn-way__pts li {
    display: flex;
    align-items: flex-start;
    gap: var(--pn-3);
    font-size: var(--pn-fs-sm);
    line-height: 1.5;
    color: var(--pn-text);
}
.pn-way__tick {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--pn-brand-050);
    color: var(--pn-brand-600);
    display: grid;
    place-items: center;
}
.pn-way__tick svg {
    width: 11px;
    height: 11px;
}
.pn-way__tick svg polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 420ms var(--pn-ease);
}
[data-reveal-group].is-in .pn-way__tick svg polyline {
    stroke-dashoffset: 0;
    transition-delay: calc(var(--d) * 110ms + 420ms);
}

@media (min-width: 760px) {
    /* Six columns split 3+3 then 2+2+2, so both rows fill exactly and nothing
       is left ragged. Spans are positional rather than content-driven, which
       keeps the cards in the order the page states them. */
    .pn-way__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .pn-way__card {
        grid-column: span 2;
    }
    .pn-way__card:nth-child(-n + 2) {
        grid-column: span 3;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion for these two pages.
   Same reasoning as the schematics: with the animation collapsed to 1ms and no
   fill mode, anything whose resting state is "invisible, waiting" would stay
   invisible. The end state is written out here instead.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pn-wv__node,
    .pn-tg__ring,
    .pn-tg__hit,
    .pn-hz__ray {
        opacity: 1 !important;
        transform: none !important;
    }
    .pn-wv__edge {
        opacity: 1 !important;
    }
    .pn-wv__edge,
    .pn-tk__a,
    .pn-tk__b,
    .pn-tk__join,
    .pn-vg--reliability path {
        stroke-dashoffset: 0 !important;
    }
    .pn-hz__line,
    .pn-bc__line i {
        transform: scaleX(1) !important;
    }
    .pn-hz__sun {
        transform: translateY(-6px) !important;
    }
    /* One ring only, or all three would sit on top of each other */
    .pn-vg--focus i {
        opacity: 0 !important;
        transform: none !important;
    }
    .pn-vg--focus i:first-child {
        opacity: 1 !important;
    }
    .pn-vg--clarity i {
        filter: blur(0) !important;
        opacity: 1 !important;
    }
    .pn-vg--adapt i {
        border-radius: 50% !important;
        transform: none !important;
    }
    .pn-bc__out,
    .pn-bc__ping,
    .pn-tk__dot {
        opacity: 0 !important;
    }
    .pn-bc__back {
        opacity: 1 !important;
        transform: translateX(calc(-100% + 22px)) !important;
    }
}