/* Homepage "Why join" bento grid (build.php why_join(), 28 Oct). Builds on site.css tokens. */
.wj-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:48px;}
.wj-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:4px;max-width:18ch;}
.wj-head p{font-size:18px;color:var(--tx2);line-height:1.6;max-width:42ch;}

.wj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.wj-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;transition:border-color .2s,transform .25s var(--ease);}
.wj-card:hover{border-color:var(--red-line);}
.wj-card h3{font-size:19px;line-height:1.3;letter-spacing:-.015em;}
.wj-card p{font-size:15px;color:var(--tx2);line-height:1.6;}
.wj-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-dk);margin-bottom:6px;flex:none;}
.wj-ic svg{width:20px;height:20px;}
.wj-ic.gold{background:var(--gold-soft);color:#8a6a12;}

/* layout: referrals lead, then a row of three, then courses + points */
.wj-ref{grid-column:span 7;grid-row:span 2;}
.wj-dir{grid-column:span 5;}
.wj-loc{grid-column:span 5;}
.wj-mm,.wj-men,.wj-edu{grid-column:span 4;}
.wj-pts{grid-column:span 12;flex-direction:row;align-items:center;gap:22px;}

/* the referral card: dark, with a preview of a real-looking referral */
.wj-ref{background:#0b0809;border-color:#0b0809;color:#fff;padding:34px;gap:28px;}
.wj-ref::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 100% 0%,rgba(227,64,84,.38),transparent 65%);pointer-events:none;}
.wj-ref>*{position:relative;}
.wj-ref h3{color:#fff;font-size:clamp(24px,2.4vw,30px);max-width:16ch;}
.wj-ref p{color:rgba(255,255,255,.72);font-size:16px;max-width:46ch;}
.wj-copy{display:flex;flex-direction:column;gap:12px;}
.wj-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff8a98;background:rgba(227,64,84,.16);padding:6px 12px;border-radius:999px;}
.wj-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700;font-size:15px;color:#fff;}
.wj-link svg{width:17px;height:17px;transition:transform .2s;}
.wj-link:hover svg{transform:translateX(3px);}

.wj-mock{position:relative;margin-top:auto;padding:0 10px 14px 0;}
.mk-card{position:relative;z-index:1;background:#fff;color:var(--ink);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 50px -22px rgba(0,0,0,.7);transform:rotate(-1.2deg);}
.mk-back{position:absolute;inset:14px -2px 0 12px;z-index:0;background:rgba(255,255,255,.14);transform:rotate(2.2deg);box-shadow:none;}
.mk-top{display:flex;justify-content:space-between;align-items:center;}
.mk-new{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);padding:4px 10px;border-radius:999px;}
.mk-ex{font-size:11.5px;color:var(--tx3);font-weight:600;}
.mk-card b{font-size:17px;line-height:1.3;letter-spacing:-.01em;}
.mk-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--tx2);}
.mk-meta svg{width:14px;height:14px;color:var(--red);}
.mk-meta span{color:var(--tx3);}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px;}
.mk-chips span{font-size:12px;font-weight:600;color:var(--tx);background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:999px;}
.mk-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--tx2);}
.mk-btn{background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px;}

/* small visuals inside the other cards */
.mk-search{margin-top:auto;display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);}
.mk-search span{font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:999px;}
.mk-search em{margin-left:auto;font-style:normal;font-size:13px;font-weight:700;color:#fff;background:var(--red);padding:6px 14px;border-radius:999px;}
.wj-stat{font-size:clamp(40px,4.4vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);margin-top:4px;}
.wj-stat+h3{margin-top:-2px;}
.mk-date{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-left:3px solid var(--red);background:var(--paper);border-radius:0 12px 12px 0;}
.mk-date b{font-size:15px;color:var(--ink);}
.mk-date span{font-size:13px;color:var(--tx2);}

.wj-pts{background:linear-gradient(90deg,var(--gold-soft),#fff 70%);border-color:#efe0b0;}
.wj-pts .wj-ic{margin:0;width:48px;height:48px;}
.wj-pts-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.mk-level{flex:0 0 220px;display:flex;flex-direction:column;gap:8px;}
.mk-level div{display:flex;justify-content:space-between;font-size:13px;}
.mk-level b{color:var(--ink);}
.mk-level span{color:var(--tx2);}
.mk-level i{display:block;height:8px;border-radius:999px;background:#fff;border:1px solid #efe0b0;overflow:hidden;}
.mk-level s{display:block;height:100%;background:var(--gold);border-radius:999px;text-decoration:none;}

.wj-note{margin-top:24px;text-align:center;font-size:14px;color:var(--tx2);}
.wj-note a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--red-dk);}
.wj-note a svg{width:15px;height:15px;}

@media (max-width:980px){
  .wj-head{grid-template-columns:1fr;align-items:start;}
  .wj-ref{grid-column:span 12;grid-row:auto;}
  .wj-dir,.wj-loc{grid-column:span 6;}
  .wj-mm,.wj-men,.wj-edu{grid-column:span 6;}
  .wj-edu{grid-column:span 12;}
}
@media (max-width:640px){
  .wj-head{margin-bottom:32px;}
  .wj-head p{font-size:16.5px;}
  .wj-grid{gap:12px;}
  .wj-card,.wj-dir,.wj-loc,.wj-mm,.wj-men,.wj-edu{grid-column:span 12;padding:22px;}
  .wj-ref{padding:24px;gap:22px;}
  .mk-card{transform:none;padding:16px;}
  .mk-back{display:none;}
  .wj-pts{flex-direction:column;align-items:flex-start;gap:14px;}
  .mk-level{flex:none;width:100%;}
}
@media (prefers-reduced-motion:reduce){.wj-link svg{transition:none;}}