/* Phase 3 homepage sections — momentum figures, map preview, candidate
   walkthrough. Loaded after hero.css; every value sourced from tokens.css. */

/* ═══════════════════════════════════════════════════════════════════════
   Section shell — every Phase 3 section uses the same vertical rhythm
   ═══════════════════════════════════════════════════════════════════════ */

.jp-momentum,
.jp-map-preview,
.jp-walkthrough{
    /* Horizontal padding matches the hero + nav inner padding so every
       marketing section's content aligns vertically. The shell--wide
       max-width gives us 1480px max; this padding indents to the nav
       brand's left edge. */
    padding:var(--jp-space-11) var(--jp-space-5);
}
/* Hairline between consecutive light sections instead of extra cards. */
.jp-map-preview,
.jp-walkthrough{border-top:1px solid var(--jp-line)}
@media(max-width:680px){
    .jp-momentum,
    .jp-map-preview,
    .jp-walkthrough{padding:var(--jp-space-9) var(--jp-space-4)}
}

/* Section heads share a structural shape: left-aligned like the hero,
   so the page reads down one edge rather than zig-zagging to centre. */
.jp-momentum__head,
.jp-walkthrough__head{
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-4);
    max-width:720px;
    margin:0 0 var(--jp-space-9);
    align-items:flex-start;
}
.jp-momentum__heading,
.jp-walkthrough__heading,
.jp-map-preview__heading{
    font-size:clamp(32px,3.4vw,50px);
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:600;
    color:var(--jp-ink);
}
.jp-momentum__lede,
.jp-walkthrough__lede,
.jp-map-preview__lede{
    font-size:var(--jp-text-md);
    line-height:var(--jp-leading-body);
    color:var(--jp-muted);
    font-weight:400;
    max-width:58ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. Momentum — three large figures on hairlines, no cards
   ═══════════════════════════════════════════════════════════════════════ */

.jp-momentum__tiles{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--jp-space-7);
}
@media(max-width:860px){
    .jp-momentum__tiles{grid-template-columns:1fr;gap:var(--jp-space-6)}
}
.jp-momentum__tile{
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-2);
    padding-top:var(--jp-space-5);
    border-top:1px solid var(--jp-line-strong);
}
.jp-momentum__value{
    font-family:var(--jp-font-display);
    font-size:clamp(48px,5.4vw,80px);
    line-height:1;
    letter-spacing:-.05em;
    font-weight:500;
    font-variant-numeric:tabular-nums;
    color:var(--jp-ink);
    margin-bottom:var(--jp-space-3);
}
.jp-momentum__headline{
    color:var(--jp-ink);
    font-size:var(--jp-text-md);
    font-weight:600;
    letter-spacing:-.01em;
}
.jp-momentum__detail{
    color:var(--jp-muted);
    font-size:var(--jp-text-sm);
    font-weight:400;
    line-height:var(--jp-leading-body);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Map preview — copy left, illustrated UK heatmap right
   ═══════════════════════════════════════════════════════════════════════ */

.jp-map-preview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--jp-space-10);
    align-items:center;
}
@media(max-width:980px){
    .jp-map-preview{
        grid-template-columns:1fr;
        gap:var(--jp-space-7);
    }
}
.jp-map-preview__copy{
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-4);
    max-width:520px;
}
.jp-map-preview__heading{margin-top:var(--jp-space-2)}
.jp-map-preview__bullets{
    list-style:none;
    margin:var(--jp-space-2) 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-3);
}
.jp-map-preview__bullets li{
    position:relative;
    padding-left:var(--jp-space-6);
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-base);
    line-height:var(--jp-leading-body);
    font-weight:400;
}
.jp-map-preview__bullets li::before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    color:var(--jp-success);
    font-weight:700;
}
.jp-map-preview__actions{margin-top:var(--jp-space-4)}

.jp-map-preview__canvas{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-3);
}
/* Same dot-matrix language as the hero's map card. */
.jp-map-preview__map{
    position:relative;
    width:100%;
    aspect-ratio:5/4;
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    border-radius:var(--jp-radius-lg);
    box-shadow:var(--jp-shadow-float);
    overflow:hidden;
}
.jp-map-preview__map::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(23,20,14,.16) 1px,transparent 1.4px);
    background-size:12px 12px;
    -webkit-mask-image:radial-gradient(ellipse 42% 48% at 48% 52%,#000 55%,transparent 100%);
    mask-image:radial-gradient(ellipse 42% 48% at 48% 52%,#000 55%,transparent 100%);
    pointer-events:none;
}
.jp-map-preview__hotspot{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:calc(var(--r) * 2);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(231,199,90,.80) 0%,
        rgba(231,199,90,.32) 40%,
        rgba(231,199,90,0)  72%);
    pointer-events:none;
    animation:jp-map-pulse var(--jp-shimmer-duration) ease-in-out infinite;
}
.jp-map-preview__hotspot:nth-child(2){animation-delay:.4s}
.jp-map-preview__hotspot:nth-child(3){animation-delay:.9s}
.jp-map-preview__hotspot:nth-child(4){animation-delay:1.3s}
.jp-map-preview__hotspot:nth-child(5){animation-delay:1.8s}
.jp-map-preview__hotspot:nth-child(6){animation-delay:2.2s}
@keyframes jp-map-pulse {
    0%, 100% { opacity: .60; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}
.jp-map-preview__chips{
    display:flex;
    flex-wrap:wrap;
    gap:var(--jp-space-2);
}
.jp-map-preview__chip{
    padding:6px 12px;
    border-radius:var(--jp-radius-sm);
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-xs);
    font-weight:500;
}
.jp-map-preview__chip--strong{
    background:var(--jp-charcoal);
    color:#fff;
    border-color:transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Candidate walkthrough — three numbered steps with illustrated mocks
   ═══════════════════════════════════════════════════════════════════════ */

.jp-walkthrough__steps{
    list-style:none;
    counter-reset:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--jp-space-6);
}
@media(max-width:980px){
    .jp-walkthrough__steps{grid-template-columns:1fr;gap:var(--jp-space-8)}
}
/* The mock is the card; the copy sits beneath it on the canvas. */
.jp-walkthrough__step{
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-5);
}
.jp-walkthrough__step-mock{
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    border-radius:var(--jp-radius-lg);
    box-shadow:var(--jp-shadow-sm);
    padding:var(--jp-space-6);
    min-height:200px;
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-2);
    justify-content:center;
    transition:transform var(--jp-duration-base) var(--jp-ease),
               box-shadow var(--jp-duration-base) var(--jp-ease);
}
.jp-walkthrough__step:hover .jp-walkthrough__step-mock{
    transform:translateY(-2px);
    box-shadow:var(--jp-shadow-md);
}
.jp-walkthrough__step-body{display:flex;flex-direction:column;gap:var(--jp-space-2)}
.jp-walkthrough__step-index{
    color:var(--jp-muted);
    font-family:var(--jp-font-display);
    font-size:var(--jp-text-sm);
    font-weight:500;
    font-variant-numeric:tabular-nums;
    letter-spacing:.04em;
}
.jp-walkthrough__step-title{
    color:var(--jp-ink);
    font-size:var(--jp-text-lg);
    line-height:var(--jp-leading-snug);
    letter-spacing:-.02em;
    font-weight:600;
}
.jp-walkthrough__step-text{
    color:var(--jp-muted);
    font-size:var(--jp-text-base);
    line-height:var(--jp-leading-body);
    font-weight:400;
}

/* ── Walkthrough mocks — three distinct illustrations ────────────────── */

/* Sign-up mock — two stacked label/value rows + a CTA */
.jp-wmock{display:flex;flex-direction:column;gap:var(--jp-space-2);width:100%}
.jp-wmock__field{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:var(--jp-space-2) var(--jp-space-3);
    background:var(--jp-canvas-3);
    border:1px solid var(--jp-line);
    border-radius:10px;
}
.jp-wmock__label{
    color:var(--jp-muted);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.jp-wmock__value{
    color:var(--jp-ink);
    font-size:var(--jp-text-sm);
    font-weight:500;
}
.jp-wmock__cta{
    background:var(--jp-charcoal);
    color:#fff;
    padding:10px;
    border-radius:10px;
    text-align:center;
    font-size:var(--jp-text-xs);
    font-weight:600;
    margin-top:var(--jp-space-1);
}

/* Skills mock — grouped chips */
.jp-wmock__group{display:flex;flex-direction:column;gap:6px}
.jp-wmock__group-head{
    color:var(--jp-muted);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.jp-wmock__chips{display:flex;flex-wrap:wrap;gap:4px}
.jp-wmock__chip{
    padding:4px 9px;
    background:var(--jp-canvas-3);
    border:1px solid var(--jp-line);
    border-radius:8px;
    color:var(--jp-muted);
    font-size:11px;
    font-weight:500;
}
.jp-wmock__chip--on{
    background:var(--jp-panel);
    color:var(--jp-ink);
    border-color:var(--jp-ink);
    font-weight:600;
}

/* Matches mock — three small match rows */
.jp-wmock--matches{gap:var(--jp-space-2)}
.jp-wmock__match{
    display:flex;
    align-items:center;
    gap:var(--jp-space-3);
    padding:var(--jp-space-2) var(--jp-space-3);
    background:var(--jp-canvas-3);
    border:1px solid var(--jp-line);
    border-radius:10px;
}
.jp-wmock__match-pill{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    color:var(--jp-ink-soft);
    font-weight:600;
    font-size:11px;
    font-variant-numeric:tabular-nums;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.jp-wmock__match-pill--strong{background:var(--jp-charcoal);border-color:transparent;color:#fff}
.jp-wmock__match-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.jp-wmock__match-title{
    color:var(--jp-ink);
    font-size:var(--jp-text-xs);
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jp-wmock__match-org{
    color:var(--jp-muted);
    font-size:10px;
    font-weight:500;
}

/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion — kill the map pulse + tile hover lift
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
    .jp-map-preview__hotspot,
    .jp-momentum__tile,
    .jp-walkthrough__step-mock{
        animation:none !important;
        transition:none !important;
    }
}