/* Careers after Vercel's careers page (founder 2026-10-06, option B): the contour hero kept, a much
   smaller headline with an Open roles pill, the frame's "+" marks, a filter rail of two dropdowns
   (Team, Type) instead of section buttons, and quiet role rows: title, one line of detail, a Read
   more pill. The role tags stay in the markup (the application form reads them) but are not shown. */
.company-careers .co-hero{min-height:calc(var(--cell) * 5.5)}
.company-careers .co-hero h1{font-size:clamp(2rem,3.6cqw,3rem)!important;margin-bottom:.875rem}
.company-careers .co-intro{font-size:clamp(1rem,1.4vw,1.125rem);color:var(--body);max-width:36rem}
.co-cta{display:flex;align-items:center;gap:1.5rem;margin-top:1.5rem}
.co-open{display:inline-flex;align-items:center;height:2.5rem;padding:0 1.125rem;border-radius:999px;background:#eef3f6;color:#0e1114;font:500 .875rem/1 'DM Sans',sans-serif;text-decoration:none;transition:background-color .2s ease}
.co-open:hover{background:#fff}
.co-open:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the filter rail: two rows, each a label and a dropdown with a chevron */
.co-filters{position:sticky;top:5rem;display:grid;padding-top:var(--cell)}
.co-dd{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--pad);height:3.75rem;border-top:1px solid var(--line);cursor:pointer}
.co-dd:last-child{border-bottom:1px solid var(--line)}
.co-dd span{font:500 .9375rem/1 'DM Sans',sans-serif;color:var(--ink);pointer-events:none}
.co-dd select{all:unset;position:absolute;inset:0;box-sizing:border-box;height:100%;width:100%;padding:0 calc(var(--pad) + 1.75rem) 0 var(--pad);font:400 .875rem/3.75rem 'DM Sans',sans-serif;color:var(--muted);cursor:pointer;text-align:right;text-align-last:right}
.co-dd select option{color:#0e1114}
.co-dd::after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);rotate:45deg;translate:0 -2px;pointer-events:none;position:relative;z-index:1}
.co-dd:hover select,.co-dd select:focus-visible{color:var(--ink)}
.co-dd:has(select:focus-visible){outline:2px solid var(--cyan);outline-offset:-2px}
/* the list */
.company-careers .co-list-h h2{font-size:clamp(1.375rem,2vw,1.75rem)}
.company-careers .co-tags{display:none}
.company-careers .co-role summary{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:1.875rem var(--pad)}
.company-careers .co-role h3{font-size:1.125rem}
.company-careers .co-role .co-meta{grid-column:1;display:block;margin-top:.375rem;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.company-careers .co-role .co-meta{display:flex;flex-wrap:wrap;gap:0 1rem}
/* no middle dots between the facts (founder rule 2026-09-27); they sit apart with space instead */
.company-careers .co-role .co-meta li{display:block}
.co-more-btn{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;height:2.5rem;padding:0 1.125rem;border-radius:999px;background:rgb(255 255 255 / .06);color:var(--ink);font:500 .875rem/1 'DM Sans',sans-serif;transition:background-color .2s ease}
.co-role summary:hover .co-more-btn{background:rgb(255 255 255 / .12)}
.co-more-btn .cm-close{display:none}
.co-role.is-open .co-more-btn .cm-open,body:not(.co-js) .co-role[open] .co-more-btn .cm-open{display:none}
.co-role.is-open .co-more-btn .cm-close,body:not(.co-js) .co-role[open] .co-more-btn .cm-close{display:inline}
.co-none{padding:2rem var(--pad);color:var(--muted)}
@media(max-width:820px){
  .co-filters{position:static;padding-top:0}
  .co-dd{height:3.25rem}
  .co-dd select{line-height:3.25rem}
  .company-careers .co-role summary{padding:1.5rem 1.25rem}
  .co-more-btn{height:2.25rem;padding:0 .875rem}
}
/* the frame's marks are the Tora piece, not a plain +: four of the brand's elbows meeting at a
   crossing (the construction the logo is drawn from), in the contour line weight. A small easter
   egg: under the pointer the four elbows draw in until they meet, closing into the brand crossing. */
.company-careers .xh{width:1.75rem;height:1.75rem;pointer-events:auto}
.company-careers .xh::before,.company-careers .xh::after{content:none}
.company-careers .xh svg{display:block;width:100%;height:100%;overflow:visible}
.company-careers .xh .e{fill:none;stroke:rgb(255 255 255 / .5);stroke-width:1;vector-effect:non-scaling-stroke;transition:translate .5s cubic-bezier(.34,1.56,.64,1),stroke .3s ease}
.company-careers .xh:hover .e{stroke:#eef3f6}
.company-careers .xh:hover .e1{translate:3.5px 3.5px}.company-careers .xh:hover .e2{translate:-3.5px 3.5px}
.company-careers .xh:hover .e3{translate:3.5px -3.5px}.company-careers .xh:hover .e4{translate:-3.5px -3.5px}
@media(prefers-reduced-motion:reduce){.company-careers .xh .e{transition:stroke .3s ease}.company-careers .xh:hover .e{translate:none}}
/* the full role write-up: About the role spans the width, then the sections in two columns */
.co-more .co-wide{grid-column:1 / -1}
.co-more .co-wide p+p{margin-top:.75rem}
.company-careers .co-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
@media(max-width:820px){.company-careers .co-more{grid-template-columns:1fr}}
/* inbox 159: the two marks flow into each other. On a slow loop each mark's four elbows draw in until
   they close into the crossing, hold, and open out again; the four marks are out of step, so the page
   never pulses as one. Hover still closes a mark at once. Reduced motion: the open mark, still. */
@keyframes xhIn1{0%,30%{translate:0 0}50%,80%{translate:3.5px 3.5px}100%{translate:0 0}}
@keyframes xhIn2{0%,30%{translate:0 0}50%,80%{translate:-3.5px 3.5px}100%{translate:0 0}}
@keyframes xhIn3{0%,30%{translate:0 0}50%,80%{translate:3.5px -3.5px}100%{translate:0 0}}
@keyframes xhIn4{0%,30%{translate:0 0}50%,80%{translate:-3.5px -3.5px}100%{translate:0 0}}
@keyframes xhLit{0%,30%{stroke:rgb(255 255 255 / .5)}50%,80%{stroke:rgb(238 243 246 / .85)}100%{stroke:rgb(255 255 255 / .5)}}
.company-careers .xh .e{animation:xhLit 9s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--xd,0s)}
.company-careers .xh .e1{animation-name:xhIn1,xhLit}.company-careers .xh .e2{animation-name:xhIn2,xhLit}
.company-careers .xh .e3{animation-name:xhIn3,xhLit}.company-careers .xh .e4{animation-name:xhIn4,xhLit}
.company-careers .xh-tl{--xd:0s}.company-careers .xh-tr{--xd:-2.2s}.company-careers .xh-split{--xd:-4.5s}.company-careers .xh-br{--xd:-6.7s}
.company-careers .xh:hover .e{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.company-careers .xh .e{animation:none!important}}
/* inbox 160: "View more about the role" starts on the same line as the write-up under it, and the
   numbers in the hiring process sit centred on the full height of their step (our numbering rule),
   not on its first line */
.company-careers .co-view>summary{padding:1rem 1.25rem!important}
.company-careers .co-more{padding:.25rem 1.25rem 1.25rem!important}
.company-careers .co-steps li{padding-left:2rem}
.company-careers .co-steps li::before{top:50%!important;translate:0 -50%}
/* inbox 161: the View more block has the same padding on top as at the sides (20px all round), and a
   clear gap between its title and "About the role" */
.company-careers .co-view>summary{padding:calc(1.25rem + 3px) 1.25rem calc(1.25rem + 3px)!important}
.company-careers .co-more{padding:.6875rem 1.25rem 1.25rem!important}