/* The Talent Network page (Chris, Oct 16): the steps and the three promises. Everything else comes from
   site-shared.css and site-hireprism.css (hero, bands, buttons, refraction). */
.tn-hero h1 span{display:block}
.tn-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.tn-steps li{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border:1px solid rgba(196,184,168,.6);border-radius:16px;background:#FEFCF7}
.tn-steps b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(181,98,42,.12);color:var(--rust);font-size:22px;font-weight:400}
.tn-steps h3{margin:0;font-size:17px;line-height:1.3}
.tn-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.tn-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.tn-promises article{padding:26px 24px;border:1px solid rgba(254,252,247,.16);border-radius:16px;background:rgba(254,252,247,.035)}
.tn-promises h3{margin:0 0 10px;font-size:24px;font-weight:400;color:#D89250}
.tn-promises p{margin:0;font-size:15.5px;line-height:1.6;color:#E8E1D6}
.cta-band .btn.btn-line{color:var(--rust);border:1px solid var(--rust);background:transparent}
.cta-band .btn.btn-line:hover{background:rgba(181,98,42,.08)}
/* The closing lanes (Chris, Oct 16): the home hero's two-lane layout on cream, Talent Network first. The lane layout
   itself (.lanes, .lane) comes from site-hireprism.css. */
.cta-band .lanes{margin-top:34px}
/* Colors follow the home hero's lanes by position (Chris, Oct 16): the first lane rust, the second violet, with its
   button outlined in violet. */
.cta-band .lane-label{margin:0;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);white-space:nowrap}
.cta-band .lane.is-hire .lane-label{color:#5B5BD6}
.cta-band .lane.is-hire .btn.btn-line{color:#5B5BD6;border-color:#5B5BD6}
.cta-band .lane.is-hire .btn.btn-line:hover{background:rgba(91,91,214,.08)}
.cta-band .lane.is-hire{padding:0 0 0 40px;border-left:1px solid rgba(26,24,20,.14)}
@media(max-width:960px){.tn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tn-promises{grid-template-columns:1fr}}
@media(max-width:700px){.cta-band .lane.is-hire{padding:26px 0 0;border-left:0;border-top:1px solid rgba(26,24,20,.14)}.cta-band .lane-label{white-space:normal}}
@media(max-width:520px){.tn-hero h1 span{display:inline}.tn-steps{grid-template-columns:1fr}.cta-actions .btn{flex:1 1 100%;justify-content:center}}
/* Both closing buttons the same width, whatever their wording (Chris, Oct 16). */
.cta-band .lane .btn{min-width:230px;justify-content:center;text-align:center}
/* The Talent Network FAQ (Chris, Oct 16): the site's own accordion (.faq in site-shared.css) on sand, between the
   promises and the closing lanes. */
.tn-faq{background:var(--sand);padding:96px 0 104px}
.tn-faq h2{margin-bottom:30px}
.tn-faq .faq summary{font-size:17px;line-height:1.45}
.tn-faq .faq summary:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
.tn-faq .faq .a{max-width:70ch}
.tn-faq .faq .tn-faq-groups{display:flex;flex-direction:column;gap:8px;margin:0;padding:0 40px 18px 20px}
.tn-faq .faq .tn-faq-groups b{color:var(--char)}
.tn-faq .faq .a + .tn-faq-groups{margin-top:-10px}
.tn-faq .faq a.inline{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
@media(max-width:520px){.tn-faq{padding:72px 0 80px}}

/* Who it's for (Chris, Oct 16): three kinds of openness, each with a three-bar signal for how often we reach out,
   then the career levels on one prism-lit line. */
.tn-fit{background:var(--sand);padding:104px 0 112px}
.tn-fit h2,.tn-roles h2{max-width:none;text-wrap:balance}
.tn-fit .lede{max-width:60ch}
.tn-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.tn-kind{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 28px 30px;border:1px solid rgba(196,184,168,.6);border-radius:18px;background:#FEFCF7;
  box-shadow:0 1px 2px rgba(26,24,20,.04),0 18px 40px -28px rgba(26,24,20,.28)}
.tn-kind-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tn-meter{display:inline-flex;align-items:flex-end;gap:4px;height:22px}
.tn-meter i{display:block;width:7px;border-radius:3px;background:rgba(181,98,42,.16)}
.tn-meter i:nth-child(1){height:9px}.tn-meter i:nth-child(2){height:15px}.tn-meter i:nth-child(3){height:22px}
.tn-meter i.on{background:linear-gradient(180deg,#D89250,#B5622A)}
.tn-kind-tag{padding:4px 11px;border-radius:99px;background:rgba(181,98,42,.1);color:var(--rust);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tn-kind h3{margin:0;font-size:32px;font-weight:400;line-height:1.1}
.tn-kind-line{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--char)}
.tn-kind p:last-child{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}

.tn-levels{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:28px 56px;align-items:center;margin-top:64px;padding-top:48px;border-top:1px solid rgba(196,184,168,.55)}
.tn-levels-head h3{margin:0 0 8px;text-wrap:balance;font-size:26px;font-weight:400;line-height:1.2}
.tn-levels-head p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.tn-scale{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.tn-scale::before{content:"";position:absolute;top:9px;left:9px;right:calc(33.33% - 24px);height:2px;border-radius:2px;background:linear-gradient(90deg,#F0A030,#3FC7B0 50%,#6C6CF4)}
.tn-scale li{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:34px}
.tn-node{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FEFCF7;border:2px solid #D89250;box-shadow:0 0 0 5px rgba(240,160,48,.14)}
.tn-scale li:nth-child(2) .tn-node{top:0;left:0;width:20px;height:20px;border-color:#3FC7B0;box-shadow:0 0 0 5px rgba(63,199,176,.14)}
.tn-scale li:nth-child(3) .tn-node{top:-2px;left:-2px;width:24px;height:24px;border-color:#6C6CF4;box-shadow:0 0 0 5px rgba(108,108,244,.14)}
.tn-scale b{font-size:16px;line-height:1.35;color:var(--char)}
.tn-scale li > span:last-child{font-size:14px;line-height:1.55;color:var(--muted)}

.tn-how{background:var(--cream);padding:96px 0 104px}

/* A sample of the positions we are currently sourcing: a tray that drifts slowly left, pausing on hover or focus,
   with soft fades at both edges. */
.tn-roles{background:var(--sand);padding:96px 0 104px;overflow:hidden}
.tn-roles .lede{max-width:60ch}
.tn-tray{position:relative;margin-top:40px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tn-tray:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
.tn-tray-track{display:flex;gap:18px;width:max-content;margin:0;padding:6px 0 10px;list-style:none;animation:tn-drift 70s linear infinite}
.tn-tray:hover .tn-tray-track,.tn-tray:focus-within .tn-tray-track,.tn-tray:focus .tn-tray-track{animation-play-state:paused}
@keyframes tn-drift{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.tn-job{display:flex;flex-direction:column;gap:8px;width:300px;padding:22px 22px 20px;border:1px solid rgba(196,184,168,.6);border-radius:16px;background:#FEFCF7;
  box-shadow:0 1px 2px rgba(26,24,20,.04),0 14px 30px -24px rgba(26,24,20,.3)}
.tn-job-level{align-self:flex-start;padding:3px 10px;border-radius:99px;background:rgba(108,108,244,.1);color:#5B5BD6;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tn-job h3{margin:4px 0 0;font-size:18px;line-height:1.3;color:var(--char)}
.tn-job-co{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tn-job-meta{display:flex;flex-direction:column;gap:3px;margin:auto 0 0;padding-top:14px;border-top:1px solid rgba(196,184,168,.45);font-size:13.5px;color:var(--muted)}
.tn-job-meta b{font-size:15px;color:var(--rust)}
@media(prefers-reduced-motion:reduce){.tn-tray{overflow-x:auto}.tn-tray-track{animation:none}}

@media(max-width:960px){
  .tn-kinds{grid-template-columns:1fr;max-width:560px}
  .tn-levels{grid-template-columns:1fr}
}
@media(max-width:620px){
  .tn-fit,.tn-how,.tn-roles{padding:72px 0 80px}
  .tn-scale{grid-template-columns:1fr;gap:22px;padding-left:36px}
  .tn-scale::before{top:9px;bottom:30px;left:9px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,#F0A030,#3FC7B0 50%,#6C6CF4)}
  .tn-scale li{padding-top:0}
  .tn-scale li .tn-node{margin-left:-36px}
  .tn-job{width:260px}
}
/* The hero's two buttons the same width, whatever their wording (Chris, Oct 16). */
.tn-hero .actions .btn{min-width:230px;justify-content:center;text-align:center}