/* Hero — premium refresh.

   Loaded AFTER marketing.css so it overrides the v1 hero rules without
   renaming the BEM root (.jp-hero).

   What lives here:
     1. Hero layout + copy (kicker, headline, lede, actions, proof)
     2. Search bar
     3. Live counter row
     4. Product composite stage (three layered preview cards)
     5. Preview card internals (scoring / pulse / map)
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. Layout + copy
   ═══════════════════════════════════════════════════════════════════════ */

.jp-hero{
    position:relative;
    /* Horizontal padding aligns the hero copy with the nav brand above. */
    padding:var(--jp-space-10) var(--jp-space-5) var(--jp-space-11);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:var(--jp-space-10);
    align-items:center;
    min-height:auto;
}

.jp-hero__copy{
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-6);
    max-width:600px;
    /* Lets oversized headings shrink with the column on narrow viewports. */
    min-width:0;
}

.jp-hero__kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.14em;
}
.jp-hero__kicker::before{
    content:'';
    width:18px;
    height:1px;
    background:var(--jp-accent-ink);
    opacity:.6;
}

.jp-hero__title{
    font-family:var(--jp-font-display);
    font-size:clamp(44px,5.2vw,76px);
    line-height:1;
    letter-spacing:-.045em;
    font-weight:600;
    color:var(--jp-ink);
    max-width:13ch;
    overflow-wrap:break-word;
}
.jp-hero__title em{
    /* One phrase in an italic serif replaces the old highlighter. Reset
       the v1 gradient-text rules from marketing.css. */
    font-family:var(--jp-font-serif);
    font-style:italic;
    font-weight:400;
    font-size:1.08em;
    letter-spacing:-.02em;
    color:var(--jp-accent-ink);
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    padding:0;
}

.jp-hero__lede{
    font-size:var(--jp-text-lg);
    line-height:var(--jp-leading-body);
    color:var(--ui-ink-2);
    font-weight:400;
    max-width:46ch;
    overflow-wrap:break-word;
}

.jp-hero__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--jp-space-3) var(--jp-space-6);
}

.jp-hero__textlink{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--jp-ink);
    font-weight:600;
    font-size:var(--jp-text-base);
    text-decoration:none;
}
.jp-hero__textlink span{transition:transform var(--jp-duration-base) var(--jp-ease)}
.jp-hero__textlink:hover span{transform:translateX(3px)}
.jp-hero__textlink:focus-visible{outline:2px solid var(--jp-ink);outline-offset:4px;border-radius:4px}

.jp-hero__proof{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:var(--jp-space-2) var(--jp-space-5);
}
.jp-hero__proof li{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--jp-muted);
    font-size:var(--jp-text-sm);
    font-weight:500;
}
.jp-hero__proof li::before{
    content:'✓';
    color:var(--jp-growth);
    font-weight:700;
    font-size:12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Search bar — submits to the job board via GET
   ═══════════════════════════════════════════════════════════════════════ */

.jp-hero__search{
    display:flex;
    align-items:stretch;
    padding:6px;
    background:var(--jp-panel);
    border:1px solid rgba(23,20,14,.10);
    border-radius:var(--jp-radius-md);
    box-shadow:0 1px 2px rgba(23,20,14,.04),0 12px 32px -12px rgba(23,20,14,.14);
    transition:box-shadow var(--jp-duration-base) var(--jp-ease),
               border-color var(--jp-duration-base) var(--jp-ease);
}
.jp-hero__search:focus-within{
    border-color:rgba(23,20,14,.28);
    box-shadow:0 0 0 4px rgba(23,20,14,.06),0 12px 32px -12px rgba(23,20,14,.18);
}
.jp-hero__search-field{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8px var(--jp-space-4);
}
.jp-hero__search-label{
    color:var(--jp-muted);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-left:28px;
    margin-bottom:3px;
}
.jp-hero__search-input-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}
.jp-hero__search-icon{
    flex-shrink:0;
    width:20px;
    height:20px;
    color:var(--jp-muted-soft);
    display:inline-flex;
}
.jp-hero__search-icon svg{width:100%;height:100%}
.jp-hero__search-input{
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    padding:0;
    font:inherit;
    font-size:var(--jp-text-base);
    font-weight:500;
    color:var(--jp-ink);
    outline:none;
}
.jp-hero__search-input::placeholder{color:var(--jp-muted-soft);font-weight:400}
.jp-hero__search-field:focus-within .jp-hero__search-icon{color:var(--jp-ink)}
.jp-hero__search-divider{
    width:1px;
    background:rgba(23,20,14,.08);
    margin:10px 0;
    flex-shrink:0;
}
.jp-hero__search-submit{flex-shrink:0;padding:0 var(--jp-space-6)}

@media(max-width:680px){
    .jp-hero__search{flex-direction:column;padding:var(--jp-space-2);gap:var(--jp-space-1)}
    .jp-hero__search-field{padding:10px var(--jp-space-3)}
    .jp-hero__search-divider{width:auto;height:1px;margin:0 var(--jp-space-3)}
    .jp-hero__search-submit{width:100%;min-height:52px}
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Live counter row — hairline-separated stats under the search
   ═══════════════════════════════════════════════════════════════════════ */

.jp-hero__live{
    display:flex;
    flex-wrap:wrap;
    gap:var(--jp-space-4) var(--jp-space-8);
    margin:0;
    padding-top:var(--jp-space-5);
    border-top:1px solid rgba(23,20,14,.08);
}
.jp-hero__live-metric{
    display:flex;
    flex-direction:column-reverse;
    gap:2px;
}
.jp-hero__live-metric dt{
    color:var(--jp-muted);
    font-size:var(--jp-text-sm);
    font-weight:500;
}
.jp-hero__live-metric dd{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.jp-hero__live-metric strong{
    font-family:var(--jp-font-display);
    font-size:26px;
    font-weight:600;
    letter-spacing:-.03em;
    color:var(--jp-ink);
    font-variant-numeric:tabular-nums;
}
.jp-hero__live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--jp-success);
    animation:jp-live-pulse var(--jp-shimmer-duration) ease-in-out infinite;
}
@keyframes jp-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47,143,104,.45); }
    50%      { box-shadow: 0 0 0 6px rgba(47,143,104,0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. Product composite — three cards layered on one stage
   ═══════════════════════════════════════════════════════════════════════ */

.jp-hero__preview{min-width:0}

.jp-hero__stage{
    position:relative;
    width:100%;
    max-width:640px;
    height:580px;
    margin-left:auto;
}
/* Soft light behind the cards — replaces the old page-wide glow. */
.jp-hero__stage::before{
    content:'';
    position:absolute;
    inset:8% -6% 0 4%;
    z-index:0;
    background:
        radial-gradient(closest-side at 65% 35%,rgba(231,199,90,.30),transparent),
        radial-gradient(closest-side at 30% 75%,rgba(31,92,63,.10),transparent);
    filter:blur(30px);
    pointer-events:none;
}
.jp-hero__layer{
    position:absolute;
    animation:jp-float 9s ease-in-out infinite;
}
.jp-hero__layer--map{
    top:0;
    right:0;
    width:72%;
    z-index:1;
}
.jp-hero__layer--scoring{
    top:26%;
    left:0;
    width:70%;
    z-index:2;
    animation-delay:-3s;
}
.jp-hero__layer--pulse{
    right:2%;
    bottom:2%;
    width:42%;
    z-index:3;
    animation-delay:-6s;
}
@keyframes jp-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. Preview cards
   ═══════════════════════════════════════════════════════════════════════ */

.jp-preview{
    background:var(--jp-panel);
    border:1px solid rgba(23,20,14,.08);
    border-radius:20px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--jp-shadow-float);
    padding:var(--jp-space-5);
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-4);
}
.jp-preview__head{display:flex;flex-direction:column;gap:3px}
.jp-preview__head--row{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--jp-space-4);
}
.jp-preview__head--row > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.jp-preview__eyebrow{
    color:var(--jp-muted);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.09em;
}
.jp-preview__title{
    font-family:var(--jp-font-display);
    font-size:var(--jp-text-md);
    font-weight:600;
    color:var(--jp-ink);
    letter-spacing:-.015em;
}
.jp-preview__sub{color:var(--jp-muted);font-size:var(--jp-text-sm)}
.jp-preview__foot{display:flex;flex-wrap:wrap;gap:var(--jp-space-2)}
.jp-preview__check{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--jp-muted);
    font-size:12px;
    font-weight:500;
}
.jp-preview__check::before{content:'✓';color:var(--jp-growth);font-weight:700}
.jp-preview__tag{
    flex-shrink:0;
    padding:4px 9px;
    border-radius:var(--jp-radius-pill);
    background:var(--jp-growth-wash);
    color:var(--jp-growth);
    font-size:11px;
    font-weight:600;
}

/* ── Scoring: ring + factor bars ─────────────────────────────────────── */

.jp-preview__ring{
    --size:64px;
    flex-shrink:0;
    position:relative;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:conic-gradient(var(--jp-accent) calc(var(--pct) * 1%),rgba(18,18,18,.07) 0);
    display:grid;
    place-items:center;
}
.jp-preview__ring::before{
    content:'';
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:var(--jp-panel);
}
.jp-preview__ring span{
    position:relative;
    font-family:var(--jp-font-display);
    font-size:19px;
    font-weight:600;
    letter-spacing:-.03em;
    color:var(--jp-ink);
}
.jp-preview__ring small{font-size:11px;color:var(--jp-muted);margin-left:1px}

.jp-preview__factors{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.jp-preview__factor{
    display:grid;
    grid-template-columns:104px 1fr 32px;
    align-items:center;
    gap:var(--jp-space-3);
}
.jp-preview__factor-label{color:var(--jp-ink-soft);font-size:var(--jp-text-sm);font-weight:500}
.jp-preview__factor-bar{
    height:6px;
    background:rgba(18,18,18,.06);
    border-radius:var(--jp-radius-pill);
    overflow:hidden;
}
.jp-preview__factor-bar > span{
    display:block;
    height:100%;
    width:var(--pct);
    background:linear-gradient(90deg,var(--jp-accent-soft),var(--jp-accent));
    border-radius:var(--jp-radius-pill);
    animation:jp-factor-grow 900ms var(--jp-ease) both;
}
.jp-preview__factor-pts{
    text-align:right;
    color:var(--jp-growth);
    font-size:var(--jp-text-sm);
    font-weight:600;
    font-variant-numeric:tabular-nums;
}
@keyframes jp-factor-grow {
    from { width: 0; }
    to   { width: var(--pct); }
}

/* ── Pulse: trust score ──────────────────────────────────────────────── */

.jp-preview--pulse{gap:var(--jp-space-2)}
.jp-preview__pulse-row{display:flex;align-items:baseline;gap:var(--jp-space-2)}
.jp-preview__pulse-figure{
    font-family:var(--jp-font-display);
    font-size:42px;
    line-height:1;
    font-weight:600;
    letter-spacing:-.04em;
    color:var(--jp-ink);
    font-variant-numeric:tabular-nums;
}
.jp-preview__pulse-delta{color:var(--jp-growth);font-size:12px;font-weight:600}
.jp-preview__pulse-spark{width:100%;height:32px}
.jp-preview__pulse-spark polyline{
    fill:none;
    stroke:var(--jp-growth);
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}
.jp-preview__pulse-detail{color:var(--jp-muted);font-size:12px;font-weight:500}
.jp-preview__pulse-detail strong{color:var(--jp-ink);font-weight:600}

/* ── Map: dot-matrix canvas, hotspots, pins ──────────────────────────── */

.jp-preview__canvas{
    position:relative;
    height:200px;
    border-radius:14px;
    background:var(--jp-canvas-3);
    border:1px solid rgba(23,20,14,.06);
    overflow:hidden;
}
.jp-preview__canvas::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(rgba(23,20,14,.16) 1px,transparent 1.4px) 0 0/10px 10px;
    -webkit-mask-image:radial-gradient(ellipse 30% 55% at 72% 55%,#000 55%,transparent 100%);
    mask-image:radial-gradient(ellipse 30% 55% at 72% 55%,#000 55%,transparent 100%);
}
.jp-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,.85) 0%,rgba(231,199,90,.35) 40%,rgba(231,199,90,0) 72%);
    pointer-events:none;
    animation:jp-hotspot-pulse var(--jp-shimmer-duration) ease-in-out infinite;
}
.jp-preview__hotspot:nth-child(2){animation-delay:.6s}
.jp-preview__hotspot:nth-child(3){animation-delay:1.1s}
.jp-preview__hotspot:nth-child(4){animation-delay:1.6s}
@keyframes jp-hotspot-pulse {
    0%, 100% { opacity: .7; }
    50%      { opacity: 1; }
}
.jp-preview__pin{
    position:absolute;
    left:var(--x);
    top:var(--y);
    transform:translate(-50%,calc(-100% - 10px));
    padding:5px 9px;
    border-radius:8px;
    background:var(--jp-charcoal);
    color:#fff;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 6px 16px -6px rgba(18,18,18,.45);
}
.jp-preview__pin::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-4px;
    width:8px;
    height:8px;
    background:inherit;
    transform:translateX(-50%) rotate(45deg);
    border-radius:1px;
}
.jp-preview__pin--quiet{background:var(--jp-panel);color:var(--jp-ink-soft);box-shadow:0 4px 12px -4px rgba(18,18,18,.25)}

/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
    .jp-hero__layer,
    .jp-hero__live-dot,
    .jp-preview__hotspot,
    .jp-preview__factor-bar > span{
        animation:none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */

@media(max-width:1180px){
    .jp-hero{gap:var(--jp-space-8)}
    .jp-hero__stage{height:540px}
    .jp-hero__layer--map{width:78%}
    .jp-hero__layer--scoring{width:78%}
    .jp-hero__layer--pulse{width:48%}
}

@media(max-width:980px){
    .jp-hero{
        grid-template-columns:1fr;
        gap:var(--jp-space-9);
        padding:var(--jp-space-8) var(--jp-space-5) var(--jp-space-10);
    }
    .jp-hero__copy{max-width:640px}
    .jp-hero__stage{margin:0 auto}
}

/* Phones: cards stack in reading order — scoring, pulse, map. */
@media(max-width:680px){
    .jp-hero{padding:var(--jp-space-6) var(--jp-space-4) var(--jp-space-9)}
    .jp-hero__title{font-size:clamp(36px,10vw,44px);letter-spacing:-.04em}
    .jp-hero__lede{font-size:var(--jp-text-md)}
    .jp-hero__actions .ui-btn{width:100%}
    .jp-hero__actions{justify-content:center}
    .jp-hero__live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jp-space-3)}
    .jp-hero__live-metric dt{font-size:var(--jp-text-xs);line-height:1.3}
    .jp-hero__live-metric strong{font-size:22px}
    .jp-hero__stage{height:auto;display:flex;flex-direction:column;gap:var(--jp-space-3)}
    .jp-hero__layer{position:relative;inset:auto;width:100%;animation:none}
    .jp-hero__layer--scoring{order:1}
    .jp-hero__layer--pulse{order:2}
    .jp-hero__layer--map{order:3}
    .jp-preview__factor{grid-template-columns:96px 1fr 30px}
}