/* Job page (owner 2026-10-16: "it looks cheap … make the card wide, a separate section … align content").
   One sans family like the jobs list, one aligned column, one wide summary card. */
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fbfbff}
.job-detail-card{max-width:1040px;margin:0 auto}
.jp{--jp-ink:#111b47;--jp-muted:#5e6479;--jp-violet:#6047c6;--jp-line:#e5e7f0;--jp-soft:#f4f1ff;color:var(--jp-ink);padding:8px 0 40px}
.jp *{box-sizing:border-box}

.jp-head{padding:8px 0 0}
.jp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.jp-chips span{padding:6px 12px;border-radius:999px;background:var(--jp-soft);color:#4a33b3;font-size:.88rem;font-weight:700}
.jp h1{margin:0 0 14px;font-family:inherit;font-size:clamp(2rem,5.2vw,3.3rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:var(--jp-ink)}
.jp-company{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-size:1.12rem;color:var(--jp-muted)}
.jp-company strong{color:var(--jp-ink);font-weight:700}
.jp-company span{padding-left:14px;border-left:1px solid #cfd3e3}
.jp-company-logo{height:38px;width:auto;max-width:130px;padding:4px 6px;border:1px solid var(--jp-line);border-radius:9px;background:#fff;object-fit:contain}

/* The wide summary card */
.jp-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:28px 0 40px;overflow:hidden;border:1px solid var(--jp-line);border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(17,27,71,.08)}
.jp .jp-visual{position:relative;margin:0;width:100%;height:420px;aspect-ratio:auto;border-radius:0;overflow:hidden;background:#efeafd}
.jp .jp-visual>img:first-child{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 30%}
.jp .jp-visual.is-flyer{background:#1d1d2b}
.jp .jp-visual.is-flyer::before{content:"";position:absolute;inset:-24px;background:var(--jp-backdrop) center/cover;filter:blur(22px) brightness(.8)}
.jp .jp-visual.is-flyer>img:first-child{position:relative;z-index:1;object-fit:contain;background:transparent}
.jp .jp-visual .job-visual-tag,.jp .jp-visual .job-logo{z-index:2}
.jp .jp-visual .job-visual-tag{top:14px;right:14px;font-size:.78rem;padding:4px 10px}
.jp .jp-visual .job-logo{left:14px;bottom:14px;height:52px;max-width:160px}
.jp-summary{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:30px 32px}
.jp-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin:0}
.jp-facts div:first-child{grid-column:1/-1}
.jp-facts dt{margin:0 0 4px;font-size:.88rem;font-weight:600;color:var(--jp-muted)}
.jp-facts dd{margin:0;font-size:1.08rem;font-weight:700;line-height:1.35;color:var(--jp-ink)}
.jp-facts div:first-child dd{font-size:1.3rem;color:#4a33b3}
.jp-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.jp-apply{display:flex;align-items:center;justify-content:center;min-height:56px;border:0;border-radius:13px;background:var(--jp-violet);color:#fff;font:inherit;font-size:1.1rem;font-weight:800;text-decoration:none;cursor:pointer}
.jp-apply:hover{background:#4d36b4}
.jp-save{min-height:56px;padding:0 20px;border:1px solid #cfd3e3;border-radius:13px;background:#fff;color:var(--jp-ink);font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.jp-save[data-state="saved"],.jp-save[data-state="applied"]{border-color:#9fd8bf;background:#effaf5;color:#176952}
.jp-apply:focus-visible,.jp-save:focus-visible{outline:3px solid #b7a8f3;outline-offset:2px}
.jp-free{margin:0;font-size:.98rem;line-height:1.5;color:var(--jp-muted)}
.jp .jp-apply-panel{grid-column:1/-1;margin:0;padding:26px 32px 30px;border-top:1px solid var(--jp-line);background:#faf9ff}
.jp .jp-apply-panel .apply-form{max-width:640px}

/* Description */
.jp-body{max-width:72ch}
.jp-body h2,.jp-more h2{margin:0 0 16px;font-family:inherit;font-size:1.65rem;font-weight:800;letter-spacing:-.025em;color:var(--jp-ink)}
.jp-body h3{margin:28px 0 10px;font-family:inherit;font-size:1.18rem;font-weight:800;color:var(--jp-ink)}
.jp .job-description-prose{font-family:inherit;font-size:1.08rem;line-height:1.75;color:#2d3655}
.jp .job-description-prose h3{margin:26px 0 8px;font-size:1.15rem;font-weight:800;color:var(--jp-ink)}
.jp .job-description-prose em{display:block;margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--jp-soft);color:var(--jp-muted);font-style:normal;font-size:.98rem;line-height:1.55}
.jp .detail-list{padding-left:1.25rem;font-size:1.08rem;line-height:1.7;color:#2d3655}
.jp-note{margin:24px 0 0;padding:14px 16px;border-radius:12px;background:var(--jp-soft);font-size:1rem;line-height:1.55}

/* More jobs + links: the same tiles as the jobs list (app.css is not loaded here). */
.jp-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jp-more .job-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--jp-line);border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(17,27,71,.06)}
.jp-more .job-card:hover{border-color:#cfc4ff;box-shadow:0 14px 30px rgba(46,39,112,.12)}
.jp-more .job-body{display:flex;flex-direction:column;gap:2px;padding:11px 12px 13px}
.jp-more .job-card h3{margin:0 0 2px;font-size:.98rem;line-height:1.25;font-weight:800;color:var(--jp-ink)}
.jp-more .job-card p{margin:0;font-size:.85rem;color:var(--jp-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp-more .job-tile-pay{margin-top:6px!important;color:#4a33b3!important;font-weight:800;white-space:normal!important}
@media(max-width:900px){.jp-more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.jp-more{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--jp-line)}
.jp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.jp-links a{padding:11px 18px;border:1px solid #cfd3e3;border-radius:999px;color:var(--jp-ink);font-weight:700;text-decoration:none}
.jp-links a:hover{border-color:var(--jp-violet);color:var(--jp-violet)}

@media(max-width:760px){
  .jp-card{grid-template-columns:1fr;margin:22px 0 32px;border-radius:18px}
  .jp .jp-visual{min-height:0;height:auto;aspect-ratio:4/3}
  .jp-summary{padding:22px 20px;gap:18px}
  .jp .jp-apply-panel{padding:22px 20px 24px}
  .jp-company{font-size:1.02rem}
}
body[data-theme="dark"]{background:#0d1431}
body[data-theme="dark"] .jp{--jp-ink:#eef1ff;--jp-muted:#b9c2e8;--jp-line:rgba(189,199,245,.2);--jp-soft:#1b2858}
body[data-theme="dark"] .jp-card,body[data-theme="dark"] .jp-save,body[data-theme="dark"] .jp-company-logo{background:#151f49}
body[data-theme="dark"] .jp .jp-apply-panel{background:#121b42}
body[data-theme="dark"] .jp .job-description-prose,body[data-theme="dark"] .jp .detail-list{color:#d3d9f3}
body[data-theme="dark"] .jp-chips span{color:#d9d1ff}
body[data-theme="dark"] .jp-facts div:first-child dd{color:#cbbfff}
body[data-theme="dark"] .jp-more .job-card{background:#151f49;border-color:rgba(189,199,245,.2);box-shadow:none}
body[data-theme="dark"] .jp-more .job-card h3{color:#f2f4ff}
body[data-theme="dark"] .jp-more .job-card p{color:#c3cbea}
body[data-theme="dark"] .jp-more .job-tile-pay{color:#cbbfff!important}
body[data-theme="dark"] .jp-links a{border-color:rgba(196,205,238,.35);color:#eef1ff}