/* ============================================================
   Careers page. No mockup exists in the handoff - built from the
   sitewide design tokens and the patterns of the other pages.
   ============================================================ */

/* Bottom padding keeps the closing sentence off the edge of the grey band */
.job-intro{padding:32px max(56px,calc((100% - var(--content-w))/2)) 44px;animation:sm-rise .85s ease .46s both}
.job-intro p{max-width:820px;font:400 15.5px/1.75 var(--font);color:var(--ink-2)}
/* Selector is doubled up so it outranks ".job-intro p" - otherwise the emphasis
   never applies and the whole intro renders as one flat grey slab. */
.job-intro p.job-intro-strong{margin-top:18px;color:var(--ink);font-weight:600}

/* Requirement / offer cards */
.job-title{margin:10px 0 0;font:700 34px var(--font);letter-spacing:-.02em}
.job-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.job-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:28px;transition:transform .35s,box-shadow .35s}
/* Pointer-only: on touch :hover sticks after a tap and leaves the card raised. */
@media (hover:hover) and (pointer:fine){
  .job-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
}
.job-icon{width:48px;height:48px;border-radius:12px;background:var(--indigo-tint);display:grid;place-items:center}
.job-icon svg{width:24px;height:24px}
.job-card h3{margin:18px 0 0;font:700 19px var(--font)}
.job-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:18px 0 0;padding:0;font:400 14.5px/1.55 var(--font);color:#454060}
.job-list li{display:flex;gap:10px}
.job-list svg{width:15px;height:15px;flex:none;margin-top:3px}
.job-list small{display:block;margin-top:4px;font:400 13px var(--font);color:var(--ink-3)}

/* Apply band */
.apply{margin:56px max(56px,calc((100% - var(--content-w))/2));background:var(--indigo-dark);color:#fff;border-radius:var(--r-band);padding:44px 52px}
.apply h2{font:700 30px/1.2 var(--font);letter-spacing:-.02em}
.apply p{margin-top:12px;max-width:680px;font:400 15px/1.65 var(--font);color:rgba(255,255,255,.7)}
.apply-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* Doubled selector so it outranks ".apply p". The opacity is higher than the
   original .45 draft because .45 on the dark indigo fails the readability bar. */
.apply p.apply-note{margin-top:24px;max-width:680px;font:400 13px/1.6 var(--font);color:rgba(255,255,255,.62)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .job-intro{padding:28px 32px 36px}
  .apply{margin:40px 32px;padding:36px 40px}
}
@media (max-width:760px){
  /* Hero paragraph and intro are the same colour and nearly the same size, so
     without a rule and real paragraph spacing they merge into one text wall. */
  .job-intro{margin-top:28px;padding:28px 20px 32px;border-top:1px solid var(--border);animation-delay:.2s}
  .job-intro p{font-size:15px;line-height:1.7}
  .job-intro p+p{margin-top:18px}
  .job-title{font-size:26px}
  .job-grid{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .job-card{padding:24px}
  .job-card h3{font-size:18.5px}
  /* Item gap must stay larger than the leading of a wrapped item */
  .job-list{line-height:1.62;gap:14px}
  .job-list svg{margin-top:4px}
  /* --ink-3 is too faint to read on a phone screen at 13px */
  .job-list small{color:var(--ink-2)}
  /* Extra bottom margin so this dark band and the dark footer CTA band below it
     do not read as one block split in half. */
  .apply{margin:40px 20px 48px;padding:28px 24px;border-radius:24px}
  .apply h2{font-size:24px}
  /* Both actions stay: the paragraph above sends the visitor to "Контакти" and
     that route must exist on a phone too. They stack full width, the contacts
     pill first, the mailto below it. */
  .apply-actions{gap:12px;margin-top:22px}
  .apply-actions .btn{width:100%;text-align:center}
}
@media (max-width:430px){
  .job-title{font-size:23px}
  .apply h2{font-size:22px}
}