/* Momo Jord — Återförsäljare (recruitment) editorial page.
   template-mj-aterforsaljare.php. Scoped .mj-scope. .ed-hero comes from the
   shared editorial CSS; this adds the intro lede, criteria cards, the
   numbered steps and the closing CTA band. */

.mj-scope .ret-page .ed-hero{ min-height:480px; }

/* shared section heads */
.mj-scope .ret-head{ max-width:680px; margin:0 0 40px; }
.mj-scope .ret-head .eyebrow{ display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px; }
.mj-scope .ret-head h2{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(32px,4.4vw,56px); letter-spacing:-.02em; line-height:1.03; margin:0; }
.mj-scope .ret-head h2 em{ font-style:italic; color:var(--brand); }
.mj-scope .ret-head p{ margin:16px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.6; }

/* intro lede */
.mj-scope .ret-intro{ padding:80px 0 16px; }
.mj-scope .ret-lede{ max-width:760px; }
.mj-scope .ret-eyebrow{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 18px; }
.mj-scope .ret-big{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(26px,3.4vw,40px); line-height:1.18; letter-spacing:-.012em; color:var(--ink); margin:0 0 20px; }
.mj-scope .ret-big em{ font-style:italic; color:var(--brand); }
.mj-scope .ret-sub{ color:var(--ink-soft); font-size:17px; line-height:1.7; max-width:62ch; margin:0; }

/* criteria cards */
.mj-scope .ret-criteria{ padding:72px 0; }
.mj-scope .ret-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mj-scope .ret-card{ border:1px solid var(--hairline); border-radius:10px; padding:28px 24px; background:var(--card); }
.mj-scope .ret-card .ic{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--brand-soft); color:var(--brand); margin-bottom:18px; }
.mj-scope .ret-card h3{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:22px; letter-spacing:-.005em; line-height:1.1; margin:0 0 10px; color:var(--ink); }
.mj-scope .ret-card p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }

/* numbered steps */
.mj-scope .ret-steps{ padding:0 0 80px; }
.mj-scope .ret-steplist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; border-top:1px solid var(--hairline); }
.mj-scope .ret-step{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:30px 0; border-bottom:1px solid var(--hairline); }
.mj-scope .ret-step .n{ font-family:var(--ff-mono); font-size:13px; color:var(--gold); letter-spacing:.06em; padding-top:6px; }
.mj-scope .ret-step h4{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:24px; letter-spacing:-.008em; line-height:1.1; margin:0 0 8px; color:var(--ink); }
.mj-scope .ret-step p{ font-size:15px; color:var(--ink-soft); line-height:1.65; margin:0; }
.mj-scope .ret-step a{ color:var(--brand); border-bottom:1px solid color-mix(in oklab,var(--brand) 40%,transparent); }

/* closing CTA band */
.mj-scope .ret-cta-band{ padding:0 0 96px; }
.mj-scope .ret-cta{ background:var(--paper-2); border-radius:10px; padding:56px; }
.mj-scope .ret-cta > div{ max-width:620px; }
.mj-scope .ret-cta .eyebrow{ display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; }
.mj-scope .ret-cta h2{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(30px,4vw,48px); letter-spacing:-.02em; line-height:1.04; margin:0 0 16px; }
.mj-scope .ret-cta h2 em{ font-style:italic; color:var(--brand); }
.mj-scope .ret-cta p{ color:var(--ink-soft); font-size:16px; line-height:1.65; margin:0 0 24px; max-width:54ch; }
.mj-scope .ret-cta .btn-write{ display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; border:0; border-radius:999px; padding:14px 28px; font-family:var(--ff-sans); font-weight:600; font-size:15px; transition:transform .2s ease, background .2s ease; }
.mj-scope .ret-cta .btn-write:hover{ background:var(--brand-deep); color:#fff; transform:translateY(-1px); }
.mj-scope .ret-cta .ret-fineprint{ margin:22px 0 0; font-size:13px; color:var(--ink-mute); }
.mj-scope .ret-cta .ret-fineprint a{ color:var(--brand); border-bottom:1px solid currentColor; }

@media (max-width:980px){
  .mj-scope .ret-grid{ grid-template-columns:repeat(2,1fr); }
  .mj-scope .ret-steplist{ grid-template-columns:1fr; gap:0; }
  .mj-scope .ret-intro{ padding:56px 0 8px; }
  .mj-scope .ret-criteria{ padding:52px 0; }
  .mj-scope .ret-cta{ padding:40px 28px; }
}
@media (max-width:600px){
  .mj-scope .ret-grid{ grid-template-columns:1fr; }
  .mj-scope .ret-page .ed-hero{ min-height:420px; }
}