/* ==========================================================================
   Kaimei AI — role pages (careers/*.html)
   Loaded after site.css; uses its tokens, so light and dark need no extra rules.
   ========================================================================== */

/* ---------- Hero ---------- */
.role-hero .eyebrow a { color: inherit; transition: color 0.2s; }
.role-hero .eyebrow a:hover { color: var(--ink); }
.role-hero .eyebrow .sep { color: var(--ink-4); }
.role-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.role-hero .lead { max-width: 620px; }

.role-facts { padding: 8px 24px 24px; box-shadow: var(--shadow-sm); }
.role-facts dl { margin: 0; }
.role-facts dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.role-facts dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.role-facts dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.role-facts .btn { width: 100%; margin-top: 20px; }
/* Apply buttons: dark text in both themes, since light text is hard to read on the gradient's cyan end */
main .btn-grad { color: #0b0c10; }
.role-facts .note { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }
@media (max-width: 900px) {
  .role-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .role-facts { max-width: 520px; }
}

/* ---------- Editorial rows: sticky label left, content right ---------- */
.role-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 6vw, 96px); padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.role-row:first-child { border-top: 0; padding-top: 0; }
.role-row:last-child { padding-bottom: 0; }
.role-label { position: sticky; top: 100px; align-self: start; }
.role-label .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.role-row .prose p { font-size: 1.1rem; line-height: 1.65; }
.role-row .cta-row { margin-top: 28px; }
@media (max-width: 900px) {
  .role-row { grid-template-columns: minmax(0, 1fr); }
  .role-label { position: static; }
}

/* ---------- Lists ---------- */
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; text-wrap: pretty; }
.checks li::before { content: ""; position: absolute; left: 1px; top: 0.6em; width: 9px; height: 9px; border-radius: 99px; background: var(--grad); }
.checks.quiet li::before { background: transparent; border: 1.5px solid var(--ink-4); }
.checks b { color: var(--ink); font-weight: 600; }

.apply-steps { border-top: 1px solid var(--line); }
.apply-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.apply-steps .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 4px; }
.apply-steps b { display: block; font-weight: 600; margin-bottom: 4px; }
.apply-steps span { color: var(--ink-2); }

/* ---------- Open problems: what ships today, then the question it leaves ---------- */
.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.problem { display: flex; flex-direction: column; gap: 20px; }
.problem-head { display: flex; align-items: baseline; gap: 14px; }
.problem-head .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.card .problem-head h3 { margin: 0; }
.problem-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.problem-now { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--bg-sunken); border: 1px solid var(--line); }
.card .problem-now p { font-size: 14.5px; line-height: 1.6; }
.problem-now .kicker-list { margin-top: 12px; gap: 6px; }
.problem-open { position: relative; padding-left: 18px; }
.problem-open::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--grad-v); }
.problem-open .problem-label { color: var(--accent); }
.card .problem-open p { font-size: 16.5px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.problem .btn-link { margin-top: auto; font-size: 14.5px; }
@media (max-width: 760px) { .problems { grid-template-columns: minmax(0, 1fr); } }