/* sonr.co /join: Join the network. Page layout only; tokens and shared components live in site.css. */

/* ---------- Hero: text left, the member and the car in the right half of the photo ---------- */
.join-hero .bg{overflow:hidden}
/* The frame is wider than the hero so its right edge crops away and the member moves clear of the copy. */
.join-hero .bg img{width:115%;max-width:none;object-position:0% 70%;transform-origin:64% 56%;animation:join-drift 32s var(--ease-in-out) -11s infinite alternate}
@keyframes join-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
.join-hero .copy{max-width:560px}
.join-hero h1{font-size:clamp(40px,4.6vw,68px)}
.join-hero h1 .ln{display:block}
.join-hero .lede{max-width:44ch;color:var(--text-primary)}
.join-hero .actions .btn svg{transition:transform .35s var(--ease-out)}
.join-hero .actions .btn:hover svg{transform:translateY(3px)}
@media (max-width:720px){
  .join-hero .bg img{width:100%;object-position:58% 60%}
}

/* ---------- Pick your role: three cards ---------- */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.role{display:flex;flex-direction:column;padding:clamp(26px,2.8vw,40px)}
.role-icon{width:64px;height:64px;margin-bottom:30px;overflow:visible}
.role-icon path,.role-icon circle{fill:none;stroke:var(--blue-200);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.role-icon .ic-soft{stroke-opacity:.5}
.role-icon .ic-dash{stroke-dasharray:2.4 4.6;stroke-opacity:.8}
.role-icon .ic-gear{stroke-dasharray:6.2 4}
.role-icon .ic-dot{fill:var(--accent);stroke:none}
.role-icon .pulse{transform-box:fill-box;transform-origin:center;animation:role-pulse 6.4s var(--ease-in-out) infinite}
.role:nth-child(2) .role-icon .pulse{animation-delay:-2.1s}
.role-icon .spin{transform-box:fill-box;transform-origin:center;animation:sweep 28s linear infinite}
@keyframes role-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.12);opacity:.42}}
.role h3{font-family:var(--serif);font-weight:600;font-size:clamp(28px,2.5vw,34px);line-height:1.1;letter-spacing:-.01em}
.role .tag{margin-top:8px;font-weight:700;font-size:18px;line-height:1.4}
.role .body{margin-top:14px;margin-bottom:30px;color:var(--text-secondary);max-width:40ch}
.role .needs{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.role .needs .mono{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.06em;color:var(--text-secondary)}
.role .needs p{font-size:16px;line-height:1.5;max-width:40ch}
/* the five parts of each card share rows, so the three "Needs" rules line up */
@supports (grid-template-rows:subgrid){
  .roles{grid-template-rows:repeat(5,auto)}
  .role{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .role .needs{margin-top:0}
}
@media (max-width:900px){
  .roles{grid-template-columns:1fr;grid-template-rows:none}
  .role{display:flex;grid-row:auto}
  .role .needs{margin-top:auto}
  .role .body,.role .needs p{max-width:56ch}
}

/* ---------- How jobs work: a horizontal numbered timeline that draws itself ---------- */
.jobs-head{margin-bottom:clamp(48px,6vw,84px)}
.timeline{--g:clamp(18px,2.4vw,34px);--node:46px;position:relative}
.tl-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g)}
.tl-line{position:absolute;top:calc(var(--node) / 2 - 1px);left:calc(var(--node) / 2);right:calc((100% - 4 * var(--g)) / 5 - var(--node) / 2);height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 11px)}
.tl-line i{position:absolute;inset:0;background:var(--accent);opacity:.55;transform:scaleX(0);transform-origin:left center;transition:transform 2.2s var(--ease-in-out) .35s}
.in .tl-line i{transform:scaleX(1)}
/* the living element: one soft signal travelling the route */
.tl-run{position:absolute;left:0;right:0;top:-3px;height:8px;overflow:hidden;opacity:0;transition:opacity .8s var(--ease-out) 2.5s}
.in .tl-run{opacity:1}
.tl-run>span{position:absolute;inset:0;animation:tl-run-x 9s var(--ease-in-out) -3s infinite}
.tl-run b{position:absolute;left:0;top:1px;width:6px;height:6px;border-radius:50%;background:var(--text-primary)}
@keyframes tl-run-x{0%{transform:translateX(-8px);opacity:0}12%{opacity:.75}86%{opacity:.75}100%{transform:translateX(100%);opacity:0}}
.tl-node{display:grid;place-items:center;width:var(--node);height:var(--node);margin-bottom:26px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line-strong);transition:border-color .6s var(--ease-out) calc(.4s + var(--n,0) * .42s),background-color .6s var(--ease-out) calc(.4s + var(--n,0) * .42s)}
.tl-node .step-num{font-size:12px;color:var(--text-secondary);transition:color .6s var(--ease-out) calc(.4s + var(--n,0) * .42s)}
.in .tl-node{border-color:var(--accent-muted)}
.in .tl-node .step-num{color:var(--accent)}
/* the one emphasis: the step where you get paid */
.in .tl-step:last-child .tl-node{background:var(--accent);border-color:var(--accent)}
.in .tl-step:last-child .tl-node .step-num{color:var(--on-accent)}
.tl-step h3{font-family:var(--serif);font-weight:600;font-size:clamp(21px,1.75vw,25px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.tl-step p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--text-secondary);max-width:26ch}
@media (max-width:860px){
  .tl-steps{grid-template-columns:1fr;gap:34px}
  .tl-step{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);column-gap:20px;align-items:start}
  .tl-node{grid-row:1 / span 2;margin:0}
  .tl-step h3{padding-top:10px}
  .tl-step p{max-width:40ch}
  .tl-line{top:calc(var(--node) / 2);bottom:0;left:calc(var(--node) / 2 - 1px);right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-strong) 0 4px,transparent 4px 11px)}
  .tl-line i{transform:scaleY(0);transform-origin:center top}
  .in .tl-line i{transform:scaleY(1)}
  .tl-run{left:-3px;right:auto;top:0;bottom:0;width:8px;height:auto}
  .tl-run>span{animation-name:tl-run-y}
  .tl-run b{left:1px;top:0}
  /* the route stops at the last node: the panel colour covers the run below it */
  .tl-step:last-child::after{content:"";position:absolute;left:0;top:var(--node);bottom:-2px;width:var(--node);background:var(--panel)}
}
@keyframes tl-run-y{0%{transform:translateY(-8px);opacity:0}12%{opacity:.75}86%{opacity:.75}100%{transform:translateY(100%);opacity:0}}

/* ---------- Why members join: three statements, large type, no cards ---------- */
.why{overflow:hidden;overflow:clip}
.why .wrap{position:relative;z-index:1}
.why-rings{position:absolute;right:-200px;top:50%;width:680px;height:680px;margin-top:-340px;pointer-events:none}
.why-rings svg{width:100%;height:100%;overflow:visible}
.why-rings circle{fill:none;stroke:rgba(157,187,236,.16);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:why-ripple 13.5s var(--ease-out) infinite}
.why-rings circle:nth-child(2){animation-delay:-4.5s}
.why-rings circle:nth-child(3){animation-delay:-9s}
@keyframes why-ripple{0%{transform:scale(.16);opacity:0}14%{opacity:1}100%{transform:scale(1);opacity:0}}
.why-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.why-list li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:12px;padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line)}
.why-list li:nth-child(2){padding-left:clamp(0px,7vw,104px)}
.why-list li:nth-child(3){padding-left:clamp(0px,14vw,208px)}
.why-list .mono{font-size:12px;color:var(--accent)}
.why-list p{font-family:var(--serif);font-weight:600;font-optical-sizing:auto;font-size:clamp(32px,5vw,68px);line-height:1.04;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.why-trust{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:18px;font-weight:600;line-height:1.45}
.why-trust svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--blue-200);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){
  .why-rings{right:-260px;top:0;margin-top:-120px;width:520px;height:520px}
  .why-list li{grid-template-columns:40px minmax(0,1fr)}
  .why-list li:nth-child(2),.why-list li:nth-child(3){padding-left:0}
  .why-trust{align-items:flex-start;font-size:17px}
}

/* ---------- Sign-up form ---------- */
.signup-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
.signup-side{position:sticky;top:calc(var(--nav-h) + 40px)}
/* step rail: mirrors the active step in forms.js */
.rail{list-style:none;margin:44px 0 0;padding:0}
.rail li{position:relative;padding:0 0 22px 32px;font-size:16px;line-height:1.4;color:var(--text-secondary);transition:color .4s var(--ease-out)}
.rail li::before{content:"";position:absolute;left:5px;top:18px;bottom:-2px;width:1px;background:var(--line-strong)}
.rail li:last-child{padding-bottom:0}
.rail li:last-child::before{display:none}
.rail i{position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--canvas);transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out)}
.rail i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--accent);opacity:0}
.rail li.done i{background:var(--text-secondary);border-color:var(--text-secondary)}
.rail li.current{color:var(--text-primary);font-weight:600}
.rail li.current i{background:var(--accent);border-color:var(--accent)}
.rail li.current i::after{animation:rail-ping 4.4s var(--ease-out) -1s infinite}
@keyframes rail-ping{0%{transform:scale(.45);opacity:.85}60%,100%{transform:scale(1.5);opacity:0}}
.sform fieldset.fstep{border:0;margin:0;padding:0;min-width:0}
.fstep-title{padding:0}
.fstep>.fields{margin-top:28px}
.field>label.check{font-weight:400;line-height:1.5}
.check b{font-weight:700}
.check a{color:var(--text-primary);text-decoration-color:var(--accent);text-underline-offset:3px}
.field legend .opt,.field>label .opt{font-size:14px}
.form-done .done-mark{width:84px}
.form-done p{margin-top:14px;color:var(--text-secondary);max-width:52ch}
.form-done p .mono{color:var(--text-primary);font-size:.92em}
.form-done .btn{margin-top:28px}
@media (max-width:900px){
  .signup-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .signup-side{position:relative;top:0}
  .rail{display:none}
}
@media (max-width:640px){.form-nav .spacer{display:none}}

/* ---------- FAQ ---------- */
#faq{overflow:hidden;overflow:clip}
#faq .wrap{position:relative;z-index:1}
.faq-radar{position:absolute;left:-260px;bottom:-300px;width:760px;height:760px;pointer-events:none}
.faq-radar svg{width:100%;height:100%}
.faq-radar circle{fill:none;stroke:rgba(157,187,236,.07);stroke-width:1}
.faq-radar .sweep{transform-box:view-box;transform-origin:380px 380px;animation:sweep 64s linear -19s infinite}
.faq-radar .sweep line{stroke:var(--accent);stroke-opacity:.1;stroke-width:1.5}
@media (max-width:860px){.faq-radar{left:auto;right:-420px;bottom:-380px}}

/* ---------- Reduced motion: every drawn line finished, every loop still ---------- */
@media (prefers-reduced-motion:reduce){
  .join-hero .bg img{transform:none}
  .tl-line i{transform:none}
  .tl-run{display:none}
  .tl-node{border-color:var(--accent-muted)}
  .tl-node .step-num{color:var(--accent)}
  .tl-step:last-child .tl-node{background:var(--accent);border-color:var(--accent)}
  .tl-step:last-child .tl-node .step-num{color:var(--on-accent)}
  .why-rings circle{opacity:1}
  .why-rings circle:nth-child(1){transform:scale(.4)}
  .why-rings circle:nth-child(2){transform:scale(.7)}
  .why-rings circle:nth-child(3){transform:scale(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  .tl-line i{transform:none}
}

/* ---------- Loops run only while their section is on screen (join.js toggles .on); site.js pauses hidden tabs ---------- */
[data-live]:not(.on) .bg img,
[data-live]:not(.on) .role-icon .pulse,
[data-live]:not(.on) .role-icon .spin,
[data-live]:not(.on) .tl-run>span,
[data-live]:not(.on) .why-rings circle,
[data-live]:not(.on) .rail li i::after,
[data-live]:not(.on) .faq-radar .sweep{animation-play-state:paused}