/* =====================================================================
   Join page. Builds on style.css, same paper-and-blue look as Legal.
   An intro, open-position cards, then the application form card.
   ===================================================================== */
.page-join{--bgc:#f3f2ed;--jn-r:22px;--jn-ink:#26254a}
@media (min-width:760px){.page-join{--jn-r:28px}}
.page-join main{background:var(--paper);color:var(--blue);--g:var(--paper);--i:var(--blue);--mute:#4744c8;--faint:#cdccec;--line:#d2d1e6;--raise:#fbfaf7;padding-bottom:clamp(72px,10vw,128px)}
.page-join .nav-in{animation:fade 1.2s .2s var(--ease) both}

/* intro */
.jn-hero{padding-top:clamp(120px,18vw,200px);padding-bottom:clamp(40px,6vw,72px);max-width:1180px;animation:fade 1.2s .1s var(--ease) both}
.jn-hero .k{display:flex;align-items:center;gap:10px}
.jn-live{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(4,0,221,.5);animation:jn-pulse 2s infinite}
@keyframes jn-pulse{70%{box-shadow:0 0 0 9px rgba(4,0,221,0)}100%{box-shadow:0 0 0 0 rgba(4,0,221,0)}}
.jn-hero h1{font-size:clamp(2.3rem,9vw,5.6rem);line-height:.95;margin:14px 0 22px;max-width:12ch}
.jn-lead{font-size:clamp(1rem,3.9vw,1.2rem);line-height:1.55;color:var(--jn-ink);max-width:56ch}

/* sections */
.jn-sec{max-width:1180px;scroll-margin-top:90px}
.jn-sec+.jn-sec{margin-top:clamp(48px,7vw,96px)}
.jn-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px}
.jn-head h2{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1}

/* position cards: full cards on wide screens, FAQ-style tiles on phones */
.jn-roles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:860px){.jn-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.jn-role{display:flex;flex-direction:column;border-radius:var(--jn-r);background:rgba(255,255,255,.55);color:var(--jn-ink);transition:background .6s var(--ease)}
.jn-role:hover,.jn-role.open{background:rgba(255,255,255,.85)}
.jn-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;padding:18px 18px 18px 20px;color:inherit;font:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.jn-q-txt{display:flex;flex-direction:column;gap:8px;min-width:0;transition:transform .7s var(--ease)}
.jn-role-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.jn-chip{font-size:.74rem;padding:5px 10px;border-radius:999px;background:rgba(4,0,221,.07);color:var(--blue);white-space:nowrap}
.jn-title{display:block;font-size:clamp(1.25rem,5.4vw,1.5rem);line-height:1;color:var(--blue)}
.jn-q i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;color:var(--blue);box-shadow:inset 0 0 0 1px var(--line);transition:transform .8s var(--ease),background .6s var(--ease),color .6s var(--ease)}
.jn-q i::before,.jn-q i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:currentColor;transition:transform .8s var(--ease)}
.jn-q i::after{transform:rotate(90deg)}
.jn-role.open .jn-q i{background:var(--blue);color:var(--paper);transform:rotate(180deg)}
.jn-role.open .jn-q i::after{transform:rotate(0deg)}
.jn-role.open .jn-q-txt{transform:translateX(6px)}
@media (max-width:859px){.jn-q-txt{gap:6px}}
.jn-role-top .jn-chips{display:none}
@media (max-width:420px){.jn-chips .jn-chip{font-size:.7rem;padding:5px 9px}}
.jn-chips.jn-where{margin-bottom:16px}


/* the eased open and shut, same curve as the FAQ */
.jn-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .85s cubic-bezier(.22,1,.36,1)}
.jn-role.open .jn-a{grid-template-rows:1fr}
.jn-a>div{overflow:hidden;min-height:0}
.jn-a-in{display:flex;flex-direction:column;align-items:flex-start;padding:2px 20px 22px 26px;opacity:0;transform:translateY(-10px);filter:blur(5px);transition:opacity .35s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .4s ease}
.jn-role.open .jn-a-in{opacity:1;transform:none;filter:none;transition:opacity .5s ease .14s,transform .9s cubic-bezier(.22,1,.36,1) .06s,filter .55s ease .14s}
.jn-sum{line-height:1.65;max-width:52ch}
.jn-lk{margin:20px 0 10px}
.jn-role ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px;line-height:1.55}
.jn-role li{position:relative;padding-left:20px}
.jn-role li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:2px;background:var(--blue)}
@media (hover:hover) and (max-width:859px){.jn-q:hover .jn-q-txt{transform:translateX(6px)}}

/* wide screens: plain cards, always open, no toggle */
@media (min-width:860px){
  .jn-q{cursor:default;padding:36px 36px 0;grid-template-columns:minmax(0,1fr)}
  .jn-q i{display:none}
  .jn-q-txt,.jn-role.open .jn-q-txt{transform:none;gap:18px}
  .jn-title{font-size:clamp(1.6rem,2.6vw,2.3rem)}
  .jn-chip{font-size:.78rem;padding:6px 11px}
  .jn-a,.jn-role.open .jn-a{grid-template-rows:1fr;transition:none}
  .jn-a-in,.jn-role.open .jn-a-in{opacity:1;transform:none;filter:none;transition:none;padding:14px 36px 32px;height:100%}
  .jn-a>div{display:flex;flex-direction:column}
  
  .jn-role{height:100%}
  .jn-a{flex:1}
}
.jn-none{padding:28px;border-radius:var(--jn-r);background:rgba(255,255,255,.55);color:var(--jn-ink);line-height:1.6}

/* application card */
.jn-card{position:relative;padding:28px 22px 30px;border-radius:var(--jn-r);background:rgba(255,255,255,.55);color:var(--jn-ink)}
@media (min-width:760px){.jn-card{padding:48px}}
.jn-card-head{margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.jn-card-head h2{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1;color:var(--blue);margin:12px 0 14px}
.jn-card-head p:last-child{line-height:1.6;max-width:60ch}
.jn-req{color:var(--blue);font-weight:600}

/* form */
.jn-form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 20px}
@media (min-width:760px){.jn-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.jn-wide{grid-column:1/-1}}
.jn-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.jn-field>label:not(.jn-drop),.jn-label{font-size:.9rem;font-weight:500;color:var(--blue);letter-spacing:-.005em}
.jn-field>label:not(.jn-drop) span,.jn-label span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--mute);opacity:.8;margin-left:6px}
.jn-field input,.jn-field select,.jn-field textarea{width:100%;font:inherit;font-size:1rem;color:#14132e;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:14px;padding:14px 16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.jn-field textarea{resize:vertical;min-height:132px;line-height:1.55}
.jn-field input::placeholder{color:#9b9ac0}
.jn-field select{cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230400DD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.jn-field select{background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:12px 8px!important}
.jn-field select:invalid{color:#9b9ac0}
.jn-field input:hover,.jn-field select:hover,.jn-field textarea:hover{background-color:#fff}
.jn-field input:focus,.jn-field select:focus,.jn-field textarea:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.jn-field.err input,.jn-field.err select,.jn-field.err textarea{border-color:#d4183d;box-shadow:0 0 0 3px rgba(212,24,61,.1)}

/* resume drop zone */
.jn-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:34px 20px;border:1.5px dashed var(--faint);border-radius:16px;background:rgba(255,255,255,.4);color:var(--mute);font-size:.95rem;cursor:pointer;transition:border-color .4s var(--ease),background .4s var(--ease)}
.jn-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.jn-drop svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.jn-drop b{font-weight:500;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.jn-drop:hover,.jn-drop.over{border-color:var(--blue);background:rgba(4,0,221,.04)}
.jn-drop:hover svg,.jn-drop.over svg{transform:translateY(-3px)}
.jn-drop:focus-within{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.jn-drop.has{border-style:solid;border-color:var(--blue)}
.jn-drop.has b{text-decoration:none;color:#14132e}

/* submit row */
.jn-submit{display:flex;flex-direction:column-reverse;align-items:stretch;gap:14px;padding-top:6px}
@media (min-width:760px){.jn-submit{flex-direction:row;justify-content:space-between;align-items:center}}
.jn-submit .btn{justify-content:space-between;cursor:pointer;border:0;font-family:inherit}
.jn-submit .btn:disabled{opacity:.6;pointer-events:none}
.jn-msg{font-size:.9rem;line-height:1.5;color:var(--mute);min-height:1.2em}
.jn-msg.bad{color:#d4183d}
.jn-form.busy .jn-field{opacity:.6;pointer-events:none;transition:opacity .4s}

/* success */
.jn-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:12px 0 4px;outline:none}
.jn-done[hidden],.jn-form[hidden]{display:none}
.jn-tick{width:56px;height:56px;border-radius:50%;background:var(--blue);display:grid;place-items:center;animation:jn-pop .7s var(--ease) both}
.jn-tick svg{width:26px;height:26px;fill:none;stroke:var(--paper);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes jn-pop{from{transform:scale(.4);opacity:0}}
.jn-done h3{font-size:clamp(1.8rem,6vw,2.8rem);line-height:1;color:var(--blue);margin-top:6px}
.jn-done p{line-height:1.6;max-width:50ch;margin-bottom:8px}

/* ease in */
@media (prefers-reduced-motion:no-preference){
  .jn-role,.jn-card{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),background .6s var(--ease)}
  .jn-role.in,.jn-card.in{opacity:1;transform:none}
  .jn-role:nth-child(2){transition-delay:.12s,.12s,0s}
}
@media (prefers-reduced-motion:reduce){.jn-live{animation:none}}

/* role actions: apply + share */
.jn-role{scroll-margin-top:110px}
.jn-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (min-width:860px){.jn-a-in .jn-acts{margin-top:auto}}
.jn-share{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 15px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--blue);font:inherit;font-size:.9rem;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .6s var(--ease),color .6s var(--ease),box-shadow .6s var(--ease)}
.jn-share svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.jn-share:hover{background:var(--blue);color:var(--paper);box-shadow:inset 0 0 0 1px var(--blue)}
.jn-share:hover svg{transform:translateY(-2px)}
.jn-share.done{background:var(--blue);color:var(--paper);box-shadow:inset 0 0 0 1px var(--blue)}
.jn-share:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (max-width:759px){.jn-acts{flex-wrap:nowrap}.jn-share{width:48px;height:48px;padding:0;justify-content:center;flex:none}.jn-share span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.jn-share.done span{position:static;width:auto;height:auto;clip:auto}.jn-share.done{width:auto;padding:0 16px}}

/* a role opened from a shared link glows once so people see where they landed */
.jn-role.flash{animation:jn-flash 2.4s .5s var(--ease) both}
@keyframes jn-flash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 2px var(--flash,#0400dd)}}

/* how we hire */

/* posted date sits on the role's label line */
.jn-posted{white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .jn-steps li{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .jn-steps li.in{opacity:1;transform:none}
  .jn-steps li:nth-child(2){transition-delay:.1s}
  .jn-steps li:nth-child(3){transition-delay:.2s}
}


/* pay: a chip beside the location, and a "How it pays" section in the same style as the list above it */
.jn-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.jn-chips.jn-where{justify-content:flex-start}
.jn-chip-pay{background:var(--blue);color:var(--paper)}
.jn-pay{line-height:1.65;max-width:52ch;margin-bottom:24px}
.jn-nb{white-space:nowrap}

/* how we hire: three equal cards, one rhythm. Number + tag on top, one-line title, body. */
.jn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;counter-reset:none}
@media (min-width:760px){.jn-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.jn-steps li{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;border-radius:var(--jn-r);background:rgba(255,255,255,.55);color:var(--jn-ink)}
@media (min-width:760px){.jn-steps li{gap:18px;padding:30px 30px 34px}}
.jn-step-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jn-num{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--blue)}
.jn-steps li:nth-child(2) .jn-num{background:var(--blue);color:var(--paper);box-shadow:none}
.jn-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:6px 10px;border-radius:999px;background:rgba(4,0,221,.06);white-space:nowrap}
.jn-steps h3{font-family:var(--wide);font-stretch:115%;font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(1.35rem,2vw,1.75rem);color:var(--blue);white-space:nowrap;margin-top:4px}
.jn-steps h3 em{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.01em;font-size:1.12em;line-height:0}
/* every title gets the same box, so the dividers and body text line up across the cards */
.jn-steps h3{height:1.15em;line-height:1.15}
.jn-steps p{font-size:.98rem;line-height:1.6;max-width:34ch}
@media (min-width:760px){.jn-steps p{padding-top:16px;border-top:1px solid var(--line)}}
@media (max-width:759px){
  .jn-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:18px 18px 20px}
  .jn-step-top{display:contents}
  .jn-num{grid-row:1/4;grid-column:1;align-self:start}
  .jn-tag{grid-column:2;justify-self:start;padding:4px 9px;font-size:.62rem}
  .jn-steps h3{grid-column:2;font-size:1.3rem;margin-top:2px}
  .jn-steps p{grid-column:2;font-size:.95rem;line-height:1.55}
}
.jn-role ul+.jn-lk{margin-top:0}