/* Nothing careers page — styles follow Nothing Design System 2.0 (colors_and_type.css).
   Fonts: self-hosted from assets/fonts/ (copy them from the design system's fonts/ folder).
   NType 82 and Ndot are licensed for Nothing brand materials only: keep this repo private. */
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.ttf") format("truetype-variations"),url("fonts/Geist-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.ttf") format("truetype-variations"),url("fonts/GeistMono-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"NType 82";src:url("fonts/NType82-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Ndot";src:url("fonts/Ndot-55.otf") format("opentype");font-weight:400;font-display:swap}
:root{
  /* primitives (colors_and_type.css) */
  --n-0:#FFFFFF; --n-10:#FCFCFC; --n-50:#F2F2F2; --n-100:#E3E3E3; --n-200:#C8C8C8; --n-300:#ADADAD;
  --n-400:#929292; --n-500:#777777; --n-700:#484848; --n-800:#323232; --n-850:#2B2B2B; --n-900:#1C1C1C; --n-1000:#000000;
  --r-500:#D71921; --r-450:#EC232B;
  /* semantic, light */
  --surface-canvas:var(--n-50); --surface-card:var(--n-10); --surface-elevated:var(--n-0);
  --surface-inverse:var(--n-900); --surface-scrim:rgba(0,0,0,.40);
  --fg-primary:var(--n-900); --fg-secondary:var(--n-500); --fg-tertiary:var(--n-400);
  --fg-on-inverse:var(--n-50); --fg-on-inverse-2:var(--n-300);
  --stroke-subtle:var(--n-100); --stroke-default:var(--n-200); --stroke-strong:var(--n-900);
  --interactive-primary:var(--n-900); --interactive-primary-on:var(--n-0);
  --interactive-secondary:var(--n-100); --interactive-secondary-on:var(--n-900);
  --state-hover:rgba(28,28,28,.06); --state-pressed:rgba(28,28,28,.12);
  --brand-dot:var(--r-500);
  /* type */
  --font-sans:"Geist","Inter","Roboto",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --font-display:"NType 82",Georgia,serif;
  --font-dot:"Ndot","Ndot 57","Geist Mono",monospace;
  /* shape + space (4dp grid) */
  --radius-xs:4px; --radius-md:16px; --radius-xl:24px; --radius-pill:9999px;
  --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px; --space-6:20px; --space-7:24px;
  --space-8:32px; --space-9:40px; --space-10:48px; --space-11:64px; --space-12:80px;
  --motion-base:200ms; --ease-standard:cubic-bezier(.2,0,0,1);
  --max:1120px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface-canvas:var(--n-900); --surface-card:var(--n-850); --surface-elevated:var(--n-800);
  --surface-inverse:var(--n-1000); --surface-scrim:rgba(0,0,0,.60);
  --fg-primary:var(--n-50); --fg-secondary:var(--n-300); --fg-tertiary:var(--n-500);
  --stroke-subtle:var(--n-800); --stroke-default:var(--n-700); --stroke-strong:var(--n-50);
  --interactive-primary:var(--n-50); --interactive-primary-on:var(--n-900);
  --interactive-secondary:var(--n-800); --interactive-secondary-on:var(--n-50);
  --state-hover:rgba(255,255,255,.08); --state-pressed:rgba(255,255,255,.16);
  --brand-dot:var(--r-450); color-scheme:dark}}
:root[data-theme="dark"]{
  --surface-canvas:var(--n-900); --surface-card:var(--n-850); --surface-elevated:var(--n-800);
  --surface-inverse:var(--n-1000); --surface-scrim:rgba(0,0,0,.60);
  --fg-primary:var(--n-50); --fg-secondary:var(--n-300); --fg-tertiary:var(--n-500);
  --stroke-subtle:var(--n-800); --stroke-default:var(--n-700); --stroke-strong:var(--n-50);
  --interactive-primary:var(--n-50); --interactive-primary-on:var(--n-900);
  --interactive-secondary:var(--n-800); --interactive-secondary-on:var(--n-50);
  --state-hover:rgba(255,255,255,.08); --state-pressed:rgba(255,255,255,.16);
  --brand-dot:var(--r-450); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--surface-canvas);color:var(--fg-primary);font-family:var(--font-sans);font-size:16px;line-height:1.4;letter-spacing:-.015em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface-canvas)}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:1.5px solid var(--stroke-strong);outline-offset:3px}

/* type styles (t-* classes) */
.display{font-family:var(--font-display);font-weight:400;line-height:1;letter-spacing:-.03em;text-wrap:balance;margin:0}
.headline{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0}
.title-l{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:0}
.body-l{font-size:16px;line-height:1.4;letter-spacing:-.015em}
.body-m{font-size:14px;line-height:1.4;letter-spacing:-.015em}
.label-upper{font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.075em;text-transform:uppercase}
.mono{font-family:var(--font-mono);font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dot{font-family:var(--font-dot);text-transform:uppercase;letter-spacing:0}
.secondary{color:var(--fg-secondary)}


/* top navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface-canvas) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke-subtle)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.wordmark{display:flex;align-items:center;gap:6px;text-decoration:none;font-size:22px;line-height:1}
.wordmark .reddot{width:6px;height:6px;border-radius:50%;background:var(--brand-dot);display:inline-block;transform:translateY(-6px)}
.wordmark .sub{font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--fg-secondary);margin-left:8px;text-transform:none}
.nav nav{display:flex;gap:4px}
.nav nav a{text-decoration:none;font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--fg-secondary);padding:10px 14px;border-radius:var(--radius-pill);min-height:40px;display:inline-flex;align-items:center}
.nav nav a:hover{background:var(--state-hover);color:var(--fg-primary)}
@media (max-width:620px){.nav nav a:not(.cta){display:none}}

/* buttons: full pill, flat */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.02em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform var(--motion-base) var(--ease-standard),background var(--motion-base) var(--ease-standard)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--interactive-primary);color:var(--interactive-primary-on)}
.btn.secondary{background:var(--interactive-secondary);color:var(--interactive-secondary-on)}
.btn.outline{background:transparent;color:var(--fg-primary);border-color:var(--stroke-strong)}
.nav .cta{background:var(--interactive-primary);color:var(--interactive-primary-on)!important}
.nav .cta:hover{background:var(--interactive-primary)!important;opacity:.9}

/* hero */
.hero{padding-block:var(--space-12) var(--space-11)}
.hero .kicker{font-size:clamp(20px,2.4vw,26px);color:var(--fg-primary)}
.hero h1{font-size:clamp(44px,7.2vw,96px);max-width:13ch;margin-top:var(--space-7)}
.hero p{max-width:46ch;margin:var(--space-7) 0 0;font-size:18px;color:var(--fg-secondary)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-9)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--space-11);border-radius:var(--radius-md);overflow:hidden;background:var(--stroke-subtle);border:1px solid var(--stroke-subtle)}
.stat{background:var(--surface-card);padding:var(--space-6)}
.stat .v{font-size:clamp(34px,4vw,48px);line-height:1}
.stat .k{margin-top:var(--space-3)}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sections */
section.block{padding-block:var(--space-11);scroll-margin-top:72px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-7);flex-wrap:wrap;margin-bottom:var(--space-8)}
.sec-head h2{font-size:clamp(32px,4.2vw,52px)}

/* values: cards, flat, 16px */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.value{background:var(--surface-card);border:1px solid var(--stroke-subtle);border-radius:var(--radius-md);padding:var(--space-6);min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.value .n{font-size:28px;line-height:1;color:var(--fg-tertiary)}
.value h3{margin-top:var(--space-5)}
.value p{margin:0;color:var(--fg-secondary)}
@media (max-width:960px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.values{grid-template-columns:1fr}}

/* history: inverse band */
.band{background:var(--surface-inverse);color:var(--fg-on-inverse)}
.band .sec-head .label-upper{color:var(--fg-on-inverse-2)}
.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.12);border-radius:var(--radius-md);overflow:hidden}
.tl{background:var(--surface-inverse);padding:var(--space-6) var(--space-5);min-width:0}
.tl .yr{font-size:32px;line-height:1}
.tl .k{display:block;margin:var(--space-4) 0 var(--space-2);color:var(--fg-on-inverse)}
.tl p{margin:0;color:var(--fg-on-inverse-2)}
@media (max-width:960px){.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:540px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* filters: segmented-control style selects (the system has no chip component) */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-bottom:var(--space-5)}
.select{position:relative;display:inline-flex}
.select select{appearance:none;-webkit-appearance:none;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--interactive-secondary-on);background:var(--interactive-secondary);border:0;border-radius:var(--radius-pill);min-height:44px;padding:0 40px 0 18px;cursor:pointer}
.select::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--fg-primary);border-bottom:1.5px solid var(--fg-primary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.count{margin-left:auto}

/* grouped list: 16px container, 1px gaps, list items 4px */
.group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-md);overflow:hidden}
.group li a{display:grid;grid-template-columns:minmax(0,1fr) 240px 24px;gap:var(--space-7);align-items:center;background:var(--surface-card);padding:var(--space-6);border-radius:var(--radius-xs);text-decoration:none;min-height:72px;transition:background var(--motion-base) var(--ease-standard)}
.group li a:hover{background:color-mix(in srgb,var(--surface-card) 92%,var(--fg-primary))}
.group .main{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.group .t{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.group .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.group .pay{font-size:13px;color:var(--fg-primary)}
.chev{width:24px;height:24px;color:var(--fg-tertiary)}
@media (max-width:760px){.group li a{grid-template-columns:minmax(0,1fr) 24px;gap:var(--space-3) var(--space-4)}.group .meta{grid-column:1}.group .chev{grid-row:1 / span 2;grid-column:2}}
.empty{background:var(--surface-card);border-radius:var(--radius-md);padding:var(--space-7);color:var(--fg-secondary)}

/* faq: grouped list */
.faq{display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-md);overflow:hidden}
.faq details{background:var(--surface-card);border-radius:var(--radius-xs)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-6);min-height:64px}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] .chev{transform:rotate(90deg)}
.faq .chev{transition:transform var(--motion-base) var(--ease-standard)}
.faq p{margin:0;padding:0 var(--space-6) var(--space-6);max-width:68ch;color:var(--fg-secondary)}

footer{border-top:1px solid var(--stroke-subtle);padding-block:var(--space-8)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;color:var(--fg-secondary);font-size:12px}

/* role page */
.role-head{padding-block:var(--space-10) var(--space-9);border-bottom:1px solid var(--stroke-subtle)}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--fg-secondary);min-height:40px}
.back:hover{color:var(--fg-primary)}
.back .chev{transform:rotate(180deg);width:20px;height:20px}
.role-head .label-upper{display:block;margin-top:var(--space-8);color:var(--fg-secondary)}
.role-head h1{font-size:clamp(40px,5.6vw,72px);margin-top:var(--space-4);max-width:18ch}
.pills{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.pill{background:var(--interactive-secondary);color:var(--interactive-secondary-on);border-radius:var(--radius-xs);padding:6px 10px;font-size:11px;font-weight:500;letter-spacing:.075em;text-transform:uppercase}
.role-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-11);padding-block:var(--space-10) var(--space-12)}
.jd{max-width:68ch;min-width:0}
.jd h3{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.02em;margin:var(--space-10) 0 var(--space-5)}
.jd h3:first-child{margin-top:0}
.jd p{margin:0 0 var(--space-4)}
.jd p:empty{display:none}
.jd ul{margin:0 0 var(--space-5);padding-left:20px}
.jd li{margin:0 0 var(--space-3)}
.jd li p{margin:0}
.jd li::marker{color:var(--fg-tertiary)}
.side{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-card);border:1px solid var(--stroke-subtle);border-radius:var(--radius-md);padding:var(--space-6)}
.side dl{margin:0;display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-xs);overflow:hidden}
.side .row{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--stroke-subtle)}
.side .row:last-child{border-bottom:0}
.side dt{color:var(--fg-secondary);font-size:14px}
.side dd{margin:0;font-size:14px;font-weight:500;text-align:right;min-width:0}
.side .btn{width:100%}
.placeholder{background:var(--surface-card);border:1px dashed var(--stroke-default);border-radius:var(--radius-md);padding:var(--space-7);color:var(--fg-secondary)}
.placeholder p{margin:var(--space-3) 0 0}
@media (max-width:900px){.role-body{grid-template-columns:1fr;gap:var(--space-9)}.side{position:static;order:-1}}

/* apply sheet (dialog): 24px radius, tonal, no shadow */
dialog.sheet{border:0;padding:0;background:var(--surface-elevated);color:var(--fg-primary);width:min(860px,calc(100% - 32px));height:min(860px,calc(100% - 32px));max-width:none;max-height:none;border-radius:var(--radius-xl);display:none;flex-direction:column;overflow:hidden}
dialog.sheet[open]{display:flex}
dialog.sheet::backdrop{background:var(--surface-scrim)}
.sheet header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-5) var(--space-5) var(--space-7)}
.sheet h2{font-size:20px;line-height:1.2;margin:0}
.icon-btn{width:48px;height:48px;flex:none;border-radius:var(--radius-pill);border:0;background:var(--interactive-secondary);color:var(--fg-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.frame-wrap{flex:1;min-height:0;margin:0 var(--space-4);border-radius:var(--radius-md);overflow:hidden;background:var(--n-0)}
.frame-wrap iframe{width:100%;height:100%;border:0;display:block}
.fallback{margin:0;padding:var(--space-4) var(--space-7) var(--space-5)}
.faq-block{padding-top:0!important}
@media (prefers-reduced-motion:no-preference){dialog.sheet[open]{animation:rise var(--motion-base) var(--ease-standard)}@keyframes rise{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.side a.btn{width:100%}