/* ============================================================
   Manar Studios: Careers.
   White, centred and corporate: Inter at working weights, a plain
   heading, the role and the qualifications in two panels, then an
   Apply button that goes to getsal.online/careers. No cubes, no
   animation. Loaded after base.css (type and the pill) and forms.css
   (the button).
   ============================================================ */

:root{ --paper:#FFFFFF; --rule:#E3E6EC; --panel:#F7F8FA; }
html,body{ background:var(--paper); }
body{ color:var(--navy); min-height:100svh; }
::selection{ background:rgba(10,98,245,.18); }

/* text fades out under the pill instead of scrolling into it (desktop, where the pill stays) */
@media (min-width: 900px){ body::before{
  content:""; position:fixed; z-index:2; left:0; right:0; top:0; height:clamp(96px, 15svh, 140px);
  pointer-events:none; background:var(--paper);
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent);
          mask-image:linear-gradient(to bottom, #000 30%, transparent);
} }

.sheet{
  width:min(940px, calc(100vw - 48px)); margin:0 auto; text-align:center;
  padding:clamp(140px, 22svh, 210px) 0 clamp(110px, 18svh, 180px);
}

.head{ max-width:36em; margin:0 auto; }
.title{
  margin:0 0 18px;
  font-size:clamp(1.7rem, 2.8vw, 2.3rem); font-weight:600; line-height:1.15; letter-spacing:-.025em;
}
.lede{ margin:0; font-size:clamp(1.02rem, 1.25vw, 1.15rem); font-weight:400; line-height:1.6; letter-spacing:-.008em; }
.lede b{ font-weight:600; }

/* ── the two panels ──────────────────────────────────── */
.cols{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:clamp(44px, 7svh, 72px);
}
.panel{
  padding:clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 32px);
  border:1px solid var(--rule); border-radius:12px; background:var(--panel);
  text-align:center;
}
.label{
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--rule);
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
}
.text{ margin:20px 0 0; font-size:.98rem; font-weight:400; line-height:1.6; }

/* the role: four facts, each on its own line */
.specs{ margin:0; display:flex; flex-direction:column; }
.specs div{ padding:14px 0; border-top:1px solid var(--rule); }
.specs div:first-child{ border-top:0; padding-top:0; }
.specs dt{ margin-bottom:4px; font-size:.86rem; font-weight:400; }
.specs dd{ margin:0; font-size:1.02rem; font-weight:600; letter-spacing:-.012em; }

/* the qualifications: one requirement per line */
.quals{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.quals li{ padding:14px 0; border-top:1px solid var(--rule); font-size:.98rem; font-weight:400; line-height:1.5; }
.quals li:first-child{ border-top:0; padding-top:0; }

/* ── apply: a button in the middle that goes to Getsal's careers page ── */
.cta{ margin-top:clamp(44px, 7svh, 72px); }
.cta .button{ --f-btn:var(--navy); --f-btn-ink:#FFFFFF; padding:17px 40px; text-decoration:none; }

@media (max-width: 899px){
  .sheet{ width:calc(100vw - 40px); padding-top:clamp(120px, 20svh, 170px); }
  .cols{ grid-template-columns:1fr; }
}