/* /careers/ first view (2026-10-07): headline, the job search card, the three-step strip with two small photos, the sponsor pointer and the employer strip.
   Tokens only (light and dark follow the kit). */
.cf-first{padding-block:var(--s-6);background:var(--sky)}
.cf-copy{max-inline-size:46rem;margin-block-end:var(--s-5)}
.cf-copy h1{margin-block:var(--s-2) var(--s-3)}
.cf-copy .lead{margin:0 0 var(--s-2)}
.cf-note{margin:0;font-size:var(--fs-14);color:var(--muted)}
.cf-first .jc{margin-block-end:var(--s-4)}
.cf-first-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}


.cf-more{display:grid;gap:var(--s-3)}
.cf-pointer{margin:0;font-weight:var(--fw-semibold)}
.cf-scam{margin:0;font-size:var(--fs-14)}

.cf-employers{padding-block:var(--s-5);background:var(--card-2);border-block-start:1px solid var(--border)}
.cf-emp{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);align-items:center;justify-content:space-between}
.cf-emp h2{margin:0;font-size:var(--fs-18)}
.cf-emp-tiers{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0;padding:0;list-style:none}
.cf-emp-tiers li{display:flex;gap:var(--s-2);align-items:baseline}
.cf-emp-tiers strong{font-family:var(--font-serif);font-size:var(--fs-18)}
.cf-emp-note{flex-basis:100%;margin:0;font-size:var(--fs-14);color:var(--muted)}

@media (max-width:760px){
  .cf-first{padding-block:var(--s-5) var(--s-4)}
}

/* cinematic image pass (2026-10-07): decorative photos beside the text; no text sits on a photo except under .cine-scrim */
.cine-band{position:relative;margin:0 0 var(--s-5);aspect-ratio:21/8;overflow:hidden;border-radius:var(--r-md);background:var(--sky-2)}
.cine-band img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.cine-hero{position:relative;overflow:hidden;isolation:isolate;background-color:rgb(8,14,26)}
.cine-hero-img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:-2}
.cine-scrim::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,14,26,.9) 0%,rgba(8,14,26,.78) 60%,rgba(8,14,26,.68) 100%)}
.cine-scrim :is(h1,.lead,.eyebrow,.cf-note){color:var(--on-solid)}
.cine-scrim .btn-secondary{background:transparent;color:var(--on-solid);border-color:var(--on-solid)}
/* QA 2026-10-11: the Careers top band is light like the other pages: the photo stays under a light sky veil, the words are dark (was white on a near-black veil) */
.cf-first.cine-scrim{background-color:var(--sky-bar-bg,var(--sky))}
.cf-first.cine-scrim::before{background:linear-gradient(90deg,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 92%,transparent) 0%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 84%,transparent) 60%,color-mix(in srgb,var(--sky-bar-bg,var(--sky)) 60%,transparent) 100%)}
.cf-first.cine-scrim :is(h1,.lead,.eyebrow,.cf-note){color:var(--ink)}
.cf-first.cine-scrim :is(.lead,.cf-note){color:var(--ink-2)}
.cf-first.cine-scrim .eyebrow{color:var(--gold-ink)}
.cf-first.cine-scrim .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border-strong)}
:root[data-theme="dark"] .cine-band img{filter:brightness(.85)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cine-band img{filter:brightness(.85)}}
@media (max-width:760px){.cine-band{aspect-ratio:16/9}}

/* resume match (careers-match.js): upload beside the search, editable keywords, ranked cards with reasons. Tokens only; logical properties for RTL. */
.cm{margin-block-start:var(--s-4);padding-block-start:var(--s-4);border-block-start:1px solid var(--border);color:var(--ink)}
.cm-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.cm-up{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:48px;padding-inline:var(--s-5)}
.cm-ico{inline-size:18px;block-size:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cm-file{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cm-hint{margin:0;font-size:var(--fs-14);color:var(--muted)}
.cm-privacy{margin:var(--s-3) 0 0;font-size:var(--fs-14);color:var(--ink-2)}
.cm-status{margin:var(--s-2) 0 0;min-block-size:1.4em;font-size:var(--fs-14);color:var(--ink-2)}
.cm-status.is-error{color:var(--danger-ink)}
.cm-link{background:none;border:0;padding:var(--s-2) 0;font:inherit;font-size:var(--fs-14);color:var(--primary-ink);text-decoration:underline;cursor:pointer;min-block-size:48px;display:inline-flex;align-items:center}
.cm-paste{display:grid;gap:var(--s-2);margin-block-start:var(--s-3);max-inline-size:640px}
.cm-paste[hidden]{display:none}
.cm-paste label,.cm .field label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2)}
.cm-panel{margin-block-start:var(--s-4);padding:var(--s-5);background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.cm-found-h{margin:0 0 var(--s-2);font-size:var(--fs-18)}
.cm-found-h:focus{outline:none}
.cm-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-block-start:var(--s-3)}
.cm-group-l{flex:none;min-inline-size:9rem;font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2)}
.cm-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cm-chip{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:44px;padding-inline:var(--s-3);border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-14);cursor:pointer}
.cm-chip:hover{background:var(--primary-soft)}
.cm-x{font-size:var(--fs-18);line-height:1;color:var(--muted)}
.cm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-block-start:var(--s-4)}
.cm-addrow{display:flex;gap:var(--s-2)}
.cm-addrow .input{flex:1;min-inline-size:0;min-block-size:48px}
.cm .input{min-block-size:48px}
.cm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-block-start:var(--s-4)}
.cm-find{min-block-size:48px;padding-inline:var(--s-6)}
.cm-results{margin-block-start:var(--s-5)}
.cm-results:focus{outline:none}
.cm-res-h{margin:0 0 var(--s-2);font-size:var(--fs-20)}
.cm-count{margin:0 0 var(--s-2);font-weight:var(--fw-semibold)}
.cm-basis{margin:0 0 var(--s-4);font-size:var(--fs-14);color:var(--muted)}
.cm-list{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none}
.cm-card{display:grid;gap:var(--s-2);padding:var(--s-5);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);border-inline-start:4px solid var(--border-strong)}
.cm-strong{border-inline-start-color:var(--ok)}
.cm-possible{border-inline-start-color:var(--primary)}
.cm-stretch{border-inline-start-color:var(--warn)}
.cm-card-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-3)}
.cm-card-h{margin:0;font-size:var(--fs-18)}
.cm-label{padding:2px var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:var(--fw-bold);white-space:nowrap}
.cm-label-strong{background:var(--ok-bg);color:var(--ok-ink)}
.cm-label-possible{background:var(--primary-soft);color:var(--primary-ink)}
.cm-label-stretch{background:var(--warn-bg);color:var(--warn-ink)}
.cm-meta,.cm-src{margin:0;font-size:var(--fs-14);color:var(--ink-2)}
.cm-src{color:var(--muted)}
.cm-sub{margin:var(--s-2) 0 0;font-size:var(--fs-14);color:var(--ink-2)}
.cm-why,.cm-miss{margin:0;padding-inline-start:1.2em;font-size:var(--fs-15)}
.cm-why li,.cm-miss li{margin-block:var(--s-1)}
.cm-miss li{color:var(--ink-2)}
.cm-open{justify-self:start;margin-block-start:var(--s-2)}
.cine-scrim .cm .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border-strong)}
.cine-scrim .cm .btn-primary{color:var(--on-primary)}
/* QA 2026-10-10: the My jobs button sits on the white job-search card, not on the photo: dark text on the card colour */
.cine-scrim .jc .btn-secondary,.cine-scrim .jc .jc-mine-btn{background:var(--card);color:var(--ink);border-color:var(--border-strong)}
.cine-scrim .jc .btn-secondary:hover{background:var(--card-2)}
@media (max-width:760px){.cm-fields{grid-template-columns:1fr}.cm-panel{padding:var(--s-4)}.cm-group-l{min-inline-size:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.cm *{transition:none;animation:none;scroll-behavior:auto}}
/* See the difference (#showcase): a tailored resume, SIDE BY SIDE (before left, after right; stacked on phones) when nothing moves, for a made-up job seeker.
   The documents are HTML and CSS mocks on light "paper" (.ba-frame keeps the light tokens in dark mode). Tokens only, logical properties only.
   Without script both documents show; careers-showcase.js adds the numbered notes and the pack values; careers-play.js (lazy) the wipe and the lit notes. */
.cs{padding-block:var(--s-6)}
.cs .band-head{margin-block-end:var(--s-4)}
.cs-badge{margin:var(--s-2) 0 0}
.cs-badge .badge{white-space:normal;max-inline-size:100%} /* the sample notice is a sentence in Bengali and Arabic: it wraps on a phone instead of pushing the page sideways */
.cs-ba{margin-inline:auto;max-inline-size:1120px}
.cs-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (min-width:860px){.cs-stage{grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr)}}
.cs-pane{position:relative;box-sizing:border-box;container-type:inline-size;background:var(--card);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;font:400 14px/1.45 var(--font-sans);text-align:start}
.cs-before{filter:saturate(.7);opacity:.96}
.cs-after{border:2px solid var(--primary);box-shadow:0 18px 44px rgba(20,30,50,.18)}
.cs-tag{position:absolute;z-index:4;inset-block-start:.7em;padding:.2em .9em;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font:var(--fw-semibold) 13px/1.5 var(--font-sans);pointer-events:none}
.cs-tag-b{inset-inline-start:.8em}
.cs-tag-a{inset-inline-end:.8em;background:var(--gold);color:var(--ink)}
/* BEFORE resume and letter: a plain word-processor look on purpose (mixed fonts, cramped, generic lines) */
.cs-rb{padding:2.8em 1em 1em;font:400 14px/1.15 "Times New Roman",Times,serif}
.cs-rb p{margin:.3em 0}
.cs-rb-name{font:700 1.5em/1 Verdana,Geneva,sans-serif}
.cs-rb-h{margin-block-start:.7em;font:700 1em/1.1 Verdana,Geneva,sans-serif;text-decoration:underline}
.cs-rb ul{margin:.2em 0;padding-inline-start:1.5em}
.cs-rb-sk{font-family:"Courier New",monospace;font-size:1em}
.cs-rb-ref{font-style:italic}
/* AFTER resume: a designed document. A bold header with a monogram and a posting-match ribbon, three result tiles, a dark side column and a clean main column */
.cs-ra{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.7fr);grid-template-areas:"head head" "tiles tiles" "side main"}
.cs-ra p{margin:0}
.cs-ra-head{grid-area:head;display:grid;gap:.9em;padding:3.1em 1.5em 1.3em;background:var(--primary);color:var(--on-primary)}
.cs-ra-id{display:flex;align-items:center;gap:1em}
.cs-ra-mono{flex:none;display:grid;place-items:center;inline-size:3.6em;block-size:3.6em;border-radius:50%;background:var(--gold);color:var(--ink);font:700 1.3em/1 var(--font-serif);letter-spacing:.04em}
.cs-ra-name{font:700 2em/1.05 var(--font-serif);letter-spacing:-.01em}
.cs-ra-title{margin-block-start:.3em;font:var(--fw-semibold) 1.1em/1.3 var(--font-sans)}
.cs-ra-loc{opacity:.85;font-weight:400}
.cs-ra-contact{display:flex;flex-wrap:wrap;gap:.2em 1.1em;margin-block-start:.4em;font-size:13px;opacity:.9}
.cs-ra-match{display:flex;align-items:center;gap:.7em;padding:.6em .9em;border-radius:.6em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);font-size:13px;line-height:1.3}
.cs-ra-match strong{flex:none;display:grid;place-items:center;min-inline-size:3.2em;padding:.25em .5em;border-radius:var(--r-pill);background:var(--gold);color:var(--ink);font:700 1.05em/1 var(--font-sans)}
.cs-ra-tiles{grid-area:tiles;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block-end:1px solid var(--border)}
.cs-ra-tiles div{padding:.9em .6em;text-align:center;border-inline-end:1px solid var(--border)}
.cs-ra-tiles div:last-child{border-inline-end:0}
.cs-ra-tiles b{display:block;font:700 1.9em/1 var(--font-serif);color:var(--primary-ink)}
.cs-ra-tiles span{display:block;margin-block-start:.3em;font-size:13px;line-height:1.25;color:var(--ink-2)}
.cs-ra-side{grid-area:side;display:grid;gap:1.2em;align-content:start;padding:1.3em 1.1em 1.5em;background:var(--ink);color:var(--on-ink)}
.cs-ra-main{grid-area:main;display:grid;gap:1.1em;align-content:start;padding:1.3em 1.4em 1.6em}
.cs-ra-h{margin:0 0 .5em;font:700 13px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--primary-ink)}
.cs-ra-side .cs-ra-h{color:var(--gold)}
:root[lang="ar"] .cs-ra-h{letter-spacing:0;text-transform:none}
.cs-ra-main .cs-ra-h{padding-block-end:.35em;border-block-end:2px solid var(--primary-soft)}
.cs-chips,.cs-certs{display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0;list-style:none}
.cs-chips li{padding:.28em .75em;border-radius:var(--r-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:var(--on-ink);font-weight:var(--fw-semibold);font-size:13px}
.cs-chips li::before{content:"\2713";margin-inline-end:.35em;color:var(--gold)}
.cs-certs li{display:inline-flex;align-items:center;gap:.4em;padding:.3em .8em;border:2px solid var(--gold);border-radius:.5em;color:var(--on-ink);font-weight:700;font-size:13px}
.cs-certs li::before{content:"\2713";color:var(--gold)}
.cs-langs{margin:0;padding:0;list-style:none;display:grid;gap:.35em;font-size:13px}
.cs-langs li{display:flex;justify-content:space-between;gap:.8em;align-items:center}
.cs-dots{display:inline-flex;gap:3px}
.cs-dots i{inline-size:.7em;block-size:.7em;border-radius:50%;background:rgba(255,255,255,.28)}
.cs-dots i.on{background:var(--gold)}
.cs-ra-job{font-size:1.02em}
.cs-ra-co{color:var(--ink-2)}
.cs-ra-b{margin:0;padding-inline-start:1.2em}
.cs-ra-b li{margin-block-start:.45em}
.cs-ra-b li::marker{color:var(--primary)}
@container (max-width:560px){
  .cs-ra{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tiles" "main" "side"}
  .cs-ra-name{font-size:1.7em}
}
/* numbered notes on the After documents */
.cs-t{position:relative;border-radius:.4em;padding:.2em .4em;margin:-.2em -.4em}
.cs-t.is-hl,.cs-t.is-on{outline:2px solid var(--gold);outline-offset:2px;background:rgba(255,255,255,.1)}
.cs-ra-main .cs-t.is-hl,.cs-ra-main .cs-t.is-on{outline-color:var(--primary);background:var(--primary-tint)}
.cs-pin{position:absolute;z-index:3;inset-block-start:-.7em;inset-inline-end:-.9em;box-sizing:border-box;display:grid;place-items:center;inline-size:max(1.9em,24px);block-size:max(1.9em,24px);padding:0;border:2px solid var(--card);border-radius:50%;background:var(--gold);color:var(--ink);font:700 13px/1 var(--font-sans);cursor:pointer;box-shadow:var(--shadow-1)}
.cs-pin:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cs-tip{display:none;position:absolute;z-index:5;inset-inline-end:0;inset-block-start:calc(100% + .5em);inline-size:max-content;max-inline-size:min(17em,70cqw);padding:.4em .75em;border-radius:var(--r-xs);background:var(--ink);color:var(--on-ink);font:var(--fw-semibold) 13px/1.35 var(--font-sans);box-shadow:var(--shadow-1)}
.cs-tip-up{inset-block-start:auto;inset-block-end:calc(100% + .5em)}
.cs-pin:hover + .cs-tip,.cs-pin:focus-visible + .cs-tip,.cs-t.is-hl > .cs-tip,.cs-t.is-on > .cs-tip{display:block}
/* the numbered reasons, the reasons to choose us and the buttons */
.cs-why{counter-reset:csr;list-style:none;margin:0 auto;padding:0;display:grid;gap:var(--s-2);max-inline-size:760px}
.cs-why li{counter-increment:csr;display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--fs-15)}
.cs-why li::before{content:counter(csr);flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 var(--fs-13)/1 var(--font-sans)}
.cs-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-5)}
.cs-from{margin-inline-start:.5em;font-weight:400}
.cs-from[hidden]{display:none}
/* the pack cards: price per document, what you save, one line of what is in it, and one clear best value */
.ladder-tier{position:relative}
.cf-best{position:absolute;inset-block-start:-.8em;inset-inline-start:var(--s-4);padding:.2em .9em;border-radius:var(--r-pill);background:var(--gold);color:var(--ink);font:700 13px/1.5 var(--font-sans)}
.ladder-tier.is-best{border:2px solid var(--primary);box-shadow:var(--shadow-1)}
.cf-unit{margin:0;font-weight:var(--fw-semibold);color:var(--primary-ink)}
.cf-save{margin:.25em 0 0;color:var(--ok-ink);font-weight:var(--fw-semibold);font-size:var(--fs-14)}
.cf-list{margin:.6em 0 0;color:var(--ink-2);font-size:var(--fs-14)}
@media (prefers-reduced-motion:reduce){.cs *{transition:none;animation:none}}

/* Gen Z pass (2026-10-08): the match demo, the Before-to-After wipe, the swipe deck and the pack cards in motion. The code is careers-play.js, loaded lazily.
   Without script the demo sections are hidden; under reduced motion nothing moves and every demo shows its final state. Transform and opacity only. Tokens only, logical properties only. */
.cp-sec{padding-block:var(--s-6)}
.cp-sec:has(.cp-stage:empty){display:none}
.cp-stage{min-block-size:12rem}
.cp-stage:empty{min-block-size:0}
.cp-demo,.cp-wipe{--cp-d:1}
:root[dir="rtl"] .cp-demo,:root[dir="rtl"] .cp-wipe{--cp-d:-1}
.cp-ctl{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-block-start:var(--s-4)}
.cp-ctl .btn{min-block-size:44px}
.cp-ctl .cp-go{margin-inline-start:auto}
.cp-paused,.cp-paused *{animation-play-state:paused!important}

/* the match demo */
.cp-match{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--s-5);align-items:start}
@media (max-width:760px){.cp-match{grid-template-columns:minmax(0,1fr)}}
.cp-res{display:grid;gap:var(--s-2);padding:var(--s-4);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.cp-res .badge{justify-self:start}
.cp-name{margin:0;font:700 var(--fs-20)/1.1 var(--font-serif)}
.cp-role{margin:0;color:var(--ink-2);font-size:var(--fs-14)}
.cp-bar{display:block;block-size:8px;border-radius:4px;background:var(--border)}
.cp-bar:nth-of-type(2){inline-size:82%}
.cp-bar:nth-of-type(3){inline-size:64%}
.cp-chips,.cp-tg,.cp-ev{list-style:none;margin:0;padding:0}
.cp-chips,.cp-tg{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cp-chip{padding:.3em .8em;border:1px solid var(--primary);border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-ink);font:var(--fw-semibold) 13px/1.4 var(--font-sans)}
.cp-jobs{display:grid;gap:var(--s-3)}
.cp-job{display:grid;gap:var(--s-2);padding:var(--s-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);border-inline-start:4px solid var(--border-strong)}
.cp-job[data-lab="strong"]{border-inline-start-color:var(--ok)}
.cp-job[data-lab="possible"]{border-inline-start-color:var(--primary)}
.cp-job[data-lab="stretch"]{border-inline-start-color:var(--warn)}
.cp-jt{margin:0;font-size:var(--fs-18)}
.cp-jl{margin:0;color:var(--muted);font-size:var(--fs-14)}
.cp-row{display:flex;align-items:center;gap:var(--s-3)}
.cp-meter{flex:1;block-size:10px;border-radius:5px;background:var(--border);overflow:hidden}
.cp-meter i{display:block;inline-size:100%;block-size:100%;background:var(--ok);transform:scaleX(var(--w,1));transform-origin:0 50%}
:root[dir="rtl"] .cp-meter i{transform-origin:100% 50%}
.cp-job[data-lab="possible"] .cp-meter i{background:var(--primary)}
.cp-job[data-lab="stretch"] .cp-meter i{background:var(--warn)}
.cp-lab{font:700 13px/1.4 var(--font-sans);white-space:nowrap;color:var(--ok-ink)}
.cp-job[data-lab="possible"] .cp-lab{color:var(--primary-ink)}
.cp-job[data-lab="stretch"] .cp-lab{color:var(--warn-ink)}
.cp-ev{display:grid;gap:var(--s-1)}
.cp-ev li{display:flex;align-items:center;gap:.5em;padding:.3em .7em;border-radius:var(--r-sm);font-size:var(--fs-14)}
.cp-ev li::before{flex:none;font-weight:700}
.cp-ev-ok{background:var(--ok-bg);color:var(--ok-ink)}
.cp-ev-ok::before{content:"\2713"}
.cp-ev-no{background:var(--warn-bg);color:var(--warn-ink)}
.cp-ev-no::before{content:"\2212"}
.cp-run .cp-res{animation:cpIn .5s ease backwards}
.cp-run .cp-job{animation:cpIn .5s ease .25s backwards}
.cp-run .cp-tgt{animation:cpFly .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.cp-run .cp-src{animation:cpSent .4s ease var(--d,0s) both}
.cp-run .cp-meter i{animation:cpFill .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.cp-run .cp-lab,.cp-run .cp-ev li{animation:cpPop .45s ease var(--d,0s) backwards}
.cp-run .cp-go{animation:cpRing 1.3s ease var(--d,0s) 2 backwards}
@keyframes cpIn{from{opacity:0;transform:translateY(10px)}}
@keyframes cpFly{0%{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(1.1)}12%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cpSent{to{opacity:.4}}
@keyframes cpFill{from{transform:scaleX(0)}}
@keyframes cpPop{from{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes cpRing{50%{transform:scale(1.07)}}

/* See the difference in motion: the After resume wipes over the Before behind a glowing line, then the five notes light up one by one */
.cs-why{margin-block-start:var(--s-5)}
.cs-why li{position:relative;isolation:isolate;padding:.35em .7em;border-radius:var(--r-sm)}
.cs-why li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--primary-tint);opacity:0;pointer-events:none}
.cp-wipe .cs-stage{grid-template-columns:minmax(0,1fr);max-inline-size:680px;margin-inline:auto;overflow:hidden;border-radius:var(--r-md)}
.cp-wipe .cs-before,.cp-wipe .cp-rv{grid-area:1 / 1}
.cp-wipe .cs-before{align-self:stretch}
.cp-rv{position:relative;overflow:hidden}
.cp-glow{position:absolute;inset-block:0;inset-inline-end:0;inline-size:4px;z-index:6;background:var(--gold);box-shadow:0 0 22px 8px var(--gold);opacity:0;pointer-events:none}
.cp-wipe.cp-run .cp-rv{animation:cpWipe 2.2s cubic-bezier(.65,0,.35,1) 1.4s backwards}
.cp-wipe.cp-run .cp-rv > .cs-after{animation:cpWipeIn 2.2s cubic-bezier(.65,0,.35,1) 1.4s backwards}
.cp-wipe.cp-run .cp-glow{animation:cpGlow 2.2s linear 1.4s both}
@keyframes cpWipe{from{transform:translateX(calc(-100% * var(--cp-d,1)))}}
@keyframes cpWipeIn{from{transform:translateX(calc(100% * var(--cp-d,1)))}}
@keyframes cpGlow{0%{opacity:1}88%{opacity:1}100%{opacity:0}}
.cp-wipe.cp-run .cs-why li{animation:cpNote .5s ease var(--n,4s) backwards}
.cp-wipe.cp-run .cs-why li::after{animation:cpTint .5s ease var(--n,4s) both}
.cp-wipe.cp-run .cs-why li:nth-child(1){--n:3.9s}
.cp-wipe.cp-run .cs-why li:nth-child(2){--n:4.7s}
.cp-wipe.cp-run .cs-why li:nth-child(3){--n:5.5s}
.cp-wipe.cp-run .cs-why li:nth-child(4){--n:6.3s}
.cp-wipe.cp-run .cs-why li:nth-child(5){--n:7.1s}
.cs-t::before{content:"";position:absolute;inset:-3px;border:2px solid var(--gold);border-radius:.45em;opacity:0;pointer-events:none}
.cp-wipe.cp-run .cs-t[data-t]::before{animation:cpHl 1.1s ease var(--n,4s) backwards}
.cp-wipe.cp-run .cs-t[data-t="1"]{--n:3.9s}
.cp-wipe.cp-run .cs-t[data-t="2"]{--n:4.7s}
.cp-wipe.cp-run .cs-t[data-t="3"]{--n:5.5s}
.cp-wipe.cp-run .cs-t[data-t="4"]{--n:6.3s}
.cp-wipe.cp-run .cs-t[data-t="5"]{--n:7.1s}
@keyframes cpNote{from{opacity:.3;transform:translateX(calc(-10px * var(--cp-d,1)))}}
@keyframes cpTint{from{opacity:0}to{opacity:1}}
@keyframes cpHl{0%,100%{opacity:0}25%,75%{opacity:1}}

/* the swipe-to-save deck */
.cp-deck{--cp-d:1;position:relative;max-inline-size:360px;margin-inline:auto;border-radius:var(--r-lg)}
:root[dir="rtl"] .cp-deck{--cp-d:-1}
.cp-deck:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.cp-cards{position:relative;block-size:210px}
.cp-card{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;gap:var(--s-2);padding:var(--s-5);background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-2);z-index:calc(3 - var(--k,0));transform:translateY(calc(var(--k,0) * 10px)) scale(calc(1 - var(--k,0) * .05));transition:transform .25s ease;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cp-card[data-top]{cursor:grab}
.cp-card.is-drag{transition:none;cursor:grabbing}
.cp-card.is-save,.cp-card.is-skip{opacity:0;transition:transform .3s ease,opacity .3s ease}
.cp-card.is-save{transform:translateX(calc(130% * var(--cp-d))) rotate(12deg)!important}
.cp-card.is-skip{transform:translateX(calc(-130% * var(--cp-d))) rotate(-12deg)!important}
.cp-ct{margin:0;font-size:var(--fs-20)}
.cp-cl{margin:0;color:var(--ink-2)}
.cp-stamp{position:absolute;inset-block-start:var(--s-3);display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;opacity:0;pointer-events:none}
.cp-stamp svg,.cp-pop svg,.cp-dk-ctl svg{inline-size:22px;block-size:22px;fill:currentColor;stroke:currentColor;stroke-width:0}
.cp-st-x svg,.cp-pop-x svg,.cp-sk svg{fill:none;stroke-width:2.4;stroke-linecap:round}
.cp-stamp-save{inset-inline-end:var(--s-3);background:var(--ok-bg);color:var(--ok-ink)}
.cp-stamp-skip{inset-inline-start:var(--s-3);background:var(--card-2);color:var(--ink-2)}
.cp-pop{position:absolute;inset:0;z-index:5;display:grid;place-items:center;opacity:0;pointer-events:none}
.cp-pop svg{inline-size:72px;block-size:72px}
.cp-pop.is-save{color:var(--danger-ink)}
.cp-pop.is-skip{color:var(--ink-2)}
.cp-pop.is-run{animation:cpHeart .6s ease}
@keyframes cpHeart{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
.cp-dk-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-block-start:var(--s-5)}
.cp-dk-ctl .btn{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:48px}
.cp-count{margin:0;font-weight:var(--fw-semibold);color:var(--ink-2)}
.cp-count.is-bump{animation:cpBump .4s ease}
@keyframes cpBump{40%{transform:scale(1.25)}}
.cp-done{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
.cp-done[hidden],.cp-cards[hidden],.cp-dk-ctl[hidden]{display:none}
.cp-done p{margin:0}

/* the pack cards: the Best value badge pulses once (the per-document price counts down in script) */
.cf-best.cp-pulse{animation:cpBest 1.2s ease .2s 1}
@keyframes cpBest{40%{transform:scale(1.18)}}

@media (prefers-reduced-motion:reduce){
  .cp-demo *,.cp-wipe *,.cp-deck *,.cf-best{animation:none!important;transition:none!important}
}

/* email job alerts (careers-alerts.js, loaded lazily, only when the server flag job_alerts is on): a small calm form under the match results. Tokens only, logical properties only. */
.ja-box{margin-block-start:var(--s-5);padding:var(--s-5);background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-lg);max-inline-size:640px}
.ja-h{margin:0 0 var(--s-3);font-size:var(--fs-18)}
.ja-h:focus{outline:none}
.ja-form{display:grid;gap:var(--s-3)}
.ja-form .field{display:grid;gap:var(--s-1)}
.ja-form .field label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2)}
.ja-email{min-block-size:48px}
.ja-trap{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;opacity:0;pointer-events:none}
.ja-consent{display:flex;align-items:flex-start;gap:var(--s-3)}
.ja-consent label{font-size:var(--fs-14);color:var(--ink)}
.ja-tick{flex:none;inline-size:24px;block-size:24px;margin:0;accent-color:var(--primary)}
.ja-go{justify-self:start;min-block-size:48px}
.ja-status{margin:0;min-block-size:1.4em;font-size:var(--fs-14);color:var(--ink-2)}
.ja-status.is-error{color:var(--danger-ink)}
.ja-ok{margin:0;color:var(--ink)}
.ja-note{margin:var(--s-3) 0 0;font-size:var(--fs-14);color:var(--muted)}

/* AI resume review and interview pack (flag resume_review): the closed section that careers-play.js adds, the panel and the before/after cards of careers-review.js. Tokens only; transform and opacity animate. */
#resume-review{padding-block:var(--s-4)}
.rr{display:grid;gap:var(--s-4)}
.rr-h,.rr-res-h{margin:0}
.rr-lead,.rr-small,.rr-send{margin:0}
.rr-small{font-size:var(--fs-14);color:var(--muted)}
.rr-send{padding:var(--s-3) var(--s-4);border-inline-start:4px solid var(--primary);background:var(--sky);border-radius:var(--r-md);font-size:var(--fs-15);color:var(--ink)}
.rr-form{display:grid;gap:var(--s-4)}
.rr-form .field{display:grid;gap:var(--s-2)}
.rr-row,.rr-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.rr-link{padding:0;border:0;background:none;color:var(--primary-ink);font:inherit;text-decoration:underline;cursor:pointer}
.rr-consent{display:flex;align-items:flex-start;gap:var(--s-3)}
.rr-consent input{flex:none;inline-size:24px;block-size:24px;margin:0;accent-color:var(--primary)}
.rr-consent label{font-size:var(--fs-15);color:var(--ink)}
.rr-go,.rr-pack{min-block-size:48px}
.rr-status{margin:0;min-block-size:1.4em;font-size:var(--fs-14);color:var(--ink-2)}
.rr-status.is-error{color:var(--danger-ink)}
.rr-hide{position:fixed;inset-inline-start:-9999px;inset-block-start:0;opacity:0;pointer-events:none}
.rr-out{display:grid;gap:var(--s-4)}
.rr-out[hidden]{display:none}
.rr-sub{margin:0;font-size:var(--fs-16)}
.rr-parts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0;padding:0;list-style:none}
.rr-part{display:grid;gap:var(--s-2);min-inline-size:9rem;padding:var(--s-3) var(--s-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
.rr-part-l{font-size:var(--fs-14);color:var(--muted)}
.rr-part-w{font-size:var(--fs-16);color:var(--ink)}
.rr-bar{display:flex;gap:4px}
.rr-bar i{display:block;flex:1;block-size:6px;border-radius:3px;background:var(--border)}
.rr-s-strong .rr-bar i.on{background:var(--ok-ink)}
.rr-s-fair .rr-bar i.on{background:var(--warn-ink)}
.rr-s-weak .rr-bar i.on{background:var(--danger-ink)}
.rr-check{margin:0;padding:var(--s-3) var(--s-4);background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r-md);font-size:var(--fs-15);font-weight:var(--fw-semibold)}
.rr-none{margin:0;color:var(--ink-2)}
.rr-cards{display:grid;gap:var(--s-4)}
.rr-card{display:grid;gap:var(--s-3);align-items:center;padding:var(--s-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
.rr-before,.rr-after{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-3) var(--s-4);background:var(--card-2);color:var(--ink);border-radius:var(--r-md)}
.rr-before{border-inline-start:4px solid var(--danger-ink)}
.rr-after{border-inline-start:4px solid var(--ok-ink)}
.rr-k{margin:0;font-size:var(--fs-13);font-weight:var(--fw-semibold);color:var(--muted)}
.rr-t{margin:0;overflow-wrap:anywhere}
.rr-chip{display:inline-block;margin:0;padding:var(--s-1) var(--s-3);background:var(--sky);color:var(--ink);border-radius:999px;font-size:var(--fs-14)}
.rr-foot{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between}
.rr-arrow{inline-size:28px;block-size:28px;justify-self:center;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.rr-miss{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
.rr-qs{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.rr-q{display:grid;gap:var(--s-2);padding:var(--s-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
.rr-qh{margin:0;font-size:var(--fs-16)}
.rr-how{white-space:pre-line}
.rr-ask{display:grid;gap:var(--s-2);margin:0;padding-inline-start:var(--s-5)}
@media (min-width:760px){
  .rr-card{grid-template-columns:1fr auto 1fr}
  .rr-arrow{transform:none}
  [dir="rtl"] .rr-arrow{transform:scaleX(-1)}
}
@media (prefers-reduced-motion:no-preference){
  .rr-out.is-run .rr-card{animation:rrIn .5s ease both;animation-delay:calc(var(--i,0) * .12s)}
  .rr-out.is-run .rr-card .rr-after{animation:rrAfter .6s ease both;animation-delay:calc(var(--i,0) * .12s + .35s)}
  .rr-out.is-run .rr-card .rr-arrow{animation:rrPop .4s ease both;animation-delay:calc(var(--i,0) * .12s + .25s)}
  .rr-form.is-run .rr-go{animation:rrPulse 1.2s ease-in-out infinite}
}
@keyframes rrIn{from{opacity:0;transform:translateY(12px)}}
@keyframes rrAfter{from{opacity:0;transform:translateY(8px)}}
@keyframes rrPop{from{opacity:0}}
@keyframes rrPulse{50%{opacity:.7}}