/* Careers. Laid out after the Trail of Bits careers page and job posts,
   in this site's type, colors and grid. Loaded only on /careers/ pages. */

.cr-eyebrow{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);letter-spacing:.01em;font-family:var(--text)}
.cr-h2{margin:10px 0 0;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);font-stretch:118%;font-weight:760;line-height:1.12;letter-spacing:-.02em;max-width:22em}
.cr-p{margin:16px 0 0;max-width:38em}
.cr-foot-note{margin:16px 0 0;font-size:var(--fs-small);color:var(--ink-2);max-width:60em}
.cr section{scroll-margin-top:16px}

/* Small square bullets, as in the reference layout. */
.cr-sq{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.cr-sq li{position:relative;padding-left:18px;max-width:40em}
.cr-sq li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--ink-3)}
.cr-sq strong{color:var(--ink);font-weight:600}

/* Pill links: square corners are content, round shapes are pressable. */
.cr-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9375rem;font-weight:600;white-space:nowrap}
.cr-pill:hover{border-color:var(--ink)}

/* Hero with the at-a-glance panel. */
.cr-hero{display:grid;gap:40px;padding-block:clamp(40px,8vw,96px) clamp(40px,6vw,72px)}
.cr-hero h1{font-size:clamp(2.25rem,1rem + 4.2vw,4.25rem);font-stretch:118%;font-weight:760;line-height:1.02;letter-spacing:-.022em;max-width:12em}
.cr-intro .cr-p{max-width:34em}
.cr-glance{border:1px solid var(--rule);padding:20px 22px 8px;align-self:start}
.cr-glance dl{margin:14px 0 0;display:grid}
.cr-glance dl > div{padding:14px 0;border-top:1px solid var(--rule)}
.cr-glance dt{font-size:var(--fs-small);color:var(--ink-2)}
.cr-glance dd{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.cr-glance .cr-big{margin:4px 0 2px;font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:1.625rem;line-height:1.15;color:var(--ink)}
@media (min-width:900px){
  .cr-hero{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .cr-intro{grid-column:1/8}
  .cr-glance{grid-column:9/13}
}

/* Open roles table. */
.cr-roles{padding-block:clamp(40px,6vw,64px);border-top:1px solid var(--rule)}
.cr-table-wrap{margin-top:16px}
.cr-table{width:100%;border-collapse:collapse;font-size:1rem}
.cr-table thead th{text-align:left;font-weight:600;font-size:var(--fs-small);color:var(--ink-2);padding:0 12px 10px 0;border-bottom:1px solid var(--rule)}
.cr-table td,.cr-table tbody th{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:middle;font-weight:400;color:var(--body)}
.cr-table .cr-group th{background:var(--panel);font-size:var(--fs-small);font-weight:600;color:var(--ink-2);padding:10px 12px}
.cr-title{color:var(--ink);font-weight:600;font-size:1.0625rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.cr-title:hover{text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:.24em}
.cr-pay{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.cr-apply{text-align:right}
@media (max-width:899px){
  .cr-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .cr-table,.cr-table tbody,.cr-table tr,.cr-table td,.cr-table tbody th{display:block}
  .cr-table tr{padding:10px 0 16px;border-bottom:1px solid var(--rule)}
  .cr-table .cr-group{padding:0;border:0}
  .cr-table td,.cr-table tbody th{border:0;padding:2px 0}
  .cr-table td{font-size:.9375rem;color:var(--ink-2)}
  .cr-table .cr-pay{color:var(--ink)}
  .cr-apply{text-align:left;padding-top:10px}
}
.cr-open{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:20px;padding:18px 20px;border:1px solid var(--rule)}
.cr-open p{margin:0}
.cr-open-t{color:var(--ink);font-weight:600;margin-top:6px}
.cr-open-s{font-size:.9375rem;color:var(--ink-2)}

/* Hiring process: four numbered stages. */
.cr-process{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--rule)}
.cr-stages{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;max-width:52em}
.cr-stages li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 12px;padding:18px 0;border-top:1px solid var(--rule)}
.cr-num{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600;padding-top:2px}
.cr-stages h3{font-size:1.125rem;font-stretch:112%;font-weight:700;line-height:1.3}
.cr-dur{margin-left:8px;font-family:var(--text);font-size:var(--fs-small);font-weight:600;color:var(--ink-2);white-space:nowrap}
.cr-stages p{margin:6px 0 0;max-width:40em}

/* Pay and terms: three groups in a grid. */
.cr-terms{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--rule)}
.cr-term-grid{display:grid;gap:28px;margin-top:20px}
.cr-term h3{font-size:1.0625rem;font-stretch:112%;font-weight:700}
@media (min-width:900px){.cr-term-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}}

/* Common questions: two columns of question and answer. */
.cr-faq{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--rule)}
.cr-faq-grid{display:grid;gap:28px;margin-top:20px}
.cr-q h3{font-size:1.0625rem;font-stretch:112%;font-weight:700;line-height:1.3}
.cr-q p{margin:8px 0 0;color:var(--body);max-width:36em}
@media (min-width:900px){.cr-faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:36px}}

/* Talent pipeline. */
.cr-pipeline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-block:clamp(24px,4vw,40px);padding:clamp(24px,4vw,40px);border:1px solid var(--rule)}
.cr-pipeline .cr-p{max-width:34em}
.cr-eeo{margin-block:24px clamp(48px,7vw,88px);font-size:var(--fs-small);color:var(--ink-2);max-width:60em}

/* Job post pages. */
.cr-post-head{padding-block:clamp(32px,6vw,72px) clamp(24px,4vw,40px);border-bottom:1px solid var(--rule)}
.cr-back{margin:0 0 12px}
.cr-post-head h1{font-size:clamp(2rem,1rem + 3.4vw,3.5rem);font-stretch:118%;font-weight:760;line-height:1.04;letter-spacing:-.022em}
.cr-meta{margin:14px 0 0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cr-post-grid{display:grid;gap:40px;padding-block:clamp(32px,5vw,56px) clamp(48px,7vw,88px)}
.cr-body{max-width:44em}
.cr-body h2{margin:40px 0 0;font-size:1.375rem;font-stretch:112%;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.cr-body h2:first-child{margin-top:0}
.cr-body > p{margin:12px 0 0}
.cr-lead-list{gap:12px}
.cr-body .cr-eeo{margin:40px 0 0}
.cr-card{border:1px solid var(--rule);padding:20px 22px;align-self:start}
.cr-card dl{margin:0;display:grid}
.cr-card dl > div{padding:12px 0;border-bottom:1px solid var(--rule)}
.cr-card dl > div:first-child{padding-top:0}
.cr-card dt{font-size:var(--fs-small);color:var(--ink-2)}
.cr-card dd{margin:2px 0 0;color:var(--ink);font-variant-numeric:tabular-nums}
.cr-card-btn{margin-top:18px;width:100%}
@media (min-width:900px){
  .cr-post-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .cr-body{grid-column:1/9}
  .cr-card{grid-column:9/13;position:sticky;top:24px}
}

@media (forced-colors:active){
  .cr-sq li::before{background:CanvasText}
  .cr-pill{border-color:ButtonText}
}
main > .cr-eeo{max-width:none}
.cr-glance ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cr-glance li.cr-big{margin:0}
.cr-roles .cr-h2{margin:0 0 16px}
.cr-faq .cr-h2{margin:0 0 24px}
/* The section divider below closes the table and the stage list, so their last rows get no line of their own. */
.cr-table tbody tr:last-child td,.cr-table tbody tr:last-child th{border-bottom:0}
@media (max-width:899px){.cr-table tbody tr:last-child{border-bottom:0}}