/* vntr.vc careers — role page, VERSION 2 only (careers-<slug>-v2.html). Loaded after style.css, hero.css, home.css,
   home-v2.css, pages-community.css and membership-v2.css (for .mv-list); body carries .pc .cr. One template for all
   nine roles: a compact beige header (back link · title · location and type) and a white body — the role text on the
   left, the application form (pc-form, the live site's fields) sticky on the right; stacked below 1000px.
   Rules: palette tokens only; no eyebrows; sentence case; no trailing periods in headings; Taviraj for headings only,
   Poppins for the rest; no dark surfaces; one button on the page (Submit). */

/* ——— rhythm ——— */
.cr section[class*="tone-"] { padding: calc(var(--section-y) / 2) 0; }
.cr section[id] { scroll-margin-top: 96px; }

/* ——— 1 · header: back link, title, meta; the "apply" link shows only when the form is below the text ——— */
.cr .cr-head { padding: clamp(32px, 4vw, 56px) 0 clamp(28px, 3.2vw, 44px); }
.cr #role { padding-top: clamp(28px, 3.2vw, 44px); }   /* header and body read as one page, not two blocks */
.cr-back { display: inline-block; margin: 0 0 clamp(20px, 2.4vw, 32px); font: 500 14px/1.3 var(--sans); color: var(--mute); text-decoration: none; transition: color .2s ease; }
.cr-back:hover { color: var(--royal); }
.cr .cr-head h1 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.035em; max-width: 16em; margin: 0 0 16px; color: var(--ink); text-wrap: balance; }
.cr-meta { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--mute); }
.cr section[class*="tone-"] .cr-apply-link { display: none; margin-top: 18px; color: var(--royal); font-size: 15px; }
.cr section[class*="tone-"] .cr-apply-link:hover { color: var(--navy); }
@media (max-width: 999px) { .cr section[class*="tone-"] .cr-apply-link { display: inline-block; } }

/* ——— 2 · body: text | form ——— */
.cr-body { display: grid; gap: clamp(32px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .cr-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 5vw, 80px); } }
.cr-text { min-width: 0; max-width: 44em; }
.cr-sec { padding: clamp(24px, 2.6vw, 36px) 0; border-top: 1px solid var(--line); }
.cr-sec:first-child { padding-top: 0; border-top: 0; }
.cr-sec h2 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 16px; max-width: none; }
.cr-sec h3 { font: 400 clamp(19px, 1.5vw, 22px)/1.25 var(--serif); letter-spacing: -.01em; margin: 22px 0 8px; color: var(--ink); }
.cr-sec > h3:first-of-type { margin-top: 4px; }
.cr-sec p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--ice-2); text-wrap: pretty; }
.cr-sec p:last-child { margin-bottom: 0; }
.cr-sec .cr-list { margin: 0; }
.cr-sec .cr-list li { font-size: 15.5px; padding: 10px 0 10px 22px; }
.cr-sec .cr-list li::before { top: 18px; }
.cr-sec .cr-list:last-child li:last-child { border-bottom: 1px solid var(--line); }
.cr-sec p + .cr-list { margin-top: 4px; }
.cr-sec .cr-list + p { margin-top: 14px; }

/* ——— the form: beige card on white (pc-form), sticky beside the text while it fits the screen ——— */
.cr-aside { min-width: 0; }
@media (min-width: 1000px) and (min-height: 760px) { .cr-aside { position: sticky; top: 88px; } }
.cr .pc-form.cr-form { padding: clamp(22px, 2.4vw, 30px); }
.cr .cr-form h3 { font-size: clamp(22px, 1.8vw, 26px); margin-bottom: 16px; }
.cr .cr-form .pc-field { margin-bottom: 10px; }
.cr .cr-form .pc-field > span { font-size: 12.5px; margin-bottom: 5px; }
.cr .cr-form .pc-field input, .cr .cr-form .pc-field textarea { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }
.cr .cr-form .pc-field textarea { min-height: 96px; }
.cr .cr-form .pc-row2 { gap: 0 10px; }
.cr .cr-form .btn { margin-top: 4px; }
@media (max-width: 559px) { .cr .cr-form .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) { .cr-back { transition: none; } }
/* founder, 26.10: compact header — the shared section padding (115px) won over .cr-head; pin it here */
.cr section.cr-head[class*="tone-"] { padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 40px); }
.cr section#role[class*="tone-"] { padding-top: clamp(32px, 3.4vw, 48px); }
/* founder, 26.10: too many lines — list items lose their rules; only the thin divider between sections stays */
.cr-sec .cr-list li, .cr-sec .cr-list li:first-child { border-top: 0; border-bottom: 0; padding: 6px 0 6px 22px; }
.cr-sec .cr-list:last-child li:last-child { border-bottom: 0; }
.cr-sec .cr-list li::before { top: 15px; }