/* jobs.css: only /jobs and its locale copies (CORE-748, 22.10.2026). A page stylesheet on purpose, like
   trust.css and integrations.css: the asset budget (scripts/check-asset-budget.mjs) leaves no room in styles.css.
   "How we work" is the heading beside four ways of working (2 x 2, open on the page ground, a hairline above
   each item inside the list, no plates). The application is one calm white plate, centred, as the close.
   Flat: no outlines or frames, separation by tone, hairlines only inside the list.
   Risks / what goes stale silently: the stacked column (max 628px, everything left) copies the trust.css
   pattern; if the daylight pages change their phone alignment, change both. */

/* ---------- how we work: heading beside a 2 x 2 list ---------- */
.jb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.jb-split .section-head { margin-bottom: 0; }
.jb-ways { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 64px); }
.jb-ways li { padding-top: 22px; border-top: 1px solid rgba(13,13,13,0.12); }
.jb-ways h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.22; color: #101010; text-wrap: balance; }
.jb-ways p { margin: 0; max-width: 40ch; font-size: 15.5px; line-height: 1.6; color: rgba(13,13,13,0.62); text-wrap: pretty; }

/* ---------- the application: one white plate, centred ---------- */
.day-plate.jb-apply { max-width: 880px; margin: 0 auto; align-items: center; text-align: center; gap: 16px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px); }
.jb-apply .day-close__h { max-width: 20ch; text-wrap: balance; }
.jb-apply p { max-width: 54ch; }
.jb-apply .btn { margin-top: 8px; }
.jb-apply .day-plate__note { margin-top: 4px; }

/* ---------- tablet and phone: one centred column, everything inside it left (as /trust) ---------- */
@media (max-width: 860px) {
  .container.jb-split { max-width: 628px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .jb-split .section-head, .jb-split .section-head > h2 { margin-left: 0; margin-right: 0; text-align: left; }
  .day-plate.jb-apply { max-width: 628px; } /* same width as the column above */
}
@media (max-width: 560px) {
  .jb-ways { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .jb-ways li { padding-top: 20px; }
  .day-plate.jb-apply { padding: 32px 22px; }
}